/* Wicker storefront : brand system per the build brief.
   Contrast fixed: body text is dark olive (#4F5543), not faded sage.
   No stacking of light color + weight 300 + opacity on real copy. */

:root{
  --peach:#FFF3E9;       /* page */
  --card:#FFFAF4;         /* off-white surface */
  --rose:#DDBEA9;         /* dusty rose */
  --terracotta:#CB997E;   /* decorative terracotta */
  --terracotta-ink:#A65E40; /* darker, for text/buttons (accessible on peach) */
  --sage:#A5A58D;         /* decoration / labels only */
  --olive:#4F5543;        /* PRIMARY body text */
  --olive-2:#6B705C;      /* secondary text */
  --line:#EADDCE;         /* borders */
  --radius:20px;
  --radius-lg:28px;
  --maxw:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--olive);
  background-color:var(--peach);
  
  font-family:'Jost',system-ui,sans-serif;font-weight:400;
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
/* Page texture: wheat + sunflower motif, held at low opacity on its own layer so it
   reads as paper grain and never competes with headline type. `fixed` keeps it from
   visibly tiling as you scroll; pointer-events:none keeps it non-interactive. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='rgba(166,94,64,0.1)' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M30 230 L30 90'/%3E%3Cpath d='M30 100 L18 88 M30 100 L42 88 M30 122 L18 110 M30 122 L42 110 M30 144 L18 132 M30 144 L42 132 M30 166 L18 154 M30 166 L42 154 M30 188 L18 176 M30 188 L42 176'/%3E%3Cpath d='M170 230 L170 120'/%3E%3Cpath d='M170 130 L158 118 M170 130 L182 118 M170 152 L158 140 M170 152 L182 140 M170 174 L158 162 M170 174 L182 162 M170 196 L158 184 M170 196 L182 184'/%3E%3C/g%3E%3Cg transform='translate(120,55)'%3E%3Cg fill='rgba(203,153,126,0.13)' stroke='rgba(166,94,64,0.13)' stroke-width='1.4'%3E%3Cellipse cx='0' cy='-19' rx='7' ry='13'/%3E%3Cellipse cx='0' cy='19' rx='7' ry='13'/%3E%3Cellipse cx='-19' cy='0' rx='13' ry='7'/%3E%3Cellipse cx='19' cy='0' rx='13' ry='7'/%3E%3Cellipse cx='-14' cy='-14' rx='7' ry='12' transform='rotate(45 -14 -14)'/%3E%3Cellipse cx='14' cy='-14' rx='7' ry='12' transform='rotate(-45 14 -14)'/%3E%3Cellipse cx='-14' cy='14' rx='7' ry='12' transform='rotate(-45 -14 14)'/%3E%3Cellipse cx='14' cy='14' rx='7' ry='12' transform='rotate(45 14 14)'/%3E%3C/g%3E%3Ccircle r='10' fill='rgba(79,85,67,0.14)'/%3E%3C/g%3E%3Cg transform='translate(210,205) scale(0.7)'%3E%3Cg fill='rgba(203,153,126,0.1)' stroke='rgba(166,94,64,0.1)' stroke-width='1.4'%3E%3Cellipse cx='0' cy='-19' rx='7' ry='13'/%3E%3Cellipse cx='0' cy='19' rx='7' ry='13'/%3E%3Cellipse cx='-19' cy='0' rx='13' ry='7'/%3E%3Cellipse cx='19' cy='0' rx='13' ry='7'/%3E%3Cellipse cx='-14' cy='-14' rx='7' ry='12' transform='rotate(45 -14 -14)'/%3E%3Cellipse cx='14' cy='-14' rx='7' ry='12' transform='rotate(-45 14 -14)'/%3E%3Cellipse cx='-14' cy='14' rx='7' ry='12' transform='rotate(-45 -14 14)'/%3E%3Cellipse cx='14' cy='14' rx='7' ry='12' transform='rotate(45 14 14)'/%3E%3C/g%3E%3Ccircle r='10' fill='rgba(79,85,67,0.11)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;background-size:240px 240px;
  opacity:.45;
}
h1,h2,h3,h4,.serif{font-family:'Fraunces',Georgia,serif;font-weight:400;color:var(--terracotta-ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.serif-it{font-family:'Fraunces',serif;font-style:italic}

/* focus visibility (accessibility) */
:focus-visible{outline:2.5px solid var(--terracotta-ink);outline-offset:3px;border-radius:6px}

