/* ============================================================
   SECTIONS — homepage + page components, Warm Shelf
   tumblercupholder.com

   Marketing sections are left-aligned and editorially asymmetric
   (never centered symmetry). Components the JS drives — configurator
   (.cfg-*), cart drawer, reviews (.rev-*) — keep their exact hooks and
   are reskinned purely through tokens.css.
   ============================================================ */

/* ============ ANNOUNCEMENT BAR ============ */
.announce{
  background:var(--ink);color:var(--cream);font-size:.79rem;letter-spacing:.045em;
  padding:.62rem 1rem;font-weight:500;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  column-gap:.62rem;row-gap:.15rem;
}
.announce span{white-space:nowrap}
.announce .dot{opacity:.4;color:var(--terracotta)}
@media(max-width:600px){
  .announce{font-size:.715rem;padding:.55rem .75rem;column-gap:.5rem}
}
@media(max-width:490px){
  .announce{column-gap:1.15rem}
  .announce .dot{display:none}
}

/* ============ HEADER ============ */
.hdr{
  position:sticky;top:0;z-index:60;background:rgba(239,233,222,.92);
  backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--rule);
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.92rem 0}
.mark{
  font-family:var(--display);font-size:1.075rem;font-weight:600;letter-spacing:-.02em;
  text-decoration:none;line-height:1.1;
}
.mark em{font-style:normal;color:var(--ink-faint);font-weight:400}
.nav{display:flex;gap:1.85rem;align-items:center}
.nav a{font-size:.895rem;font-weight:500;text-decoration:none;color:var(--ink-soft)}
.nav a:hover{color:var(--ink)}
.burger{
  display:none;background:none;border:1px solid var(--rule);border-radius:var(--r);
  padding:.55rem .8rem;font:inherit;font-size:.87rem;font-weight:500;cursor:pointer;color:var(--ink);
}
@media(max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .nav.open{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:0;background:var(--paper-lift);
    border-bottom:1px solid var(--rule);padding:.5rem 1.25rem 1.1rem;
  }
  .nav.open a{padding:.78rem 0;width:100%;border-bottom:1px solid var(--rule);font-size:1rem}
  .nav.open a:last-child{border-bottom:0}
}

/* ============ SHARED PRIMITIVES ============ */
/* caption plate — dark gradient band over an image */
.plate{
  position:absolute;left:0;bottom:0;right:0;
  background:linear-gradient(to top,rgba(33,28,23,.9),rgba(33,28,23,0));
  color:var(--cream);padding:2.4rem 1.15rem .95rem;font-size:.79rem;letter-spacing:.02em;
}
.plate b{font-weight:600;color:#fff}

/* full-width CTA on mobile */
@media(max-width:640px){.btn-wide{display:flex;width:100%}}

/* [SHOT] placeholder — sized to its final aspect so layout is pixel-final
   before photography exists. Real <img>/<video> drops in with the same box. */
.shot{
  position:relative;width:100%;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--rule);
  background:
    repeating-linear-gradient(-45deg,transparent 0,transparent 13px,rgba(176,101,74,.055) 13px,rgba(176,101,74,.055) 26px),
    var(--paper-lift);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  gap:.45rem;padding:1.05rem;
}
.shot-tag{
  font-size:.64rem;font-weight:700;letter-spacing:.13em;color:var(--terracotta);
  background:var(--paper);border:1px solid var(--rule);border-radius:5px;padding:.22rem .5rem;
}
.shot-label{font-size:.8rem;line-height:1.42;color:var(--ink-soft);max-width:34ch}
.shot--tall{aspect-ratio:3/4}
.shot--square{aspect-ratio:1/1}
.shot--wide{aspect-ratio:4/3}
.shot--video{aspect-ratio:9/16}
.shot img,.shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ============ 2. HERO ============ */
.hero{padding-block:clamp(2.4rem,5vw,3.8rem) clamp(3rem,7vw,5rem)}
.hero-in{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:940px){.hero-in{grid-template-columns:1fr;gap:2.1rem}}
.hero-copy h1{margin-bottom:1.15rem}
.hero-sub{font-size:clamp(1.1rem,2.7vw,1.34rem);color:var(--ink-soft);max-width:33ch;line-height:1.5}
.hero-cta{margin-top:1.9rem;max-width:420px}
.hero-trust{margin-top:1.35rem;font-size:.9rem;color:var(--ink-faint);line-height:1.55}
.hero-trust b{color:var(--terracotta);font-weight:600;font-variant-numeric:tabular-nums}
.hero-media{min-width:0}
.hero-video{max-height:min(78vh,640px);margin-left:auto}

