/* =========================================================================
   ALATIA — Boutique custom-hampers brand
   Design system: warm neutrals, feminine-premium, generous whitespace.
   One stylesheet, tiny footprint, mobile-first.
   ========================================================================= */

/* ---------- Fonts (self-hosted) ----------
   Served from our own origin so first paint costs no extra DNS + TLS +
   round-trip to fonts.googleapis.com/fonts.gstatic.com. Both families are
   variable, so one file covers the whole weight range we use.
   Refresh with: scripts/fetch_fonts.sh
   ------------------------------------------ */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design tokens ---------- */
:root {
  /* Palette — warm neutrals + soft accents */
  --cream:      #FAF5EC;
  --cream-2:    #F4ECDD;
  --sand:       #EFE6D5;
  --paper:      #FFFDF9;
  --ink:        #33291F;   /* warm espresso text */
  --ink-2:      #6E6153;   /* muted */
  --ink-3:      #736657;   /* faint labels (AA ~4.5:1 on cream) */
  --clay:       #B26B4C;   /* accent (large text / decorative only) */
  --clay-deep:  #8F5236;   /* small text + CTA — AA (>=4.9:1) on every surface below */
  --clay-deeper:#7E4930;   /* CTA hover */
  --clay-soft:  #E9D3C6;   /* fills & rings only — far too light for text */
  --clay-num:   #A67256;   /* big decorative numerals — AA large-text (>=3.2:1) */
  --sage:       #808B6B;
  --sage-deep:  #5F6A4C;
  --gold:       #B79A6A;
  --blush:      #E4C6BE;
  --line:       #E7DBC7;   /* borders */
  --line-soft:  #F0E7D7;
  --wa:         #2E7D5B;   /* refined whatsapp green */
  --wa-deep:    #256648;

  /* Type */
  --serif: "Fraunces", "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:  "Jost", "Century Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing / radius / shadow */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(63, 48, 33, .06);
  --shadow:    0 10px 34px -14px rgba(63, 48, 33, .22);
  --shadow-lg: 0 30px 70px -30px rgba(63, 48, 33, .40);
  --maxw: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
/* <picture> is a pure container — let the <img> inherit the media box's own
   layout rules (position:absolute; inset:0) instead of nesting a second box. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--clay-deep); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: -.01em; color: var(--ink); }
.display { font-size: clamp(2.4rem, 6.5vw, 4.4rem); font-weight: 400; letter-spacing: -.02em; }
h2.section-title { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.eyebrow {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--clay-deep);
  display: inline-block;
}
.lede { font-size: clamp(1.05rem, 1.8vw, 1.28rem); color: var(--ink-2); line-height: 1.6; }
.muted { color: var(--ink-2); }
.serif-accent { font-family: var(--serif); font-style: italic; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-head { max-width: 46rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.bg-sand { background: var(--sand); }
.bg-cream2 { background: var(--cream-2); }
.bg-paper { background: var(--paper); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.6rem; border-radius: var(--r-pill);
  font-weight: 500; font-size: .98rem; letter-spacing: .01em;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s;
  text-align: center; line-height: 1.1;
}
/* Only the header CTAs are held on one line — they sit in a tight row next to
   the wordmark and hamburger. Forcing nowrap on every button made a long label
   like "Diskusikan Kebutuhan Anda" wider than a 300px phone. */
.nav-cta .btn { white-space: nowrap; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: var(--clay-deep); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--clay-deeper); box-shadow: var(--shadow); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--clay); color: var(--clay-deep); background: #fff; }
.btn--dark { background: var(--ink); color: var(--cream); }
.btn--dark:hover { background: #241d16; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--wa { background: var(--wa); color: #fff; box-shadow: var(--shadow-sm); }
.btn--wa:hover { background: var(--wa-deep); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--wa-outline { background: #fff; color: var(--wa-deep); border: 1.5px solid var(--wa); }
.btn--wa-outline:hover { background: var(--wa); color: #fff; }
.btn--sm { padding: .6rem 1.05rem; font-size: .86rem; }
.btn--block { width: 100%; justify-content: center; }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.04rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.site-header.scrolled { border-color: var(--line); background: color-mix(in srgb, var(--cream) 92%, transparent); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 68px; }
.brand { font-family: var(--serif); font-size: 1.65rem; font-weight: 500; letter-spacing: .04em; color: var(--ink); display: inline-flex; align-items: center; gap: .5rem; }
.brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--clay); display: inline-block; margin-bottom: .15em; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; }
.nav-links a { font-size: .95rem; color: var(--ink-2); font-weight: 400; position: relative; transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1.5px; width: 0; background: var(--clay); transition: width .25s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: .7rem; }
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; }
.nav-toggle span { position: relative; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s var(--ease); }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
body.menu-open .nav-toggle span { background: transparent; }
body.menu-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.menu-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--cream); padding: .5rem 1.2rem 1.6rem; align-items: stretch;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .28s var(--ease), opacity .28s var(--ease), visibility .28s;
  }
  body.menu-open .nav-links { transform: translateY(0); opacity: 1; pointer-events: auto; visibility: visible; }
  .nav-links a { padding: .95rem .2rem; border-bottom: 1px solid var(--line-soft); font-size: 1.05rem; }
  .nav-links a::after { display: none; }
  .nav-cta .btn:not(.nav-cta__primary) { display: none; }
}