/* skip link */
.skip{position:absolute;left:-999px;top:0;background:var(--olive);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:100}
.skip:focus{left:0}

/* --- announcement --- */
.announce{background:var(--olive);color:var(--peach);text-align:center;
  font-size:13px;letter-spacing:.14em;padding:11px 14px}
.announce b{color:var(--rose);font-weight:500}

/* --- nav --- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,243,233,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .row{display:flex;align-items:center;justify-content:space-between;
  max-width:var(--maxw);margin:0 auto;padding:16px 28px}
.brand{font-family:'Fraunces',serif;font-size:30px;letter-spacing:.02em;
  color:var(--terracotta-ink)}
.nav-links{display:flex;gap:30px;font-size:15px}
.nav-links a{color:var(--olive-2)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--terracotta-ink)}
.nav-right{display:flex;align-items:center;gap:14px}
.bag-btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--terracotta-ink);
  color:var(--terracotta-ink);border-radius:40px;padding:8px 18px;font-size:14px;background:transparent;cursor:pointer;font-family:inherit}
.bag-btn:hover{background:var(--terracotta-ink);color:#fff}
.bag-count{min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.menu-toggle{display:none;background:none;border:none;font-size:24px;color:var(--olive);cursor:pointer}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:60;background:var(--peach);
  transform:translateX(100%);transition:transform .28s ease;padding:24px 28px;display:none}
.drawer.open{transform:translateX(0)}
.drawer .close{background:none;border:none;font-size:28px;color:var(--olive);cursor:pointer;float:right}
.drawer nav{display:flex;flex-direction:column;gap:22px;margin-top:60px;font-family:'Fraunces',serif;font-size:26px}
.drawer nav a{color:var(--terracotta-ink)}

/* --- buttons --- */
.btn{display:inline-block;background:var(--terracotta-ink);color:#fff;
  border:none;border-radius:40px;padding:15px 32px;font-size:15px;
  letter-spacing:.06em;cursor:pointer;font-family:inherit;transition:transform .15s,background .15s}
.btn:hover{background:var(--olive);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--olive);border:1.5px solid var(--sage)}
.btn.ghost:hover{background:var(--olive);color:#fff;border-color:var(--olive)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* --- hero --- */
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;padding:80px 0 70px}
.kicker{font-size:12px;letter-spacing:.28em;color:var(--olive-2);text-transform:uppercase;margin-bottom:22px}
.hero h1{font-size:60px;line-height:1.05;margin:0}
.hero p{font-size:19px;color:var(--olive);max-width:400px;margin:24px 0 34px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(155deg,var(--rose),var(--terracotta))}
.hero-art .glow{position:absolute;right:-50px;top:-50px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(166,94,64,.35),transparent 70%)}
.hero-art .weave{position:absolute;inset:0;background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 3px,transparent 3px 12px),
  repeating-linear-gradient(-45deg,rgba(79,85,67,.12) 0 3px,transparent 3px 12px)}
