/* Generated public stylesheet. Edit assets/css/*.css and run php tools/build-public-css.php. */

/* --- assets/css/variables.css --- */
:root {
  --primary: #718879;
  --primary-dark: #53685a;
  --primary-soft: rgba(113, 136, 121, .12);
  --sand: #f5eee7;
  --gold: #c6a15b;
  --ink: #3f332b;
  --rose: #b65e57;
  --rose-text: #a34f49;
  --page: #fbf7f1;
  --surface: #fffdf9;
  --muted: #7d7067;
  --line: #dfd5ca;
  --shadow: 0 24px 70px rgba(76, 59, 46, .10);
  --shadow-soft: 0 12px 34px rgba(76, 59, 46, .08);
  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --content: 1240px;
}

/* --- assets/css/base.css --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  min-width: 0;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 7%, rgba(198,161,91,.09), transparent 24rem),
    radial-gradient(circle at 92% 18%, rgba(113,136,121,.10), transparent 28rem),
    var(--page);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
html.has-active-overlay { overflow: hidden; overscroll-behavior: none; }
body.is-locked { position: fixed; width: 100%; overflow: hidden; overscroll-behavior: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  transform: translateY(-160%);
  border-radius: 12px;
  color: white;
  background: var(--primary-dark);
}
.skip-link:focus { transform: none; }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold) 72%, white);
  outline-offset: 3px;
}

/* --- assets/css/header.css --- */
.topbar {
  position: sticky;
  z-index: 50;
  top: 0;
  width: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid rgba(223, 213, 202, .72);
  background: rgba(251, 247, 241, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: min(var(--content), 100%);
  min-height: 62px;
  margin: 0 auto;
  padding: 7px 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}


.brand picture { display: block; line-height: 0; }
.brand img {
  width: clamp(102px, 29vw, 122px);
  max-height: 34px;
  object-fit: contain;
  object-position: left center;
}

.brand span {
  display: none;
  padding-left: 9px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .08em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.text-action,
.outline-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  font-size: 10px;
  font-weight: 780;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.text-action { display: none; }
.action-label-full { display: none; }
.action-label-short { display: inline; }

.outline-action {
  border: 1px solid var(--line);
  background: rgba(255, 253, 249, .9);
  box-shadow: 0 6px 18px rgba(76, 59, 46, .05);
}

.outline-action:active { transform: translateY(1px); }

@media (min-width: 480px) {
  .brand span { display: inline-block; }
  .outline-action { padding-inline: 14px; font-size: 11px; }
  .action-label-short { display: none; }
  .action-label-full { display: inline; }
}

@media (min-width: 768px) {
  .topbar-inner {
    min-height: 72px;
    padding: 9px 24px;
  }

  .brand { gap: 11px; }
  .brand img { width: 140px; max-height: 40px; }
  .brand span { padding-left: 12px; font-size: 10px; }
  .top-actions { gap: 9px; }
  .text-action { display: inline-flex; }
  .text-action,
  .outline-action { min-height: 44px; padding: 10px 16px; font-size: 12px; }
}

@media (min-width: 1024px) {
  .topbar-inner { padding-inline: 30px; }
  .brand img { width: 150px; }
  .brand span { font-size: 11px; }
  .text-action:hover { background: rgba(113, 136, 121, .08); }
  .outline-action:hover { border-color: var(--primary); color: var(--primary-dark); background: #fff; }
}


/* Smartphone safeguard: preserve the compact header on coarse-pointer phones,
   even when the browser temporarily exposes a desktop-style viewport. */
@media (hover: none) and (pointer: coarse) and (max-device-width: 600px) {
  .topbar-inner { min-height: 62px; padding: 7px 12px; gap: 8px; }
  .brand img { width: clamp(102px, 29vw, 122px); max-height: 34px; }
  .brand span,
  .text-action { display: none; }
  .top-actions { gap: 6px; }
  .outline-action { min-height: 40px; padding: 8px 10px; font-size: 10px; }
  .action-label-short { display: inline; }
  .action-label-full { display: none; }
  .cart-action { min-width: 40px; min-height: 40px; padding: 7px; }
  .cart-action-label { display: none; }
}

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,253,249,.78);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}
.language-switch a { color: var(--muted); text-decoration: none; }
.language-switch a[aria-current="page"] { color: var(--primary-dark); }
.language-switch a:focus-visible { outline: 2px solid rgba(113,136,121,.34); outline-offset: 2px; border-radius: 4px; }
@media (min-width: 768px) { .language-switch { padding: 8px 10px; font-size: 10px; } }

/* --- assets/css/hero.css --- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0 0 42px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 92% 8%, rgba(113, 136, 121, .13), transparent 19rem),
    radial-gradient(circle at 6% 88%, rgba(198, 161, 91, .10), transparent 18rem),
    var(--surface);
}

.hero-inner {
  display: grid;
  gap: 0;
  width: 100%;
  margin: 0 auto;
}

/* Mobile: emotional full-bleed image directly below the separate shop header. */
.hero-media {
  position: relative;
  order: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid rgba(223, 213, 202, .92);
  border-radius: 0 0 28px 28px;
  background: var(--sand);
  box-shadow: 0 20px 48px rgba(76, 59, 46, .12);
}


.hero-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
}

.hero-media-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(32, 42, 36, .18));
}

.hero-media-caption {
  position: absolute;
  right: auto;
  bottom: 14px;
  left: 50%;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 0 9px;
  align-items: center;
  width: min(330px, calc(100% - 32px));
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 13px;
  color: var(--ink);
  background: rgba(255, 253, 249, .93);
  box-shadow: 0 10px 26px rgba(35, 44, 39, .13);
  transform: translateX(-50%);
}

.hero-media-caption > span {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: white;
  background: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
}

 .hero-media-caption strong { font-size: 10px; line-height: 1.22; }
.hero-media-caption small { margin-top: 1px; color: var(--muted); font-size: 8.5px; line-height: 1.3; }

.trust-row {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 13px;
  margin: 14px 0 0;
  padding-inline: 16px;
  color: #6f6259;
  font-size: 10.5px;
  font-weight: 620;
}

.trust-row span::before {
  content: "•";
  margin-right: 6px;
  color: var(--gold);
}

.hero-copy {
  z-index: 2;
  order: 3;
  min-width: 0;
  padding: 26px 16px 0;
}

.hero-title-block,
.hero-detail-block { min-width: 0; }

.eyebrow {
  margin: 0;
  color: var(--primary-dark);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.hero h1,
.studio-heading h2,
.how-copy h2,
.product-showcase h2 {
  margin: 11px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: .99;
  letter-spacing: -.043em;
}

.hero h1 {
  max-width: 100%;
  font-size: clamp(31px, 9.4vw, 45px);
  line-height: .97;
  letter-spacing: -.047em;
  overflow-wrap: anywhere;
}

.hero h1 em {
  display: block;
  color: var(--primary-dark);
  font-weight: 500;
}

.hero-title-line,
.hero h1 em span { display: block; }
.hero-title-line-two { white-space: normal; }

.hero-lead {
  max-width: 42rem;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.hero-actions {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.primary-button,
.secondary-button,
.remember-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 11px 19px;
  border-radius: 999px;
  font-weight: 820;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.primary-button,
.remember-button {
  color: white;
  background: var(--primary-dark);
  box-shadow: 0 13px 28px rgba(83, 104, 90, .19);
}

.primary-button:active,
.remember-button:active { transform: translateY(1px); }
.primary-button.compact { min-height: 46px; padding: 11px 18px; font-size: 13px; }
.secondary-button { border: 1px solid var(--line); color: var(--ink); background: var(--surface); }
.secondary-button:disabled { opacity: .4; cursor: not-allowed; }
.secondary-button.full { width: 100%; }

.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 4px;
  color: var(--primary-dark);
  background: transparent;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(113, 136, 121, .34);
  text-underline-offset: 5px;
}

.choice-later-note {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 11px;
  margin-top: 18px;
  padding: 13px;
  border: 1px solid rgba(113, 136, 121, .24);
  border-radius: 17px;
  background: rgba(245, 238, 231, .58);
}

.choice-later-note > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: white;
  background: var(--primary);
  font-weight: 900;
}

.choice-later-note p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.choice-later-note strong { color: var(--ink); }

@media (min-width: 641px) {
  .hero-title-line-two { white-space: nowrap; }
}

.advisor-path {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(var(--content), calc(100% - 24px));
  margin: 18px auto 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 253, 249, .86);
  box-shadow: var(--shadow-soft);
}

.advisor-path > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border-radius: 13px;
  background: rgba(245, 238, 231, .45);
}

.advisor-path > i { display: none; }

.advisor-path b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: white;
  background: var(--primary);
  font-size: 10px;
}

.advisor-path span { min-width: 0; }
.advisor-path strong,
.advisor-path small { display: block; }
.advisor-path strong { font-size: 10px; line-height: 1.25; }
.advisor-path small { display: none; margin-top: 2px; color: var(--muted); font-size: 9px; }

@media (min-width: 540px) {
  .hero { padding: 12px 22px 50px; }
  .hero-inner { width: min(var(--content), 100%); }
  .hero-copy { padding: 28px 6px 0; }
  .trust-row { margin-top: 14px; padding-inline: 0; }
  .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
  .primary-button { min-width: 210px; }
  .hero-media { aspect-ratio: 16 / 8.7; border: 1px solid rgba(223, 213, 202, .92); border-radius: 20px; }
  .hero-media-caption { right: 12px; bottom: 12px; left: auto; width: min(310px, calc(100% - 24px)); transform: none; }
  .hero h1 em span { display: inline; }
  .advisor-path small { display: block; }
}

@media (min-width: 768px) {
  .hero { padding: 16px 24px 64px; }
  .hero-media { aspect-ratio: 16 / 8.5; border-radius: 22px; }
  .hero-media-caption { width: 350px; padding: 12px 14px; }
  .hero-media-caption strong { font-size: 12px; }
  .hero-media-caption small { font-size: 10px; }
  .trust-row { gap: 10px 22px; margin-top: 16px; font-size: 11px; }
  .hero-copy { max-width: 920px; padding-top: 32px; }
  .eyebrow { font-size: 11px; }
  .hero h1 { font-size: clamp(54px, 7.6vw, 72px); }
  .hero-title-line { display: inline; }
  .hero-title-line + .hero-title-line::before { content: " "; }
  .hero-lead { margin-top: 21px; font-size: 18px; }
  .choice-later-note { max-width: 680px; padding: 16px 17px; }
  .choice-later-note p { font-size: 13px; }

  .advisor-path {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: min(var(--content), calc(100% - 48px));
    margin-top: 28px;
    padding: 10px;
    border-radius: 21px;
  }

  .advisor-path > div { padding: 10px; }
}

@media (min-width: 1024px) {
  .hero { padding: 18px 30px 76px; }
  .hero-media { aspect-ratio: 16 / 7.4; border-radius: 26px; }
  .hero-media img { object-position: 52% center; }
  .hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr);
    align-items: start;
    gap: clamp(48px, 7vw, 100px);
    max-width: none;
    padding: 42px 10px 0;
  }
  .hero-detail-block { padding-top: 19px; }
  .hero h1 { max-width: 10.8ch; font-size: clamp(60px, 5.25vw, 80px); }
  .hero-lead { max-width: 590px; margin-top: 0; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.64; }
  .choice-later-note { margin-top: 26px; }
  .trust-row { margin-top: 18px; font-size: 12px; }
  .primary-button:hover,
  .remember-button:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(83, 104, 90, .26); }
  .secondary-button:hover { border-color: var(--primary); }
  .hero-media:hover { box-shadow: 0 28px 64px rgba(76, 59, 46, .15); }

  .advisor-path {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
  }

  .advisor-path > div { grid-template-columns: 34px minmax(0, 1fr); padding: 8px; background: transparent; }
  .advisor-path > i { display: block; color: var(--gold); font-style: normal; }
  .advisor-path b { width: 34px; height: 34px; font-size: 12px; }
  .advisor-path strong { font-size: 12px; }
  .advisor-path small { font-size: 10px; }
}

@media (min-width: 1440px) {
  .hero { padding-top: 22px; padding-bottom: 84px; }
  .hero-media { border-radius: 28px; }
}


/* Keep phone proportions usable when a mobile browser exposes a desktop viewport. */
@media (hover: none) and (pointer: coarse) and (max-device-width: 600px) {
  .hero { padding: 0 0 42px; }
  .hero-inner { width: 100%; }
  .hero-media { width: 100%; aspect-ratio: 4 / 3; border: 0; border-bottom: 1px solid rgba(223, 213, 202, .92); border-radius: 0 0 28px 28px; }
  .hero-media img { object-position: 50% center; }
  .hero-media-caption { right: auto; bottom: 14px; left: 50%; width: min(330px, calc(100% - 32px)); padding: 8px 10px; transform: translateX(-50%); }
  .trust-row { gap: 6px 13px; margin-top: 14px; padding-inline: 16px; font-size: 10.5px; }
  .hero-copy { display: block; max-width: none; padding: 26px 16px 0; }
  .hero-detail-block { padding-top: 0; }
  .eyebrow { font-size: 10px; }
  .hero h1 { max-width: 100%; font-size: clamp(31px, 9.4vw, 45px); line-height: .97; overflow-wrap: anywhere; }
  .hero-title-line,
  .hero h1 em span { display: block; }
  .hero-title-line-two { white-space: normal; }
  .hero-title-line + .hero-title-line::before { content: none; }
  .hero-lead { max-width: 42rem; margin-top: 16px; font-size: 15px; line-height: 1.55; }
  .hero-actions { display: grid; gap: 8px; margin-top: 18px; }
  .primary-button { min-width: 0; }
  .choice-later-note { max-width: none; margin-top: 18px; padding: 13px; }
  .advisor-path { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: calc(100% - 24px); margin-top: 18px; padding: 8px; border-radius: 18px; }
  .advisor-path > div { grid-template-columns: 28px minmax(0, 1fr); padding: 8px; background: rgba(245, 238, 231, .45); }
  .advisor-path > i { display: none; }
  .advisor-path b { width: 28px; height: 28px; font-size: 10px; }
  .advisor-path strong { font-size: 10px; }
  .advisor-path small { display: none; }
}

/* --- assets/css/studio.css --- */
.studio { width: min(var(--content), calc(100% - 40px)); margin: 98px auto 0; scroll-margin-top: 92px; }
.studio-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 28px;
}
.studio-heading > div:first-child { max-width: 790px; }
.studio-heading h2 { font-size: clamp(40px, 5vw, 68px); }
.studio-heading > div:first-child > p:last-child { max-width: 720px; margin: 18px 0 0; color: var(--muted); line-height: 1.65; }
.progress-box { flex: 0 0 min(310px, 31vw); }
.progress-copy { display: flex; justify-content: space-between; margin-bottom: 9px; color: var(--muted); font-size: 11px; }
.progress-track { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(113,136,121,.14); }
.progress-track span { display: block; width: 25%; height: 100%; border-radius: inherit; background: var(--primary); transition: width .3s ease; }

.step-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.step-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  min-height: 50px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--muted);
  background: rgba(255,253,249,.72);
  font-size: 12px;
  font-weight: 760;
}
.step-tabs button span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: var(--muted); background: var(--sand); font-size: 10px; }
.step-tabs button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-tabs button.is-active { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.step-tabs button.is-active span, .step-tabs button.is-complete span { color: white; background: var(--primary); }

.studio-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.studio-grid.is-result { grid-template-columns: 1fr; }
.builder-panel, .live-panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-xl); background: rgba(255,253,249,.88); box-shadow: var(--shadow); }
.builder-panel { display: flex; flex-direction: column; min-height: 660px; padding: clamp(25px, 3.6vw, 48px); }
.step-panel { min-width: 0; scroll-margin-top: 82px; animation: step-in .24s ease; }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } }
.step-number { margin: 0 0 10px; color: var(--rose-text); font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.step-panel h3 { max-width: 760px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 3.25vw, 48px); font-weight: 500; line-height: 1.05; letter-spacing: -.035em; }
.step-intro { max-width: 720px; margin: 15px 0 28px; color: var(--muted); line-height: 1.62; }
.builder-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 32px; }
.form-message { min-height: 22px; margin: 11px 0 -8px; color: var(--rose-text); font-size: 12px; font-weight: 700; }