/* ============ 3. RECOGNITION ============ */
.recog-in{max-width:none}
.recog h2{max-width:16ch;margin-bottom:1.3rem}
.recog-body{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.25rem,3.3vw,1.85rem);line-height:1.42;letter-spacing:-.014em;
  color:var(--ink);max-width:30ch;
}

/* ============ 4. FIT ============ */
.fit{background:var(--cream)}
.fit-in{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.2rem);align-items:center}
@media(max-width:880px){.fit-in{grid-template-columns:1fr}}
.fit-copy h2{margin-bottom:1.05rem}
.fit-body{color:var(--ink-soft);max-width:42ch}
.fit-callout{
  margin-top:1.3rem;padding:1rem 1.2rem;background:var(--paper-lift);
  border-left:2.5px solid var(--terracotta);border-radius:0 var(--r) var(--r) 0;
  font-size:.95rem;color:var(--ink-soft);max-width:44ch;
}
.fit-more{margin-top:1.5rem}
.fit-shots{display:grid;gap:1rem}
@media(min-width:600px){.fit-shots{grid-template-columns:5fr 4fr;align-items:start}}

/* ============ 5. USE CASES ============ */
.uses-head{max-width:11ch}
.uses-lede{margin-top:1.1rem;max-width:40ch}
.uses-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;
  margin-top:clamp(2rem,4vw,2.8rem);
}
@media(max-width:900px){.uses-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.uses-grid{grid-template-columns:1fr}}
figure.use{margin:0}
.use figcaption{margin-top:.72rem;font-size:.93rem;color:var(--ink-soft);line-height:1.46}
.use figcaption b{color:var(--ink);font-weight:600}

/* ============ 6. BENEFITS ============ */
.bens-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3.2vw,2.6rem);
  margin-top:clamp(2rem,4vw,2.8rem);
}
@media(max-width:800px){.bens-grid{grid-template-columns:1fr;gap:1.7rem}}
.ben{border-top:2px solid var(--terracotta);padding-top:1.1rem}
.ben-idx{
  font-family:var(--display);font-size:.9rem;color:var(--terracotta);
  font-weight:600;display:block;margin-bottom:.55rem;letter-spacing:.02em;
}
.ben h3{margin-bottom:.5rem}
.ben p{color:var(--ink-soft);margin:0;max-width:34ch}

/* ============ 7. COLOR-ID ============ */
.colorid{background:var(--paper-lift)}
.colorid-in{display:grid;grid-template-columns:.96fr 1.04fr;gap:clamp(2rem,5vw,4.2rem);align-items:center}
@media(max-width:880px){.colorid-in{grid-template-columns:1fr}}
.colorid-copy h2{max-width:20ch;margin-bottom:1.05rem}
.colorid-body{color:var(--ink-soft);max-width:44ch}
.swrow{display:flex;gap:.55rem;flex-wrap:wrap;margin:1.5rem 0 .7rem}
.sw{width:30px;height:30px;border-radius:50%;border:1px solid rgba(33,28,23,.14)}
.sw.c-white{box-shadow:inset 0 0 0 1px rgba(33,28,23,.22)}

/* ============ 8. SOCIAL PROOF ============ */
.proof h2{font-variant-numeric:tabular-nums}
.proof-cta{margin-top:clamp(1.6rem,3.5vw,2.2rem)}

/* ============ 9. HOW IT WORKS ============ */
.how-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.2rem);align-items:center}
@media(max-width:880px){.how-in{grid-template-columns:1fr}.how-shot-wrap{order:2}}
.how-copy h2{margin-bottom:1.05rem}
.how-body{color:var(--ink-soft);max-width:44ch}