.woven{border-radius:50%;background:radial-gradient(circle at 50% 45%,#dcc09b,#c2a074);
  background-image:repeating-radial-gradient(circle at 50% 45%,rgba(79,85,67,.18) 0 4px,transparent 4px 10px);
  box-shadow:inset 0 0 0 8px rgba(255,255,255,.2),0 18px 36px -18px rgba(79,85,67,.4)}
.hero-art .disc{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:62%;aspect-ratio:1}

/* --- editorial strip (deep olive tension band) --- */
.band{background:var(--olive);color:var(--peach);padding:54px 0}
.band .inner{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.band h2{color:var(--peach);font-size:34px;margin:0}
.band p{color:var(--rose);max-width:440px;margin:8px 0 0}

/* --- sections --- */
.sec{padding:76px 0}
.sec-head{margin-bottom:36px}
.sec-head .kicker{margin-bottom:10px}
.sec-head h2{font-size:40px;margin:0}

/* editorial asymmetric block */
.editorial{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;margin-bottom:22px}
.ed-big{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:440px;
  background:linear-gradient(160deg,var(--rose),var(--terracotta));cursor:pointer}
.ed-big .weave{position:absolute;inset:0;background:repeating-linear-gradient(30deg,rgba(255,255,255,.12) 0 2px,transparent 2px 13px)}
.ed-big .cap{position:absolute;left:30px;bottom:30px;color:#fff}
.ed-big .cap .tag{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.95}
.ed-big .cap h3{color:#fff;font-size:34px;margin:6px 0 0}
.ed-side{display:grid;grid-template-rows:1fr 1fr;gap:22px}

/* product grid + cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;cursor:pointer}
.card:hover{transform:translateY(-5px);box-shadow:0 24px 44px -28px rgba(79,85,67,.45)}
.thumb{aspect-ratio:1;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#FFE8D6,#eddcc8);display:flex;align-items:center;justify-content:center}
.thumb .disc{width:66%;aspect-ratio:1;transition:transform .3s}
.card:hover .thumb .disc{transform:scale(1.04)}
.thumb .photo{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.card:hover .thumb .photo{transform:scale(1.04)}
.pdp .photo{width:100%;height:100%;object-fit:cover;display:block}
.thumb.tote .disc{width:58%;border-radius:46% 46% 50% 50%/40% 40% 60% 60%}
.thumb.fan .disc{width:70%;border-radius:60% 60% 50% 50%/70% 70% 30% 30%}
.thumb.belt .disc{width:82%;height:26%;border-radius:20px}
.thumb.plant .disc{width:56%;border-radius:50% 50% 46% 46%/44% 44% 60% 60%}
.stock-tag{position:absolute;top:12px;left:12px;background:var(--card);color:var(--terracotta-ink);
  font-size:12px;letter-spacing:.04em;padding:5px 12px;border-radius:20px;border:1px solid var(--line)}
.card .body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:5px;flex:1}
.card .cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.card h3{font-size:20px;margin:2px 0 0;color:var(--olive)}
.card .sub{font-size:13.5px;color:var(--olive-2);font-family:'Fraunces',serif;font-style:italic}
.card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:12px}
.price{font-family:'Fraunces',serif;font-size:20px;color:var(--terracotta-ink)}
.price .was{color:var(--sage);text-decoration:line-through;font-size:14px;margin-right:8px;font-style:normal}
.mini{border:1.5px solid var(--sage);color:var(--olive);background:transparent;border-radius:40px;
  font-size:13px;padding:8px 16px;cursor:pointer;font-family:inherit}
.mini:hover{background:var(--olive);color:#fff;border-color:var(--olive)}

/* PDP */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:36px 0 60px}
.crumbs{padding:26px 0 0;font-size:13px;color:var(--olive-2)}
.crumbs a:hover{color:var(--terracotta-ink)}
.gallery .main{aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;position:relative;
  background:linear-gradient(155deg,#FFE8D6,var(--rose))}
.gallery .main .glow{position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(166,94,64,.35),transparent 70%)}
.gallery .main .disc{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:72%;aspect-ratio:1}
.gallery .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.gallery .thumbs button{aspect-ratio:1;border-radius:14px;border:1.5px solid var(--line);cursor:pointer;
  background:linear-gradient(160deg,#FFE8D6,#eddcc8);position:relative}
.gallery .thumbs button[aria-current="true"]{border-color:var(--terracotta-ink)}
.pdp .cat{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
.pdp h1{font-size:44px;margin:12px 0 8px}
.pdp .lead{font-family:'Fraunces',serif;font-style:italic;font-size:20px;color:var(--olive-2);margin:0 0 22px}
.pdp .pricebox{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.pdp .pricebox .now{font-family:'Fraunces',serif;font-size:32px;color:var(--terracotta-ink)}
.pdp .pricebox .was{color:var(--sage);text-decoration:line-through;font-size:19px}
.pdp .stock{color:var(--terracotta-ink);font-size:14px;margin:6px 0 20px;min-height:20px}
.pdp .desc{font-size:16px;color:var(--olive);margin-bottom:26px;max-width:460px}
.opt-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive-2);display:block;margin-bottom:10px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.chip{border:1.5px solid var(--line);background:var(--card);color:var(--olive);border-radius:40px;
  padding:9px 18px;font-size:14px;cursor:pointer;font-family:inherit}
.chip[aria-pressed="true"]{border-color:var(--olive);background:var(--olive);color:#fff}
.buy{display:flex;gap:14px;align-items:center;margin-bottom:26px}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:40px;overflow:hidden;background:var(--card)}
.qty button{background:transparent;border:none;width:44px;height:50px;font-size:18px;cursor:pointer;color:var(--olive);font-family:inherit}
.qty output{width:38px;text-align:center;font-variant-numeric:tabular-nums}
.buy .btn{flex:1}
.details{border-top:1px solid var(--line);padding-top:22px}
.details h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive-2);margin:0 0 12px}
.details dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:14.5px}
.details dt{color:var(--sage)}
.details dd{margin:0;color:var(--olive)}
.ship-line{font-size:14px;color:var(--olive-2);margin-top:16px}

/* bag / cart */
.bag-wrap{padding:36px 0 80px}
.bag-wrap h1{font-size:46px;margin:0 0 6px}
.bag-wrap .sub{font-family:'Fraunces',serif;font-style:italic;color:var(--olive-2);margin:0 0 32px;font-size:18px}
.bag-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:44px;align-items:start}
.bag-item{display:grid;grid-template-columns:100px 1fr auto;gap:20px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px}
.bag-item .pic{width:100px;height:100px;border-radius:16px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#FFE8D6,var(--rose));display:flex;align-items:center;justify-content:center}
.bag-item .pic .disc{width:66%;aspect-ratio:1}
.bag-item .cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.bag-item h3{font-size:20px;margin:3px 0 4px;color:var(--olive)}
.bag-item .variant{font-size:13.5px;color:var(--olive-2)}
.bag-item .note{font-size:13px;color:var(--terracotta-ink);font-family:'Fraunces',serif;font-style:italic;margin-top:8px}
.bag-item .right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
.bag-item .lp{font-family:'Fraunces',serif;font-size:20px;color:var(--terracotta-ink)}
.bag-item .remove{background:none;border:none;color:var(--olive-2);font-size:13px;cursor:pointer;text-decoration:underline;font-family:inherit;margin-top:8px}
.bag-item .remove:hover{color:var(--terracotta-ink)}
.empty{text-align:center;padding:90px 0}
.empty .serif-it{font-size:32px;color:var(--terracotta-ink);display:block;margin-bottom:22px}
.summary{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;position:sticky;top:96px}
.summary h2{font-size:24px;margin:0 0 20px}
.sline{display:flex;justify-content:space-between;font-size:15px;margin-bottom:13px;color:var(--olive)}
.sline.total{border-top:1px solid var(--line);padding-top:16px;margin-top:4px;font-size:20px;
  font-family:'Fraunces',serif;color:var(--terracotta-ink)}
.promo{display:flex;gap:8px;margin:18px 0}
.promo input{flex:1;border:1.5px solid var(--line);border-radius:40px;padding:11px 16px;font-family:inherit;font-size:14px;background:var(--peach);color:var(--olive)}
.checkout{width:100%;margin-top:8px}
.trust{font-size:13px;color:var(--olive-2);text-align:center;margin-top:14px}

/* related */
.keep{display:inline-block;margin-top:6px;color:var(--terracotta-ink);font-family:'Fraunces',serif;font-style:italic;font-size:15px}

/* footer */
.footer{background:var(--rose);color:var(--olive);margin-top:0;padding:60px 0 32px}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px}
.footer .brand{color:var(--olive)}
.footer p{max-width:300px;margin:12px 0 0;color:var(--olive);font-family:'Fraunces',serif;font-style:italic}
.footer h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);margin:0 0 14px}
.footer a{display:block;color:var(--olive);margin-bottom:10px;font-size:14px}
.footer a:hover{color:var(--terracotta-ink)}
.footer .bot{border-top:1px solid rgba(79,85,67,.2);margin-top:40px;padding-top:22px;font-size:12.5px;color:var(--olive-2);text-align:center}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120%);
  background:var(--olive);color:var(--peach);padding:14px 22px;border-radius:40px;font-size:14px;
  z-index:80;transition:transform .3s;box-shadow:0 12px 30px -12px rgba(0,0,0,.4)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* utility */
