:root {
  --color-primary: #005bb1;
  --color-on-primary: #ffffff;
  --color-primary-container: #1f74d6;
  --color-primary-container-2: #005bb1;
  --color-on-primary-container: #fefcff;
  --color-secondary: #b60078;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #fc4db1;
  --color-on-secondary-container: #5b003a;
  --color-tertiary: #954500;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #bb5800;
  --color-background: #f9f9fc;
  --color-on-background: #1a1c1e;
  --color-surface: #f9f9fc;
  --color-on-surface: #1a1c1e;
  --color-surface-variant: #e2e2e5;
  --color-on-surface-variant: #414753;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f3f6;
  --color-surface-container-high: #e8e8ea;
  --color-surface-container-highest: #e2e2e5;
  --color-outline: #727784;
  --color-outline-variant: #c1c6d5;
  --color-btn-shadow-primary: #00468b;
  --color-btn-shadow-surface: #c1c6d5;
  /* Legacy variables from armar.scss */
  --color-ink: #18212b;
  --color-muted: #647080;
  --color-blue: #075daf;
  --color-blue-dark: #064987;
  --color-pink: #c5117e;
  --color-pink-soft: #ffe1ee;
  --color-line: #d9e0eb;
  --color-amber: #ad4e0d;
  --color-bg-body: #ffffff;
}

[data-theme=dark] {
  --color-primary: #9fc9ff;
  --color-on-primary: #003268;
  --color-primary-container: #00468a;
  --color-primary-container-2: #9fc9ff;
  --color-on-primary-container: #d2e4ff;
  --color-secondary: #ffb1d9;
  --color-on-secondary: #630040;
  --color-secondary-container: #8c005b;
  --color-on-secondary-container: #ffd9ea;
  --color-tertiary: #ffb68c;
  --color-on-tertiary: #522300;
  --color-tertiary-container: #723400;
  --color-background: #1a1c1e;
  --color-on-background: #e2e2e5;
  --color-surface: #1a1c1e;
  --color-on-surface: #e2e2e5;
  --color-surface-variant: #414753;
  --color-on-surface-variant: #c1c6d5;
  --color-surface-container-lowest: #0e0e11;
  --color-surface-container-low: #1a1c1e;
  --color-surface-container-high: #282a2d;
  --color-surface-container-highest: #333538;
  --color-outline: #8c919f;
  --color-outline-variant: #414753;
  --color-btn-shadow-primary: #00224d;
  --color-btn-shadow-surface: #1a1c1e;
  /* Legacy variables from armar.scss */
  --color-ink: #e2e2e5;
  --color-muted: #8c919f;
  --color-blue: #9fc9ff;
  --color-blue-dark: #003268;
  --color-pink: #ffb1d9;
  --color-pink-soft: #630040;
  --color-line: #414753;
  --color-amber: #ffb68c;
  --color-bg-body: #0e0e11;
}

body {
  background-color: var(--color-background, var(--color-bg-body, #ffffff));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(24, 33, 43, 0.15));
}

.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border: 1px solid #c1c6d5;
  border-radius: 10px;
  background: #d6e3ff;
  color: #005bb1;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.account-trigger:hover {
  background: #005bb1;
  color: #fff;
  transform: translateY(-2px);
}

.account-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
}

.account-modal[hidden] {
  display: none;
}

.account-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 28, 30, 0.42);
  backdrop-filter: blur(5px);
}

.account-dialog {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(26, 28, 30, 0.22);
}

.account-dialog h2 {
  margin: 16px 0 7px;
  font: 700 28px Montserrat, sans-serif;
}

.account-dialog p {
  color: #414753;
}

.account-dialog form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.account-dialog label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.account-dialog input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #c1c6d5;
  border-radius: 9px;
  background: #fff;
  font: inherit;
}

.account-dialog form button {
  width: 100%;
}

.account-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #eeeef0;
  color: #414753;
  cursor: pointer;
}