/* ============ 10. PACKS (configurator sits in the espresso panel) ============ */
.packs{background:var(--ink);color:var(--cream)}
.packs h2{color:var(--paper-lift)}
.packs .eyebrow{color:rgba(237,230,215,.55)}
.packs .eyebrow::after{background:rgba(237,230,215,.22)}
.packs .lede{color:rgba(237,230,215,.8);max-width:46ch}
.pack-blurbs{list-style:none;margin:clamp(1.6rem,3.5vw,2.3rem) 0 0;padding:0;display:grid;gap:.7rem;max-width:54ch}
.pack-blurbs li{color:rgba(237,230,215,.8);font-size:.98rem;line-height:1.5}
.pack-blurbs b{color:var(--cream);font-weight:600}
.pack-star{color:var(--terracotta)}
.pack-note{margin-top:1.4rem;font-size:.92rem;color:rgba(237,230,215,.68)}

.cfg-step{margin-top:clamp(2rem,4.5vw,3rem)}
.cfg-step-label{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(237,230,215,.55);margin:0 0 1.1rem;
}
.cfg-step-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1.1rem}
.cfg-step-head .cfg-step-label{margin:0}

/* step 1 — pack ladder: 4-up → 2-up → 1-up */
.cfg-packs{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
@media(max-width:760px){.cfg-packs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.cfg-packs{grid-template-columns:1fr}}
.cfg-pack{
  position:relative;display:flex;flex-direction:column;gap:.12rem;text-align:left;font:inherit;
  background:var(--paper-lift);color:var(--ink);border:2px solid transparent;border-radius:var(--r);
  padding:1.15rem 1.15rem 1.1rem;cursor:pointer;
  transition:border-color .18s ease, transform .18s ease;
}
.cfg-pack:hover{transform:translateY(-2px)}
.cfg-pack.is-selected,.cfg-pack[aria-checked="true"]{border-color:var(--terracotta)}
.cfg-pack-flag{
  align-self:flex-start;margin-bottom:.35rem;background:var(--terracotta);color:#fff;
  font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.28rem .55rem;border-radius:4px;
}
.cfg-pack-name{font-family:var(--display);font-size:1.16rem;font-weight:600}
.cfg-pack-price{font-family:var(--display);font-size:1.7rem;font-weight:600;line-height:1.05;letter-spacing:-.02em}
.cfg-pack-each{font-size:.8rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}

/* step 2 — per-unit color rows */
.cfg-matchall{padding:.5rem .95rem;font-size:.83rem}
.cfg-rows{display:flex;flex-direction:column;gap:1.15rem}
.cfg-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.1rem;
  padding-bottom:1.15rem;border-bottom:1px solid rgba(237,230,215,.12);
}
.cfg-row:last-child{border-bottom:0;padding-bottom:0}
.cfg-row-head{display:flex;align-items:center;gap:.6rem;min-width:9.5rem}
.cfg-row-label{font-size:.95rem;font-weight:500;color:var(--cream)}
.cfg-swatches{display:flex;flex-wrap:wrap;gap:.5rem}

/* fills — .c-<slug> keyed by color name; a real product photo can replace
   each background later (e.g. .c-sage{background:url(...)}) */
.c-charcoal{background:var(--sw-charcoal)}
.c-sage{background:var(--sw-sage)}
.c-white{background:var(--sw-white)}
.c-terracotta{background:var(--sw-terracotta)}
.c-navy{background:var(--sw-navy)}
.c-sky{background:var(--sw-sky)}
.c-brick-red{background:var(--sw-brick)}
.c-sand{background:var(--sw-sand)}

.cfg-sw{
  width:34px;height:34px;border-radius:50%;cursor:pointer;padding:0;
  border:1px solid rgba(237,230,215,.2);transition:transform .14s ease;
}
.cfg-sw:hover{transform:scale(1.08)}
.cfg-sw[aria-pressed="true"]{outline:2px solid var(--cream);outline-offset:2px}
.cfg-sw.c-white,.cfg-chip.c-white,.cfg-circle.c-white{box-shadow:inset 0 0 0 1px rgba(33,28,23,.28)}
.cfg-chip{width:17px;height:17px;border-radius:50%;flex:none;border:1px dashed rgba(237,230,215,.45)}
.cfg-chip.is-filled{border-style:solid;border-color:rgba(237,230,215,.25)}