.center{text-align:center}
[hidden]{display:none !important}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}

@media(max-width:900px){
  .nav-links{display:none}
  .menu-toggle{display:block}
  .drawer{display:block}
  .hero{grid-template-columns:1fr;gap:36px;padding:52px 0}
  .hero h1{font-size:42px}
  .editorial{grid-template-columns:1fr}
  .ed-side{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .pdp{grid-template-columns:1fr;gap:34px}
  .bag-layout{grid-template-columns:1fr}
  .summary{position:static}
  .band .inner{flex-direction:column}
  .footer .cols{grid-template-columns:1fr;gap:28px}
}



/* ---- find your wicker: floating control + quiz ---- */
.oracle-fab{position:fixed;right:22px;bottom:22px;z-index:40;background:var(--terracotta-ink);color:#fff;
  border-radius:40px;padding:12px 20px;font-size:14px;letter-spacing:.04em;text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.18);font-family:'Fraunces',serif;transition:transform .15s;}
.oracle-fab:hover{transform:translateY(-2px)}
@media (max-width:600px){.oracle-fab{right:14px;bottom:14px;padding:10px 16px;font-size:13px}}

.quiz-wrap{max-width:640px;margin:0 auto;padding:60px 20px;text-align:center}
.quiz-progress{display:flex;justify-content:center;gap:8px;margin-bottom:18px}
.quiz-progress .dot{width:8px;height:8px;border-radius:50%;background:var(--line);display:inline-block}
.quiz-progress .dot.on{background:var(--terracotta-ink)}
.quiz-q{font-size:30px;margin:0 0 30px}
.quiz-opts{display:flex;flex-direction:column;gap:14px;max-width:420px;margin:0 auto}
.quiz-opt{border:1.5px solid var(--line);background:var(--card);color:var(--olive);border-radius:var(--radius);
  padding:16px 20px;font-size:17px;cursor:pointer;font-family:inherit;text-align:left;transition:border-color .15s,transform .15s}