.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.choice-card {
  position: relative;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 112px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink);
  background: linear-gradient(145deg, rgba(255,255,255,.74), rgba(245,238,231,.36));
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.choice-card:hover { transform: translateY(-3px); border-color: rgba(113,136,121,.56); }
.choice-card.is-selected { border-color: var(--primary); background: rgba(113,136,121,.10); box-shadow: inset 0 0 0 1px var(--primary); }
.choice-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--primary-dark); background: var(--sand); font-family: Georgia, serif; font-size: 21px; box-shadow: 0 7px 18px rgba(76,59,46,.07); }
.choice-copy { min-width: 0; }
.choice-copy strong, .choice-copy small { display: block; }
.choice-copy strong { font-size: 13px; }
.choice-copy small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.42; }
.choice-check { position: absolute; top: 11px; right: 11px; display: none; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: white; background: var(--primary); font-size: 11px; }
.choice-card.is-selected .choice-check { display: grid; }

.emotion-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.emotion-card {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 2px 13px;
  min-width: 0;
  min-height: 86px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 19px;
  color: var(--ink);
  background: rgba(255,255,255,.56);
  text-align: left;
  transition: transform .18s ease, border-color .18s ease;
}
.emotion-card > span { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: var(--rose); background: rgba(182,94,87,.08); font-size: 18px; }
.emotion-card strong { font-size: 13px; }
.emotion-card small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.emotion-card:hover { transform: translateY(-2px); border-color: rgba(182,94,87,.45); }
.emotion-card.is-selected { border-color: var(--rose); background: rgba(182,94,87,.075); box-shadow: inset 0 0 0 1px var(--rose); }

.handover-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.handover-card {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 122px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 21px;
  color: var(--ink);
  background: linear-gradient(145deg, rgba(255,255,255,.70), rgba(245,238,231,.42));
  text-align: left;
}
.handover-card:hover { transform: translateY(-3px); border-color: rgba(198,161,91,.62); }
.handover-card.is-selected { border-color: var(--gold); background: rgba(198,161,91,.09); box-shadow: inset 0 0 0 1px var(--gold); }
.handover-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; color: #836529; background: rgba(198,161,91,.14); font-family: Georgia, serif; font-size: 24px; }
.handover-card strong, .handover-card small { display: block; }
.handover-card strong { font-size: 14px; }
.handover-card small { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.handover-card > i { position: absolute; top: 12px; right: 12px; display: none; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: white; background: var(--gold); font-style: normal; font-size: 11px; }
.handover-card.is-selected > i { display: grid; }
.freedom-note { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 13px; margin-top: 18px; padding: 17px 18px; border-radius: 18px; background: var(--sand); }
.freedom-note > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 13px; color: var(--primary-dark); background: rgba(255,255,255,.72); font-size: 20px; }
.freedom-note p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.freedom-note strong { color: var(--ink); }

/* Compact recommendation: it reflects confirmed answers only. */
.live-panel {
  position: static;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}
.live-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.live-panel-head small,
.live-panel-head strong { display: block; }
.live-panel-head small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.live-panel-head strong {
  max-width: 33ch;
  margin-top: 4px;
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
}
.live-status {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--sand);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}
.live-status.is-ready { color: white; background: var(--primary); }

.preview-neutral,
.preview-loading {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 16px;
}
.preview-neutral > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 13px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  font-family: Georgia, serif;
  font-size: 18px;
}
.preview-neutral p,
.preview-loading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.preview-loading-dot {
  width: 16px;
  height: 16px;
  margin-left: 10px;
  border: 2px solid rgba(113,136,121,.22);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: recommendation-spin .8s linear infinite;
}
@keyframes recommendation-spin { to { transform: rotate(360deg); } }

.compact-preview-content { min-width: 0; }
.compact-product-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.compact-product-image {
  display: block;
  width: 86px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  background: var(--sand);
}
.compact-product-image img { width: 100%; height: 100%; object-fit: cover; }
.compact-product-copy { min-width: 0; }
.compact-product-copy > small {
  color: var(--primary-dark);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.compact-product-copy h4 {
  margin: 5px 0 0;
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.08;
}
.compact-product-copy h4 a { color: inherit; text-decoration: none; }
.compact-product-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.compact-product-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 9px;
}
.compact-product-meta > span {
  padding: 5px 7px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--sand);
  font-size: 8px;
  font-weight: 800;
}
.preview-product-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--primary-dark);
  font-size: 9px;
  font-weight: 820;
  text-underline-offset: 3px;
}

.compact-digital-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(113,136,121,.045);
}
.digital-preview-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  color: var(--primary-dark);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-family: Georgia, serif;
  font-size: 18px;
}
.digital-preview-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.digital-preview-label small {
  color: var(--primary-dark);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.digital-preview-label span {
  padding: 4px 6px;
  border-radius: 999px;
  color: #80652d;
  background: rgba(198,161,91,.13);
  font-size: 7px;
  font-weight: 820;
}
.compact-digital-row h4 { margin: 5px 0 0; font-size: 13px; }
.compact-digital-row p {
  display: -webkit-box;
  overflow: hidden;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.confirmed-basis-note {
  margin: 0;
  padding: 12px 16px;
  color: var(--muted);
  background: rgba(198,161,91,.065);
  font-size: 9px;
  line-height: 1.45;
}
.selection-summary {
  display: grid;
  gap: 7px;
  padding: 13px 16px 16px;
}
.selection-summary span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 9px;
}
.selection-summary strong {
  max-width: 65%;
  color: var(--ink);
  text-align: right;
}


.recommendation-result-panel {
  scroll-margin-top: 88px;
  outline: none;
}
.recommendation-result-panel:focus-visible {
  outline: 3px solid rgba(198,161,91,.7);
  outline-offset: 8px;
  border-radius: 18px;
}

.final-recommendation {
  display: grid;
  gap: 14px;
}
.result-product,
.result-digital {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 18px 50px rgba(76,59,46,.075);
}
.result-product {
  display: grid;
  grid-template-columns: 1fr;
}
.result-product-visual {
  position: relative;
  min-height: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand);
}
.result-product-visual > a {
  display: block;
  width: 100%;
  height: 100%;
}
.result-product-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.result-product-visual:hover img { transform: scale(1.018); }
.result-product-badge {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255,253,249,.9);
  box-shadow: var(--shadow-soft);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .04em;
}
.result-product-copy { padding: 21px 18px 20px; }
.recommendation-kicker {
  color: var(--primary-dark);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.result-confirmed-context {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}
.result-confirmed-context > span {
  display: inline-grid;
  gap: 1px;
  padding: 7px 9px;
  border-radius: 12px;
  background: var(--sand);
}
.result-confirmed-context small {
  color: var(--muted);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.result-confirmed-context strong {
  max-width: 25ch;
  font-size: 9px;
  line-height: 1.25;
}
.result-product h4,
.result-digital h4 {
  margin: 14px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(29px, 9vw, 40px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.035em;
}
.result-product h4 a { color: inherit; text-decoration: none; }
.result-product h4 a:hover { color: var(--primary-dark); }
.result-personal-reason {
  margin: 15px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.6;
}
.result-editorial {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.58;
}
.result-product-facts {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin: 18px 0 0;
}
.result-product-facts > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(223,213,202,.78);
  border-radius: 13px;
  background: rgba(255,253,249,.72);
}
.result-product-facts dt {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}
.result-product-facts dd {
  overflow-wrap: anywhere;
  margin: 3px 0 0;
  font-size: 10px;
  font-weight: 750;
}
.result-product-action {
  display: grid;
  gap: 13px;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}
.result-product-action > div small,
.result-product-action > div strong { display: block; }
.result-product-action > div small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 780;
  text-transform: uppercase;
}
.result-product-action > div strong {
  margin-top: 2px;
  font-size: 20px;
}
.result-product-action .primary-button { width: 100%; }

.result-digital {
  padding: 21px 18px;
  background:
    radial-gradient(circle at 90% 10%, rgba(198,161,91,.17), transparent 13rem),
    linear-gradient(145deg, rgba(113,136,121,.13), rgba(245,238,231,.58));
}
.result-digital-head {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  gap: 13px;
  align-items: center;
}
.digital-big-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  color: var(--primary-dark);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-family: Georgia, serif;
  font-size: 20px;
}
.result-digital h4 {
  margin-top: 4px;
  font-size: 25px;
}
.result-digital-badge {
  display: inline-flex;
  margin-top: 7px;
  padding: 5px 7px;
  border-radius: 999px;
  color: #80652d;
  background: rgba(198,161,91,.17);
  font-size: 8px;
  font-weight: 830;
}
.result-digital-reason {
  margin: 17px 0 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.62;
}
.not-fixed {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: 10px;
  margin-top: 18px;
  padding: 13px;
  border: 1px solid rgba(113,136,121,.24);
  border-radius: 15px;
  background: rgba(255,253,249,.7);
}
.not-fixed > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: white;
  background: var(--primary);
  font-size: 11px;
  font-weight: 900;
}
.not-fixed strong { color: var(--ink); font-size: 10px; }
.not-fixed p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.52;
}
.remember-button {
  width: 100%;
  min-height: 50px;
  margin-top: 1px;
}

.alternative-section { margin-top: 26px; }
.section-label {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 11px;
}
.section-label strong { font-size: 13px; }
.section-label small { color: var(--muted); font-size: 9px; }
.alternative-products,
.digital-alternatives {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}
.alternative-product {
  display: grid;
  grid-template-columns: 70px minmax(0,1fr) 18px;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 17px;
  color: var(--ink);
  background: rgba(255,255,255,.58);
  text-align: left;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.alternative-product:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  box-shadow: var(--shadow-soft);
}
.alternative-product img {
  width: 70px;
  height: 70px;
  border-radius: 13px;
  object-fit: cover;
}
.alternative-product > span { min-width: 0; }
.alternative-product strong,
.alternative-product small,
.alternative-product b { display: block; }
.alternative-product strong { font-size: 11px; }
.alternative-product small {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.alternative-product b {
  margin-top: 5px;
  font-size: 10px;
}
.alternative-product i { color: var(--primary-dark); font-style: normal; }
.digital-alternative {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  gap: 0 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  background: rgba(255,255,255,.54);
}
.digital-alternative > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--primary-dark);
  background: var(--sand);
  font-size: 14px;
}
.digital-alternative > div { min-width: 0; }
.digital-alternative strong,
.digital-alternative small { display: block; }
.digital-alternative strong { font-size: 10px; }
.digital-alternative small {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.digital-alternative b {
  align-self: start;
  padding: 5px 7px;
  border-radius: 999px;
  color: #80652d;
  background: rgba(198,161,91,.14);
  font-size: 7px;
}
.empty-note,
.loading-card,
.recommendation-error {
  margin: 0;
  padding: 17px;
  border-radius: 16px;
  color: var(--muted);
  background: var(--sand);
  font-size: 11px;
}
.loading-card {
  display: flex;
  align-items: center;
  gap: 11px;
}
.loading-card p,
.recommendation-error p { margin: 0; }
.recommendation-error {
  border: 1px solid rgba(182,94,87,.25);
  color: var(--ink);
  background: rgba(182,94,87,.07);
}
.recommendation-error strong { display: block; margin-bottom: 4px; }

.step-panel.is-active.recommendation-result-panel .result-product,
.step-panel.is-active.recommendation-result-panel .result-digital {
  animation: result-reveal .32s ease both;
}
.step-panel.is-active.recommendation-result-panel .result-digital { animation-delay: .06s; }
@keyframes result-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.preview-product-image > a { display: block; width: 100%; height: 100%; }
.preview-product-image > a img { width: 100%; height: 100%; object-fit: cover; }
.preview-product-copy h4 a { color: inherit; text-decoration: none; }

/* --- assets/css/sections.css --- */
.how-section {
  display: grid;
  grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
  gap: clamp(36px, 7vw, 100px);
  width: min(var(--content), calc(100% - 40px));
  margin: 118px auto 0;
  padding: clamp(36px, 5vw, 70px);
  border-radius: 34px;
  color: #f9f5ef;
  background: var(--primary-dark);
  scroll-margin-top: 92px;
}
.how-copy .eyebrow { color: #dce5dd; }
.how-copy h2 { font-size: clamp(40px, 4.8vw, 65px); }
.how-copy > p:last-child { margin: 22px 0 0; color: rgba(255,255,255,.72); line-height: 1.65; }
.how-steps { display: grid; align-content: center; gap: 13px; }
.how-steps article { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 15px; padding: 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.06); }
.how-steps article > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--primary-dark); background: #f8f2e9; font-weight: 900; }
.how-steps strong { font-size: 14px; }
.how-steps p { margin: 5px 0 0; color: rgba(255,255,255,.68); font-size: 11px; line-height: 1.5; }

.product-showcase { width: min(var(--content), calc(100% - 20px)); margin: 82px auto 0; scroll-margin-top: 90px; }
.product-showcase header { max-width: 850px; }
.product-showcase header > p:last-child { max-width: 650px; margin: 16px 0 0; color: var(--muted); line-height: 1.65; }
.product-showcase h2 { font-size: clamp(40px, 11vw, 68px); }
.product-showcase-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
.showcase-product { display: block; min-width: 0; color: inherit; text-decoration: none; }
.showcase-product figure { position: relative; min-width: 0; min-height: 310px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--sand); box-shadow: var(--shadow-soft); }
.showcase-product img { width: 100%; height: 100%; min-height: 310px; object-fit: cover; transition: transform .35s ease; }
.showcase-product figcaption { position: absolute; right: 12px; bottom: 12px; left: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.54); border-radius: 16px; color: var(--ink); background: rgba(255,253,249,.92); box-shadow: var(--shadow-soft); backdrop-filter: blur(12px); }
.showcase-product figcaption span { min-width: 0; }
.showcase-product figcaption strong, .showcase-product figcaption small { display: block; }
.showcase-product figcaption strong { font-size: 13px; }
.showcase-product figcaption small { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.showcase-product figcaption b { flex: 0 0 auto; font-size: 12px; }
.showcase-product:hover img { transform: scale(1.025); }
.showcase-product:focus-visible figure { outline: 3px solid color-mix(in srgb, var(--gold) 72%, white); outline-offset: 3px; }
.products-empty { margin: 28px 0 0; padding: 18px; border: 1px solid var(--line); border-radius: 18px; color: var(--muted); background: var(--surface); }

@media (min-width: 680px) {
  .product-showcase { width: min(var(--content), calc(100% - 40px)); margin-top: 108px; }
  .product-showcase-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 34px; }
  .showcase-product figure, .showcase-product img { min-height: 340px; }
}

@media (min-width: 1040px) {
  .product-showcase-grid { grid-template-columns: 1.15fr .85fr .85fr; grid-template-rows: repeat(2, 270px); }
  .showcase-product figure, .showcase-product img { min-height: 0; height: 100%; }
  .showcase-product.is-featured { grid-row: 1 / 3; }
  .showcase-product:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }
}

.footer { display: grid; justify-items: center; gap: 15px; margin-top: 110px; padding: 48px 20px 34px; border-top: 1px solid var(--line); background: var(--surface); text-align: center; }

.footer-brand picture { display: block; line-height: 0; }
.footer-brand img { width: 170px; max-width: 100%; height: auto; object-fit: contain; }
.footer p { margin: 0; color: var(--muted); font-size: 12px; }
.legal-placeholder { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; color: var(--muted); font-size: 10px; }

/* --- assets/css/product-detail.css --- */
.product-main,
.error-main {
  width: min(100% - 20px, var(--content));
  margin-inline: auto;
}