/* the "which one's mine" lineup */
.cfg-lineup-wrap{margin-top:clamp(2rem,4.5vw,3rem);text-align:center}
.cfg-lineup{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem}
.cfg-circle{
  width:clamp(42px,12vw,58px);height:clamp(42px,12vw,58px);border-radius:50%;
  border:2px dashed rgba(237,230,215,.3);
  transition:background-color .22s ease,border-color .22s ease;
}
.cfg-circle.is-filled{border-style:solid;border-color:rgba(237,230,215,.18)}
@keyframes cfg-pop{0%{transform:scale(.55)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
.cfg-circle.cfg-pop{animation:cfg-pop .34s cubic-bezier(.34,1.56,.64,1)}
.cfg-caption{
  margin:1.15rem auto 0;max-width:34ch;font-family:var(--display);
  font-size:clamp(1.05rem,2.6vw,1.28rem);line-height:1.4;color:var(--cream);
  min-height:1.4em;letter-spacing:-.01em;
}
.pack-note{margin-top:1.2rem}

/* engraving — v2 stub */
.cfg-engrave{
  margin-top:clamp(2rem,4.5vw,3rem);display:flex;align-items:flex-start;gap:.9rem;
  padding:1.1rem 1.2rem;border:1px dashed rgba(237,230,215,.22);border-radius:var(--r);opacity:.62;
}
.cfg-engrave-tag{
  flex:none;background:var(--gold);color:#fff;font-size:.62rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.3rem .55rem;border-radius:4px;margin-top:.15rem;
}
.cfg-engrave-body b{font-family:var(--display);font-size:1.02rem;display:block;margin-bottom:.15rem;color:var(--cream)}
.cfg-engrave-body p{margin:0;font-size:.9rem;color:rgba(237,230,215,.7);max-width:52ch}

/* checkout */
.cfg-checkout{margin-top:clamp(2rem,4.5vw,3rem);max-width:520px}
.cfg-summary{font-size:.95rem;color:var(--cream);margin:0 0 .9rem;min-height:1.4em;font-variant-numeric:tabular-nums}
.cfg-add:disabled{opacity:.45;cursor:default}
.cfg-add-error{margin:.7rem 0 0;font-size:.85rem;color:#E7A98C}
.cfg-handoff{margin-top:1rem;color:rgba(237,230,215,.5)}
.cfg-ship{margin-top:.9rem;color:rgba(237,230,215,.52)}

/* ============ REVIEWS ============ */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(2rem,4vw,2.8rem)}
.rev-grid[hidden]{display:none}
@media(max-width:880px){.rev-grid{grid-template-columns:1fr}}
.rev{background:var(--paper-lift);border:1px solid var(--rule);border-radius:var(--r);padding:1.45rem 1.35rem}
.stars{color:var(--gold);font-size:.9rem;letter-spacing:.14em;margin-bottom:.75rem}
.rev p{font-size:.955rem;line-height:1.56;margin-bottom:.9rem}
.rev cite{font-style:normal;font-size:.82rem;color:var(--ink-faint);display:block}
.rev-lede{max-width:44ch;color:var(--ink-soft)}
/* reviews view toggle (tumbler-tagged default ↔ all) — build-injected */
.rev-toggle{
  display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.15rem;
  margin-top:clamp(1.6rem,3.5vw,2.4rem);
}
.rev-toggle-label{margin:0;font-size:.9rem;color:var(--ink-soft)}
.rev-toggle-btn{padding:.62rem 1.15rem;font-size:.895rem}
.rev-toggle + .rev-grid{margin-top:1.15rem}
.rev-more{margin-top:clamp(1.6rem,3.5vw,2.2rem)}

/* /reviews page */
.rev-page h1{max-width:15ch;margin-bottom:1rem}
.rev-agg{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .55rem;font-size:1.05rem;color:var(--ink-soft)}
.rev-agg .rev-stars{color:var(--gold);letter-spacing:.14em}
.rev-agg strong{font-family:var(--display);font-weight:600;color:var(--ink)}
.rev-note{margin:0 0 clamp(1.8rem,4vw,2.6rem);font-size:.9rem;color:var(--ink-faint);max-width:62ch;line-height:1.55}

/* ============ 11. OBJECTIONS ============ */
.objections{background:var(--paper-lift)}
.obj-list{margin-top:clamp(2rem,4vw,2.6rem);display:grid;gap:1.5rem;max-width:820px}
.obj{border-left:2.5px solid var(--sage);padding-left:1.2rem}
.obj-q{font-family:var(--display);font-size:1.1rem;font-weight:600;color:var(--ink);margin-bottom:.35rem;letter-spacing:-.01em}
.obj-a{color:var(--ink-soft);margin:0;max-width:58ch}

/* ============ 12. GUARANTEE ============ */
.guarantee-in{max-width:680px}
.guarantee h2{max-width:20ch;margin-bottom:1.1rem}
.guarantee-body{color:var(--ink-soft);font-size:1.06rem;max-width:54ch}

/* ============ 13. MAKER / FOUNDER ============ */
.maker{background:var(--cream)}
.maker-in{max-width:62ch}
.maker h2{max-width:22ch;margin-bottom:1.1rem}
.maker-body{color:var(--ink-soft);max-width:56ch}
.maker-sign{margin-top:1.4rem;font-family:var(--display);font-size:1.1rem;color:var(--ink)}

/* ============ 14. FAQ ============ */
.faq-list{margin-top:clamp(2rem,4vw,2.6rem);max-width:800px}
details{border-bottom:1px solid var(--rule)}
summary{
  cursor:pointer;list-style:none;padding:1.22rem 2.4rem 1.22rem 0;position:relative;
  font-family:var(--display);font-size:1.075rem;font-weight:500;letter-spacing:-.012em;line-height:1.34;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:.35rem;top:1.72rem;width:11px;height:11px;
  border-right:1.5px solid var(--terracotta);border-bottom:1.5px solid var(--terracotta);
  transform:rotate(45deg);transition:transform .2s ease;
}
details[open] summary::after{transform:rotate(-135deg);top:1.9rem}
.faq-a{padding:0 1.5rem 1.4rem 0;color:var(--ink-soft);font-size:.985rem;max-width:64ch}
.faq-a p{margin-bottom:.75rem}

/* ============ 15. FINAL CTA ============ */
.final{background:var(--ink);color:var(--cream);text-align:center}
.final h2{color:var(--paper-lift);max-width:18ch;margin-inline:auto}
.final-body,.final p{color:rgba(237,230,215,.8);margin-top:1rem;font-size:1.06rem;max-width:42ch;margin-inline:auto}
.final .btn{margin-top:1.95rem}
.final-micro,.final .micro{color:rgba(237,230,215,.52);margin-top:1.15rem}

/* ============ FOOTER ============ */
.ftr{background:var(--paper);border-top:1px solid var(--rule);padding-block:clamp(2.6rem,5vw,3.6rem)}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.2rem}
@media(max-width:760px){.ftr-grid{grid-template-columns:1fr 1fr;gap:1.9rem}}
.ftr h4{
  font-family:var(--body);font-size:.715rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 .95rem;
}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.6rem}
.ftr a{font-size:.925rem;text-decoration:none;color:var(--ink-soft)}
.ftr a:hover{color:var(--ink)}
.ftr-brand h4{font-family:var(--display);font-size:1.05rem;letter-spacing:-.01em;text-transform:none;color:var(--ink);font-weight:600}
.ftr-brand p{font-size:.9rem;color:var(--ink-soft);max-width:34ch;margin-top:.7rem}
.legal{
  margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--rule);
  font-size:.815rem;color:var(--ink-faint);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}