.quiz-opt:hover{border-color:var(--terracotta-ink);transform:translateY(-1px)}
.quiz-result h2{font-size:38px;margin:0 0 12px}
.quiz-result .lead{font-family:'Fraunces',serif;font-style:italic;font-size:18px;color:var(--olive-2);
  margin:0 auto 34px;max-width:480px}
.quiz-result .grid{margin-bottom:34px;text-align:left}
.quiz-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}


/* ============================================================
   Promo codes (bag summary)
   ============================================================ */
.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}
.sline.discount{color:var(--terracotta-ink)}
.sline.discount span:first-child{display:flex;align-items:center;gap:8px}
.promo-remove{background:none;border:none;padding:4px 6px;margin:-4px -6px;font:inherit;font-size:12px;
  color:var(--olive-2);text-decoration:underline;cursor:pointer}
.promo-remove:hover{color:var(--terracotta-ink)}
.promo input{font-size:16px}           /* ≥16px stops iOS zooming the page on focus */
.promo-msg{font-size:13px;color:var(--terracotta-ink);margin:-8px 0 12px;min-height:18px}

/* ============================================================
   Wicker daddy launch modal
   ============================================================ */
.modal-backdrop{position:fixed;inset:0;z-index:90;background:rgba(79,85,67,.55);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;
  overscroll-behavior:contain;overflow-y:auto}
.modal-backdrop[hidden]{display:none}
.daddy-modal{position:relative;display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:0;max-width:880px;width:100%;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 8px 20px -12px rgba(79,85,67,.45), 0 40px 80px -32px rgba(79,85,67,.55);
  animation:daddy-in .32s cubic-bezier(.2,.7,.3,1)}
@keyframes daddy-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.daddy-modal{animation:none}}

.daddy-art{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,var(--rose),var(--terracotta));overflow:hidden}
.daddy-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.daddy-art .disc{width:62%;aspect-ratio:1}

.daddy-copy{padding:38px 38px 32px}
.daddy-copy .kicker{margin-bottom:14px}
.daddy-copy h2{font-size:30px;line-height:1.15;margin:0 0 14px}
.daddy-copy p{font-size:15.5px;color:var(--olive);margin:0 0 22px;max-width:42ch}

.daddy-code{display:flex;align-items:stretch;gap:10px;margin-bottom:20px}
.daddy-code code{flex:1;display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;letter-spacing:.18em;
  color:var(--terracotta-ink);background:var(--peach);border:1.5px dashed var(--rose);
  border-radius:12px;padding:13px 16px}
.daddy-code .mini{padding:10px 20px}

.daddy-modal .btn{width:100%;text-align:center}
.daddy-decline{display:block;width:100%;margin-top:14px;background:none;border:none;
  font-family:'Fraunces',serif;font-style:italic;font-size:14px;color:var(--olive-2);
  cursor:pointer;padding:8px;text-decoration:underline}
.daddy-decline:hover{color:var(--terracotta-ink)}

.daddy-close{position:absolute;top:12px;right:14px;z-index:2;width:40px;height:40px;
  display:grid;place-items:center;font-size:26px;line-height:1;
  background:var(--card);color:var(--olive);border:1px solid var(--line);border-radius:50%;cursor:pointer}
.daddy-close:hover{background:var(--olive);color:var(--peach);border-color:var(--olive)}

@media(max-width:760px){
  .daddy-modal{grid-template-columns:1fr;max-width:440px}
  .daddy-art{min-height:200px}
  .daddy-copy{padding:26px 24px 24px}
  .daddy-copy h2{font-size:25px}
}