.product-main { padding-top: 20px; }
.product-breadcrumb {
  align-items: center;
  gap: 8px;
  overflow: hidden;
  margin: 0 0 17px;
  color: var(--muted);
  font-size: var(--type-small, 14px);
  white-space: nowrap;
}
.product-breadcrumb a { color: var(--primary-dark); text-underline-offset: 3px; }
.product-breadcrumb span[aria-current="page"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.product-breadcrumb-full { display: none; }
.product-breadcrumb-mobile { display: flex; }
.product-breadcrumb-mobile a { flex: 0 0 auto; font-weight: 750; }

.product-detail-layout {
  display: grid;
  grid-template-areas:
    "summary"
    "gallery"
    "info";
  grid-template-columns: minmax(0,1fr);
  gap: 22px;
}
.product-purchase-column { display: contents; }
.product-summary { grid-area: summary; min-width: 0; }
.product-gallery { grid-area: gallery; min-width: 0; }
.product-info { grid-area: info; min-width: 0; }
.product-summary h1 {
  margin: 10px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 10.8vw, 58px);
  font-weight: 500;
  line-height: .99;
  letter-spacing: -.038em;
  text-wrap: balance;
}
.product-lead { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.product-price-block {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px 11px;
  margin-top: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.product-price-block strong { font-size: clamp(24px, 6vw, 29px); }
.product-price-block del { color: var(--muted); font-size: 14px; }
.product-price-block small { flex-basis: 100%; color: var(--muted); font-size: var(--type-small, 14px); }
.product-availability {
  display: grid;
  grid-template-columns: 10px minmax(0,1fr);
  gap: 2px 9px;
  align-items: center;
  margin-top: 13px;
}
.product-availability > span { grid-row: span 2; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 5px rgba(113,136,121,.10); }
.product-availability.is-out-of-stock > span { background: var(--rose); box-shadow: 0 0 0 5px rgba(182,94,87,.10); }
.product-availability.is-on-order > span { background: var(--gold); box-shadow: 0 0 0 5px rgba(198,161,91,.12); }
.product-availability strong { font-size: var(--type-page-base, 16px); }
.product-availability small { color: var(--muted); font-size: var(--type-small, 14px); }

.product-main-image {
  position: relative;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, var(--sand), var(--surface));
  box-shadow: var(--shadow-soft);
  isolation: isolate;
}
.product-main-image-button {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: zoom-in;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
}
.product-main-image-button > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity .16s ease, transform .28s ease;
}
.product-main-image-button > img.is-switching { opacity: .58; }
.product-main-image[data-image-fit="contain"] .product-main-image-button > img { object-fit: contain; padding: 4%; }
.product-main-image[data-image-position="top"] .product-main-image-button > img { object-position: center top; }
.product-main-image[data-image-position="bottom"] .product-main-image-button > img { object-position: center bottom; }
.product-main-image[data-image-position="left"] .product-main-image-button > img { object-position: left center; }
.product-main-image[data-image-position="right"] .product-main-image-button > img { object-position: right center; }
.product-main-image-button:focus-visible { outline: 3px solid rgba(113,136,121,.38); outline-offset: -5px; }
.product-gallery-zoom {
  position: absolute;
  right: 13px;
  bottom: 13px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,253,249,.92);
  box-shadow: 0 8px 24px rgba(38,51,44,.14);
  backdrop-filter: blur(10px);
}
.product-gallery-zoom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.product-badge { position: absolute; z-index: 2; top: 13px; left: 13px; padding: 7px 10px; border-radius: 999px; color: var(--ink); background: rgba(255,253,249,.92); box-shadow: var(--shadow-soft); font-size: var(--type-label, 12px); font-weight: 850; pointer-events: none; }
.product-gallery-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.product-gallery-arrow {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(76,59,46,.05);
  font-size: 29px;
  line-height: 1;
  touch-action: manipulation;
}
.product-gallery-arrow:hover { border-color: var(--primary); }
.product-gallery-arrow:focus-visible { outline: 3px solid rgba(113,136,121,.28); outline-offset: 2px; }
.product-gallery-counter { min-width: 64px; color: var(--muted); font-size: var(--type-small, 14px); font-weight: 780; text-align: center; }
.product-thumbnails-shell { position: relative; margin-top: 12px; }
.product-thumbnails-shell::after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 34px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--page));
  pointer-events: none;
}
.product-thumbnails {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80px;
  gap: 9px;
  padding: 2px 25px 4px 2px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.product-thumbnails::-webkit-scrollbar { display: none; }
.product-thumbnail {
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 0;
  overflow: hidden;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  scroll-snap-align: center;
  touch-action: manipulation;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.product-thumbnail img { width: 100%; height: 100%; border-radius: 11px; object-fit: cover; }
.product-thumbnail.is-information::after { position: absolute; right: 6px; bottom: 6px; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 999px; content: "i"; color: var(--surface); background: rgba(38,51,44,.82); font-size: 11px; font-weight: 800; }
.product-thumbnail.is-active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary), 0 7px 18px rgba(82,104,90,.12); transform: translateY(-1px); }
.product-thumbnail:focus-visible { outline: 3px solid rgba(113,136,121,.28); outline-offset: 2px; }

.product-gallery-lightbox {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  overflow: hidden;
  background: rgba(24,29,26,.88);
  backdrop-filter: blur(12px);
  overscroll-behavior: contain;
}
.product-gallery-lightbox[hidden] { display: none; }
.product-gallery-lightbox-dialog {
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  width: min(100%, 1080px);
  height: min(100%, 900px);
  min-height: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  color: #fff;
  background: rgba(30,38,33,.96);
  box-shadow: 0 28px 90px rgba(0,0,0,.38);
  overflow: hidden;
}
.product-gallery-lightbox-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 8px 10px 8px 18px;
}
.product-gallery-lightbox-dialog > header > span { font-size: var(--type-supporting, 15px); font-weight: 800; }
.product-gallery-lightbox-close,
.product-gallery-lightbox-controls button {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.08);
  font-size: 30px;
  line-height: 1;
}
.product-gallery-lightbox-close:focus-visible,
.product-gallery-lightbox-controls button:focus-visible { outline: 3px solid rgba(255,255,255,.58); outline-offset: 2px; }
.product-gallery-lightbox-stage {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 8px 14px;
  touch-action: pan-y pinch-zoom;
}
.product-gallery-lightbox-stage img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.product-gallery-lightbox-stage[data-image-position="top"] img { object-position: center top; }
.product-gallery-lightbox-stage[data-image-position="bottom"] img { object-position: center bottom; }
.product-gallery-lightbox-stage[data-image-position="left"] img { object-position: left center; }
.product-gallery-lightbox-stage[data-image-position="right"] img { object-position: right center; }
.product-gallery-lightbox-controls { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 66px; padding: 8px 12px 10px; }
.product-gallery-lightbox-controls span { color: rgba(255,255,255,.72); font-size: var(--type-small, 14px); }