/* ============ STICKY BUY BAR ============ */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(33,28,23,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(237,230,215,.16);
  padding:.72rem 1.15rem calc(.72rem + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.sticky.show{transform:translateY(0)}
.sticky-in{
  width:var(--shell);margin-inline:auto;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;
}
.sticky-txt{color:var(--cream);line-height:1.28;min-width:0}
.sticky-txt b{display:block;font-size:.925rem;font-weight:600;line-height:1.2}
.sticky-txt span{font-size:.735rem;opacity:.6;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky .btn{padding:.82rem 1.5rem;font-size:.945rem;white-space:nowrap;flex-shrink:0;min-height:0}
@media(max-width:420px){
  .sticky-txt b{font-size:.87rem}
  .sticky .btn{padding:.8rem 1.15rem;font-size:.9rem}
}

/* image placeholder styling — used by the secondary pages (fit/maker) */
.ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--paper-lift),var(--paper-lift) 11px,#E3DBCC 11px,#E3DBCC 22px);
  color:var(--ink-faint);font-size:.74rem;letter-spacing:.075em;text-transform:uppercase;
  text-align:center;padding:1.2rem;font-weight:600;line-height:1.5;
}

/* ============================================================
   FIT GUIDE PAGE — /fit  (fg- prefix; own components, same world)
   ============================================================ */
.fg-hero{padding-block:clamp(3rem,7vw,5rem) clamp(2.6rem,6vw,4rem)}
.fg-hero h1{max-width:13ch;margin-bottom:1.2rem}
.fg-hero .lede{max-width:46ch}
.fg-hero .textlink{display:inline-block;margin-top:1.5rem}

.fg-say{background:var(--ink);color:var(--cream);padding-block:clamp(2.8rem,6vw,4.2rem)}
.fg-say-in{max-width:760px;margin-inline:auto;text-align:center}
.fg-say h2{color:var(--paper-lift);max-width:20ch;margin:0 auto 1.1rem}
.fg-say p{color:rgba(237,230,215,.72);max-width:52ch;margin-inline:auto}

.fg-test{background:var(--cream)}
.fg-test-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,5vw,4.2rem);align-items:center}
@media(max-width:880px){.fg-test-grid{grid-template-columns:1fr}}
.fg-body{color:var(--ink-soft);max-width:44ch}
.fg-steps{list-style:none;margin:1.8rem 0 0;padding:0}
.fg-steps li{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  padding-block:1.1rem;border-top:1px solid var(--rule);
}
.fg-steps li:first-child{border-top:0;padding-top:0}
.fg-step-num{font-family:var(--display);font-size:1.02rem;font-weight:600;color:var(--terracotta);line-height:1.5}
.fg-steps b{font-family:var(--display);font-size:1.06rem;font-weight:600;display:block;margin-bottom:.24rem}
.fg-steps p{color:var(--ink-soft);font-size:.965rem;margin:0;max-width:42ch}