/* Hero photograph (replaces the CSS-placeholder woven disc) */
.hero-art .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:var(--radius-lg)}
/* Warm the photo very slightly toward the brand palette so it sits in the page
   rather than looking pasted on. */
.hero-art .hero-photo{filter:saturate(.92) contrast(1.02)}

/* Announcement bar: countdown + code emphasis */
.announce b{color:var(--rose);font-weight:500;letter-spacing:.2em}
.announce-sep{opacity:.5;margin:0 10px}
.announce-count{font-variant-numeric:tabular-nums}

/* ============================================================
   PDP gallery (thumbnails were dead buttons; 163 photos unreachable)
   ============================================================ */
.gallery .thumbs button.thumb-btn{padding:0;overflow:hidden;background:none;
  border:1.5px solid var(--line);border-radius:14px;aspect-ratio:1;cursor:pointer;
  transition:border-color .15s,transform .15s}
.gallery .thumbs button.thumb-btn img{width:100%;height:100%;object-fit:cover;display:block}
.gallery .thumbs button.thumb-btn:hover{border-color:var(--terracotta);transform:translateY(-2px)}
.gallery .thumbs button.thumb-btn[aria-current="true"]{border-color:var(--terracotta-ink);border-width:2px}
.gallery .main .photo{animation:photo-in .22s ease}
@keyframes photo-in{from{opacity:.4}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .gallery .main .photo{animation:none}
  .gallery .thumbs button.thumb-btn:hover{transform:none}
}

/* Related products rail on the PDP */
.sec.related{padding-top:0;border-top:1px solid var(--line);padding-top:56px}

/* Thumbs were a fixed 4-column grid, so products with 5-6 photos orphaned the last
   one onto a second row. Single row that divides evenly for any count instead. */
.gallery .thumbs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}

/* ============================================================
   DAY MARKET revamp — see DESIGN.md.
   Layout structure taken from the "night market" study, recoloured onto the
   existing peach palette. Three additions: a warm daylight wash, the shop
   "stall" drag rail, and the olive oracle band that carries the cast art.
   ============================================================ */

/* Daylight wash. Where the dark study used lamp glow to model depth, the light
   page uses two soft warm radials at opposite corners. Sits above the wheat
   texture (z-index:-1) but below all content, so it tints without washing type. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1000px 620px at 76% 4%, rgba(203,153,126,.24), transparent 62%),
    radial-gradient(760px 520px at 4% 84%, rgba(221,190,169,.28), transparent 66%);
}

/* --- hero photo caption ------------------------------------------------- */
.hero-art .shot-scrim{position:absolute;inset:0;border-radius:var(--radius-lg);pointer-events:none;
  background:linear-gradient(200deg,rgba(255,243,233,.18),transparent 44%,rgba(79,85,67,.5))}
.hero-art .shot-cap{position:absolute;left:22px;bottom:18px;z-index:2;
  font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--peach)}

/* --- the stall: horizontal drag rail ------------------------------------ */
/* Replaces the home page's fixed 4-up grid. A rail reads as "a stall you walk
   past" rather than "a catalogue", and it degrades to a normal scroll on touch. */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(266px,1fr);
  gap:22px;overflow-x:auto;padding:4px 2px 18px;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--terracotta) var(--line)}