.product-facts { display: grid; grid-template-columns: minmax(0,1fr); margin: 22px 0 0; border-top: 1px solid var(--line); }
.product-facts div { display: grid; grid-template-columns: minmax(100px,.42fr) minmax(0,1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.product-facts dt { color: var(--muted); font-size: var(--type-small, 14px); font-weight: 750; }
.product-facts dd { margin: 0; font-size: var(--type-page-base, 16px); text-align: right; }

.product-experience-note { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 13px; margin-top: 22px; padding: 17px; border: 1px solid rgba(113,136,121,.24); border-radius: 18px; background: linear-gradient(145deg, rgba(113,136,121,.10), rgba(245,238,231,.52)); }
.product-experience-note > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; color: var(--primary-dark); background: var(--surface); font-family: Georgia, serif; font-size: 20px; }
.product-experience-note strong { font-size: var(--type-page-base, 16px); }
.product-experience-note p { margin: 5px 0 0; color: var(--muted); font-size: var(--type-supporting, 15px); line-height: 1.55; }
.product-actions { display: grid; gap: 9px; margin-top: 22px; }
.product-actions .primary-button,
.product-actions .secondary-button { width: 100%; min-height: 50px; text-decoration: none; }

.product-description { margin-top: 62px; padding: 30px 20px; border-radius: 24px; color: #f9f5ef; background: var(--primary-dark); }
.product-description h2 { margin: 12px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 10vw, 54px); font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.product-description .eyebrow { color: #dce5dd; }
.product-description-copy { max-width: 760px; margin-top: 20px; }
.product-description-copy p { margin: 0 0 13px; color: rgba(255,255,255,.76); font-size: 13px; line-height: 1.7; }
.product-description-copy p:last-child { margin-bottom: 0; }

.error-main { display: grid; min-height: calc(100dvh - 180px); place-items: center; padding-block: 50px; }
.error-card { width: min(100%, 680px); padding: 34px 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.error-card h1 { margin: 14px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 11vw, 58px); font-weight: 500; line-height: 1; }
.error-card > p:not(.eyebrow) { max-width: 520px; margin: 18px auto 25px; color: var(--muted); line-height: 1.6; }
.error-card .primary-button { text-decoration: none; }

@media (min-width: 700px) {
  .product-main,
  .error-main { width: min(100% - 40px, var(--content)); }
  .product-main { padding-top: 34px; }
  .product-breadcrumb-full { display: flex; }
  .product-breadcrumb-mobile { display: none; }
  .product-detail-layout {
    grid-template-areas: "gallery purchase";
    grid-template-columns: minmax(0,1fr) minmax(320px,.86fr);
    gap: clamp(34px,6vw,78px);
    align-items: start;
  }
  .product-purchase-column { display: block; grid-area: purchase; position: sticky; top: 100px; min-width: 0; padding-top: 14px; }
  .product-summary h1 { font-size: clamp(50px,6vw,72px); }
  .product-info { margin-top: 20px; }
  .product-thumbnails-shell::after { display: none; }
  .product-actions { grid-template-columns: minmax(0,1fr) auto; }
  .product-actions .secondary-button { width: auto; }
  .product-thumbnails { grid-auto-flow: initial; grid-auto-columns: initial; grid-template-columns: repeat(5,minmax(0,1fr)); overflow: visible; padding: 2px; }
  .product-description { margin-top: 92px; padding: clamp(42px,6vw,72px); border-radius: 32px; }
}

@media (min-width: 1100px) {
  .product-detail-layout { grid-template-columns: minmax(0,1.08fr) minmax(390px,.72fr); }
  .product-main-image { border-radius: 28px; }
  .product-thumbnails { grid-template-columns: repeat(6,minmax(0,1fr)); }
}

.product-how,
.product-digital-options,
.product-faq,
.related-products { margin-top: 62px; }
.product-how > header,
.product-digital-options > header,
.product-faq > header,
.related-products > header { max-width: 820px; }
.product-how h2,
.product-digital-options h2,
.product-faq h2,
.related-products h2 { margin: 12px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(35px,9vw,56px); font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.product-how > header > p:last-child,
.product-digital-options > header > p:last-child { margin: 18px 0 0; color: var(--muted); line-height: 1.7; }
.product-how-steps { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.product-how-steps li { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }
.product-how-steps li > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-weight: 850; }
.product-how-steps strong { font-size: 14px; }
.product-how-steps p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.product-digital-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
.product-digital-grid article { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.product-digital-grid article > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 14px; color: var(--primary-dark); background: rgba(113,136,121,.12); font-size: 18px; }
.product-digital-grid h3 { margin: 0; font-size: 14px; }
.product-digital-grid p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.product-digital-note { margin: 16px 0 0; padding: 14px 16px; border-radius: 15px; color: var(--muted); background: var(--sand); font-size: 12px; line-height: 1.6; }
.product-faq-list { display: grid; gap: 9px; margin-top: 26px; }
.product-faq details { border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.product-faq summary { cursor: pointer; padding: 17px 48px 17px 17px; font-size: 14px; font-weight: 800; }
.product-faq details p { margin: 0; padding: 0 17px 18px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.related-products-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 25px; }
.related-products-grid a { display: grid; grid-template-rows: auto 1fr; align-self: start; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; color: inherit; background: var(--surface); text-decoration: none; }
.related-products-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }
.related-products-grid span { display: grid; gap: 5px; padding: 12px; }
.related-products-grid strong { font-size: 13px; line-height: 1.3; }
.related-products-grid small { color: var(--muted); font-size: 12px; }
.related-products-all { display: inline-flex; margin-top: 18px; text-decoration: none; }
@media (min-width: 480px) {
  .related-products-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 700px) {
  .product-how,
  .product-digital-options,
  .product-faq,
  .related-products { margin-top: 92px; }
  .product-how-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .product-digital-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .related-products-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
}
@media (min-width: 1100px) { .product-digital-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }

/* Very narrow phones retain one column; from 480 px the cards use two columns. */
@media (hover: none) and (pointer: coarse) and (max-width: 479px) {
  .related-products-grid { grid-template-columns: 1fr; }
}


/* Stage 17.18: legal product information */
.product-legal-specs,.product-digital-terms{max-width:1120px;margin:clamp(2.5rem,6vw,5rem) auto;padding:clamp(1.25rem,4vw,2.5rem);border:1px solid var(--color-border,#ded6cc);border-radius:var(--radius,24px);background:var(--color-surface,#fff)}
.product-legal-specs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.product-legal-specs article{min-width:0}.product-legal-specs address{display:flex;flex-direction:column;font-style:normal;line-height:1.65}.product-legal-specs dl,.product-digital-terms dl{display:grid;gap:.8rem}.product-legal-specs dl div,.product-digital-terms dl div{padding:.9rem 0;border-top:1px solid var(--color-border,#ded6cc)}.product-legal-specs dt,.product-digital-terms dt{font-weight:800}.product-legal-specs dd,.product-digital-terms dd{margin:.25rem 0 0;line-height:1.6}
@media (width <= 700px){.product-legal-specs-grid{grid-template-columns:1fr}.product-legal-specs,.product-digital-terms{margin-inline:0;border-radius:18px}}

@media (prefers-reduced-motion: reduce) {
  .product-main-image-button > img,
  .product-thumbnail { transition: none; }
}

/* --- assets/css/catalog.css --- */
.catalog-main {
  width: min(var(--content), calc(100% - 20px));
  margin-inline: auto;
  padding-top: 22px;
}
.catalog-hero { max-width: 900px; padding: 28px 0 8px; }
.catalog-hero h1 { margin: 12px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(44px,12vw,76px); font-weight: 500; line-height: .98; letter-spacing: -.045em; }
.catalog-hero > p:last-child { max-width: 720px; margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.catalog-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 30px; }
.catalog-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-soft); }
.catalog-card-image { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sand); }
.catalog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.catalog-card-image > span { position: absolute; top: 12px; left: 12px; padding: 7px 10px; border-radius: 999px; background: rgba(255,253,249,.93); color: var(--ink); font-size: 9px; font-weight: 850; box-shadow: var(--shadow-soft); }
.catalog-card:hover .catalog-card-image img { transform: scale(1.025); }
.catalog-card-copy { padding: 18px; }
.catalog-card-copy h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 500; line-height: 1.05; }
.catalog-card-copy h2 a { color: inherit; text-decoration: none; }
.catalog-card-copy > p { min-height: 44px; margin: 11px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.catalog-card-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.catalog-card-copy strong { font-size: 15px; }
.catalog-card-copy > div a { color: var(--primary-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.catalog-explanation { display: grid; gap: 22px; margin-top: 62px; padding: 28px 20px; border-radius: 26px; color: #f9f5ef; background: var(--primary-dark); }
.catalog-explanation .eyebrow { color: #dce5dd; }
.catalog-explanation h2 { margin: 10px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px,9vw,56px); font-weight: 500; line-height: 1; }
.catalog-explanation > p { margin: 0; color: rgba(255,255,255,.74); line-height: 1.7; }
.catalog-explanation .primary-button { width: fit-content; text-decoration: none; }
.product-showcase-more { display: flex; justify-content: center; margin-top: 22px; }
.product-showcase-more .secondary-button { text-decoration: none; }
@media (min-width: 680px) {
  .catalog-main { width: min(var(--content), calc(100% - 40px)); padding-top: 34px; }
  .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  .catalog-explanation { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: center; padding: 42px; }
  .catalog-explanation .primary-button { grid-column: 2; }
}
@media (min-width: 1040px) { .catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }

/* --- assets/css/guide.css --- */
.guide-main { width: min(100% - 20px, var(--content)); margin-inline: auto; padding: 24px 0 78px; }
.guide-article { display: grid; gap: 56px; }
.guide-hero { display: grid; gap: 24px; align-items: center; }
.guide-hero h1 { margin: 12px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(40px,10vw,72px); font-weight: 500; line-height: .98; letter-spacing: -.04em; }
.guide-hero p:last-child { margin: 20px 0 0; max-width: 760px; color: var(--muted); font-size: 16px; line-height: 1.7; }

.guide-hero picture { display: block; }
.guide-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow); }
.guide-section { max-width: 860px; }
.guide-section h2,.guide-columns h2,.guide-products h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px,8vw,52px); font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.guide-section > p,.guide-columns p { margin: 18px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.guide-steps { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.guide-steps li { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }
.guide-steps li > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-weight: 850; }
.guide-steps strong { font-size: 14px; }
.guide-steps p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.guide-options ul { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.guide-options li { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 10px; padding: 14px 16px; border-radius: 15px; background: var(--sand); }
.guide-options li span { color: var(--primary-dark); font-weight: 900; }
.guide-columns { display: grid; gap: 18px; }
.guide-columns > div { padding: 26px 22px; border-radius: 24px; background: var(--primary-dark); }
.guide-columns h2 { color: #fff; font-size: clamp(28px,7vw,44px); }
.guide-columns p { color: rgba(255,255,255,.76); }
.guide-products { display: grid; gap: 24px; }
.guide-product-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.guide-product-grid a { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; color: inherit; background: var(--surface); text-decoration: none; }
.guide-product-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.guide-product-grid span { display: grid; gap: 4px; padding: 12px; }
.guide-product-grid strong { font-size: 11px; line-height: 1.3; }
.guide-product-grid small { color: var(--muted); font-size: 10px; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.guide-actions a { text-decoration: none; }
@media (min-width: 700px) {
  .guide-main { width: min(100% - 40px, var(--content)); padding-top: 36px; }
  .guide-article { gap: 88px; }
  .guide-hero { grid-template-columns: minmax(0,1fr) minmax(340px,.85fr); gap: 48px; }
  .guide-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .guide-steps li { grid-template-columns: 1fr; }
  .guide-columns { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  .guide-product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
}

.category-hero strong { display: inline-flex; margin-top: 18px; padding: 10px 14px; border-radius: 999px; color: var(--primary-dark); background: rgba(113,136,121,.12); font-size: 11px; line-height: 1.35; }

/* --- assets/css/legal.css --- */
.legal-main {
  width: min(920px, calc(100% - 24px));
  margin: 0 auto;
  padding: 34px 0 0;
}

.legal-hero {
  padding: 28px 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 94% 8%, rgba(113,136,121,.13), transparent 15rem),
    var(--surface);
  box-shadow: var(--shadow-soft);
}
.legal-hero h1 {
  margin: 10px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 12vw, 68px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
}
.legal-hero > p:not(.eyebrow) { max-width: 690px; margin: 18px 0 0; color: var(--muted); line-height: 1.7; }
.legal-hero > small { display: block; margin-top: 18px; color: var(--muted); font-size: 11px; }

.legal-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 6px;
  margin: 12px 0 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,253,249,.86);
}
.legal-tabs a {
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 8px;
  border-radius: 13px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
.legal-tabs a[aria-current="page"] { color: white; background: var(--primary-dark); }

.legal-document {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}
.legal-document section {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,253,249,.92);
}
.legal-document h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 7vw, 34px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.025em;
}
.legal-document p,
.legal-document li,
.legal-address,
.legal-definition-list { color: var(--muted); font-size: 13px; line-height: 1.72; }
.legal-document p { margin: 14px 0 0; }
.legal-document ul { margin: 14px 0 0; padding-left: 21px; }
.legal-document li + li { margin-top: 6px; }
.legal-document a { color: var(--primary-dark); font-weight: 750; text-underline-offset: 4px; }

.legal-address { display: grid; gap: 2px; margin-top: 14px; font-style: normal; }
.legal-address strong { color: var(--ink); font-size: 15px; }
.legal-address a { width: fit-content; }
.legal-admin-note {
  padding: 12px 14px;
  border-left: 3px solid var(--gold);
  border-radius: 0 12px 12px 0;
  background: rgba(198,161,91,.09);
}
.legal-definition-list { display: grid; gap: 8px; margin: 14px 0 0; }
.legal-definition-list > div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 12px; }
.legal-definition-list dt { color: var(--ink); font-weight: 800; }
.legal-definition-list dd { margin: 0; }

.legal-status-card {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 12px;
  margin-top: 17px;
  padding: 15px;
  border: 1px solid rgba(113,136,121,.25);
  border-radius: 16px;
  background: rgba(113,136,121,.07);
}
.legal-status-card > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: white; background: var(--primary); font-weight: 900; }
.legal-status-card strong { color: var(--ink); }
.legal-status-card p { margin-top: 3px; }

.legal-table-wrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.legal-table-wrap table { width: 100%; min-width: 620px; border-collapse: collapse; color: var(--muted); font-size: 12px; }
.legal-table-wrap th,
.legal-table-wrap td { padding: 12px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table-wrap th { color: var(--ink); background: rgba(245,238,231,.65); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.legal-table-wrap tbody tr:last-child td { border-bottom: 0; }

.legal-contact-card {
  display: grid;
  gap: 18px;
  margin-top: 20px;
  padding: 22px 20px;
  border-radius: 22px;
  color: white;
  background: var(--primary-dark);
}
.legal-contact-card .eyebrow { color: rgba(255,255,255,.7); }
.legal-contact-card h2 { margin: 7px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 500; line-height: 1.05; }
.legal-contact-card p:not(.eyebrow) { margin: 10px 0 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.6; }
.legal-contact-card .primary-button { width: 100%; color: var(--primary-dark); background: white; box-shadow: none; overflow-wrap: anywhere; }

@media (min-width: 680px) {
  .legal-main { width: min(920px, calc(100% - 40px)); padding-top: 48px; }
  .legal-hero { padding: 42px 44px; border-radius: 30px; }
  .legal-tabs { gap: 10px; margin-top: 16px; padding: 8px; border-radius: 21px; }
  .legal-tabs a { min-height: 50px; font-size: 12px; }
  .legal-document { gap: 16px; margin-top: 28px; }
  .legal-document section { padding: 30px 34px; border-radius: 24px; }
  .legal-document p, .legal-document li, .legal-address, .legal-definition-list { font-size: 14px; }
  .legal-contact-card { grid-template-columns: minmax(0,1fr) auto; align-items: center; padding: 28px 32px; }
  .legal-contact-card .primary-button { width: auto; max-width: 320px; }
}

.legal-status-card.is-warning {
  border-color: rgba(198,161,91,.42);
  background: rgba(198,161,91,.10);
}
.legal-status-card.is-warning > span { background: var(--gold); }
.legal-template-box {
  margin-top: 16px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: rgba(245,238,231,.45);
}
.legal-template-box p:first-child { margin-top: 0; }


/* Stage 17.18: withdrawal scope and privacy providers */
.withdrawal-scope{display:grid;gap:.75rem;border:1px solid var(--color-border,#ded6cc);border-radius:18px;padding:1rem}.withdrawal-scope-option{display:flex!important;gap:.75rem;align-items:flex-start}.withdrawal-scope-option input{margin-top:.3rem}.withdrawal-scope-option span{display:grid;gap:.2rem}.withdrawal-item-selection{display:grid;gap:.5rem;padding:.5rem 0 .75rem 2rem}.withdrawal-item-selection label{display:flex;gap:.6rem;align-items:flex-start}.legal-provider-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.legal-provider-list article{padding:1rem;border:1px solid var(--color-border,#ded6cc);border-radius:16px}.legal-provider-list h3{margin-top:0}@media (width <= 700px){.legal-provider-list{grid-template-columns:1fr}.withdrawal-item-selection{padding-left:.25rem}}

/* --- assets/css/cart.css --- */
/* Header cart action and public flash messages */
.cart-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 42px;
  min-height: 42px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255,253,249,.94);
  box-shadow: 0 6px 18px rgba(76,59,46,.05);
  font-size: var(--type-label, 12px);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}
.cart-action svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cart-action-label { display: none; }
.cart-action-count {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding-inline: 5px;
  border-radius: 999px;
  color: white;
  background: var(--primary-dark);
  font-size: var(--type-micro, 11px);
  font-weight: 850;
}
.cart-action.is-current { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); }

.site-flashes {
  position: relative;
  z-index: 30;
  display: grid;
  gap: 8px;
  width: min(100% - 20px, var(--content));
  margin: 12px auto 0;
}
.site-flash {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid rgba(113,136,121,.28);
  border-radius: 15px;
  color: var(--ink);
  background: rgba(255,253,249,.97);
  box-shadow: var(--shadow-soft);
}
.site-flash > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: white; background: var(--primary); font-size: 11px; font-weight: 900; }
.site-flash p { margin: 0; font-size: var(--type-supporting, 15px); line-height: var(--type-line-compact, 1.46); }
.site-flash.is-error { border-color: rgba(182,94,87,.34); }
.site-flash.is-error > span { background: var(--rose); }
.site-flash.is-info > span { background: var(--gold); }

/* Product-to-cart form */
.product-cart-form {
  display: grid;
  gap: 9px;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.product-cart-form > label { color: var(--muted); font-size: var(--type-label, 12px); font-weight: 800; }
.product-cart-form > div { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 9px; }
.product-cart-form input[type="number"] {
  width: 100%;
  min-height: 50px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: var(--page);
  text-align: center;
  font-weight: 800;
}
.product-cart-form .primary-button { width: 100%; min-height: 50px; }
.product-cart-form > small { color: var(--muted); font-size: var(--type-small, 14px); line-height: var(--type-line-compact, 1.46); }
.product-actions { grid-template-columns: minmax(0,1fr); }

/* Cart page */
.cart-main {
  width: min(100% - 20px, var(--content));
  margin-inline: auto;
  padding: 30px 0 80px;
}
.cart-intro { max-width: 720px; }
.cart-intro h1 {
  margin: 13px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(44px, 13vw, 68px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em;
}
.cart-intro > p:last-child { margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.cart-empty {
  display: grid;
  justify-items: center;
  max-width: 680px;
  margin: 42px auto 0;
  padding: 38px 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}
.cart-empty > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; color: var(--primary-dark); background: var(--primary-soft); font-family: Georgia, serif; font-size: 25px; }
.cart-empty h2 { margin: 19px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 32px; font-weight: 500; line-height: 1.05; }
.cart-empty p { max-width: 480px; margin: 13px 0 22px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.cart-empty .primary-button { text-decoration: none; }

.cart-layout { display: grid; gap: 24px; margin-top: 36px; }
.cart-items-section { min-width: 0; }
.cart-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.cart-section-heading h2 { margin: 7px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 500; line-height: 1.05; }
.cart-section-heading > span { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; color: var(--primary-dark); background: var(--primary-soft); font-size: var(--type-label, 12px); font-weight: 800; }
.cart-items { display: grid; gap: 12px; }
.cart-item {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 13px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 9px 28px rgba(76,59,46,.06);
}
.cart-item-image { align-self: start; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; background: var(--sand); }
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-copy { min-width: 0; }
.cart-item-title-row { display: grid; gap: 9px; }
.cart-item-title-row > div { min-width: 0; }
.cart-item-title-row h3 { margin: 4px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 500; line-height: 1.05; }
.cart-item-title-row h3 a { text-decoration: none; }
.cart-item-title-row > strong { font-size: 14px; }
.cart-item-title-row p { margin: 6px 0 0; color: var(--muted); font-size: var(--type-small, 14px); line-height: var(--type-line-compact, 1.46); }
.cart-item-badge { display: inline-flex; padding: 5px 8px; border-radius: 999px; color: var(--primary-dark); background: var(--primary-soft); font-size: var(--type-label, 12px); font-weight: 850; }
.cart-item-meta { display: grid; gap: 3px; margin-top: 11px; color: var(--muted); font-size: var(--type-small, 14px); line-height: var(--type-line-compact, 1.46); }
.cart-item-controls { grid-column: 1 / -1; display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 9px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.cart-quantity-form { display: grid; grid-template-columns: auto 58px auto; gap: 7px; align-items: center; }
.cart-quantity-form label { color: var(--muted); font-size: var(--type-label, 12px); font-weight: 750; }
.cart-quantity-form input { width: 58px; min-height: 42px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--page); text-align: center; font-weight: 800; }
.cart-update-button,
.cart-remove-button {
  min-height: 42px;
  padding: 8px 11px;
  border-radius: 999px;
  font-size: var(--type-label, 12px);
  font-weight: 800;
}
.cart-update-button { color: white; background: var(--primary-dark); }
.cart-remove-button { color: var(--rose-text); background: transparent; text-decoration: underline; text-underline-offset: 4px; }

.cart-summary {
  align-self: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.cart-summary h2 { margin: 9px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 32px; font-weight: 500; }
.cart-summary dl { margin: 22px 0 0; }
.cart-summary dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.cart-summary dt { color: var(--muted); font-size: var(--type-small, 14px); }
.cart-summary dd { margin: 0; font-size: var(--type-supporting, 15px); font-weight: 800; }
.cart-summary .cart-summary-total { padding-top: 17px; }
.cart-summary-total dt { color: var(--ink); font-weight: 800; }
.cart-summary-total dd { font-size: 21px; }
.cart-summary-note,
.cart-summary-tax { margin: 12px 0 0; color: var(--muted); font-size: var(--type-small, 14px); line-height: var(--type-line-compact, 1.46); }
.cart-summary-tax { margin-top: 4px; }
.cart-checkout-preview { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 11px; margin-top: 20px; padding: 14px; border: 1px solid rgba(198,161,91,.30); border-radius: 16px; background: rgba(198,161,91,.08); }
.cart-checkout-preview > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; color: var(--ink); background: var(--surface); font-family: Georgia, serif; }
.cart-checkout-preview strong { font-size: var(--type-supporting, 15px); }
.cart-checkout-preview p { margin: 4px 0 0; color: var(--muted); font-size: var(--type-small, 14px); line-height: var(--type-line-compact, 1.46); }
.cart-checkout-button,
.cart-continue-button { width: 100%; margin-top: 12px; text-decoration: none; }
.cart-checkout-button:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
.cart-clear-form { margin-top: 16px; text-align: center; }
.cart-clear-form button { min-height: 44px; padding: 8px 11px; color: var(--muted); background: transparent; font-size: var(--type-small, 14px); text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 480px) {
  .cart-action-label { display: inline; }
  .cart-action { padding-inline: 11px; }
  .cart-item { grid-template-columns: 112px minmax(0,1fr); padding: 14px; }
  .cart-item-controls { grid-column: 2; }
}

@media (min-width: 700px) {
  .site-flashes { width: min(100% - 40px, var(--content)); }
  .product-cart-form { padding: 18px; }
  .product-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .product-actions .secondary-button { width: 100%; }
  .cart-main { width: min(100% - 40px, var(--content)); padding-top: 46px; }
  .cart-item { grid-template-columns: 130px minmax(0,1fr); gap: 18px; padding: 16px; }
  .cart-item-title-row { grid-template-columns: minmax(0,1fr) auto; align-items: start; }
  .cart-item-title-row > strong { font-size: 16px; }
  .cart-item-title-row h3 { font-size: 25px; }
}

@media (min-width: 980px) {
  .cart-layout { grid-template-columns: minmax(0,1fr) minmax(300px,380px); gap: clamp(28px,4vw,54px); align-items: start; }
  .cart-summary { position: sticky; top: 96px; }
}

@media (min-width: 1100px) {
  .cart-action:hover { border-color: var(--primary); color: var(--primary-dark); background: #fff; }
  .cart-item { transition: transform .18s ease, box-shadow .18s ease; }
  .cart-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
}

/* Stage 17.33B: value gift voucher entry and totals. */
.gift-voucher-box{margin:20px 0;padding:16px;border:1px solid rgba(113,136,121,.28);border-radius:18px;background:linear-gradient(145deg,rgba(113,136,121,.08),rgba(255,252,247,.92))}
.gift-voucher-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.gift-voucher-heading strong{font-size:16px}.gift-voucher-heading p{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.5}.gift-voucher-heading>span{display:grid;width:34px;height:34px;place-items:center;border-radius:12px;background:var(--surface);color:var(--primary-dark);font-size:19px}
.gift-voucher-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:14px}.gift-voucher-form input{min-width:0;text-transform:uppercase}.gift-voucher-form button,.gift-voucher-applied button{min-height:44px;padding-inline:14px;border:1px solid var(--primary);border-radius:13px;color:var(--primary-dark);background:var(--surface);font-weight:750}
.gift-voucher-applied{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding:13px;border-radius:14px;background:var(--surface)}.gift-voucher-applied span,.gift-voucher-applied small{display:block;color:var(--muted);font-size:13px}.gift-voucher-applied strong{display:block;margin:2px 0;font-size:16px}.gift-voucher-note,.gift-voucher-error{display:block;margin-top:10px;font-size:13px;line-height:1.5}.gift-voucher-note{color:var(--muted)}.gift-voucher-error{color:var(--rose);font-weight:700}
.cart-summary-voucher dd,.checkout-summary-voucher dd{color:var(--primary-dark);font-weight:800}.cart-summary-voucher-balance{grid-template-columns:1fr!important}.cart-summary-voucher-balance dt{color:var(--muted);font-size:13px;line-height:1.45}.cart-summary-voucher-balance dd{display:none}
@media (width <= 430px){.gift-voucher-form{grid-template-columns:1fr}.gift-voucher-form button{width:100%}.gift-voucher-applied{align-items:flex-start;flex-direction:column}.gift-voucher-applied form,.gift-voucher-applied button{width:100%}}

/* --- assets/css/checkout.css --- */
.checkout-main {
  width: min(100% - 20px, var(--content));
  margin-inline: auto;
  padding: 30px 0 80px;
}
.checkout-intro { max-width: 790px; }
.checkout-intro h1,
.confirmation-card h1 {
  margin: 13px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 12vw, 68px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em;
}
.checkout-intro > p:not(.eyebrow):not(.checkout-required-hint) {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.checkout-required-hint {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.required-marker,
.checkout-required-hint > span { color: var(--rose-text); font-weight: 900; }

.checkout-test-banner {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  gap: 12px;
  margin-top: 22px;
  padding: 14px;
  border: 1px solid rgba(198,161,91,.34);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(198,161,91,.12), rgba(250,240,230,.62));
}
.checkout-test-banner > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: var(--surface);
  background: var(--gold);
  font-size: 12px;
  font-weight: 900;
}
.checkout-test-banner strong { font-size: 13px; }
.checkout-test-banner p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.checkout-payment-notice {
  max-width: 790px;
  margin-top: 20px;
  padding: 15px 17px;
  border: 1px solid rgba(113,136,121,.3);
  border-radius: 17px;
  background: rgba(113,136,121,.08);
}
.checkout-payment-notice strong { font-size: 13px; }
.checkout-payment-notice p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.checkout-error-summary {
  max-width: 790px;
  margin-top: 24px;
  padding: 18px;
  border: 1px solid rgba(182,94,87,.4);
  border-radius: 18px;
  background: rgba(182,94,87,.07);
  outline: none;
}
.checkout-error-summary[hidden] { display: none; }
.checkout-error-summary h2 { margin: 0; font-size: 16px; }
.checkout-error-summary p { margin: 7px 0 0; color: var(--rose-text); font-size: 13px; line-height: 1.55; }
.checkout-error-reference { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }

.checkout-one-page-form { margin-top: 34px; }
.checkout-layout { display: grid; gap: 24px; }
.checkout-flow { display: grid; gap: 16px; min-width: 0; }
.checkout-step-marker {
  display: grid;
  grid-template-columns: 30px minmax(22px,1fr) 30px minmax(22px,1fr) 30px;
  gap: 8px;
  align-items: center;
  padding: 0 6px 5px;
}
.checkout-step-marker span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface);
  font-size: 11px;
  font-weight: 900;
}
.checkout-step-marker span.is-active { border-color: var(--primary); color: white; background: var(--primary); }
.checkout-step-marker i { height: 1px; background: linear-gradient(90deg,var(--primary),rgba(113,136,121,.25)); }
.checkout-step-marker small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; text-align: center; }

.checkout-card,
.checkout-summary,
.confirmation-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.checkout-card { margin: 0; }
.checkout-card legend {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 0 6px;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 500;
}
.checkout-step-number {
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 10px;
  color: white;
  background: var(--primary);
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 900;
}
.checkout-section-copy { margin: 0 0 15px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.checkout-fields { display: grid; gap: 13px; }
.checkout-fields label,
.checkout-card > label:not(.checkout-check) { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.checkout-fields input,
.checkout-card textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: var(--page);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.checkout-card textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.checkout-fields input:focus,
.checkout-card textarea:focus { border-color: var(--primary); outline: 3px solid rgba(113,136,121,.14); }
.checkout-fields input[aria-invalid="true"],
.checkout-card input[aria-invalid="true"] {
  border-color: var(--rose);
  background: rgba(182,94,87,.045);
  box-shadow: 0 0 0 3px rgba(182,94,87,.08);
}
.checkout-fields input:disabled { color: var(--muted); background: rgba(125,112,103,.08); }
.field-error { color: var(--rose-text); font-size: 12px; font-weight: 700; line-height: 1.4; }
.client-field-error,
.api-field-error { display: flex; gap: 6px; align-items: flex-start; }
.client-field-error::before,
.api-field-error::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  color: white;
  background: var(--rose);
  font-size: 10px;
  line-height: 1;
}
.checkout-check {
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  gap: 10px;
  align-items: start;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}
.checkout-check + .checkout-check { margin-top: 14px; }
.checkout-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary-dark); }
.checkout-check input:focus-visible { outline: 3px solid rgba(113,136,121,.26); outline-offset: 3px; }
.checkout-check.has-error { color: var(--rose-text); }
.checkout-check.has-error input { outline: 3px solid rgba(182,94,87,.15); outline-offset: 2px; }
.checkout-consent-list { display: grid; gap: 11px; margin-top: 2px; }
.checkout-consent-item { min-width: 0; }
.checkout-final-card .checkout-consent {
  min-height: 54px;
  padding: 13px 14px;
  border: 1px solid rgba(113,136,121,.22);
  border-radius: 15px;
  background: rgba(113,136,121,.045);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.checkout-final-card .checkout-consent input { width: 22px; height: 22px; margin-top: 1px; flex: 0 0 22px; }
.checkout-final-card .checkout-consent span { min-width: 0; }
.checkout-final-card .checkout-consent:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(113,136,121,.12);
}
.checkout-final-card .checkout-consent.has-error {
  border-color: rgba(182,94,87,.48);
  background: rgba(182,94,87,.055);
}
.consent-error { display: block; margin: 7px 14px 0 50px; }
@media (hover: hover) {
  .checkout-final-card .checkout-consent:hover {
    border-color: rgba(113,136,121,.42);
    background: rgba(113,136,121,.075);
  }
}
.checkout-shipping-card [data-shipping-fields] { margin-top: 18px; }
.checkout-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.checkout-payment-card {
  overflow: hidden;
  border-color: rgba(113,136,121,.32);
  background:
    radial-gradient(circle at 100% 0, rgba(113,136,121,.12), transparent 220px),
    var(--surface);
}
.checkout-payment-methods { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; }
.checkout-payment-methods span {
  padding: 7px 10px;
  border: 1px solid rgba(113,136,121,.24);
  border-radius: 999px;
  color: var(--primary-dark);
  background: rgba(113,136,121,.07);
  font-size: 11px;
  font-weight: 850;
}
.checkout-method-hint { margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.checkout-payment-secure {
  display: grid;
  grid-template-columns: 31px minmax(0,1fr);
  gap: 11px;
  align-items: start;
  margin-top: 17px;
  padding: 13px;
  border: 1px solid rgba(113,136,121,.2);
  border-radius: 16px;
  background: rgba(113,136,121,.07);
}
.checkout-payment-secure > span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 10px;
  color: white;
  background: var(--primary);
  font-weight: 900;
}
.checkout-payment-secure strong { font-size: 12px; }
.checkout-payment-secure p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.stripe-payment-shell {
  position: relative;
  min-height: 190px;
  margin-top: 17px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--page);
}
.stripe-payment-element { min-height: 110px; }
.stripe-payment-loading {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 150px;
  color: var(--muted);
  text-align: center;
}
.stripe-payment-loading[hidden] { display: none; }
.stripe-payment-loading p { margin: 0; font-size: 12px; }
.stripe-loader,
.checkout-button-loader {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(113,136,121,.24);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: checkout-spin .8s linear infinite;
}
.stripe-payment-error {
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(182,94,87,.32);
  border-radius: 13px;
  color: var(--rose-text);
  background: rgba(182,94,87,.06);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}
.stripe-payment-error[hidden] { display: none; }
@keyframes checkout-spin { to { transform: rotate(360deg); } }

.checkout-final-card h2 { margin: 8px 0 16px; font-family: Georgia, "Times New Roman", serif; font-size: 29px; font-weight: 500; }
.checkout-privacy-notice {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: 10px;
  align-items: start;
  margin-bottom: 16px;
  padding: 13px 14px;
  border: 1px solid rgba(113,136,121,.24);
  border-radius: 15px;
  background: rgba(113,136,121,.07);
}
.checkout-privacy-notice > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: white;
  background: var(--primary);
  font-size: 12px;
  font-weight: 900;
}
.checkout-privacy-notice p { margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.checkout-privacy-notice a,
.checkout-legal-copy a { color: var(--primary-dark); font-weight: 800; text-underline-offset: 3px; }
.checkout-legal-copy { margin: 17px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.checkout-final-total {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin-top: 19px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.checkout-final-total span { color: var(--muted); font-size: 13px; font-weight: 750; }
.checkout-final-total strong { font-family: Georgia, "Times New Roman", serif; font-size: 29px; font-weight: 600; }
.checkout-submit {
  position: relative;
  display: inline-flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  margin-top: 16px;
  overflow: hidden;
  font-size: 15px;
  letter-spacing: .01em;
}
.checkout-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.16), transparent 70%);
  transform: translateX(-110%);
  transition: transform .55s ease;
}
.checkout-submit:not(:disabled):hover::after { transform: translateX(110%); }
.checkout-submit:disabled { cursor: wait; opacity: .58; }
.checkout-button-loader { width: 18px; height: 18px; border-color: rgba(255,255,255,.35); border-top-color: white; }
.checkout-submit-note { margin: 10px 8px 0; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }

.checkout-summary { align-self: start; }
.checkout-summary h2 { margin: 9px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 32px; font-weight: 500; }
.checkout-summary-items { display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; }
.checkout-summary-items li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.checkout-summary-items div { display: grid; gap: 4px; }
.checkout-summary-items strong { font-size: 13px; }
.checkout-summary-items span { color: var(--muted); font-size: 12px; }
.checkout-summary-items b { white-space: nowrap; font-size: 13px; }
.checkout-summary dl,
.confirmation-order-summary dl { margin: 16px 0 0; }
.checkout-summary dl div,
.confirmation-order-summary dl div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.checkout-summary dt,
.confirmation-order-summary dt { color: var(--muted); font-size: 12px; }
.checkout-summary dd,
.confirmation-order-summary dd { margin: 0; font-size: 13px; font-weight: 800; }
.checkout-summary .checkout-summary-total { padding-top: 16px; }
.checkout-summary-total dt { color: var(--ink); font-weight: 800; }
.checkout-summary-total dd { font-size: 20px; }
.checkout-summary-tax { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.checkout-shipping-note,
.confirmation-test-note { margin-top: 18px; padding: 13px; border-radius: 15px; background: var(--primary-soft); }
.checkout-shipping-note strong,
.confirmation-test-note strong { font-size: 12px; }
.checkout-shipping-note p,
.confirmation-test-note p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.checkout-back { width: 100%; margin-top: 14px; text-decoration: none; }

.confirmation-main { min-height: 70vh; }
.confirmation-card { max-width: 780px; margin: 20px auto 0; text-align: center; box-shadow: var(--shadow); }
.confirmation-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 19px; color: white; background: var(--primary); font-size: 22px; font-weight: 900; }
.confirmation-card.is-error .confirmation-icon { background: var(--rose); }
.confirmation-card > p:not(.eyebrow) { max-width: 570px; margin: 16px auto 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.confirmation-test-note { max-width: 590px; margin-inline: auto; text-align: left; }
.confirmation-facts { display: grid; gap: 10px; max-width: 590px; margin: 22px auto 0; text-align: left; }
.confirmation-facts div { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.confirmation-facts dt { color: var(--muted); font-size: 11px; }
.confirmation-facts dd { margin: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 800; }
.confirmation-order-summary { max-width: 590px; margin: 24px auto 0; padding-top: 22px; border-top: 1px solid var(--line); text-align: left; }
.confirmation-order-summary h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 500; }
.confirmation-order-summary ul { margin: 13px 0 0; padding: 0; list-style: none; }
.confirmation-order-summary li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.confirmation-order-summary li strong { white-space: nowrap; }
.confirmation-actions { display: grid; gap: 10px; max-width: 590px; margin: 24px auto 0; }
.confirmation-actions a,
.confirmation-card > .primary-button { width: 100%; text-decoration: none; }

@media (min-width: 600px) {
  .checkout-main { width: min(100% - 40px, var(--content)); padding-top: 46px; }
  .checkout-card,
  .checkout-summary,
  .confirmation-card { padding: 26px; }
  .checkout-fields.two-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .checkout-fields .wide { grid-column: 1 / -1; }
  .confirmation-facts { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .confirmation-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 980px) {
  .checkout-layout { grid-template-columns: minmax(0,1fr) minmax(320px,390px); gap: clamp(28px,4vw,54px); align-items: start; }
  .checkout-summary { position: sticky; top: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .stripe-loader,
  .checkout-button-loader { animation-duration: 1.8s; }
  .checkout-submit::after { display: none; }
}

/* Stage 17 live checkout state */
.checkout-live-banner {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  gap: 12px;
  margin-top: 22px;
  padding: 14px;
  border: 1px solid rgba(113,136,121,.34);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(113,136,121,.13), rgba(255,252,247,.86));
}
.checkout-live-banner > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: var(--surface);
  background: var(--primary);
  font-size: 15px;
  font-weight: 900;
}
.checkout-live-banner strong { font-size: 13px; }
.checkout-live-banner p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.confirmation-live-note { max-width: 590px; margin: 18px auto 0; padding: 13px; border-radius: 15px; background: rgba(113,136,121,.11); text-align: left; }
.confirmation-live-note strong { font-size: 12px; }
.confirmation-live-note p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }


.checkout-digital-delivery-card{display:grid;gap:8px}.checkout-digital-delivery-card h2{margin:0}.checkout-digital-delivery-card p{margin:0}.checkout-digital-code{display:inline-flex;width:max-content;max-width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fbfaf8;font-weight:800;overflow-wrap:anywhere}

/* Stage 17.33B: gift voucher checkout. */
.checkout-voucher-covered{display:grid;grid-template-columns:38px minmax(0,1fr);gap:13px;align-items:start;padding:16px;border:1px solid rgba(113,136,121,.28);border-radius:17px;background:rgba(113,136,121,.09)}.checkout-voucher-covered>span{display:grid;width:36px;height:36px;place-items:center;border-radius:50%;color:#fff;background:var(--primary);font-weight:900}.checkout-voucher-covered strong{font-size:16px}.checkout-voucher-covered p{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.55}.checkout-summary-voucher{color:var(--primary-dark)}.confirmation-payable{padding-top:9px;border-top:1px solid var(--line);font-weight:850}

/* --- assets/css/overlays.css --- */
.modal, .drawer {
  position: fixed;
  z-index: 100;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  isolation: isolate;
  contain: layout paint;
}
.modal-backdrop, .drawer-backdrop {
  position: absolute;
  inset: 0;
  touch-action: none;
  background: rgba(44,35,29,.60);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transform: translateZ(0);
}
.modal-dialog {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100% - 28px));
  max-height: calc(100dvh - 30px);
  margin: 15px auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  padding: clamp(24px, 4vw, 42px);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 28px 90px rgba(35,27,22,.28);
}
.modal-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); background: var(--sand); font-size: 24px; }
.modal-dialog h2, .drawer-panel h2 { margin: 12px 0 0; font-family: Georgia, serif; font-size: clamp(34px, 5vw, 54px); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; }
.modal-lead { max-width: 640px; margin: 15px 0 24px; color: var(--muted); line-height: 1.58; }
.demo-functions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 22px; }
.demo-functions article { position: relative; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.75), rgba(245,238,231,.46)); }
.demo-functions article > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: var(--primary-dark); background: var(--surface); box-shadow: var(--shadow-soft); }
.demo-functions strong { font-size: 12px; }
.demo-functions p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.demo-functions small { position: absolute; top: 9px; right: 9px; color: var(--muted); font-size: 7px; font-weight: 800; }