.fg-lead{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);align-items:stretch;
  background:var(--paper-lift);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;margin-top:clamp(2rem,4vw,2.8rem);
}
@media(max-width:760px){.fg-lead{grid-template-columns:1fr}}
.fg-lead-img{margin:0;position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--cream)}
.fg-lead-img img{width:100%;height:100%;object-fit:cover}
.fg-lead-body{
  padding:clamp(1.5rem,3.6vw,2.3rem);display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;
}
.fg-lead-body h3{font-size:clamp(1.42rem,3.9vw,1.95rem);margin-bottom:.65rem;letter-spacing:-.018em}
.fg-lead-body p{color:var(--ink-soft);max-width:40ch;margin-bottom:0}
.fg-lead-note{margin-top:1.15rem;padding-top:.95rem;border-top:1px solid var(--rule);width:100%;font-size:.845rem;color:var(--ink-faint)}

.fg-gal .lede{margin-top:1.05rem}
.fg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:clamp(2rem,4vw,2.8rem)}
@media(max-width:1020px){.fg-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.fg-grid{grid-template-columns:repeat(2,1fr);gap:.85rem}}
.fg-card{
  margin:0;background:var(--paper-lift);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
}
.fg-card-img{aspect-ratio:1/1;background:var(--cream);position:relative}
.fg-card-img img{width:100%;height:100%;object-fit:cover}
.fg-card-body{padding:.92rem 1rem 1.05rem;display:flex;flex-direction:column;align-items:flex-start;gap:.22rem}
.fg-card-name{font-family:var(--display);font-size:.995rem;font-weight:600;line-height:1.28;letter-spacing:-.01em}
.fg-badge{
  margin-top:.5rem;font-size:.645rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:.3rem .58rem;border-radius:4px;border:1px solid;
}
.fg-badge.ok{background:rgba(176,101,74,.14);border-color:rgba(176,101,74,.5);color:var(--terracotta-deep)}
.fg-badge.no{background:transparent;border-color:var(--rule);color:var(--ink-faint)}