@media (max-width: 767px) {
  .account-trigger {
    display: none;
  }
  .brand img {
    width: 42px;
    height: 42px;
  }
}
.builder-header {
  height: 76px;
  display: flex;
  align-items: center;
  padding: 0 clamp(18px, 6vw, 80px);
  background: rgba(249, 251, 255, 0.88);
  border-bottom: 1px solid rgba(217, 224, 235, 0.8);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.builder-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid #c1c6d5;
  border-radius: 999px;
  background: #fff;
  color: #075daf;
  font: 600 13px "Plus Jakarta Sans", sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.builder-back:hover {
  background: #075daf;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(7, 93, 175, 0.2);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: radial-gradient(circle at 92% 0, #ffe5f1, transparent 30%), radial-gradient(circle at 0 100%, #dceaff, transparent 34%), var(--color-surface);
  color: var(--color-ink);
  font-family: "Plus Jakarta Sans", sans-serif;
  min-height: 100vh;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

button {
  font: 600 14px "Plus Jakarta Sans", sans-serif;
  cursor: pointer;
}

.topbar {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 6vw, 80px);
  background: rgba(249, 251, 255, 0.8509803922);
  border-bottom: 1px solid rgba(217, 224, 235, 0.8);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  font: 800 30px Montserrat, sans-serif;
  color: var(--color-blue);
  letter-spacing: -1.5px;
  text-decoration: none;
}

.topnav {
  display: flex;
  gap: 30px;
}

.topnav a {
  color: var(--color-muted);
  text-decoration: none;
  padding: 10px 0;
  font-weight: 600;
}

.topnav a.active, .topnav a:hover {
  color: var(--color-blue);
  border-bottom: 3px solid var(--color-blue);
}

.icon-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #eaf1fc;
  color: var(--color-blue);
  text-decoration: none;
}

.icon-button b {
  position: absolute;
  right: -4px;
  top: -3px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-pink);
  color: #fff;
  font-size: 10px;
}

.builder-layout {
  display: flex;
  max-width: 1440px;
  margin: auto;
}

.steps {
  width: 260px;
  min-height: calc(100vh - 84px);
  padding: 46px 0 24px;
  background: rgba(255, 255, 255, 0.8784313725);
  border-right: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
}

.steps-heading {
  padding: 0 28px 30px;
}

.eyebrow {
  display: block;
  color: var(--color-pink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.steps h1, .preview-panel h2, .options-panel h2 {
  font-family: Montserrat, sans-serif;
  letter-spacing: -0.8px;
}

.steps h1 {
  margin: 8px 0;
  font-size: 25px;
}

.steps p, .section-heading p, .preview-copy p {
  color: var(--color-muted);
  margin: 0;
  line-height: 1.6;
}

.step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 28px;
  text-align: left;
  border: 0;
  border-right: 4px solid transparent;
  background: transparent;
  color: var(--color-muted);
}

.step.active {
  background: var(--color-pink-soft);
  color: #82004e;
  border-right-color: var(--color-pink);
}

.step .material-symbols-outlined {
  font-size: 22px;
}

.cart-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: auto 20px 0;
  padding: 14px;
  border: 0;
  border-radius: 99px;
  background: var(--color-blue);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--color-blue-dark);
}

.builder-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  gap: 40px;
  flex: 1;
  width: 100%;
  padding: 42px clamp(22px, 5vw, 70px);
  min-height: calc(100vh - 84px);
}

.preview-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 610px;
  padding: 38px;
  border: 1px solid rgba(217, 224, 235, 0.8);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9098039216);
  box-shadow: 0 18px 50px rgba(23, 48, 79, 0.1019607843);
  overflow: hidden;
}

.preview-panel:before, .preview-panel:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(35px);
  pointer-events: none;
}

.preview-panel:before {
  width: 280px;
  height: 280px;
  right: -80px;
  top: -70px;
  background: #ffd8e7;
}

.preview-panel:after {
  width: 310px;
  height: 310px;
  left: -110px;
  bottom: -100px;
  background: #d6e3ff;
}

.preview-copy, .product-stage, .selection-status {
  position: relative;
  z-index: 1;
}

.preview-panel h2 {
  margin: 8px 0;
  font-size: 34px;
}

.product-stage {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 350px;
}

.product-stage img {
  width: min(80%, 430px);
  max-height: 430px;
  object-fit: contain;
  filter: drop-shadow(0 25px 18px rgba(18, 42, 69, 0.1803921569));
  animation: float 4.5s ease-in-out infinite;
}

.selection-status {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid var(--color-line);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.9019607843);
  font-size: 12px;
}