.drawer-panel { position: absolute; z-index: 1; top: 0; right: 0; width: min(460px, 100%); height: 100%; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-gutter: stable; padding: 38px 26px; background: var(--surface); box-shadow: -20px 0 70px rgba(35,27,22,.23); }
.drawer-product { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 15px; margin-top: 25px; padding: 12px; border: 1px solid var(--line); border-radius: 20px; }
.drawer-product img { width: 110px; height: 110px; border-radius: 15px; object-fit: cover; }
.drawer-product div { align-self: center; }
.drawer-product small, .drawer-product strong, .drawer-product span { display: block; }
.drawer-product small, .drawer-digital small { color: var(--primary-dark); font-size: 8px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.drawer-product strong { margin-top: 6px; font-family: Georgia, serif; font-size: 20px; }
.drawer-product span { margin-top: 8px; font-size: 13px; font-weight: 800; }
.drawer-product .drawer-delivery { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; font-weight: 650; letter-spacing: 0; line-height: 1.35; text-transform: none; }
.drawer-digital { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 13px; margin-top: 12px; padding: 17px; border-radius: 20px; background: var(--primary-soft); }
.drawer-digital > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: var(--primary-dark); background: var(--surface); font-family: Georgia, serif; }
.drawer-digital strong { display: block; margin-top: 5px; font-size: 13px; }
.drawer-digital p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.drawer-note { margin: 18px 0; padding: 14px; border-radius: 15px; color: var(--muted); background: var(--sand); font-size: 10px; line-height: 1.5; }

.drawer-product { color: inherit; text-decoration: none; }