/* ============================================================
   POLICY PAGES — /shipping /returns /privacy /terms
   ============================================================ */
.pol-hero{
  padding-block:clamp(2.6rem,6vw,4rem) clamp(1.7rem,3.5vw,2.4rem);
  border-bottom:1px solid var(--rule);
}
.pol-hero h1{font-size:clamp(2.1rem,6.6vw,3.25rem);max-width:15ch;margin-bottom:1.05rem}
.pol-hero .lede{max-width:50ch}
.pol-updated{margin-top:1.5rem;font-size:.8rem;color:var(--ink-faint);letter-spacing:.02em}

.pol{padding-block:clamp(2.4rem,5vw,3.6rem)}
.pol-wrap{max-width:68ch}
.pol-key{
  list-style:none;margin:0 0 clamp(2rem,4vw,2.9rem);padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
}
.pol-key li{background:var(--paper-lift);padding:1.15rem 1.2rem}
.pol-key b{display:block;font-family:var(--display);font-size:1.02rem;font-weight:600;margin-bottom:.24rem;letter-spacing:-.01em}
.pol-key span{font-size:.875rem;color:var(--ink-soft);line-height:1.48;display:block}
.pol-sec{padding-top:clamp(1.8rem,3.6vw,2.5rem);margin-top:clamp(1.8rem,3.6vw,2.5rem);border-top:1px solid var(--rule)}
.pol-sec:first-of-type{padding-top:0;margin-top:0;border-top:0}
.pol-sec h2{font-size:clamp(1.32rem,3.5vw,1.72rem);margin-bottom:.9rem}
.pol-sec h3{font-size:1.035rem;margin:1.6rem 0 .5rem}
.pol-sec p,.pol-sec li{color:var(--ink-soft)}
.pol-sec ul{margin:.6rem 0 1.05em;padding-left:1.15rem}
.pol-sec li{margin-bottom:.5rem}
.pol-sec li::marker{color:var(--ink-faint)}
.pol-sec a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.pol-sec a:hover{text-decoration-color:var(--ink)}
.pol-note{margin:1.5rem 0;padding:1.05rem 1.2rem;background:var(--paper-lift);border-left:2.5px solid var(--sage);border-radius:0 var(--r) var(--r) 0;font-size:.945rem}
.pol-note b{display:block;margin-bottom:.2rem;color:var(--ink)}
.pol-note p{margin-bottom:0}
.pol-foot{background:var(--cream)}
.pol-foot h2{font-size:clamp(1.4rem,3.7vw,1.9rem);margin-bottom:.75rem}
.pol-foot p{color:var(--ink-soft);max-width:46ch}
.pol-links{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.7rem 0 0;padding:0;list-style:none}
.pol-links a{
  display:inline-block;font-size:.895rem;font-weight:500;text-decoration:none;color:var(--ink);
  padding:.62rem 1.05rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper-lift);
}
.pol-links a:hover{border-color:var(--ink)}
.pol-links a[aria-current]{background:var(--ink);color:var(--paper-lift);border-color:var(--ink)}

/* ============================================================
   MAKER PAGE — /maker
   ============================================================ */
.mk-hero{padding-block:clamp(2.6rem,6vw,4rem) clamp(1.6rem,3.5vw,2.4rem)}
.mk-hero h1{max-width:16ch;margin-bottom:1.15rem}
.mk-hero .lede{max-width:50ch}
.mk-wrap{max-width:60ch}
.mk-story h2{margin-bottom:1.15rem}
.mk-story p{color:var(--ink-soft)}
.mk-open{font-family:var(--display);font-size:clamp(1.18rem,3vw,1.5rem);line-height:1.4;letter-spacing:-.012em;color:var(--ink);margin-bottom:1.15rem}
.mk-here{background:var(--cream)}
.mk-here-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,5vw,4.2rem);align-items:center}
@media(max-width:880px){.mk-here-grid{grid-template-columns:1fr;gap:2rem}}
.mk-portrait{margin:0;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--paper-lift)}
.mk-portrait img{width:100%;height:100%;object-fit:cover}
.mk-here-txt h2{margin-bottom:1.1rem}
.mk-here-txt p{color:var(--ink-soft);max-width:44ch}
.mk-close{background:var(--paper-lift)}
.mk-facts{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.2rem}
.mk-close h2{max-width:19ch;margin-bottom:1.1rem}
.mk-close p{color:var(--ink-soft);max-width:48ch}
.mk-close .mk-sign{margin-top:1.6rem;font-family:var(--display);font-size:1.12rem;color:var(--ink);max-width:none}