/* Narrow phones: the header CTA + hamburger + wordmark must share ~340px of
   usable width without the button wrapping onto a second line. */
@media (max-width: 430px) {
  .nav { height: 62px; gap: .5rem; }
  .brand { font-size: 1.42rem; gap: .38rem; }
  .nav-cta { gap: .25rem; }
  .nav-cta .btn--sm { padding: .55rem .8rem; font-size: .8rem; }
  .nav-toggle { width: 44px; height: 44px; margin-right: -.5rem; }
  .nav-links { inset-block-start: 62px; }
}

/* Folded Galaxy Fold and similar (~280px): the wordmark, a CTA and the
   hamburger can't share the row. Drop the header CTA — every page already
   carries the same action in its hero, and the menu covers navigation. */
@media (max-width: 319px) {
  .nav-cta__primary { display: none; }
  .brand { font-size: 1.3rem; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero-copy { max-width: 34rem; }
.hero-copy .display { margin: .6rem 0 1.1rem; }
.hero-copy .display em { font-style: italic; color: var(--clay); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.8rem; }
.hero-meta { display: flex; gap: 1.8rem; margin-top: 2.2rem; flex-wrap: wrap; }
.hero-meta .stat { display: flex; flex-direction: column; }
.hero-meta .stat b { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; color: var(--ink); line-height: 1; }
.hero-meta .stat span { font-size: .8rem; color: var(--ink-2); margin-top: .35rem; letter-spacing: .02em; }
.hero-figure { position: relative; }
.hero-media { position: relative; aspect-ratio: 16/10; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--cream-2); }
/* descendant, not child: the <img> sits inside a <picture> wrapper */
.hero-media .ph, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-figure .badge {
  position: absolute; left: -14px; bottom: 22px; background: var(--paper); color: var(--ink);
  padding: .8rem 1.1rem; border-radius: var(--r); box-shadow: var(--shadow); font-size: .82rem; max-width: 15rem;
  border: 1px solid var(--line); display: flex; gap: .6rem; align-items: center;
}
.hero-figure .badge .ic { width: 34px; height: 34px; border-radius: 50%; background: var(--clay-soft); color: var(--clay-deep); display: grid; place-items: center; flex: none; }
.hero-figure .badge b { font-family: var(--serif); font-size: .98rem; display: block; }
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-figure { order: -1; }
  .hero-media { aspect-ratio: 4/3; }
  /* the desktop badge hangs off the left edge; on a phone that overhang would
     sit outside the viewport, so pull it back inside the frame */
  .hero-figure .badge { left: 12px; }
}
/* On a phone the badge was covering roughly a third of the hero art. Reflow it
   into a slim caption bar pinned to the bottom edge instead. */
@media (max-width: 560px) {
  .hero-inner { padding-block: 1.25rem 2rem; gap: 1.25rem; }
  .hero-figure .badge {
    left: 10px; right: 10px; bottom: 10px; max-width: none;
    padding: .5rem .7rem; gap: .55rem; font-size: .72rem; line-height: 1.35;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .hero-figure .badge .ic { width: 28px; height: 28px; }
  .hero-figure .badge .ic svg { width: 15px; height: 15px; }
  .hero-figure .badge b { font-size: .84rem; line-height: 1.25; }
}

/* ---------- Category strip ---------- */
.cat-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem; }
.cat-card { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/5; display: block; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s; }
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cat-card img, .cat-card .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cat-card:hover img { transform: scale(1.06); }
.cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(40,30,20,.72) 0%, rgba(40,30,20,.15) 45%, transparent 75%); }
.cat-card .label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; color: #fff; padding: .9rem .85rem; font-family: var(--serif); font-size: 1.02rem; line-height: 1.15; text-align: center; }
@media (max-width: 900px) { .cat-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .cat-strip { grid-template-columns: repeat(2, 1fr); gap: .6rem; } .cat-card .label { font-size: .92rem; } }