.selection-status span:first-child {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-pink);
  box-shadow: 0 0 0 5px #ffe6f2;
}

.options-panel {
  padding-top: 18px;
}

.section-heading h2 {
  margin: 8px 0;
  color: var(--color-blue);
  font-size: 38px;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-height: 600px;
  overflow-y: auto;
  margin-top: 28px;
}

.option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 172px;
  padding: 15px;
  border: 2px solid transparent;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(23, 48, 79, 0.0509803922);
  transition: 0.2s;
}

.option-card:hover, .option-card.selected {
  border-color: var(--color-blue);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(7, 93, 175, 0.1333333333);
}

.option-card img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 10px 8px rgba(20, 40, 70, 0.168627451));
}

.option-card h3 {
  margin: 0;
  font: 700 16px Montserrat, sans-serif;
}

.option-card p {
  margin: 0;
  color: var(--color-muted);
  font-size: 12px;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
}

.primary-button, .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 99px;
}

.primary-button {
  border: 0;
  background: var(--color-blue);
  color: #fff;
  box-shadow: 0 4px 0 var(--color-blue-dark);
}

.primary-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.secondary-button {
  border: 1px solid var(--color-line);
  background: #fff;
  color: var(--color-muted);
}

.summary-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.summary-preview {
  display: grid;
  grid-template-columns: 135px 1fr;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  background: #fff;
}

.summary-preview > img {
  width: 135px;
  height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 14px 10px rgba(18, 42, 69, 0.1882352941));
}

.summary-preview h3 {
  margin: 12px 0 5px;
  font: 700 19px Montserrat, sans-serif;
}

.summary-preview p {
  margin: 0 0 18px;
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.5;
}

.summary-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 9px;
  border-radius: 10px;
  background: #f1f5fa;
  color: var(--color-muted);
  font-size: 12px;
}

.summary-chip .material-symbols-outlined {
  color: var(--color-blue);
}

.summary-chip b {
  display: block;
  color: var(--color-ink);
  font-size: 11px;
}

.summary-payment {
  padding: 18px;
  border-radius: 18px;
  background: #f1f5fa;
  color: var(--color-muted);
  font-size: 13px;
}

.summary-payment > div {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
}

.summary-payment strong {
  color: var(--color-ink);
}

.summary-payment hr {
  border: 0;
  border-top: 1px dashed var(--color-line);
  margin: 13px 0;
}

.summary-payment .total {
  font: 700 20px Montserrat, sans-serif;
  color: var(--color-ink);
}

.summary-payment .total strong {
  color: var(--color-blue);
}

.summary-payment small {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  color: var(--color-muted);
}

.summary-payment small .material-symbols-outlined {
  color: var(--color-pink);
}

@keyframes float {
  50% {
    transform: translateY(-12px) rotate(1deg);
  }
}
@media (max-width: 900px) {
  .topbar {
    padding: 0 20px;
  }
  .topnav {
    gap: 12px;
    font-size: 13px;
  }
  .builder-layout {
    display: block;
  }
  .steps {
    width: 100%;
    min-height: auto;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
  }
  .steps-heading, .cart-link {
    display: none;
  }
  .step {
    justify-content: center;
    padding: 12px 8px;
    border-right: 0;
    border-bottom: 3px solid transparent;
    border-radius: 10px;
  }
  .step.active {
    border-right: 0;
    border-bottom-color: var(--color-pink);
  }
  .builder-main {
    grid-template-columns: 1fr;
    padding: 22px 16px 50px;
  }
  .preview-panel {
    min-height: 420px;
    padding: 26px;
  }
  .product-stage {
    min-height: 250px;
  }
  .section-heading h2 {
    font-size: 31px;
  }
}
@media (max-width: 520px) {
  .brand {
    font-size: 23px;
  }
  .topnav a:nth-child(3) {
    display: none;
  }
  .option-grid {
    gap: 9px;
  }
  .option-card {
    min-height: 150px;
    padding: 10px;
  }
  .option-card img {
    width: 70px;
    height: 70px;
  }
  .summary-preview {
    grid-template-columns: 95px 1fr;
    padding: 12px;
  }
  .summary-preview > img {
    width: 95px;
    height: 140px;
  }
  .preview-panel h2 {
    font-size: 26px;
  }
}

/*# sourceMappingURL=armar.css.map */