.drawer-actions { display: grid; gap: 9px; margin-top: 18px; }
.drawer-actions .primary-button,
.drawer-actions .secondary-button { min-height: 50px; text-decoration: none; }
.drawer-actions button:disabled { cursor: wait; opacity: .72; }
.drawer-cart-status { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 11px; align-items: start; margin-top: 18px; padding: 14px; border-radius: 16px; font-size: 11px; line-height: 1.5; }
.drawer-cart-status > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; font-weight: 900; }
.drawer-cart-status strong { display: block; font-size: 12px; }
.drawer-cart-status p { margin: 3px 0 0; }
.drawer-cart-status.is-success { color: var(--primary-dark); background: rgba(113,136,121,.13); }
.drawer-cart-status.is-success > span { color: #fff; background: var(--primary); }
.drawer-cart-status.is-error { color: #7b3934; background: rgba(182,94,87,.12); }
.drawer-cart-status.is-error > span { color: #fff; background: var(--rose); }
.drawer-actions.is-after-add { margin-top: 10px; }

/* --- assets/css/accessibility.css --- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

button, a, input, select, textarea { touch-action: manipulation; }
[aria-invalid="true"] { outline: 2px solid var(--rose); outline-offset: 4px; border-radius: 14px; }
[aria-busy="true"] { cursor: progress; }
[inert] { pointer-events: none; user-select: none; }

.legal-placeholder a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  color: var(--muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.legal-placeholder a:hover { color: var(--ink); }

@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; }
  .choice-card.is-selected,
  .emotion-card.is-selected,
  .handover-card.is-selected,
  .product-thumbnail.is-active { outline: 3px solid Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- assets/css/responsive.css --- */
/* Mobile-first layout corrections. Component files provide the visual system;
   this file defines the smallest layout first and only expands with min-width. */
:root { --radius-xl: 23px; }
body { font-size: 15px; }

.studio { width: calc(100% - 20px); margin-top: 70px; }
.studio-heading { align-items: flex-start; flex-direction: column; gap: 22px; margin-bottom: 20px; }
.studio-heading h2 { font-size: 42px; }
.studio-heading > div:first-child > p:last-child { font-size: 13px; }
.progress-box { width: 100%; flex-basis: auto; }
.step-tabs { gap: 5px; }
.step-tabs button { min-height: 44px; padding: 7px 4px; gap: 5px; border-radius: 13px; font-size: 9px; }
.step-tabs button span { width: 25px; height: 25px; font-size: 8px; }
.step-tabs button strong { display: none; }
.builder-panel { min-height: 0; padding: 22px 16px; }
.step-panel h3 { font-size: 34px; }
.step-intro { margin-bottom: 22px; font-size: 13px; }
.choice-grid, .emotion-grid, .handover-grid { grid-template-columns: 1fr; }
.choice-card { min-height: 88px; }
.emotion-card { min-height: 78px; }
.handover-card { min-height: 100px; }
.builder-nav { padding-top: 24px; }
.builder-nav .secondary-button, .builder-nav .primary-button { min-height: 48px; padding: 11px 17px; }

.final-recommendation, .recommended-product { grid-template-columns: 1fr; }
.recommended-image { min-height: 250px; max-height: 320px; }
.recommended-copy, .recommended-digital { padding: 18px; }
.section-label { align-items: flex-start; flex-direction: column; gap: 3px; }
.alternative-products, .digital-alternatives { grid-template-columns: 1fr; }

.how-section {
  grid-template-columns: 1fr;
  gap: 28px;
  width: calc(100% - 20px);
  margin-top: 76px;
  padding: 28px 18px;
  border-radius: 25px;
}
.how-copy h2, .product-showcase h2 { font-size: 42px; }
.how-steps article { padding: 15px; }
.product-showcase { width: calc(100% - 20px); margin-top: 76px; }
.footer { margin-top: 75px; }
.demo-functions { grid-template-columns: 1fr; }
.modal-dialog { max-height: calc(100dvh - 16px); margin: 8px auto; border-radius: 22px; }
.drawer-panel { padding: 34px 18px; padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)); }
.drawer-product { grid-template-columns: 92px minmax(0,1fr); }
.drawer-product img { width: 92px; height: 92px; }

@media (min-width: 381px) {
  .step-tabs button strong { display: inline; }
  .step-tabs button span { width: 21px; height: 21px; }
  .digital-alternatives { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (min-width: 641px) {
  :root { --radius-xl: 30px; }
  body { font-size: 16px; }
  .studio { width: min(var(--content), calc(100% - 40px)); margin-top: 98px; }
  .studio-heading { gap: 28px; margin-bottom: 28px; }
  .studio-heading h2 { font-size: clamp(40px, 5vw, 68px); }
  .studio-heading > div:first-child > p:last-child { font-size: inherit; }
  .step-tabs { gap: 10px; }
  .step-tabs button { min-height: 50px; padding: 9px 12px; gap: 9px; border-radius: 16px; font-size: 12px; }
  .step-tabs button span { width: 25px; height: 25px; font-size: 10px; }
  .builder-panel { min-height: 660px; padding: clamp(25px, 3.6vw, 48px); }
  .step-panel h3 { font-size: clamp(32px, 3.25vw, 48px); }
  .step-intro { margin-bottom: 28px; font-size: inherit; }
  .choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .emotion-grid, .handover-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .choice-card { min-height: 112px; }
  .emotion-card { min-height: 86px; }
  .handover-card { min-height: 122px; }
  .builder-nav { padding-top: 32px; }
  .builder-nav .secondary-button, .builder-nav .primary-button { min-height: initial; padding: 12px 20px; }

  .how-section { width: min(var(--content), calc(100% - 40px)); margin-top: 100px; padding: clamp(36px,5vw,70px); border-radius: 34px; }
  .how-copy h2, .product-showcase h2 { font-size: clamp(40px,5vw,68px); }
  .how-steps article { padding: 18px; }
  .product-showcase { width: min(var(--content), calc(100% - 40px)); margin-top: 108px; }
  .footer { margin-top: 110px; }
  .demo-functions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .modal-dialog { max-height: calc(100vh - 30px); margin: 15px auto; border-radius: 28px; }
  .drawer-panel { padding: 38px 26px; }
  .drawer-product { grid-template-columns: 110px minmax(0,1fr); }
  .drawer-product img { width: 110px; height: 110px; }

  .result-product { grid-template-columns: minmax(250px,.9fr) minmax(0,1.1fr); }
  .result-product-visual { aspect-ratio: auto; min-height: 430px; }
  .result-product-copy { padding: 28px; }
  .result-product-action { grid-template-columns: auto minmax(190px,auto); align-items: end; justify-content: space-between; }
  .result-product-action .primary-button { width: auto; }
  .section-label { align-items: baseline; flex-direction: row; justify-content: space-between; }
  .alternative-products { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (min-width: 901px) {
  .studio-heading { align-items: flex-end; flex-direction: row; gap: 36px; }
  .progress-box { width: auto; flex: 0 0 min(310px,31vw); }
  .how-section { grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap: clamp(36px,7vw,100px); margin-top: 118px; }
}

@media (min-width: 980px) {
  .studio-grid:not(.is-result) { grid-template-columns: minmax(0,1fr) 330px; gap: 20px; }
  .compact-recommendation { position: sticky; top: 92px; }
}

@media (min-width: 1040px) {
  .recommendation-result-panel { scroll-margin-top: 104px; }
  .final-recommendation { grid-template-columns: minmax(0,1.34fr) minmax(300px,.66fr); align-items: stretch; gap: 18px; }
  .result-product { grid-template-columns: minmax(285px,.92fr) minmax(0,1.08fr); }
  .result-product-visual { min-height: 510px; }
  .result-product-copy { display: flex; flex-direction: column; padding: 34px; }
  .result-product-action { margin-top: auto; }
  .result-digital { padding: 29px; }
  .result-digital h4 { font-size: 30px; }
  .remember-button { grid-column: 1 / -1; }
  .alternative-products, .digital-alternatives { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (min-width: 1101px) {
  .choice-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (min-width: 1240px) {
  .studio-grid:not(.is-result) { grid-template-columns: minmax(0,1fr) 360px; gap: 24px; }
}

@media (min-width: 1380px) {
  .result-product-visual { min-height: 550px; }
  .result-product-copy { padding: 38px; }
  .result-personal-reason { font-size: 14px; }
}


/* A phone can occasionally request a desktop viewport. Keep the advisor usable
   based on the physical coarse-pointer device instead of compressing desktop UI. */
@media (hover: none) and (pointer: coarse) and (max-device-width: 600px) {
  .studio { width: calc(100% - 20px); margin-top: 70px; }
  .studio-heading { align-items: flex-start; flex-direction: column; gap: 22px; margin-bottom: 20px; }
  .studio-heading h2 { font-size: 42px; }
  .progress-box { width: 100%; flex: 0 0 auto; }
  .step-tabs { gap: 5px; }
  .step-tabs button { min-height: 44px; padding: 7px 4px; gap: 5px; border-radius: 13px; font-size: 9px; }
  .step-tabs button span { width: 25px; height: 25px; font-size: 8px; }
  .step-tabs button strong { display: none; }
  .studio-grid:not(.is-result) { grid-template-columns: 1fr; gap: 16px; }
  .compact-recommendation { position: static; top: auto; }
  .builder-panel { min-height: 0; padding: 22px 16px; }
  .step-panel h3 { font-size: 34px; }
  .choice-grid, .emotion-grid, .handover-grid { grid-template-columns: 1fr; }
}

/* --- assets/css/typography-tuning.css --- */
/*
 * Central public typography tuning – Stage 17.25.
 *
 * All reading sizes use a fluid scale. Adjust only the min/max values below
 * to fine-tune the complete public interface without creating device-specific
 * jumps. Layout density remains responsive in the separate media blocks.
 */
:root {
  --type-page-base: clamp(16px, 0.16vw + 15.4px, 17px);
  --type-lead: clamp(17px, 0.34vw + 15.8px, 19px);
  --type-supporting: clamp(15px, 0.22vw + 14.2px, 16px);
  --type-small: clamp(14px, 0.16vw + 13.4px, 15px);
  --type-label: clamp(12px, 0.14vw + 11.5px, 13px);
  --type-micro: clamp(11px, 0.12vw + 10.5px, 12px);
  --type-card-title: clamp(18px, 0.34vw + 16.7px, 20px);
  --type-section-title: clamp(20px, 0.64vw + 17.7px, 25px);
  --type-price: clamp(16px, 0.28vw + 15px, 18px);
  --type-line-reading: 1.62;
  --type-line-compact: 1.46;

  --type-hero-caption-title: clamp(14px, 0.18vw + 13.3px, 15px);
  --type-hero-caption-copy: clamp(12px, 0.2vw + 11.2px, 14px);
  --type-hero-caption-icon: 34px;
  --type-hero-caption-padding-y: 11px;
  --type-hero-caption-padding-x: 13px;
  --type-trust-row: clamp(14px, 0.18vw + 13.3px, 15px);

  --type-choice-padding: 20px;
  --type-choice-gap: 14px;
  --type-choice-icon: 52px;

  --type-result-padding-y: 26px;
  --type-result-padding-x: 22px;
  --type-result-fact-padding: 14px;
  --type-alternative-thumb: 88px;
  --type-alternative-padding: 13px;
  --type-alternative-gap: 14px;
  --type-digital-columns: 1fr;
}

@media (min-width: 641px) {
  :root {
    --type-hero-caption-icon: 30px;
    --type-hero-caption-padding-y: 12px;
    --type-hero-caption-padding-x: 14px;

    --type-choice-padding: 18px;
    --type-choice-gap: 12px;
    --type-choice-icon: 46px;

    --type-result-padding-y: 23px;
    --type-result-padding-x: 20px;
    --type-result-fact-padding: 12px;
    --type-alternative-thumb: 76px;
    --type-alternative-padding: 11px;
    --type-alternative-gap: 12px;
    --type-digital-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  :root {
    --type-alternative-thumb: 72px;
    --type-digital-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Some mobile browsers expose an unusually wide layout viewport. Preserve
 * touch-friendly component density, but keep the same fluid type scale. */
@media (hover: none) and (pointer: coarse) and (max-device-width: 600px) {
  :root {
    --type-hero-caption-icon: 34px;
    --type-hero-caption-padding-y: 11px;
    --type-hero-caption-padding-x: 13px;
    --type-choice-padding: 20px;
    --type-choice-gap: 14px;
    --type-choice-icon: 52px;
    --type-result-padding-y: 26px;
    --type-result-padding-x: 22px;
    --type-result-fact-padding: 14px;
    --type-alternative-thumb: 88px;
    --type-alternative-padding: 13px;
    --type-alternative-gap: 14px;
    --type-digital-columns: 1fr;
  }
}

body { font-size: var(--type-page-base); }

/* Homepage hero and trust explanation. */
.hero-media-caption {
  grid-template-columns: var(--type-hero-caption-icon) minmax(0, 1fr);
  padding: var(--type-hero-caption-padding-y) var(--type-hero-caption-padding-x);
}
.hero-media-caption > span {
  width: var(--type-hero-caption-icon);
  height: var(--type-hero-caption-icon);
}
.hero-media-caption strong { font-size: var(--type-hero-caption-title); line-height: 1.3; }
.hero-media-caption small { font-size: var(--type-hero-caption-copy); line-height: var(--type-line-compact); }
.trust-row { font-size: var(--type-trust-row); line-height: var(--type-line-compact); }
.eyebrow,
.step-number,
.recommendation-kicker { font-size: var(--type-label); }
.hero-lead { font-size: var(--type-lead); line-height: var(--type-line-reading); }
.choice-later-note p { font-size: var(--type-supporting); line-height: var(--type-line-reading); }

/* Advisor questions. */
.studio-heading > div:first-child > p:last-child,
.step-intro { font-size: var(--type-page-base); line-height: var(--type-line-reading); }
.choice-card {
  grid-template-columns: var(--type-choice-icon) minmax(0, 1fr);
  gap: var(--type-choice-gap);
  padding: var(--type-choice-padding);
}
.choice-icon {
  width: var(--type-choice-icon);
  height: var(--type-choice-icon);
}
.choice-copy strong,
.emotion-card strong,
.handover-card strong { font-size: var(--type-card-title); line-height: 1.28; }
.choice-copy small,
.emotion-card small,
.handover-card small,
.freedom-note p { font-size: var(--type-supporting); line-height: var(--type-line-compact); }

/* Main recommendation. */
.result-product-copy { padding: var(--type-result-padding-y) var(--type-result-padding-x); }
.result-product-badge { font-size: var(--type-label); }
.result-confirmed-context { gap: 9px; margin-top: 16px; }
.result-confirmed-context > span { gap: 3px; padding: 9px 11px; }
.result-confirmed-context small { font-size: var(--type-micro); }
.result-confirmed-context strong { font-size: var(--type-supporting); line-height: 1.3; }
.result-personal-reason { font-size: var(--type-lead); line-height: var(--type-line-reading); }
.result-editorial { font-size: var(--type-page-base); line-height: var(--type-line-reading); }
.result-product-facts { gap: 10px; }
.result-product-facts > div { padding: var(--type-result-fact-padding); }
.result-product-facts dt,
.result-product-action > div small { font-size: var(--type-label); }
.result-product-facts dd { font-size: var(--type-page-base); line-height: 1.35; }
.result-product-action > div strong { font-size: 25px; }
.result-digital-badge { font-size: var(--type-label); }
.result-digital-reason { font-size: var(--type-page-base); line-height: var(--type-line-reading); }
.not-fixed strong { font-size: var(--type-supporting); }
.not-fixed p { font-size: var(--type-small); line-height: var(--type-line-reading); }

/* Alternative products and digital options. */
.section-label { gap: 6px; margin-bottom: 15px; }
.section-label strong { font-size: var(--type-section-title); line-height: 1.25; }
.section-label small { font-size: var(--type-supporting); }
.alternative-products,
.digital-alternatives {
  grid-template-columns: var(--type-digital-columns);
  gap: 12px;
}
.alternative-product {
  grid-template-columns: var(--type-alternative-thumb) minmax(0, 1fr) 22px;
  gap: var(--type-alternative-gap);
  padding: var(--type-alternative-padding);
}
.alternative-product img {
  width: var(--type-alternative-thumb);
  height: var(--type-alternative-thumb);
}
.alternative-product strong { font-size: var(--type-page-base); line-height: 1.3; }
.alternative-product small { font-size: var(--type-small); line-height: var(--type-line-compact); }
.alternative-product b { font-size: var(--type-price); }
.digital-alternative {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 0 12px;
  padding: 14px;
}
.digital-alternative > span { width: 48px; height: 48px; }
.digital-alternative strong { font-size: var(--type-page-base); line-height: 1.3; }
.digital-alternative small { font-size: var(--type-small); line-height: var(--type-line-compact); }
.digital-alternative b { font-size: var(--type-micro); }
.empty-note,
.loading-card,
.recommendation-error { font-size: var(--type-supporting); line-height: var(--type-line-reading); }

/* Product catalogue and product details. */
.catalog-hero > p:last-child,
.product-lead { font-size: var(--type-lead); line-height: var(--type-line-reading); }
.catalog-card-image > span,
.product-badge { font-size: var(--type-label); }
.catalog-card-copy > p,
.product-description-copy p,
.product-how-steps p,
.product-digital-grid p,
.product-digital-note,
.product-faq details p { font-size: var(--type-supporting); line-height: var(--type-line-reading); }
.catalog-card-copy > div a { font-size: var(--type-small); }
.catalog-card-copy strong,
.product-how-steps strong,
.product-digital-grid h3,
.product-faq summary { font-size: var(--type-page-base); }
.showcase-product figcaption strong { font-size: var(--type-page-base); }
.showcase-product figcaption small { font-size: var(--type-small); }
.showcase-product figcaption b { font-size: var(--type-price); }
.product-breadcrumb,
.product-gallery-counter { font-size: var(--type-small); }
.product-price-block small,
.product-availability small,
.product-facts dt { font-size: var(--type-small); }
.product-availability strong,
.product-facts dd,
.product-experience-note strong { font-size: var(--type-page-base); }
.product-experience-note p { font-size: var(--type-supporting); line-height: var(--type-line-reading); }
.related-products-grid strong { font-size: var(--type-page-base); }
.related-products-grid small { font-size: var(--type-small); }

/* Checkout text remains legally complete while becoming easier to scan. */
.checkout-intro > p:not(.eyebrow):not(.checkout-required-hint) { font-size: var(--type-lead); }
.checkout-required-hint,
.checkout-test-banner p,
.checkout-payment-notice p,
.checkout-section-copy,
.checkout-fields label,
.checkout-card > label:not(.checkout-check),
.field-error,
.checkout-privacy-notice p,
.checkout-legal-copy,
.checkout-submit-note { font-size: var(--type-small); line-height: var(--type-line-reading); }
.checkout-test-banner strong,
.checkout-payment-notice strong { font-size: var(--type-supporting); }
.checkout-check { font-size: var(--type-supporting); line-height: var(--type-line-reading); }

/* Footer is secondary, but legal and service links must remain comfortably readable. */
.footer-about p,
.footer-contact,
.footer-copyright,
.footer-links a,
.footer-contact a,
.footer-legal-shortcuts a { font-size: var(--type-small); }
.footer-group summary h2 { font-size: var(--type-supporting); }

/* --- assets/css/stage-17-24-polish.css --- */
/*
 * Stage 17.24 public UX polish.
 * Adjust the grouped variables to fine-tune action bars and recommendation
 * density without editing multiple component stylesheets.
 */
:root {
  --mobile-action-bar-max-width: 680px;
  --mobile-action-bar-gap: 10px;
  --mobile-action-bar-radius: 22px;
  --mobile-action-bar-side: 12px;
  --mobile-action-bar-bottom: 10px;
  --mobile-action-bar-shadow: 0 18px 52px rgba(54, 43, 35, .18);
  --alternative-reason-lines: 2;
}

/* Alternative recommendations remain fully clickable without looking like a
 * block of underlined text. Keyboard focus stays explicit. */
.alternative-product { color: inherit; text-decoration: none; }
.alternative-product strong,
.alternative-product small,
.alternative-product b,
.alternative-product i { text-decoration: none; }
.alternative-product small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--alternative-reason-lines);
}
.alternative-product:focus-visible { outline: 3px solid rgba(113, 136, 121, .28); outline-offset: 3px; }
@media (hover: hover) { .alternative-product:hover strong { text-decoration: underline; text-underline-offset: 4px; } }

/* Mobile-first advisor navigation. It appears only after a selection; desktop
 * restores the normal in-card navigation below. */
.builder-panel { padding-bottom: 112px; }
.builder-nav { display: none; }
.studio-mobile-nav[hidden] { display: none !important; }
.studio-mobile-nav {
  position: fixed;
  z-index: 85;
  left: 50%;
  bottom: calc(var(--mobile-action-bar-bottom) + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(92px, .66fr) minmax(0, 1.34fr);
  gap: var(--mobile-action-bar-gap);
  width: min(calc(100% - (var(--mobile-action-bar-side) * 2)), var(--mobile-action-bar-max-width));
  padding: 10px;
  border: 1px solid rgba(223, 213, 202, .92);
  border-radius: var(--mobile-action-bar-radius);
  background: rgba(255, 252, 247, .94);
  box-shadow: var(--mobile-action-bar-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translate(-50%, 14px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.studio-mobile-nav.is-visible { transform: translate(-50%, 0); opacity: 1; }
.studio-mobile-nav .secondary-button,
.studio-mobile-nav .primary-button { min-height: 50px; padding: 11px 14px; }
.studio-mobile-nav button:disabled { opacity: .48; }

/* Harmonious product titles and a purchase action that appears only after the
 * regular add-to-cart form has been passed. */
.product-summary h1,
.product-description h2,
.product-how h2,
.product-digital-options h2,
.product-faq h2,
.related-products h2 { text-wrap: balance; }
.mobile-purchase-bar[hidden] { display: none !important; }
.mobile-purchase-bar {
  position: fixed;
  z-index: 84;
  left: 50%;
  bottom: calc(var(--mobile-action-bar-bottom) + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(92px, .65fr) minmax(0, 1.35fr);
  gap: var(--mobile-action-bar-gap);
  align-items: center;
  width: min(calc(100% - (var(--mobile-action-bar-side) * 2)), var(--mobile-action-bar-max-width));
  padding: 10px;
  border: 1px solid rgba(223, 213, 202, .92);
  border-radius: var(--mobile-action-bar-radius);
  background: rgba(255, 252, 247, .95);
  box-shadow: var(--mobile-action-bar-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translate(-50%, 14px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.mobile-purchase-bar.is-visible { transform: translate(-50%, 0); opacity: 1; }
.mobile-purchase-price { min-width: 0; padding-left: 5px; }
.mobile-purchase-price small,
.mobile-purchase-price strong { display: block; }
.mobile-purchase-price small { color: var(--muted); font-size: 11px; font-weight: 800; }
.mobile-purchase-price strong { margin-top: 2px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.1; }
.mobile-purchase-bar .primary-button { width: 100%; min-height: 52px; padding-inline: 14px; }
body.has-mobile-purchase-bar { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

/* Legal confirmations keep the complete wording but establish a calmer visual
 * hierarchy: decision first, legal detail second. */
.checkout-consent-list { gap: 15px; }
.checkout-consent-copy { display: block; min-width: 0; }
.checkout-consent-copy > strong { display: block; color: var(--ink); font-size: 15px; font-weight: 800; line-height: 1.4; }
.checkout-consent-copy > span:not(.required-marker) { display: block; margin-top: 5px; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.58; }
.checkout-final-card .checkout-consent { padding: 15px; }
.checkout-final-card .checkout-consent.has-error .checkout-consent-copy > span { color: var(--rose-text); }
.consent-error { margin-top: 8px; }

@media (min-width: 700px) {
  .builder-panel { padding-bottom: clamp(25px, 3.6vw, 48px); }
  .builder-nav { display: flex; }
  .studio-mobile-nav,
  .mobile-purchase-bar { display: none !important; }
  body.has-mobile-purchase-bar { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-mobile-nav,
  .mobile-purchase-bar { transition: none; }
}

/* --- assets/css/stage-17-25-stability.css --- */
/*
 * Stage 17.25 – responsive stability and contrast polish.
 * Keep adjustments centralized so later fine-tuning remains predictable.
 */
:root {
  --muted-on-soft: #74665d;
  --header-action-size: 11px;
  --header-language-size: 11px;
}

/* Small navigation labels remain readable without visually enlarging the
 * header. Touch target sizes are unchanged. */
.outline-action { font-size: var(--header-action-size); }
.language-switch { font-size: var(--header-language-size); }
@media (min-width: 768px) {
  .language-switch { font-size: 12px; }
}
@media (hover: none) and (pointer: coarse) and (max-device-width: 600px) {
  .outline-action { font-size: var(--header-action-size); }
  .language-switch { font-size: var(--header-language-size); }
}

/* Sand and translucent surfaces need slightly stronger secondary text than a
 * pure white background. This remains softer than primary copy. */
.hero-media-caption small,
.choice-later-note p,
.freedom-note p,
.empty-note,
.loading-card,
.preview-neutral p,
.preview-loading p,
.not-fixed p,
.checkout-test-banner p,
.checkout-payment-notice p,
.footer-policy-summary,
.product-policy-note span { color: var(--muted-on-soft); }

/* Clear recovery state for a timed-out recommendation. */
.recommendation-error { display: grid; justify-items: start; gap: 8px; }
.recommendation-error strong { margin-bottom: 0; }
.recommendation-error .secondary-button { margin-top: 4px; min-height: 44px; }

/* --- assets/css/stage-17-26-resilience.css --- */
/* Stage 17.26: resilient data states, clearer purchase hierarchy and readable overlays. */
:root {
  --overlay-label-size: 12px;
  --overlay-supporting-size: 14px;
  --overlay-body-size: 15px;
  --overlay-product-title-size: 21px;
  --product-benefit-size: 14px;
  --degraded-notice-radius: 20px;
}

.studio-data-notice {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  gap: 14px;
  align-items: center;
  margin: 0 0 22px;
  padding: 15px;
  border: 1px solid color-mix(in srgb,var(--gold) 48%,var(--line));
  border-radius: var(--degraded-notice-radius);
  color: var(--ink);
  background: color-mix(in srgb,var(--sand) 82%,#fff);
}
.studio-data-notice[hidden] { display: none; }
.studio-data-notice > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--gold);
  font-weight: 900;
}
.studio-data-notice strong { display: block; font-size: 15px; }
.studio-data-notice p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.studio-data-notice a { grid-column: 2; justify-self: start; color: var(--primary-dark); font-size: 14px; font-weight: 800; text-underline-offset: 4px; }

/* Safe reduced-data mode never exposes placeholder prices or purchase actions. */
.is-degraded-data .result-product-action,
.is-degraded-data .alternative-products,
.is-degraded-data .drawer-actions,
.is-degraded-data [data-drawer-add] { display: none !important; }

.product-purchase-benefits {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.product-purchase-benefits li {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  gap: 9px;
  align-items: center;
  color: var(--ink);
  font-size: var(--product-benefit-size);
  font-weight: 700;
  line-height: 1.4;
}
.product-purchase-benefits span {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--primary);
  font-size: 12px;
}
.product-technical-details {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.product-technical-details summary {
  cursor: pointer;
  padding: 13px 32px 13px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
.product-technical-details dl { margin: 0 0 13px; }
.product-technical-details dl div { display: flex; justify-content: space-between; gap: 18px; }
.product-technical-details dt { color: var(--muted); font-size: 12px; }
.product-technical-details dd { margin: 0; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }

/* Overlay type is controlled here so later fine-tuning needs only these variables. */
.demo-functions strong { font-size: var(--overlay-supporting-size); }
.demo-functions p { font-size: var(--overlay-supporting-size); line-height: 1.5; }
.demo-functions small { font-size: var(--overlay-label-size); }
.drawer-product small,
.drawer-digital small { font-size: var(--overlay-label-size); letter-spacing: .08em; }
.drawer-product strong { font-size: var(--overlay-product-title-size); line-height: 1.15; }
.drawer-product span { font-size: var(--overlay-body-size); }
.drawer-product .drawer-delivery { font-size: var(--overlay-supporting-size); }
.drawer-digital strong { font-size: var(--overlay-body-size); }
.drawer-digital p,
.drawer-note { font-size: var(--overlay-supporting-size); line-height: 1.55; }
.drawer-cart-status { font-size: var(--overlay-supporting-size); }
.drawer-cart-status strong { font-size: var(--overlay-body-size); }
.demo-functions { grid-template-columns: 1fr; }
.demo-functions article { grid-template-columns: 48px minmax(0,1fr); padding: 16px; }
.drawer-panel { padding-inline: 20px; }

@media (min-width: 641px) {
  .studio-data-notice { grid-template-columns: 38px minmax(0,1fr) auto; padding: 16px 18px; }
  .studio-data-notice a { grid-column: auto; justify-self: end; white-space: nowrap; }
  .demo-functions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .demo-functions article { grid-template-columns: 44px minmax(0,1fr); padding: 14px; }
  .drawer-panel { padding-inline: 26px; }
}

@media (min-width: 700px) {
  .product-cart-form { margin-top: 20px; }
  .product-purchase-benefits { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  .product-purchase-benefits li { align-items: start; font-size: 13px; }
}

.studio-initial-loading {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  color: var(--muted);
  background: color-mix(in srgb,var(--sand) 58%,transparent);
  font-size: 14px;
  text-align: center;
}
.studio-noscript {
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.studio-noscript strong { font-size: 15px; }
.studio-noscript p { margin: 5px 0 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.studio-noscript a { color: var(--primary-dark); font-size: 14px; font-weight: 800; }

/* --- assets/css/stage-17-30-performance-conversion.css --- */
/* Stage 17.30: responsive media, checkout clarity and recoverable user flows. */

/* Advisor session restoration. */
.studio-resume-notice{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  margin:18px 0 24px;
  padding:17px 18px;
  border:1px solid rgba(113,136,121,.28);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,253,249,.98),rgba(240,235,226,.86));
  box-shadow:var(--shadow-soft);
}
.studio-resume-notice[hidden]{display:none!important}
.studio-resume-notice>div:first-child{min-width:0}
.studio-resume-notice strong{font-size:var(--type-card-title);line-height:1.25}
.studio-resume-notice p{margin:5px 0 0;color:var(--muted);font-size:var(--type-supporting);line-height:1.5}
.studio-resume-notice>div:last-child{display:flex;gap:9px;align-items:center}
.studio-resume-notice button{min-height:46px;white-space:nowrap}

/* Recoverable cart actions. */
.cart-undo-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:min(100%,760px);
  margin:20px 0 0;
  padding:13px 15px 13px 17px;
  border:1px solid rgba(113,136,121,.3);
  border-radius:16px;
  background:rgba(255,253,249,.94);
  box-shadow:var(--shadow-soft);
}
.cart-undo-banner>span{font-size:var(--type-supporting);font-weight:650}
.cart-undo-banner form{margin:0}
.cart-undo-banner button{min-height:42px;padding:8px 14px;border:1px solid var(--primary);border-radius:999px;color:var(--primary-dark);background:transparent;font:inherit;font-size:var(--type-small);font-weight:850;cursor:pointer}
.cart-undo-banner button:hover{background:rgba(113,136,121,.09)}
.cart-undo-banner button:focus-visible{outline:3px solid rgba(113,136,121,.25);outline-offset:2px}

/* Compact mobile checkout summary. The full server-side summary remains on desktop. */
.checkout-mobile-summary{display:none}
.checkout-order-essentials{
  margin-top:18px;
  padding:16px;
  border:1px solid rgba(113,136,121,.26);
  border-radius:18px;
  background:rgba(245,240,232,.58);
}
.checkout-order-essentials h3{margin:0;font-size:var(--type-card-title);line-height:1.3}
.checkout-order-essentials ul{display:grid;gap:0;margin:12px 0 0;padding:0;list-style:none}
.checkout-order-essentials li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid rgba(113,136,121,.16)}
.checkout-order-essentials li>div{display:grid;gap:3px;min-width:0}
.checkout-order-essentials li strong{font-size:var(--type-supporting);line-height:1.35}
.checkout-order-essentials li span,.checkout-order-essentials li small{color:var(--muted);font-size:var(--type-small);line-height:1.4}
.checkout-order-essentials li b{flex:none;font-size:var(--type-supporting);white-space:nowrap}
.checkout-order-essentials .checkout-essential-code{color:var(--primary-dark);font-weight:800}
.checkout-order-essentials dl{display:grid;gap:7px;margin:10px 0 0;padding-top:12px;border-top:1px solid rgba(113,136,121,.22)}
.checkout-order-essentials dl div{display:flex;justify-content:space-between;gap:18px}
.checkout-order-essentials dt{color:var(--muted);font-size:var(--type-small);font-weight:750}
.checkout-order-essentials dd{margin:0;font-size:var(--type-small);font-weight:800;text-align:right}
.checkout-order-essentials>p{margin:9px 0 0;color:var(--muted);font-size:var(--type-label);line-height:1.45}
.checkout-withdrawal-function-note{margin:12px 0 0;color:var(--muted);font-size:var(--type-small);line-height:1.55}
.checkout-withdrawal-function-note a{color:var(--primary-dark);font-weight:800;text-underline-offset:3px}

/* Responsive image variants are generated in the media area. */
.media-variant-status{display:block;color:#52685a;font-size:11px;font-weight:750;line-height:1.4}

@media(width <= 699px){
  .studio-resume-notice{grid-template-columns:1fr;gap:14px;padding:16px}
  .studio-resume-notice>div:last-child{display:grid;grid-template-columns:1fr 1fr}
  .studio-resume-notice button{width:100%;white-space:normal}
  .cart-undo-banner{margin-top:16px}
  .checkout-mobile-summary{display:block;margin:0 0 4px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-soft);overflow:hidden}
  .checkout-mobile-summary summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;padding:13px 16px;cursor:pointer;list-style:none}
  .checkout-mobile-summary summary::-webkit-details-marker{display:none}
  .checkout-mobile-summary summary>span:first-child{display:grid;gap:3px;min-width:0}
  .checkout-mobile-summary summary strong{font-size:var(--type-card-title);line-height:1.2}
  .checkout-mobile-summary summary small{color:var(--muted);font-size:var(--type-small)}
  .checkout-mobile-summary summary>span:last-child{flex:none;color:var(--primary-dark);font-size:var(--type-small);font-weight:850}
  .checkout-mobile-summary[open] summary{border-bottom:1px solid var(--line);background:rgba(245,240,232,.5)}
  .checkout-mobile-summary-body{padding:4px 16px 15px}
  .checkout-mobile-summary-body ul{margin:0;padding:0;list-style:none}
  .checkout-mobile-summary-body li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
  .checkout-mobile-summary-body li>div{display:grid;gap:2px;min-width:0}
  .checkout-mobile-summary-body li strong,.checkout-mobile-summary-body li b{font-size:var(--type-supporting)}
  .checkout-mobile-summary-body li small{color:var(--muted);font-size:var(--type-small);line-height:1.4}
  .checkout-mobile-summary-body dl{display:grid;gap:7px;margin:12px 0 0}
  .checkout-mobile-summary-body dl div{display:flex;justify-content:space-between;gap:18px}
  .checkout-mobile-summary-body dt,.checkout-mobile-summary-body dd{font-size:var(--type-small)}
  .checkout-mobile-summary-body dd{margin:0;font-weight:800}
  .checkout-mobile-summary-body p{margin:8px 0 0;color:var(--muted);font-size:var(--type-label)}
  .checkout-summary{display:none}
  .checkout-order-essentials{padding:14px}
}

@media(width <= 430px){
  .cart-undo-banner{align-items:stretch;flex-direction:column;gap:10px}
  .cart-undo-banner button{width:100%}
}
.checkout-order-essentials dl .checkout-essential-total{margin-top:4px;padding-top:9px;border-top:1px solid rgba(113,136,121,.24)}
.checkout-order-essentials dl .checkout-essential-total dt,.checkout-order-essentials dl .checkout-essential-total dd{color:var(--ink);font-size:var(--type-supporting)}

/* --- assets/css/stage-17-33-discounts.css --- */
/* Stage 17.33A: discount-code presentation. */
.discount-code-box{display:grid;gap:13px;margin:20px 0 0;padding:16px;border:1px solid rgba(113,136,121,.24);border-radius:18px;background:linear-gradient(145deg,rgba(113,136,121,.07),rgba(250,240,230,.48))}
.discount-code-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.discount-code-heading>div{min-width:0}.discount-code-heading strong{display:block;color:var(--ink);font-size:var(--type-supporting,15px)}.discount-code-heading p{margin:4px 0 0;color:var(--muted);font-size:var(--type-small,14px);line-height:1.5}.discount-code-heading>span{display:grid;flex:none;width:38px;height:38px;place-items:center;border-radius:13px;color:var(--primary-dark);background:rgba(255,255,255,.78);font:600 18px/1 Georgia,serif;box-shadow:var(--shadow-soft)}
.discount-code-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.discount-code-form input{min-width:0;height:46px;padding:0 13px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink);font-size:16px;font-weight:650;text-transform:uppercase;letter-spacing:.04em}.discount-code-form input:focus{border-color:var(--primary);outline:3px solid rgba(113,136,121,.16)}.discount-code-form button,.discount-applied button{min-height:46px;padding:0 16px;border:0;border-radius:13px;color:#fff;background:var(--primary-dark);font-size:14px;font-weight:800;cursor:pointer}.discount-code-form button:hover,.discount-applied button:hover{filter:brightness(.96)}
.discount-applied{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;border:1px solid rgba(113,136,121,.28);border-radius:15px;background:rgba(255,255,255,.76)}.discount-applied>div{display:grid;gap:2px;min-width:0}.discount-applied span,.discount-applied small{color:var(--muted);font-size:var(--type-small,14px)}.discount-applied strong{color:var(--primary-dark);font-size:17px;letter-spacing:.05em;overflow-wrap:anywhere}.discount-applied form{flex:none}.discount-applied button{min-height:40px;color:var(--primary-dark);background:rgba(113,136,121,.12)}
.discount-inline-error{margin:0;padding:10px 12px;border:1px solid rgba(182,94,87,.3);border-radius:12px;color:#7c3f3b;background:rgba(182,94,87,.08);font-size:var(--type-small,14px);line-height:1.5}.discount-code-note{color:var(--muted);font-size:var(--type-small,14px);line-height:1.5}.cart-summary-discount dd,.checkout-summary-discount dd{color:var(--primary-dark);font-weight:850}.checkout-discount-wrap{width:min(100%,760px);margin:0 auto 22px}.checkout-discount-wrap .discount-code-box{margin-top:0}
@media(width <= 480px){.discount-code-form{grid-template-columns:1fr}.discount-code-form button{width:100%}.discount-applied{align-items:flex-start}.discount-applied button{padding-inline:12px}.discount-code-heading>span{width:34px;height:34px}}

/* --- assets/css/stage-17-34-redemption.css --- */
/* Stage 17.34: compact shared discount / gift-voucher redemption. */
.checkout-flow-form{display:grid;gap:16px;min-width:0}

.redemption-code-panel{margin:14px 0 0;border:1px solid rgba(113,136,121,.26);border-radius:15px;background:rgba(255,252,247,.72);overflow:hidden}
.redemption-code-panel>summary{display:grid;grid-template-columns:30px minmax(0,1fr) 18px;gap:10px;align-items:center;min-height:52px;padding:10px 12px;cursor:pointer;list-style:none}
.redemption-code-panel>summary::-webkit-details-marker{display:none}
.redemption-code-panel>summary:focus-visible{outline:3px solid rgba(113,136,121,.28);outline-offset:-3px}
.redemption-code-icon{display:grid;width:30px;height:30px;place-items:center;border-radius:10px;color:var(--primary-dark);background:var(--primary-soft);font-size:16px;font-weight:900}
.redemption-code-summary-copy{display:grid;gap:2px;min-width:0}
.redemption-code-summary-copy strong{font-size:13px;line-height:1.25}
.redemption-code-summary-copy small{color:var(--muted);font-size:11px;line-height:1.3}
.redemption-code-chevron{color:var(--primary-dark);font-size:17px;font-weight:900;transition:transform .18s ease}
.redemption-code-panel[open] .redemption-code-chevron{transform:rotate(180deg)}
.redemption-code-panel[open]>summary{border-bottom:1px solid var(--line);background:rgba(113,136,121,.055)}
.redemption-code-body{display:grid;gap:11px;padding:12px}
.redemption-code-form{display:grid;grid-template-columns:1fr;gap:8px}
.redemption-code-form input{min-width:0;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);font:inherit;font-size:13px;text-transform:uppercase}
.redemption-code-form input:focus{border-color:var(--primary);outline:3px solid rgba(113,136,121,.15)}
.redemption-code-form button{width:100%;min-width:92px;height:44px;padding:0 14px;border:1px solid var(--primary);border-radius:11px;color:#fff;background:var(--primary);font:inherit;font-size:12px;font-weight:850;cursor:pointer}
.redemption-code-form button:hover{background:var(--primary-dark)}
.redemption-code-note{margin:0!important;color:var(--muted);font-size:11px!important;line-height:1.45!important}
.redemption-applied-list{display:grid;gap:8px}
.redemption-applied-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid rgba(113,136,121,.22);border-radius:12px;background:rgba(113,136,121,.065)}
.redemption-applied-row>div{display:grid;gap:2px;min-width:0}
.redemption-applied-row span{color:var(--muted);font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.06em}
.redemption-applied-row strong{overflow-wrap:anywhere;font-size:12px}
.redemption-applied-row small{color:var(--muted);font-size:10px;line-height:1.4}
.redemption-remove-button{padding:6px 8px;border:0;border-radius:9px;color:var(--primary-dark);background:transparent;font:inherit;font-size:11px;font-weight:850;cursor:pointer}
.redemption-remove-button:hover{background:rgba(113,136,121,.1)}
.cart-summary .redemption-code-panel{margin-top:14px}
.checkout-summary .redemption-code-panel{margin-top:14px}
.checkout-mobile-summary-body .redemption-code-panel{margin-top:13px}

@media (min-width:381px){
  .redemption-code-form{grid-template-columns:minmax(0,1fr) auto}
  .redemption-code-form button{width:auto}
}
@media (prefers-reduced-motion:reduce){.redemption-code-chevron{transition:none}}

/* --- assets/css/legacy-extensions.css --- */
/* Stage 16: electronic withdrawal function */
.withdrawal-function-page { background:linear-gradient(180deg,#faf0e6 0,#fffcf7 42%,#f4eee7 100%); }
.withdrawal-main { width:min(880px,calc(100% - 32px)); margin:0 auto; padding:56px 0 90px; }
.withdrawal-hero { text-align:center; max-width:700px; margin:0 auto 28px; }
.withdrawal-hero h1 { font-family:var(--font-display,Georgia,serif); font-size:clamp(2.4rem,8vw,4.6rem); line-height:.98; margin:.25em 0; color:#3f332b; }
.withdrawal-card { background:#fffcf7; border:1px solid #dfd5ca; border-radius:30px; box-shadow:0 22px 70px rgba(63,51,43,.09); padding:clamp(24px,5vw,48px); }
.withdrawal-card.is-success,.withdrawal-card.is-unavailable { text-align:center; }
.withdrawal-icon { display:grid; place-items:center; width:82px; height:82px; margin:0 auto 22px; border-radius:28px; background:#718879; color:#fff; font-size:2.2rem; font-weight:800; }
.withdrawal-card.is-unavailable .withdrawal-icon { background:#b65e57; }
.withdrawal-form { display:grid; gap:20px; margin-top:26px; }
.withdrawal-form label { display:grid; gap:8px; font-weight:700; }
.withdrawal-form input { width:100%; box-sizing:border-box; padding:15px 16px; border:1px solid #cfc4b8; border-radius:14px; background:#fff; color:#3f332b; font:inherit; }
.withdrawal-form input:focus { outline:3px solid rgba(113,136,121,.22); border-color:#718879; }
.withdrawal-form input[aria-invalid="true"] { border-color:#b65e57; background:#fff8f7; }
.withdrawal-form small { font-weight:400; color:#7d7067; }
.withdrawal-form .field-error { color:#9c433e; font-weight:700; }
.withdrawal-honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.withdrawal-privacy-note,.withdrawal-declaration,.withdrawal-mail-status { padding:18px 20px; border-radius:18px; background:#f5eee7; }
.withdrawal-privacy-note p,.withdrawal-declaration p,.withdrawal-mail-status p { margin:.35em 0 0; }
.withdrawal-mail-status.is-sent { background:#edf4ef; }
.withdrawal-mail-status.is-warning { background:#fff4cf; }
.withdrawal-facts { display:grid; gap:12px; margin:26px 0; text-align:left; }
.withdrawal-facts div { display:flex; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid #e6ddd4; }
.withdrawal-facts dt { color:#7d7067; }
.withdrawal-facts dd { margin:0; font-weight:800; text-align:right; overflow-wrap:anywhere; }
.withdrawal-confirm-form { margin:24px 0 12px; }
.withdrawal-confirm-button { width:100%; justify-content:center; }
.footer-withdrawal-action { display:inline-flex!important; align-items:center; gap:8px; padding:8px 13px; border:1px solid #718879; border-radius:999px; color:#52685a!important; font-weight:800; }
@media (max-width:600px){.withdrawal-main{width:min(100% - 20px,880px);padding-top:34px}.withdrawal-card{border-radius:24px;padding:24px 18px}.withdrawal-facts div{display:block}.withdrawal-facts dd{text-align:left;margin-top:4px}}


/* Stage 17.14: compact, accessible mobile footer accordion */
.footer { display:block; padding:52px 24px 24px; text-align:left; }
.footer-inner { width:min(var(--content-width,1240px),100%); margin:0 auto; display:grid; grid-template-columns:minmax(220px,1.15fr) minmax(420px,2fr) minmax(210px,.85fr); gap:42px; align-items:start; }
.footer-about { display:grid; gap:14px; }
.footer-brand { justify-self:start; }
.footer-about p,.footer-contact,.footer-copyright { color:var(--muted); font-size:12px; line-height:1.65; }
.footer-policy-summary { display:grid; gap:2px; padding:12px 14px; border:1px solid var(--line); border-radius:16px; color:var(--muted); background:var(--page); text-decoration:none; }
.footer-policy-summary strong { color:var(--ink); }
.footer-policy-summary:hover,.footer-policy-summary:focus-visible { border-color:var(--primary); color:var(--ink); }
.footer-policy-summary:focus-visible { outline:3px solid color-mix(in srgb,var(--primary) 28%,transparent); outline-offset:3px; }
.footer-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.footer-group { min-width:0; margin:0; }
.footer-group summary { list-style:none; }
.footer-group summary::-webkit-details-marker { display:none; }
.footer-group summary h2 { margin:0; color:var(--ink); font-size:12px; }
.footer-group-content { display:grid; justify-items:start; gap:10px; padding-top:14px; }
.footer-group-icon { display:none; }
.footer-links a,.footer-contact a,.footer-legal-shortcuts a { color:var(--muted); font-size:12px; text-decoration:none; }
.footer-links a:hover,.footer-contact a:hover,.footer-legal-shortcuts a:hover,.footer-links a[aria-current="page"],.footer-legal-shortcuts a[aria-current="page"] { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.footer-withdrawal-slot { grid-column:2; justify-self:start; }
.footer-contact { margin:0; display:flex; flex-direction:column; gap:4px; font-style:normal; }
.footer-contact strong { color:var(--ink); }
.footer-legal-shortcuts { display:none; }
.footer-copyright { width:min(var(--content-width,1240px),100%); margin:34px auto 0!important; padding-top:18px; border-top:1px solid var(--line); text-align:center; }
@media (min-width:641px){
  .footer-group summary { display:none; }
}
.legal-policy-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.legal-policy-grid div { padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--page); display:grid; gap:4px; }
.legal-policy-grid strong { color:var(--primary-dark); font:700 clamp(20px,3vw,30px)/1 var(--font-display,Georgia,serif); }
.legal-policy-grid span { color:var(--muted); font-size:12px; }
.product-policy-note { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.product-policy-note a { padding:13px 14px; border:1px solid var(--line); border-radius:16px; background:var(--surface); text-decoration:none; display:grid; gap:3px; }
.product-policy-note strong { color:var(--ink); font-size:12px; }
.product-policy-note span { color:var(--muted); font-size:11px; line-height:1.45; }
.checkout-payment-methods-generic { align-items:center; }
.checkout-payment-methods-generic span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--primary); color:#fff; }
.checkout-payment-methods-generic strong { font-size:13px; }
@media (max-width:900px){.footer-inner{grid-template-columns:1fr 1.5fr}.footer-contact{grid-column:1/-1}.footer-links{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .footer{padding:42px 20px 22px}
  .footer-inner{grid-template-columns:1fr;gap:24px}
  .footer-links{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
  .footer-group{border-bottom:1px solid var(--line)}
  .footer-group summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .footer-group summary:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 30%,transparent);outline-offset:3px;border-radius:10px}
  .footer-group summary h2{font-size:13px}
  .footer-group-icon{position:relative;display:block;width:18px;height:18px;flex:0 0 18px}
  .footer-group-icon::before,.footer-group-icon::after{content:"";position:absolute;top:8px;left:3px;width:12px;height:2px;border-radius:2px;background:var(--primary-dark);transition:transform .2s ease}
  .footer-group-icon::after{transform:rotate(90deg)}
  .footer-group[open] .footer-group-icon::after{transform:rotate(0)}
  .footer-group-content{gap:12px;padding:0 0 18px}
  .footer-group:not([open])>.footer-group-content{display:none}
  .footer-withdrawal-slot{grid-column:1;justify-self:start;margin-top:20px}
  .footer-withdrawal-action{padding:10px 15px}
  .footer-contact{grid-column:auto}
  .footer-legal-shortcuts{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:-8px}
  .footer-legal-shortcuts a{font-size:11px}
  .legal-policy-grid,.product-policy-note{grid-template-columns:1fr}
  .legal-tabs{overflow-x:auto;justify-content:flex-start;scrollbar-width:thin}
  .legal-tabs a{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){.footer-group-icon::before,.footer-group-icon::after{transition:none}}