/* ============================================================
   CART DRAWER — Storefront API slide-out (wiring untouched)
   ============================================================ */
body.cart-locked{overflow:hidden}
.cart-scrim{position:fixed;inset:0;background:rgba(33,28,23,.5);z-index:70}
.cart-scrim[hidden]{display:none}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(430px,92vw);
  background:var(--paper-lift);color:var(--ink);display:flex;flex-direction:column;
  box-shadow:-18px 0 50px rgba(33,28,23,.18);
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.cart-drawer.open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:1.15rem 1.35rem;border-bottom:1px solid var(--rule)}
.cart-head h2{font-size:1.35rem}
.cart-close{background:none;border:0;font-size:1.75rem;line-height:1;color:var(--ink);cursor:pointer;padding:0 .3rem}
.cart-body{flex:1;overflow-y:auto;padding:.5rem 1.35rem;-webkit-overflow-scrolling:touch}
.cart-empty{padding:2.6rem 0}
.cart-empty p{font-size:1.05rem;color:var(--ink-soft);margin:0 0 1.1rem}
.cart-empty .btn{max-width:230px}
.cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:1rem;align-items:start;padding:1.25rem 0;border-bottom:1px solid var(--rule)}
.ci-thumb{width:64px;height:64px;border-radius:var(--r);background:var(--cream);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;padding:.5rem}
.mini-swatches{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;align-content:center;max-width:48px}
.mini-dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(33,28,23,.16)}
.ci-name{font-family:var(--display);font-weight:600;font-size:1.02rem}
.ci-variant{font-size:.9rem;color:var(--ink-soft);margin-top:1px}
.ci-colors{font-size:.82rem;color:var(--ink-faint);margin:.28rem 0 .6rem}
.ci-qty{display:flex;align-items:center;gap:.5rem}
.ci-step{width:27px;height:27px;border:1px solid var(--rule);background:var(--paper);border-radius:6px;font-size:1rem;line-height:1;cursor:pointer;color:var(--ink)}
.ci-count{min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.ci-remove{background:none;border:0;color:var(--ink-faint);font-size:.82rem;cursor:pointer;text-decoration:underline;margin-left:.45rem}
.ci-remove:hover{color:var(--ink-soft)}
.ci-price{font-family:var(--display);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cart-subtotal{display:flex;justify-content:space-between;font-family:var(--display);font-weight:600;font-size:1.2rem;padding:1.15rem 0 .4rem}
.cart-foot{border-top:1px solid var(--rule);padding:1.15rem 1.35rem calc(1.15rem + env(safe-area-inset-bottom));background:var(--cream)}
.cart-subtotal-note{font-size:.83rem;color:var(--ink-faint);margin-bottom:.85rem;text-align:center}
.cart-checkout{width:100%}
.cart-handoff{margin:0 0 .85rem;font-size:.8rem;line-height:1.5;color:var(--ink-faint);text-align:center}
.cart-pay{margin:.8rem 0 0;font-size:.78rem;color:var(--ink-faint);text-align:center}
.hdr-cart{position:relative;background:none;border:0;cursor:pointer;color:var(--ink);padding:.35rem;margin-right:.2rem;display:inline-flex;align-items:center}
.hdr-cart[hidden]{display:none}
.hdr-cart svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cart-count{
  position:absolute;top:-3px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--terracotta);color:#fff;font-size:.66rem;font-weight:700;line-height:17px;text-align:center;
}
.cart-count[hidden]{display:none}
.mini-dot.c-white{box-shadow:inset 0 0 0 1px rgba(33,28,23,.28)}