/* ---------- Momen list (long-tail occasions) ---------- */
.moments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2rem; }
@media (max-width: 820px) { .moments { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .moments { grid-template-columns: 1fr; } }
.moment { padding: 1.05rem 0 1.15rem; border-top: 1px solid var(--line); }
.moment :is(h2, h3) { font-size: 1.06rem; margin-bottom: .2rem; }
.moment a:hover { color: var(--clay-deep); }
.moment p { font-size: .89rem; color: var(--ink-2); line-height: 1.55; }

/* ---------- Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; align-items: flex-end; margin-bottom: 2rem; padding: 1.3rem 1.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.filter-group { display: flex; flex-direction: column; gap: .55rem; }
.filter-group > span { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  padding: .5rem .95rem; border-radius: var(--r-pill); border: 1.5px solid var(--line);
  font-size: .86rem; color: var(--ink-2); background: #fff; transition: .2s var(--ease); white-space: nowrap;
}
.chip:hover { border-color: var(--clay); color: var(--clay-deep); }
.chip.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.filter-reset { margin-left: auto; align-self: center; font-size: .85rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.filter-reset:hover { color: var(--clay-deep); }
.catalog-count { font-size: .9rem; color: var(--ink-2); margin-bottom: 1.2rem; }

/* ---------- Catalog grid + cards ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card-media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--cream-2); }
.card-media img, .card-media .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-tags { position: absolute; top: .7rem; left: .7rem; display: flex; gap: .35rem; flex-wrap: wrap; z-index: 2; }
.tag { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; padding: .3rem .55rem; border-radius: var(--r-pill); background: rgba(255,253,249,.94); color: var(--clay-deep); box-shadow: var(--shadow-sm); }
.tag.sage { color: var(--sage-deep); }
.card-body { padding: 1.15rem 1.15rem 1.3rem; display: flex; flex-direction: column; flex: 1; gap: .5rem; }
.card-body h3 { font-size: 1.28rem; }
.card-price { font-family: var(--serif); font-size: 1.15rem; color: var(--clay-deep); font-weight: 500; }
.card-short { font-size: .92rem; color: var(--ink-2); line-height: 1.55; flex: 1; }
.card-actions { display: flex; gap: .55rem; margin-top: .5rem; }
.card-actions .btn { flex: 1; }

/* image placeholder fallback (no generated image) */
.ph {
  background:
    radial-gradient(120% 90% at 30% 20%, var(--clay-soft) 0%, transparent 55%),
    radial-gradient(120% 90% at 80% 90%, #dfe3cf 0%, transparent 55%),
    linear-gradient(135deg, var(--cream-2), var(--sand));
  display: grid; place-items: center; color: var(--clay-deep);
}
.ph::after { content: attr(data-ph); font-family: var(--serif); font-style: italic; font-size: 1rem; opacity: .55; padding: 1rem; text-align: center; }
.ph--mini::after { font-size: .8rem; }

/* ---------- Modal (product detail) ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(40,30,20,.5); backdrop-filter: blur(3px); animation: fade .3s var(--ease); }
.modal-panel {
  position: absolute; inset: auto 0 0 0; margin-inline: auto; width: min(100%, 860px);
  max-height: 92vh; overflow-y: auto; background: var(--cream); border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-lg); animation: slideUp .4s var(--ease);
}
@media (min-width: 720px) {
  .modal { display: none; place-items: center; padding: 2rem; }
  .modal.open { display: grid; }
  .modal-panel { position: relative; inset: auto; border-radius: var(--r-lg); max-height: 88vh; }
}
.modal-close { position: absolute; top: .9rem; right: .9rem; z-index: 3; width: 42px; height: 42px; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow-sm); display: grid; place-items: center; font-size: 1.3rem; color: var(--ink); border: 1px solid var(--line); }
.modal-close:hover { background: #fff; color: var(--clay-deep); }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 719px) { .modal-grid { grid-template-columns: 1fr; } }
.modal-media { position: relative; min-height: 260px; background: var(--cream-2); }
.modal-media img, .modal-media .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 719px) { .modal-media { aspect-ratio: 4/3; min-height: 0; } }
.modal-info { padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: .8rem; }
.modal-info h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.modal-info .card-price { font-size: 1.35rem; }
.modal-contents { margin: .3rem 0 .4rem; }
.modal-contents li { position: relative; padding-left: 1.5rem; margin-bottom: .45rem; font-size: .95rem; color: var(--ink); }
.modal-contents li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.modal-pack { font-size: .9rem; color: var(--ink-2); padding: .8rem 1rem; background: var(--cream-2); border-radius: var(--r-sm); border: 1px solid var(--line); }
.modal-actions { display: flex; gap: .6rem; margin-top: .4rem; flex-wrap: wrap; }
.modal-actions .btn { flex: 1; min-width: 46%; }

/* ---------- "Cara Pesan" steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; counter-reset: step; }
@media (max-width: 820px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 1.6rem 1.3rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); position: relative; }
.step .num { font-family: var(--serif); font-size: 2.2rem; color: var(--clay-num); line-height: 1; margin-bottom: .5rem; }
.step .ic { width: 46px; height: 46px; border-radius: 50%; background: var(--cream-2); color: var(--clay-deep); display: grid; place-items: center; margin-bottom: .9rem; }
.step h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.step p { font-size: .92rem; color: var(--ink-2); }

/* ---------- Split feature (tentang / lifestyle) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.split.rev .split-media { order: 2; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split.rev .split-media { order: -1; } }
.split-media { position: relative; aspect-ratio: 3/2; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--cream-2); }
.split-media img, .split-media .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-copy p { color: var(--ink-2); margin-bottom: 1rem; }
.split-copy p:last-child { margin-bottom: 0; }
.values { display: grid; gap: 1rem; margin-top: 1.6rem; }
.value { display: flex; gap: .9rem; }
.value .ic { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--cream-2); color: var(--clay-deep); display: grid; place-items: center; }
.value b { font-family: var(--serif); font-weight: 500; font-size: 1.08rem; display: block; }
.value span { font-size: .9rem; color: var(--ink-2); }

/* ---------- Corporate teaser band ---------- */
.band { background: var(--ink); color: var(--cream); border-radius: var(--r-lg); overflow: hidden; }
.band-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(2rem, 5vw, 3.5rem); }
.band-inner > * { min-width: 0; }   /* see .cfg-layout — grid items don't shrink by default */
@media (max-width: 820px) { .band-inner { grid-template-columns: 1fr; } }
.band h2 { color: #fff; }
.band .eyebrow { color: var(--blush); }
.band p { color: color-mix(in srgb, var(--cream) 78%, transparent); margin: .9rem 0 1.6rem; }
.band-media { position: relative; aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden; background: color-mix(in srgb, var(--cream-2) 30%, transparent); }
.band-media img, .band-media .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band ul.ticks { display: grid; gap: .55rem; margin: 1rem 0 1.6rem; }
.band ul.ticks li { padding-left: 1.7rem; position: relative; color: color-mix(in srgb, var(--cream) 85%, transparent); font-size: .95rem; }
.band ul.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--blush); font-weight: 700; }