.rail > *{scroll-snap-align:start}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-track{background:var(--line);border-radius:40px}
.rail::-webkit-scrollbar-thumb{background:var(--terracotta);border-radius:40px}
.rail::-webkit-scrollbar-thumb:hover{background:var(--terracotta-ink)}
.rail-hint{margin:6px 0 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
/* the card lifts on hover in the grid; in a rail that would clip against the
   scroll container, so give it room rather than removing the affordance */
.rail .card:hover{transform:translateY(-6px);border-color:var(--terracotta)}

/* --- section head with a right-hand aside ------------------------------- */
.sec-head.split{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:34px}
.sec-head.split h2{margin:0}
.sec-head.split .aside{font-family:'Fraunces',serif;font-style:italic;font-size:13.5px;
  color:var(--olive-2);text-align:right;margin:0}

/* --- oracle band: the one tonal break on the page ----------------------- */
/* DESIGN.md reserves olive for exactly this. It used to be a bare text band;
   it now carries the three archetype illustrations, which is what earns it. */
.oracle-band{background:var(--olive);border-radius:var(--radius-lg);
  padding:60px 44px;margin:0 0 80px;position:relative;overflow:hidden}
.oracle-band::before{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-200px;
  border-radius:50%;background:radial-gradient(circle,rgba(221,190,169,.2),transparent 66%)}
.oracle-band .kicker{color:var(--rose);margin-bottom:12px;position:relative}
.oracle-band h2{color:var(--peach);font-size:44px;line-height:1.1;max-width:17ch;margin:0;position:relative}
.oracle-band .blurb{color:#E4E0D2;max-width:46ch;margin:14px 0 0;position:relative}
.oracle-band .btn{margin-top:34px;position:relative;background:var(--rose);color:var(--olive)}
.oracle-band .btn:hover{background:var(--peach);color:var(--olive)}

.cast{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;position:relative}
.cast figure{margin:0;background:rgba(255,243,233,.07);border:1px solid rgba(221,190,169,.3);
  border-radius:var(--radius);overflow:hidden;transition:transform .25s,border-color .25s}
.cast figure:hover{border-color:var(--rose);transform:translateY(-4px)}
.cast img{display:block;width:100%;height:auto;aspect-ratio:1}
.cast figcaption{padding:14px 16px 18px}
.cast h3{color:var(--peach);font-size:20px;margin:0}
.cast .t{font-family:'Fraunces',serif;font-style:italic;font-size:14px;color:var(--rose);margin:4px 0 0}

/* --- archetype portrait on the quiz result ------------------------------ */
.quiz-portrait{width:200px;height:200px;margin:0 auto 20px;border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--line);background:var(--card)}
.quiz-portrait img{width:100%;height:100%;display:block}

/* The modal art is a dark illustration; drop the rose gradient behind it so the
   figure's own lamplight reads instead of fighting a peach backdrop. */
.daddy-art{background:#120D08}

@media(max-width:900px){
  .oracle-band{padding:40px 24px;border-radius:var(--radius)}
  .oracle-band h2{font-size:31px}
  .cast{grid-template-columns:1fr}
  .rail{grid-auto-columns:minmax(228px,78vw)}
  .sec-head.split{flex-direction:column;align-items:flex-start;gap:10px}
  .sec-head.split .aside{text-align:left}
}

/* Hero headline picked up an <em> in the revamp; and the fixed 60px was too
   timid next to the new photo treatment. */
.hero h1{font-size:clamp(42px,6.6vw,72px);line-height:1.02;letter-spacing:-.02em}
.hero h1 em{font-style:italic;color:var(--terracotta)}
.hero p{max-width:44ch}

/* The quiz result reuses .grid (4 columns) but lives inside .quiz-wrap, which is
   capped at 640px — so each card landed at ~140px and titles broke one word per
   line. The result needs the full page width, and the picks read better as the
   same stall rail used on the home page. */
.quiz-wrap.quiz-result{max-width:var(--maxw)}
.quiz-result .rail{text-align:left;margin-top:8px}
.quiz-result .rail .card{scroll-snap-align:start}

/* ============================================================
   Archetype pick dialog (oracle band cards -> confirm -> shop that edit)
   ============================================================ */

/* The cast card is now a button. Reset the UA button styling so it keeps the
   figure's card appearance, and give it a real hover/focus affordance since it
   is interactive and the surrounding band is not. */
.cast-pick{display:block;width:100%;padding:0;border:0;background:none;font:inherit;
  color:inherit;text-align:left;cursor:pointer;border-radius:var(--radius)}
.cast-pick figure{transition:transform .25s,border-color .25s,box-shadow .25s}
.cast-pick:hover figure{border-color:var(--rose);transform:translateY(-4px);
  box-shadow:0 24px 44px -28px rgba(0,0,0,.5)}
.cast-pick:focus-visible{outline:2.5px solid var(--rose);outline-offset:4px}
/* .cast figure already carries the hover lift for the non-interactive case;
   drop it here so the two do not compound into an 8px jump. */
.cast .cast-pick figure:hover{transform:none}
.cast-pick:hover figure{transform:translateY(-4px)}

.pick-modal{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  max-width:760px;width:100%;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 8px 20px -12px rgba(79,85,67,.45), 0 40px 80px -32px rgba(79,85,67,.55);
  animation:daddy-in .32s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion: reduce){.pick-modal{animation:none}}
.pick-art{background:var(--peach);display:flex;align-items:center;justify-content:center}
.pick-art img{width:100%;height:100%;object-fit:cover;display:block}
.pick-copy{padding:38px 38px 32px;display:flex;flex-direction:column;justify-content:center}
.pick-copy .kicker{margin-bottom:10px}
.pick-copy h2{font-size:34px;line-height:1.1;margin:0 0 14px;text-transform:lowercase}
.pick-copy p{font-size:15.5px;color:var(--olive);margin:0 0 24px;max-width:42ch}
.pick-modal .btn{width:100%;text-align:center}

@media(max-width:760px){
  .pick-modal{grid-template-columns:1fr;max-width:420px}
  .pick-art{max-height:190px}
  .pick-art img{object-position:center 30%}
  .pick-copy{padding:24px 24px 22px}
  .pick-copy h2{font-size:27px}
}

/* ============================================================
   Iteration: editorial polish pass (2026-08-30)
   ============================================================ */

/* Unified photo treatment: supplier photos arrive on a dozen different whites.
   Multiply-blending them into the warm card gradient pulls every thumbnail onto
   the same peach paper, which is most of what "art-directed" means at grid scale. */
.thumb .photo{mix-blend-mode:multiply}
.gallery .main .photo{mix-blend-mode:multiply}
.bag-item .pic img{mix-blend-mode:multiply;width:100%;height:100%;object-fit:cover}
.gallery .thumbs button.thumb-btn img{mix-blend-mode:multiply}
.gallery .thumbs button.thumb-btn{background:linear-gradient(160deg,#FFE8D6,#eddcc8)}

/* Editorial catalogue number on cards */
.card .cat{display:flex;justify-content:space-between;align-items:baseline}
.card .num{font-family:'Fraunces',serif;font-style:italic;text-transform:none;
  letter-spacing:.06em;color:var(--terracotta);font-size:12px}
.card:hover h3{color:var(--terracotta-ink)}

/* Scroll reveal: only elements the observer has claimed (.rv) start hidden. */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.2,.65,.3,1),transform .6s cubic-bezier(.2,.65,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none}}

/* Ticker: one long editorial line drifting past, like stall bunting. */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 0;background:var(--card)}
.ticker-track{display:inline-flex;gap:34px;white-space:nowrap;align-items:baseline;
  animation:tick 36s linear infinite;will-change:transform}
.ticker span{font-family:'Fraunces',serif;font-style:italic;font-size:19px;color:var(--terracotta-ink)}
.ticker i{color:var(--sage);font-style:normal;font-size:13px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.ticker-track{animation:none}}

/* Quiz option index letter */
.quiz-opt .opt-ix{font-family:'Fraunces',serif;font-style:italic;color:var(--terracotta);margin-right:6px}

/* Notes page */
.notes .note-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:920px}
.notes article{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.notes h3{font-size:24px;margin:0 0 10px}
.notes p{margin:0;font-size:15.5px;color:var(--olive)}
@media(max-width:900px){.notes .note-cols{grid-template-columns:1fr}}

/* Cross-page view transition: quick fade, no layout morphing. */
@media not (prefers-reduced-motion: reduce){
  ::view-transition-old(root){animation:vt-out .16s ease both}
  ::view-transition-new(root){animation:vt-in .22s ease both}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}to{opacity:1}}