/* ---------- FAQ accordion ---------- */
.faq { max-width: 50rem; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem .2rem; font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.faq-q .plus { flex: none; width: 26px; height: 26px; position: relative; transition: transform .3s var(--ease); }
.faq-q .plus::before, .faq-q .plus::after { content: ""; position: absolute; background: var(--clay); border-radius: 2px; }
.faq-q .plus::before { top: 50%; left: 3px; right: 3px; height: 2px; transform: translateY(-50%); }
.faq-q .plus::after { left: 50%; top: 3px; bottom: 3px; width: 2px; transform: translateX(-50%); transition: opacity .3s; }
.faq-item.open .faq-q .plus { transform: rotate(90deg); }
.faq-item.open .faq-q .plus::after { opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .35s var(--ease), visibility .35s; }
.faq-item.open .faq-a { visibility: visible; }
.faq-a-inner { padding: 0 .2rem 1.3rem; color: var(--ink-2); font-size: .97rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--cream-2); border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; } }
/* h2, not h4: these are top-level footer sections. Sized down visually, but
   the level has to keep the document's heading order unbroken. */
.footer-grid h2 { font-family: var(--sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .9rem; font-weight: 600; }
.footer-grid a { color: var(--ink-2); font-size: .95rem; display: inline-block; padding: .2rem 0; }
.footer-grid a:hover { color: var(--clay-deep); }
.footer-brand .brand { font-size: 1.9rem; }
.footer-brand p { color: var(--ink-2); font-size: .95rem; margin: .7rem 0 1.1rem; max-width: 24rem; }
.social { display: flex; gap: .55rem; }
.social a {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper);
  display: grid; place-items: center; color: var(--ink-2);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
/* the brand glyphs are solid marks — give them room to read, and never let the
   reset's max-width:100% stretch them to the full 44px puck */
.social a svg { width: 19px; height: 19px; }
.social a:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: translateY(-2px); }
.footer-base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-3); }

/* ---------- Floating WA button ---------- */
.wa-float {
  position: fixed; z-index: 55;
  right: calc(22px + env(safe-area-inset-right, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--wa); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 28px -8px rgba(37, 102, 72, .5), 0 0 0 4px rgba(255, 253, 249, .55);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.wa-float:hover { transform: scale(1.06); background: var(--wa-deep); }
.wa-float svg { width: 28px; height: 28px; }
/* Phones: smaller puck, tighter to the corner but still clear of the edge and
   of the iOS home indicator. */
@media (max-width: 560px) {
  .wa-float {
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 48px; height: 48px;
    box-shadow: 0 8px 20px -6px rgba(37, 102, 72, .5), 0 0 0 3px rgba(255, 253, 249, .55);
  }
  .wa-float svg { width: 24px; height: 24px; }
  /* keep the last line of footer copy from sitting underneath the puck */
  .site-footer { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Touch ergonomics ----------
   On a finger-driven screen every control gets at least a 44px hit area (WCAG
   2.5.5). Sizes stay compact on mouse-driven screens, where precision is not
   the constraint. */
@media (pointer: coarse) {
  .btn { min-height: 48px; }
  .btn--sm { min-height: 44px; padding-block: .7rem; }
  .chip { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 1.05rem; }
  .ribbon { min-height: 48px; }
  .item { min-height: 52px; }
  .filter-reset { min-height: 44px; display: inline-flex; align-items: center; }
  .faq-q { min-height: 56px; }
  .nav-links a { min-height: 48px; display: flex; align-items: center; }
  .footer-grid a { padding-block: .5rem; }
  /* progress dots are indicators, not controls — they don't need a tap target,
     and enlarging them is what made the row overflow narrow phones */
}

/* ---------- Reveal on scroll ---------- */
/* Motion only — no opacity ramp. Fading text in means that on a slow phone
   there is a real window where copy sits at 2:1 against its background, which
   is both unreadable and an accessibility failure. Sliding keeps the reveal
   without ever making the words hard to read. */
.reveal { transform: translateY(22px); transition: transform .7s var(--ease); }
.reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { transform: none; } }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(30px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---------- Utilities ---------- */
.center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.divider-leaf { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--clay); margin: 0 auto; }
.divider-leaf::before, .divider-leaf::after { content: ""; height: 1px; width: 60px; background: var(--line); }

/* =========================================================================
   CONFIGURATOR — the centerpiece
   ========================================================================= */
.cfg-hero { padding-block: clamp(1.8rem, 4vw, 2.8rem); }

.cfg-layout { display: grid; grid-template-columns: 1fr 340px; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
/* Grid items default to min-width:auto, so a child that refuses to wrap — the
   progress row — sets a floor for the whole column and pushes the page wider
   than the viewport. min-width:0 lets the track shrink as intended. */
.cfg-layout > * { min-width: 0; }
@media (max-width: 900px) { .cfg-layout { grid-template-columns: 1fr; } }

/* Progress bar — min-height holds its row before JS renders the nodes */
.cfg-progress { display: flex; align-items: center; gap: .4rem; margin-bottom: 1.8rem; min-height: 30px; }
.cfg-progress .node { display: flex; align-items: center; gap: .4rem; flex: none; }
.cfg-progress .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; font-weight: 600; background: #fff; border: 1.5px solid var(--line); color: var(--ink-3); transition: .3s var(--ease); }
.cfg-progress .node.active .dot { background: var(--clay); border-color: var(--clay); color: #fff; }
.cfg-progress .node.done .dot { background: var(--sage); border-color: var(--sage); color: #fff; }
.cfg-progress .lbl { font-size: .82rem; color: var(--ink-2); white-space: nowrap; }
.cfg-progress .node:not(.active) .lbl { display: none; }
.cfg-progress .bar { flex: 1; height: 2px; background: var(--line); min-width: 12px; }
.cfg-progress .node.done + .bar { background: var(--sage); }
@media (min-width: 620px) { .cfg-progress .node .lbl { display: inline; } }
/* Small phones (down to ~300px): tighten the row so five steps plus the current
   step's label still fit on one line without clipping. */
@media (max-width: 430px) {
  .cfg-progress { gap: .3rem; }
  .cfg-progress .node { gap: .3rem; }
  .cfg-progress .dot { width: 26px; height: 26px; font-size: .78rem; border-width: 1.2px; }
  .cfg-progress .bar { min-width: 4px; }
  .cfg-progress .lbl { font-size: .76rem; }
}
@media (max-width: 340px) {
  .cfg-progress .lbl { display: none; }   /* below this the dots alone have to do */
}

/* Steps */
.cfg-step { display: none; animation: fade .35s var(--ease); }
.cfg-step.active { display: block; }
.cfg-step > h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .35rem; }
.cfg-step > .sub { color: var(--ink-2); margin-bottom: 1.5rem; font-size: .98rem; }

/* Option cards (occasion, box, ribbon) */
.opt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.opt-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .opt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .opt-grid { grid-template-columns: 1fr; } }
.opt {
  position: relative; border: 1.5px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--paper); cursor: pointer; transition: .22s var(--ease); text-align: left; display: flex; flex-direction: column;
  /* real cards are <button>s and skeletons are <div>s — Chrome's default button
     padding would make the two different heights and reintroduce the jump */
  padding: 0;
}
.opt:hover { border-color: var(--clay); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.opt.sel { border-color: var(--clay); box-shadow: 0 0 0 3px var(--clay-soft); }
.opt.sel::after { content: "✓"; position: absolute; top: .5rem; right: .5rem; width: 24px; height: 24px; border-radius: 50%; background: var(--clay); color: #fff; display: grid; place-items: center; font-size: .8rem; z-index: 3; }
/* flex: none — .opt is a flex column, and letting the photo shrink would make a
   card's height depend on its label length, which breaks the skeleton's ability
   to reserve the grid's exact size. */
.opt-media { position: relative; aspect-ratio: 4/3; background: var(--cream-2); flex: none; }
.opt-media img, .opt-media .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opt-txt { padding: .7rem .8rem .85rem; }
/* Fixed two-line boxes for label and description. Uniform card heights are what
   let the skeleton placeholders in buat.html reserve the grid's exact size, so
   it doesn't jump ~2000px on a phone when the catalog lands. */
.opt-txt b { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; display: block; line-height: 1.25; min-height: 2.5em; }
.opt-txt small { color: var(--ink-2); font-size: .82rem; display: block; margin-top: .15rem; line-height: 1.4; min-height: 2.8em; }

/* Placeholder cards shown until configurator.js swaps in the real options. */
.opt--skeleton { pointer-events: none; border-color: var(--line-soft); }
.opt--skeleton .opt-media { background: var(--cream-2); }
.opt-txt .price { color: var(--clay-deep); font-size: .85rem; font-weight: 500; margin-top: .3rem; }

/* Budget / box list rows */
.opt-row { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; }
.opt-row .price { margin-left: auto; }

/* Ribbon swatches */
.ribbon-grid { display: flex; flex-wrap: wrap; gap: .7rem; }
.ribbon {
  display: flex; align-items: center; gap: .55rem; padding: .55rem .9rem .55rem .6rem;
  border: 1.5px solid var(--line); border-radius: var(--r-pill); background: #fff; cursor: pointer; transition: .2s var(--ease);
}
.ribbon:hover { border-color: var(--clay); }
.ribbon.sel { border-color: var(--clay); box-shadow: 0 0 0 3px var(--clay-soft); }
.ribbon .sw { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex: none; }
.ribbon span { font-size: .9rem; }

/* Item picker */
.item-group { margin-bottom: 1.6rem; }
.item-group h3 { font-family: var(--sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .8rem; font-weight: 600; }
.item-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (max-width: 520px) { .item-list { grid-template-columns: 1fr; } }
.item {
  display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); background: var(--paper); cursor: pointer; transition: .18s var(--ease);
}
.item:hover { border-color: var(--clay); }
.item.sel { border-color: var(--clay); background: color-mix(in srgb, var(--clay-soft) 40%, #fff); }
.item .check { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line); flex: none; display: grid; place-items: center; color: #fff; font-size: .72rem; transition: .18s; }
.item.sel .check { background: var(--clay); border-color: var(--clay); }
.item .nm { font-size: .92rem; flex: 1; }
.item .pr { font-size: .82rem; color: var(--clay-deep); font-weight: 500; }
/* Item that no longer fits the chosen budget. Dimmed rather than removed, so
   the option is still legible and the price still visible — and still tappable,
   because a silent dead control is worse than one that explains itself. */
.item.over { opacity: .42; border-style: dashed; cursor: not-allowed; }
.item.over:hover { border-color: var(--line); }

/* Budget meter (step 3) */
.budget-meter {
  margin-bottom: 1.4rem; padding: .9rem 1.05rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.budget-meter .bm-head {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .86rem; color: var(--ink-2); margin-bottom: .55rem;
}
.budget-meter .bm-head b { color: var(--ink); font-family: var(--serif); font-size: 1rem; }
.budget-meter .bm-track { height: 7px; border-radius: var(--r-pill); background: var(--cream-2); overflow: hidden; }
.budget-meter .bm-fill { display: block; height: 100%; background: var(--sage); transition: width .3s var(--ease); }
.budget-meter.full .bm-fill { background: var(--clay-deep); }
.budget-meter .bm-note { font-size: .8rem; color: var(--ink-3); margin-top: .5rem; line-height: 1.5; }
.budget-meter.full .bm-note { color: var(--clay-deeper); }

.start-from { padding: 1rem 1.1rem; background: var(--cream-2); border: 1px dashed var(--line); border-radius: var(--r); margin-bottom: 1.6rem; font-size: .92rem; color: var(--ink-2); }
.start-from b { color: var(--ink); font-family: var(--serif); }
.start-from .clear { color: var(--clay-deep); text-decoration: underline; text-underline-offset: 2px; margin-left: .3rem; }

/* Forms */
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.05rem; }
.field label { font-size: .86rem; font-weight: 500; color: var(--ink); }
.field label .req { color: var(--clay-deep); }
.field input, .field textarea, .field select {
  padding: .85rem .95rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  transition: border-color .2s, box-shadow .2s; width: 100%;
  /* >=16px is not cosmetic: below it, mobile Safari and Chrome zoom the page in
     on focus and never zoom back out, which reads to the user as the layout
     breaking. 17px also matches body copy. */
  font-size: 1.0625rem;
  min-height: 48px;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px var(--clay-soft); }
.field textarea { resize: vertical; min-height: 104px; line-height: 1.5; }
.field .hint { font-size: .82rem; color: var(--ink-3); }
.field label .opt-tag { font-weight: 400; color: var(--ink-3); font-size: .82rem; }
.field.err input, .field.err textarea, .field.err select { border-color: #B0432C; box-shadow: 0 0 0 3px rgba(176,67,44,.14); }
.field .err-msg { font-size: .84rem; color: #9C3B26; display: none; align-items: center; gap: .35rem; font-weight: 500; }
.field.err .err-msg { display: flex; }
.field .err-msg::before { content: "!"; flex: none; width: 17px; height: 17px; border-radius: 50%; background: #9C3B26; color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.card-message { border: 1.5px dashed var(--gold); border-radius: var(--r); padding: 1.1rem; background: color-mix(in srgb, var(--cream-2) 60%, #fff); }
.card-message label { font-family: var(--serif); font-size: 1.05rem; }

/* Step nav */
.cfg-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.cfg-nav .spacer { flex: 1; }

/* Summary panel */
.cfg-summary { position: sticky; top: 84px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.3rem; box-shadow: var(--shadow-sm); }
.cfg-summary h3 { font-size: 1.25rem; margin-bottom: .2rem; }
.cfg-summary .sum-sub { font-size: .82rem; color: var(--ink-3); margin-bottom: 1rem; }
.sum-block { padding: .7rem 0; border-bottom: 1px dashed var(--line); }
.sum-block:last-of-type { border-bottom: none; }
.sum-block .k { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .3rem; }
.sum-block .v { font-size: .92rem; color: var(--ink); }
.sum-block .v.empty { color: var(--ink-3); font-style: italic; }
.sum-items { display: flex; flex-direction: column; gap: .3rem; }
.sum-items .li { display: flex; justify-content: space-between; gap: .8rem; font-size: .9rem; }
.sum-items .li span:last-child { color: var(--ink-2); flex: none; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0; padding-top: 1rem; border-top: 2px solid var(--ink); }
.sum-total .lbl { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.sum-total .amt { font-family: var(--serif); font-size: 1.7rem; color: var(--clay-deep); font-weight: 500; }
.sum-note { font-size: .76rem; color: var(--ink-3); margin-top: .6rem; line-height: 1.5; }

/* Mobile summary bar */
.cfg-mobilebar { display: none; }
@media (max-width: 900px) {
  .cfg-summary { display: none; }
  .cfg-summary.show-mobile { display: block; position: static; margin-top: 1.5rem; }
  .cfg-mobilebar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    position: sticky; bottom: 0; z-index: 40; background: var(--paper); border-top: 1px solid var(--line);
    padding: .8rem 1rem; margin: 1.5rem -1.2rem -1rem; box-shadow: 0 -8px 24px -14px rgba(63,48,33,.3);
  }
  .cfg-mobilebar .m-total { font-family: var(--serif); font-size: 1.35rem; color: var(--clay-deep); }
  .cfg-mobilebar .m-total small { display: block; font-family: var(--sans); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
}

/* Review (final step) */
.review-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.3rem 1.4rem; }
.review-card + .review-card { margin-top: 1rem; }
.review-card h3 { font-family: var(--serif); font-size: 1.15rem; margin-bottom: .7rem; display: flex; align-items: center; gap: .5rem; }
.review-card h3 .edit { margin-left: auto; font-family: var(--sans); font-size: .8rem; color: var(--clay-deep); text-decoration: underline; cursor: pointer; }
.review-line { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .93rem; }
.review-line .k { color: var(--ink-2); }
.wa-preview { background: #E7F3EC; border: 1px solid #BFE0CC; border-radius: var(--r); padding: 1.1rem 1.2rem; font-size: .86rem; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; color: #223; max-height: 240px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.5; }

/* Inline alert — used for anything the visitor has to act on.
   Sits inside the step, right above the nav buttons, and stays until it is
   resolved. A message that fades out on its own is the wrong tool here: it can
   be missed entirely, and it covers the very controls it is talking about. */
.cfg-alert {
  display: none; gap: .75rem; align-items: flex-start;
  margin-top: 1.5rem; padding: .95rem 1.15rem;
  background: color-mix(in srgb, var(--blush) 26%, var(--paper));
  border: 1px solid color-mix(in srgb, #9C3B26 28%, transparent);
  border-left: 3px solid #9C3B26;
  border-radius: var(--r-sm);
  font-size: .95rem; line-height: 1.55; color: var(--ink);
}
.cfg-alert.show { display: flex; }
.cfg-alert::before {
  content: "!"; flex: none; width: 21px; height: 21px; margin-top: .12rem;
  border-radius: 50%; background: #9C3B26; color: #fff;
  font-size: .74rem; font-weight: 700; display: grid; place-items: center;
}

/* Toast — brief, self-dismissing confirmations only (never errors).
   A rounded rectangle rather than a pill: a pill only looks right around a
   single short line, and turns into a blob the moment the text wraps. */
.toast {
  position: fixed; left: 50%; z-index: 200;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(14px);
  width: max-content; max-width: min(calc(100vw - 2.5rem), 26rem);
  display: flex; align-items: center; gap: .6rem;
  background: var(--ink); color: var(--cream);
  padding: .85rem 1.15rem; border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  font-size: .92rem; line-height: 1.45; text-align: left;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* keep clear of the floating WhatsApp button on narrow screens */
@media (max-width: 560px) {
  .toast { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 900px) {
  body.page-cfg .toast { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}

/* Page hero (inner pages) */
.page-hero { padding-block: clamp(2.2rem, 5vw, 3.6rem); text-align: center; }
.page-hero .display { font-size: clamp(2rem, 5vw, 3.4rem); margin: .5rem 0 .8rem; }
.page-hero p { max-width: 40rem; margin-inline: auto; color: var(--ink-2); }
.breadcrumb { font-size: .82rem; color: var(--ink-3); margin-bottom: .3rem; }
.breadcrumb a:hover { color: var(--clay-deep); }

/* ---------- Skip link (a11y) ---------- */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--cream); padding: .7rem 1.1rem;
  border-radius: var(--r-sm); font-size: .9rem; transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Trust logo grid (corporate) ---------- */
.logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 820px; margin-inline: auto; }
@media (max-width: 640px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } }

/* keep floating WA clear of the configurator's sticky mobile summary bar */
@media (max-width: 900px) {
  body.page-cfg .wa-float { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}