/* Hero: a touch more presence at desktop */
.hero h1{font-size:clamp(44px,7vw,84px)}

/* Editorial quote tiles inside the shop grid */
.quote-tile{background:var(--olive);border-color:var(--olive);display:flex;align-items:center;
  justify-content:center;padding:28px;cursor:default;min-height:280px}
.quote-tile:hover{transform:none;box-shadow:none}
.quote-tile p{font-family:'Fraunces',serif;font-style:italic;font-size:21px;line-height:1.45;
  color:var(--peach);margin:0;max-width:22ch;text-align:center}

/* Non-affiliation fine print in the daddy modal */
.daddy-legal{font-size:11.5px;line-height:1.5;color:var(--olive-2);margin:14px 0 0;opacity:.85}

/* Editorial sign-off (replaces the photo promo band) */
.signoff{padding:110px 0 120px;text-align:center;border-top:1px solid var(--line)}
.signoff .kicker{margin-bottom:26px}
.signoff-line{font-family:'Fraunces',serif;font-weight:400;color:var(--terracotta-ink);
  font-size:clamp(34px,4.6vw,58px);line-height:1.12;letter-spacing:-.01em;margin:0 0 38px}
.signoff-line em{font-style:italic;color:var(--terracotta)}
@media(max-width:900px){.signoff{padding:70px 0 80px}}