/* =====================================================================
   Cioccolato Aurea — house stylesheet
   Layout concept: a porcelain gift box. Ivory paper surfaces, chocolate
   bands, gold hairlines; photography framed in jharokha (Mughal) arches.
   ===================================================================== */
:root{
  --ivory:#FBF7F0; --paper:#FFFDF9; --cream:#F4EBDD; --sand:#E8DAC3; --blush:#F7EDE6;
  --cocoa:#24130A; --cocoa-2:#3A1E0E; --ganache:#5A3420; --ink:#2B1A10; --muted:#78614F; --muted-2:#9A8574;
  --gold:#AD832F; --gold-hi:#D7B26A; --gold-lo:#86621F; --gold-pale:#F0E2BF; --gold-ink:#7A5818;
  --line:rgba(65,33,10,.13); --line-2:rgba(65,33,10,.22); --line-gold:rgba(173,131,47,.38);
  --c-classics:#8A5A2B; --c-fruit:#B93D5D; --c-nut:#6C8D43; --c-indian:#D27C27; --c-cake:#9B1D33;
  --foil:linear-gradient(115deg,#86621F 0%,#C49A47 20%,#F2DFA8 36%,#B88A36 52%,#E9CD88 70%,#93702A 100%);
  --foil-soft:linear-gradient(115deg,#B48A3A,#E8CF8E 45%,#B98B37 70%,#D9B66B);
  --display:"Playfair Display","Bodoni 72","Didot",Georgia,"Times New Roman",serif;
  --body:"Jost","Futura","Avenir Next","Century Gothic","Segoe UI",system-ui,-apple-system,sans-serif;
  --step--2:.75rem; --step--1:.875rem; --step-0:1.0625rem; --step-1:1.25rem; --step-2:1.6rem; --step-3:clamp(1.9rem,3.2vw,2.6rem);
  --step-4:clamp(2.3rem,4.6vw,3.6rem); --step-5:clamp(2.7rem,6.2vw,5.4rem);
  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:28px;
  --shadow-1:0 1px 2px rgba(42,22,12,.06),0 8px 24px -12px rgba(42,22,12,.18);
  --shadow-2:0 30px 70px -30px rgba(42,22,12,.38);
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --gutter:max(20px,env(safe-area-inset-left,0px));
  --gutter-r:max(20px,env(safe-area-inset-right,0px));
  --header-h:76px;
  color-scheme:light;
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s var(--ease) both}
::view-transition-new(root){animation:vt-in .55s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 24px)}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--body);font-size:var(--step-0);line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--cocoa)}
img,video,svg,canvas{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration-color:var(--line-gold);text-underline-offset:.22em}
a:hover{text-decoration-color:var(--gold)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold-pale);color:var(--cocoa)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--cocoa);color:var(--paper);padding:10px 16px;border-radius:10px}
.skip-link:focus{top:12px}

h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.08;letter-spacing:-.012em;margin:0;text-wrap:balance;color:var(--cocoa)}
h1{font-size:var(--step-5)} h2{font-size:var(--step-4)} h3{font-size:var(--step-2);line-height:1.18} h4{font-size:var(--step-1)}
p{margin:0;text-wrap:pretty}
em,.it{font-style:italic}
.gold-it{font-style:italic;color:var(--gold);font-weight:400}
.foil{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% 100%;animation:foil 7s linear infinite}
@keyframes foil{to{background-position:-220% 0}}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink);font-weight:500}
.eyebrow::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--foil);flex:none}
.lede{font-size:clamp(1.06rem,1.4vw,1.2rem);color:var(--muted);max-width:60ch;font-weight:400;line-height:1.7}
.small{font-size:var(--step--1)}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums lining-nums}

.container{width:100%;max-width:1320px;margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.container.narrow{max-width:880px}
.section{padding-block:clamp(64px,9vw,128px)}
.section.tight{padding-block:clamp(44px,6vw,80px)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-bottom:clamp(32px,4vw,56px)}
.section-head>div{display:flex;flex-direction:column;gap:14px;max-width:720px;min-width:0}
.section-head.center{flex-direction:column;align-items:center;text-align:center}
.section-head.center>div{align-items:center}
.band-cream{background:var(--cream)}
.band-paper{background:var(--paper)}
.band-cocoa{background:var(--cocoa);color:#EFE3CF}
.band-cocoa h1,.band-cocoa h2,.band-cocoa h3{color:#FBF1DF}
.band-cocoa .lede,.band-cocoa .muted{color:rgba(239,227,207,.72)}
.band-cocoa .eyebrow{color:var(--gold-hi)}
.divider{display:flex;align-items:center;gap:14px;color:var(--gold);justify-content:center}
.divider::before,.divider::after{content:"";height:1px;flex:1;max-width:140px;background:linear-gradient(90deg,transparent,var(--line-gold))}
.divider::after{transform:scaleX(-1)}
.divider i{width:8px;height:8px;transform:rotate(45deg);background:var(--foil)}

/* ---------- buttons ---------- */
.btn{--bg:var(--cocoa);--fg:#FBF3E4;--bd:var(--cocoa);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 26px;border-radius:999px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);text-decoration:none;
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;line-height:1;white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .3s,color .3s,border-color .3s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 48%,transparent 66%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(42,22,12,.55)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:18px;height:18px;flex:none}
.btn-gold{--bg:#B18734;--fg:#24130A;--bd:#A07A2C;background:var(--foil);background-size:200% 100%;background-position:0 0;text-shadow:0 1px 0 rgba(255,246,222,.35);font-weight:600}
.btn-gold:hover{background-position:100% 0}
.btn-ghost{--bg:transparent;--fg:var(--cocoa);--bd:var(--line-2)}
.btn-ghost:hover{--bd:var(--gold);--fg:var(--cocoa);background:rgba(173,131,47,.06)}
.band-cocoa .btn-ghost{--fg:#F6EBD8;--bd:rgba(215,178,106,.45)}
.btn-light{--bg:#FBF3E4;--fg:var(--cocoa);--bd:#FBF3E4}
.btn-sm{min-height:42px;padding:0 18px;font-size:.72rem}
.btn-lg{min-height:58px;padding:0 34px;font-size:.84rem}
.btn-block{width:100%}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;text-decoration:none;color:var(--cocoa)}
.link-arrow svg{width:22px;height:22px;transition:transform .35s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}
.band-cocoa .link-arrow{color:var(--gold-hi)}

/* ---------- announcement + header ---------- */
.announce{background:var(--cocoa);color:#EADBC2;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding-block:9px;
  padding-left:var(--gutter);padding-right:var(--gutter-r);position:relative;z-index:61}
.announce a{color:var(--gold-hi);text-decoration:none}
.announce b{color:#F6E7C8;font-weight:500}
.announce .sep{display:inline-block;width:5px;height:5px;transform:rotate(45deg);background:var(--gold);margin:0 12px;vertical-align:2px}
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;transition:transform .45s var(--ease)}
.site-header .bar{background:rgba(251,247,240,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s,box-shadow .3s}
.site-header.scrolled .bar{border-bottom-color:var(--line);background:rgba(251,247,240,.94);box-shadow:0 10px 30px -24px rgba(42,22,12,.5)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header-h);transition:height .35s var(--ease)}
.site-header.scrolled .nav-wrap{height:64px}
.brand{display:block;flex:none;line-height:0}
.brand img{width:auto;height:58px;transition:height .35s var(--ease)}
.site-header.scrolled .brand img{height:48px}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav a{position:relative;text-decoration:none;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ganache);font-weight:500;padding-block:10px;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{color:var(--cocoa)}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);color:var(--cocoa);background:transparent;transition:all .3s var(--ease)}
.icon-btn:hover{border-color:var(--gold);color:var(--gold-lo);transform:translateY(-2px)}
.icon-btn svg{width:18px;height:18px}
.menu-toggle{display:none;position:relative;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper)}
.menu-toggle span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--cocoa);transition:transform .4s var(--ease),top .4s var(--ease)}
.menu-toggle span:nth-child(1){top:18px}.menu-toggle span:nth-child(2){top:26px}
.menu-toggle[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){top:22px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:58;background:var(--cocoa);color:#F2E6D2;padding:calc(var(--header-h) + 60px + env(safe-area-inset-top,0px)) var(--gutter-r) 40px var(--gutter);
  display:flex;flex-direction:column;gap:28px;overflow-y:auto;clip-path:circle(0% at calc(100% - 40px) 40px);transition:clip-path .7s var(--ease-out);visibility:hidden}
.mobile-menu.open{clip-path:circle(150% at calc(100% - 40px) 40px);visibility:visible}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu nav a{font-family:var(--display);font-size:clamp(1.9rem,8vw,2.6rem);text-decoration:none;color:#FBF1DF;padding-block:8px;border-bottom:1px solid rgba(215,178,106,.18);
  display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s var(--ease-out)}
.mobile-menu nav a span{font-family:var(--body);font-size:.7rem;letter-spacing:.2em;color:var(--gold-hi)}
.mobile-menu.open nav a{opacity:1;transform:none}
.mobile-menu.open nav a:nth-child(2){transition-delay:.04s}.mobile-menu.open nav a:nth-child(3){transition-delay:.08s}.mobile-menu.open nav a:nth-child(4){transition-delay:.12s}
.mobile-menu.open nav a:nth-child(5){transition-delay:.16s}.mobile-menu.open nav a:nth-child(6){transition-delay:.2s}.mobile-menu.open nav a:nth-child(7){transition-delay:.24s}.mobile-menu.open nav a:nth-child(8){transition-delay:.28s}
.mobile-menu .mm-foot{display:flex;flex-direction:column;gap:18px;margin-top:auto}
body.menu-open{overflow:hidden}
body.menu-open .site-header .bar{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent;box-shadow:none}
body.menu-open .brand img{filter:brightness(0) invert(1) sepia(.35) saturate(2) hue-rotate(-12deg) brightness(.95)}
@media (max-width:1100px){
  .nav,.nav-actions .hide-md{display:none}
  .menu-toggle{display:inline-block}
}
@media (max-width:640px){
  :root{--header-h:66px}
  .brand img{height:48px}
  .site-header.scrolled .brand img{height:42px}
  .nav-actions .btn{display:none}
  .announce{font-size:.64rem;letter-spacing:.14em}
  .announce .sep,.announce .hide-sm{display:none}
}

/* ---------- arch frames (jharokha) ---------- */
.arch-frame{position:relative;isolation:isolate}
.arch{position:relative;overflow:hidden;clip-path:url(#archClip);-webkit-clip-path:url(#archClip);background:var(--sand)}
.arch>img,.arch>video,.arch>picture,.arch>picture img{width:100%;height:100%;object-fit:cover}
.arch-line{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);pointer-events:none;overflow:visible;z-index:2}
.arch-line path{fill:none;stroke:url(#goldStroke);stroke-width:1.2;vector-effect:non-scaling-stroke}
.arch-line.dark path{stroke:rgba(215,178,106,.6)}
.frame-round{border-radius:var(--r-lg);overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(36px,6vw,84px) clamp(48px,7vw,96px)}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:62vw;height:62vw;max-width:900px;max-height:900px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(215,178,106,.22),rgba(215,178,106,0) 62%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center;position:relative}
.hero-copy{display:flex;flex-direction:column;gap:26px;min-width:0}
.hero-title{font-size:var(--step-5);line-height:1.02;letter-spacing:-.02em}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero-title .line>span{display:inline-block;animation:rise 1.1s var(--ease-out) both}
.hero-title .line:nth-child(2)>span{animation-delay:.12s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-facts{list-style:none;margin:6px 0 0;padding:22px 0 0;display:grid;grid-template-columns:repeat(3,auto);gap:12px 34px;border-top:1px solid var(--line);justify-content:start}
.hero-facts li{display:flex;flex-direction:column;gap:2px;min-width:0}
.hero-facts b{font-family:var(--display);font-weight:500;font-size:1.15rem;color:var(--cocoa);white-space:nowrap}
.hero-facts span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero-visual{position:relative;padding:28px 34px 40px;min-width:0}
.hero-visual .arch-frame{max-width:500px;margin-inline:auto}
.hero-visual .arch{aspect-ratio:4/5.1}
.kenburns{animation:kb 22s ease-in-out infinite alternate;transform-origin:50% 40%}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
.hero-pile{position:absolute;left:-2%;bottom:-6px;width:min(64%,360px);z-index:3;pointer-events:none;filter:drop-shadow(0 14px 14px rgba(42,22,12,.22))}
.float{position:absolute;z-index:3;width:clamp(120px,15vw,220px);filter:drop-shadow(0 22px 26px rgba(42,22,12,.28));will-change:transform;pointer-events:none}
.float.f1{left:0;bottom:16%;animation:bob 7s ease-in-out infinite}
.float.f2{right:0;top:14%;width:clamp(100px,12vw,176px);animation:bob 8.5s ease-in-out -2s infinite}
.float.f3{right:2%;bottom:24%;width:clamp(90px,10vw,150px);animation:bob 9s ease-in-out -4s infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
.hero-tag{position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:10px;background:rgba(255,253,249,.92);
  backdrop-filter:blur(8px);border:1px solid var(--line-gold);border-radius:999px;padding:9px 16px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;box-shadow:var(--shadow-1)}
.hero-tag a{text-decoration:none;font-weight:500;color:var(--cocoa)}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--c-nut);box-shadow:0 0 0 0 rgba(108,141,67,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(108,141,67,0)}100%{box-shadow:0 0 0 0 rgba(108,141,67,0)}}
.hero-seal{position:absolute;left:-10px;top:30%;z-index:4;width:112px;height:112px;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{padding:30px 22px 34px}
  .hero-visual .arch-frame{max-width:400px}
  .hero-facts{grid-template-columns:repeat(2,auto)}
  .hero-seal{width:88px;height:88px;left:0}
}
@media (max-width:480px){.hero-facts{grid-template-columns:1fr 1fr;gap:14px 18px}.hero-facts li:nth-child(2){order:3;grid-column:1/-1}.hero-facts b{font-size:1rem;white-space:normal}}

/* ---------- marquee ---------- */
.marquee{background:var(--cocoa);color:#F0E1C6;overflow:hidden;border-block:1px solid rgba(215,178,106,.25);padding-block:16px}
.marquee-track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;font-family:var(--display);font-style:italic;font-size:clamp(1.1rem,2vw,1.5rem);white-space:nowrap}
.marquee-track span::after{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--foil)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- flavour cards ---------- */
.flav-card{--tint:var(--cream);--accent:var(--gold);position:relative;display:flex;flex-direction:column;gap:16px;min-width:0}
.fc-media{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;
  background:radial-gradient(120% 90% at 50% 12%,#fff 0%,var(--tint) 58%,color-mix(in srgb,var(--tint) 82%,var(--accent) 18%) 100%);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.fc-media::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);transition:transform 1.1s var(--ease);z-index:2;pointer-events:none}
.fc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(1.02);transition:transform .9s var(--ease-out)}
.flav-card:hover .fc-media{box-shadow:0 26px 50px -30px rgba(42,22,12,.55);transform:translateY(-4px)}
.flav-card:hover .fc-media::before{transform:translateX(120%)}
.flav-card:hover .fc-media img{transform:scale(1.07) rotate(-1.5deg)}
.badge{position:absolute;left:14px;top:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;background:rgba(255,253,249,.92);color:var(--cocoa);border:1px solid var(--line-gold);
  border-radius:999px;padding:6px 12px;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.badge i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.flag{position:absolute;right:14px;top:14px;z-index:3;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;background:var(--cocoa);color:#F3E3C6;border-radius:999px;padding:5px 10px}
.fc-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.fc-col{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500}
.fc-name{font-size:1.38rem;line-height:1.15}
.fc-name a{text-decoration:none}
.fc-name a::after{content:"";position:absolute;inset:0;z-index:1}
.fc-line{color:var(--muted);font-size:.95rem;line-height:1.55}
.fc-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;position:relative;z-index:2}
.add-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--paper);border-radius:999px;padding:9px 15px 9px 12px;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--cocoa);transition:all .3s var(--ease)}
.add-btn svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.add-btn:hover{border-color:var(--gold);background:var(--gold-pale)}
.add-btn:hover svg{transform:rotate(90deg)}
.add-btn.added{background:var(--cocoa);color:#F7E9CF;border-color:var(--cocoa)}
.view-link{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--muted);font-weight:500}
.view-link:hover{color:var(--cocoa)}
.grid-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,34px) clamp(14px,2vw,28px)}
@media (max-width:1100px){.grid-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.fc-name{font-size:1.12rem}.fc-line{font-size:.86rem}.fc-actions{flex-wrap:wrap}}
@media (max-width:380px){.grid-cards{grid-template-columns:1fr}}

/* ---------- rail / carousel ---------- */
.rail-wrap{position:relative}
.rail{--rail-pad:var(--gutter);scroll-padding-left:var(--rail-pad);display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,24vw,320px);gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-left:var(--gutter);padding-right:var(--gutter-r);padding-bottom:12px;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.rail.dragging *{pointer-events:none}
.rail>*{scroll-snap-align:start}
@media (min-width:1320px){.rail{--rail-pad:calc((100vw - 1320px)/2 + 20px);padding-left:var(--rail-pad)}}
.rail-controls{display:flex;align-items:center;gap:16px}
.rail-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);display:grid;place-items:center;transition:all .35s var(--ease)}
.rail-btn:hover:not(:disabled){background:var(--cocoa);color:#F7E9CF;border-color:var(--cocoa);transform:scale(1.05)}
.rail-btn:disabled{opacity:.35;cursor:default}
.rail-btn svg{width:20px;height:20px}
.rail-progress{flex:1;min-width:80px;max-width:240px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.rail-progress i{display:block;height:100%;width:30%;background:var(--foil);transform-origin:left;transition:width .3s var(--ease)}

/* ---------- collections explorer ---------- */
.col-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.col-tab{--accent:var(--gold);display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:12px 20px;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--ganache);transition:all .35s var(--ease)}
.col-tab b{font-family:var(--display);font-weight:500;letter-spacing:0;font-size:.95rem;color:var(--accent)}
.col-tab:hover{border-color:var(--accent)}
.col-tab[aria-selected="true"]{background:var(--cocoa);color:#F7E9CF;border-color:var(--cocoa)}
.col-tab[aria-selected="true"] b{color:var(--gold-hi)}
.col-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.col-panel[hidden]{display:none}
.col-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.col-copy h3{font-size:var(--step-3)}
.chip-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chip-list a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 14px;font-size:.9rem;transition:all .3s var(--ease)}
.chip-list a:hover{border-color:var(--accent,var(--gold));transform:translateY(-2px)}
.chip-list a i{width:9px;height:9px;border-radius:50%;background:var(--dot,var(--gold))}
.col-stage{position:relative;aspect-ratio:5/4;border-radius:var(--r-lg);overflow:hidden;background:radial-gradient(100% 80% at 50% 20%,#fff,var(--tint,var(--cream)))}
.col-stage img{position:absolute;width:44%;filter:drop-shadow(0 16px 20px rgba(42,22,12,.18));transition:transform 1s var(--ease-out),opacity .6s}
.col-stage img:nth-child(2){left:6%;bottom:12%;width:42%}
.col-stage img:nth-child(3){left:31%;top:10%;width:38%}
.col-stage img:nth-child(4){right:5%;bottom:8%;width:44%}
.col-stage .col-count{position:absolute;right:20px;top:18px;font-family:var(--display);font-size:4.4rem;line-height:1;color:var(--accent);opacity:.18}
@media (max-width:860px){.col-panel{grid-template-columns:1fr}}
@media (max-width:640px){.col-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);padding-bottom:4px}.col-tabs::-webkit-scrollbar{display:none}.col-tab{flex:none}
  .price-card{padding:16px 8px}.price-card .pc-n{font-size:2rem}.price-card .pc-f{font-size:.72rem}.price-card .pc-l{font-size:.6rem;letter-spacing:.14em}}

/* ---------- steps + box teaser ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:step}
.step{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;gap:10px;min-width:0}
.step::before{counter-increment:step;content:"Step " counter(step);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);font-weight:500}
.step h3{font-size:1.4rem}
.step p{color:var(--muted);font-size:.98rem}
.step .num{position:absolute;right:20px;top:14px;font-family:var(--display);font-size:3.4rem;line-height:1;color:var(--gold);opacity:.18}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.price-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.price-card{position:relative;border:1px solid var(--line-2);border-radius:var(--r);padding:22px 20px;background:var(--paper);display:flex;flex-direction:column;gap:4px;text-align:center;min-width:0;transition:all .4s var(--ease)}
.price-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow-1)}
.price-card .pc-n{font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--cocoa)}
.price-card .pc-l{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.price-card .pc-p{font-family:var(--display);font-size:1.4rem;color:var(--gold-ink);margin-top:8px}
.price-card .pc-f{font-size:.82rem;color:var(--muted)}
.band-cocoa .price-card{background:rgba(255,255,255,.04);border-color:rgba(215,178,106,.28)}
.band-cocoa .price-card .pc-n{color:#FBF1DF}.band-cocoa .price-card .pc-p{color:var(--gold-hi)}.band-cocoa .price-card .pc-f,.band-cocoa .price-card .pc-l{color:rgba(239,227,207,.7)}
.teaser-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
@media (max-width:900px){.teaser-grid{grid-template-columns:1fr}}

/* the white gift box (used in teaser + studio) */
.giftbox{--cols:2;--rows:4;position:relative;background:linear-gradient(180deg,#FFFFFF,#F6F1EA);border-radius:14px;padding:16px;
  box-shadow:0 1px 0 #fff inset,0 0 0 1px rgba(65,33,10,.08),0 40px 60px -36px rgba(42,22,12,.45);max-width:100%}
.giftbox::after{content:"";position:absolute;left:50%;bottom:-16px;width:46px;height:20px;transform:translateX(-50%);border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,#B88A35,#E8CB82 45%,#A87E2E);box-shadow:0 6px 10px -6px rgba(42,22,12,.5)}
.gb-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:6px;background:#EFE8DD;padding:6px;border-radius:6px;box-shadow:inset 0 2px 6px rgba(42,22,12,.08)}
.gb-cell{position:relative;aspect-ratio:1/1;background:linear-gradient(180deg,#FBF8F3,#F1EBE2);border-radius:3px;display:grid;place-items:center;overflow:hidden}
.gb-cell::before{content:"";position:absolute;inset:14%;border-radius:50%;border:1.5px dashed rgba(65,33,10,.16)}
.gb-cell img{position:relative;width:96%;height:96%;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(42,22,12,.25))}
.gb-cell.fill::before{display:none}
.gb-cell.drop img{animation:dropin .7s var(--ease-out) both}
@keyframes dropin{from{transform:translateY(-30%) scale(1.25);opacity:0}to{transform:none;opacity:1}}
.gb-cell .gb-tag{position:absolute;left:4px;right:4px;bottom:3px;font-size:.56rem;letter-spacing:.06em;text-align:center;color:var(--ganache);background:rgba(255,253,249,.9);border-radius:4px;padding:1px 3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.92;transition:opacity .3s}
.gb-cell:hover .gb-tag{opacity:1}

/* ---------- occasions ---------- */
.occ-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.occ{display:flex;flex-direction:column;gap:16px;min-width:0}
.occ .arch{aspect-ratio:3/4}
.occ .arch img{transition:transform 1.2s var(--ease-out)}
.occ:hover .arch img{transform:scale(1.06)}
.occ h3{font-size:1.5rem}
.occ p{color:var(--muted);font-size:.96rem}
.occ .link-arrow{margin-top:auto}
.band-cocoa .occ p{color:rgba(239,227,207,.72)}
@media (max-width:1000px){.occ-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.occ-grid{grid-template-columns:1fr}.occ .arch{aspect-ratio:4/3.4}}

/* ---------- feature split (video/photo + copy) ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,96px);align-items:center}
.split.rev>:first-child{order:2}
.split-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.media-card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--sand);box-shadow:var(--shadow-2)}
.media-card video,.media-card img{width:100%;height:100%;object-fit:cover}
.media-card .cap{position:absolute;left:16px;bottom:16px;background:rgba(36,19,10,.72);color:#F6EBD6;backdrop-filter:blur(6px);border-radius:999px;padding:7px 14px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.media-duo{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:end}
.media-duo .media-card:nth-child(2){aspect-ratio:9/14;transform:translateY(40px)}
.media-duo .media-card:nth-child(1){aspect-ratio:4/3}
.tick-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.tick-list li{display:flex;gap:12px;align-items:flex-start;color:var(--ink)}
.tick-list li::before{content:"";flex:none;width:9px;height:9px;margin-top:.55em;transform:rotate(45deg);background:var(--foil)}
.band-cocoa .tick-list li{color:#EFE3CF}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.rev>:first-child{order:0}.media-duo .media-card:nth-child(2){transform:none}}

/* ---------- quiz ---------- */
.quiz{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,60px)}
.quiz-q{display:flex;flex-direction:column;gap:14px}
.quiz-q h4{font-family:var(--body);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);font-weight:500}
.choice-row{display:flex;flex-wrap:wrap;gap:8px}
.choice{border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:10px 16px;font-size:.92rem;color:var(--ink);transition:all .3s var(--ease)}
.choice:hover{border-color:var(--gold)}
.choice[aria-pressed="true"]{background:var(--cocoa);color:#F7E9CF;border-color:var(--cocoa)}
.quiz-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-content:start}
.quiz-out .mini{display:flex;flex-direction:column;gap:8px;text-decoration:none;min-width:0}
.quiz-out .mini .fc-media{border-radius:var(--r-sm)}
.quiz-out .mini b{font-family:var(--display);font-weight:500;font-size:1.05rem;line-height:1.2}
.quiz-out .mini span{font-size:.8rem;color:var(--muted)}
@media (max-width:900px){.quiz{grid-template-columns:1fr}}
@media (max-width:520px){.quiz-out{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.quiz-out .mini b{font-size:.86rem}.quiz-out .mini span{display:none}}

/* ---------- loupe photo ---------- */
.loupe{position:relative;border-radius:var(--r-lg);overflow:hidden;cursor:zoom-in;box-shadow:var(--shadow-2);touch-action:pan-y}
.loupe img{width:100%;height:auto}
.loupe-lens{position:absolute;width:210px;height:210px;border-radius:50%;pointer-events:none;border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(173,131,47,.6),0 20px 40px -10px rgba(0,0,0,.45);background-repeat:no-repeat;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .25s,transform .35s var(--ease-out)}
.loupe.active .loupe-lens{opacity:1;transform:translate(-50%,-50%) scale(1)}
.loupe-hint{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:8px;background:rgba(255,253,249,.92);border-radius:999px;padding:8px 14px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;transition:opacity .3s}
.loupe.active .loupe-hint{opacity:0}
.hotspot{position:absolute;width:30px;height:30px;transform:translate(-50%,-50%);border-radius:50%;border:none;background:rgba(255,253,249,.92);box-shadow:0 0 0 0 rgba(255,253,249,.7);animation:hs 2.4s infinite;display:grid;place-items:center;z-index:3}
.hotspot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
@keyframes hs{70%{box-shadow:0 0 0 12px rgba(255,253,249,0)}100%{box-shadow:0 0 0 0 rgba(255,253,249,0)}}
.hotspot-tip{position:absolute;z-index:4;transform:translate(-50%,calc(-100% - 22px));background:var(--cocoa);color:#F6EAD4;border-radius:12px;padding:10px 14px;font-size:.84rem;line-height:1.4;max-width:240px;pointer-events:none;box-shadow:var(--shadow-2)}
.hotspot-tip b{display:block;font-family:var(--display);font-weight:500;font-size:1rem;color:#FFF6E6}

/* ---------- instagram band ---------- */
.ig-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.ig-tile{position:relative;aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;background:var(--sand);display:block}
.ig-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.ig-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(36,19,10,.55));opacity:0;transition:opacity .4s}
.ig-tile:hover img{transform:scale(1.08)}
.ig-tile:hover::after{opacity:1}
.ig-tile svg{position:absolute;right:12px;bottom:12px;width:20px;height:20px;color:#fff;z-index:2;opacity:0;transform:translateY(6px);transition:all .4s var(--ease)}
.ig-tile:hover svg{opacity:1;transform:none}
@media (max-width:900px){.ig-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- journal cards ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.5vw,32px)}
.post-card{display:flex;flex-direction:column;gap:14px;text-decoration:none;min-width:0}
.post-card .pc-img{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--cream)}
.post-card .pc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.post-card:hover .pc-img img{transform:scale(1.05)}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.post-card h3{font-size:1.35rem;line-height:1.22;transition:color .3s}
.post-card:hover h3{color:var(--ganache)}
.post-card p{color:var(--muted);font-size:.95rem}
@media (max-width:960px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.post-grid{grid-template-columns:1fr}}

/* ---------- contact CTA band + social buttons ---------- */
.cta-band{position:relative;overflow:hidden}
.cta-band .container{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.cta-band .watermark{position:absolute;right:-60px;bottom:-40px;width:520px;opacity:.07;color:#F1DDB0;pointer-events:none}
.social-stack{display:flex;flex-direction:column;gap:12px}
.social-btn{--c1:#B88A35;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:16px;padding:14px 20px 14px 14px;border-radius:999px;text-decoration:none;
  border:1px solid rgba(215,178,106,.4);color:#F8EEDC;background:rgba(255,255,255,.03);transition:transform .45s var(--ease),border-color .3s,background-color .3s}
.social-btn .sb-ic{position:relative;flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--foil);background-size:200% 100%;color:#2A160C;transition:background-position .6s var(--ease),transform .6s var(--ease)}
.social-btn .sb-ic::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(215,178,106,.6);animation:ringpulse 2.8s var(--ease) infinite}
.social-btn svg{width:22px;height:22px}
.social-btn .sb-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.social-btn .sb-t b{font-family:var(--display);font-weight:500;font-size:1.15rem;line-height:1.2}
.social-btn .sb-t span{font-size:.78rem;letter-spacing:.06em;color:rgba(239,227,207,.7);overflow-wrap:anywhere}
.social-btn .sb-go{margin-left:auto;width:20px;height:20px;transition:transform .45s var(--ease)}
.social-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(215,178,106,.0),rgba(215,178,106,.18),rgba(215,178,106,0));transform:translateX(-100%);transition:transform .9s var(--ease)}
.social-btn:hover{transform:translateX(6px);border-color:var(--gold-hi);background:rgba(255,255,255,.06)}
.social-btn:hover::before{transform:translateX(100%)}
.social-btn:hover .sb-ic{background-position:100% 0;transform:rotate(-10deg) scale(1.06)}
.social-btn:hover .sb-go{transform:translateX(4px)}
@keyframes ringpulse{0%{transform:scale(.9);opacity:.9}80%,100%{transform:scale(1.35);opacity:0}}
.social-row{display:flex;gap:12px;flex-wrap:wrap}
.soc{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#2A160C;background:var(--foil);background-size:200% 100%;text-decoration:none;transition:transform .45s var(--ease),background-position .6s var(--ease),box-shadow .4s}
.soc::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(215,178,106,.55);opacity:0;transform:scale(.85);transition:all .45s var(--ease)}
.soc:hover{transform:translateY(-4px) rotate(-8deg);background-position:100% 0;box-shadow:0 12px 24px -10px rgba(0,0,0,.45)}
.soc:hover::after{opacity:1;transform:scale(1)}
.soc svg{width:21px;height:21px}
@media (max-width:860px){.cta-band .container{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-footer{background:#1E0F07;color:#D9C8AE;padding-block:clamp(56px,7vw,96px) 30px;position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(215,178,106,.55),transparent)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:clamp(28px,4vw,56px)}
.foot-grid>*{min-width:0}
.foot-brand img{width:220px}
.foot-brand p{margin-top:18px;color:rgba(217,200,174,.75);font-size:.95rem;max-width:36ch}
.site-footer h4{font-family:var(--body);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-hi);font-weight:500;margin-bottom:18px}
.foot-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot-links a{text-decoration:none;color:#E8D9C1;font-size:.96rem;transition:color .3s,padding .3s}
.foot-links a:hover{color:var(--gold-hi);padding-left:4px}
.foot-contact{display:flex;flex-direction:column;gap:12px;font-size:.95rem}
.foot-contact a{color:#F3E6CF;text-decoration:none;overflow-wrap:anywhere}
.foot-contact a:hover{color:var(--gold-hi)}
.foot-contact .k{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(217,200,174,.6)}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid rgba(215,178,106,.18);font-size:.8rem;color:rgba(217,200,174,.6)}
.foot-legal a{color:inherit}
@media (max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- concierge (floating WhatsApp / email / Instagram) ---------- */
.concierge{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.cg-mini{display:flex;flex-direction:column;gap:10px;align-items:center;margin-right:7px}
.cg-btn{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;text-decoration:none;color:#2A160C;background:var(--foil);background-size:200% 100%;
  box-shadow:0 10px 22px -10px rgba(42,22,12,.6),0 0 0 1px rgba(255,255,255,.5) inset;transition:transform .45s var(--ease),background-position .6s var(--ease)}
.cg-btn svg{width:20px;height:20px}
.cg-btn:hover{transform:translateY(-3px) scale(1.06);background-position:100% 0}
.cg-btn .cg-label{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(8px,-50%);background:var(--cocoa);color:#F6EAD4;white-space:nowrap;border-radius:999px;padding:7px 12px;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:0;pointer-events:none;transition:all .35s var(--ease)}
.cg-btn:hover .cg-label,.cg-btn:focus-visible .cg-label{opacity:1;transform:translate(0,-50%)}
.cg-wa{width:62px;height:62px;color:#FFFDF8;background:radial-gradient(circle at 30% 25%,#5A3420,#2A160C 70%);box-shadow:0 18px 34px -12px rgba(42,22,12,.7),0 0 0 2px #C9A04E inset}
.cg-wa svg{width:28px;height:28px;color:#F1D99A}
.cg-wa::before,.cg-wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(201,160,78,.7);animation:wa-ring 2.6s var(--ease) infinite}
.cg-wa::after{animation-delay:1.3s}
@keyframes wa-ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.cg-wa:hover{background:radial-gradient(circle at 30% 25%,#6B4129,#2A160C 70%)}
.cg-badge{position:absolute;top:-2px;right:-2px;width:16px;height:16px;border-radius:50%;background:#C9A04E;border:2px solid var(--ivory);animation:bump 3s ease-in-out infinite}
@keyframes bump{0%,80%,100%{transform:scale(1)}85%{transform:scale(1.3)}90%{transform:scale(.9)}}
.cg-pop{position:absolute;right:0;bottom:calc(100% + 14px);width:min(360px,calc(100vw - 36px));background:var(--paper);border-radius:22px;overflow:hidden;
  box-shadow:0 40px 80px -24px rgba(42,22,12,.5),0 0 0 1px var(--line);transform-origin:bottom right;animation:popin .45s var(--ease-out)}
@keyframes popin{from{opacity:0;transform:translateY(12px) scale(.96)}}
.cg-head{display:flex;align-items:center;gap:12px;background:var(--cocoa);color:#F6EAD4;padding:16px 18px}
.cg-head img{width:44px;height:44px;border-radius:50%;background:var(--ivory);padding:5px;object-fit:contain}
.cg-head b{display:block;font-family:var(--display);font-weight:500;font-size:1.05rem;color:#FFF6E6}
.cg-head small{font-size:.74rem;color:rgba(246,234,212,.75)}
.cg-head small i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7FBF6A;margin-right:6px;vertical-align:1px}
.cg-close{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid rgba(215,178,106,.35);background:transparent;color:#F6EAD4;display:grid;place-items:center}
.cg-body{background:#F3ECE2;padding:16px;display:flex;flex-direction:column;gap:8px;max-height:min(46vh,360px);overflow:auto}
.bubble{align-self:flex-start;background:#fff;border-radius:4px 16px 16px 16px;padding:10px 14px;font-size:.92rem;line-height:1.5;max-width:90%;box-shadow:0 1px 1px rgba(0,0,0,.05)}
.cg-quick{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.cg-quick a{display:flex;justify-content:space-between;align-items:center;gap:10px;text-decoration:none;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:.9rem;transition:all .3s var(--ease)}
.cg-quick a:hover{border-color:var(--gold);transform:translateX(3px)}
.cg-quick a svg{width:16px;height:16px;color:var(--gold)}
.cg-foot{display:flex;gap:8px;padding:14px 16px;border-top:1px solid var(--line);background:var(--paper)}
.cg-foot .btn{flex:1}
@media (max-width:640px){.cg-mini{gap:8px;margin-right:6px}.cg-btn{width:40px;height:40px}.cg-btn svg{width:18px;height:18px}.cg-wa{width:56px;height:56px}.cg-wa svg{width:26px;height:26px}}

/* box pill */
.box-pill{position:fixed;left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:69;display:flex;align-items:center;gap:12px;
  background:var(--cocoa);color:#F6EAD4;border-radius:999px;padding:8px 18px 8px 8px;text-decoration:none;box-shadow:0 20px 40px -18px rgba(42,22,12,.7);animation:popin .5s var(--ease-out)}
.box-pill .bp-ic{width:40px;height:40px;border-radius:50%;background:var(--foil);display:grid;place-items:center;color:#2A160C}
.box-pill .bp-ic svg{width:20px;height:20px}
.box-pill b{font-family:var(--display);font-weight:500;font-size:1rem;color:#FFF6E6;display:block;line-height:1.1}
.box-pill small{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,234,212,.7)}
@media (max-width:640px){.box-pill{bottom:calc(84px + env(safe-area-inset-bottom,0px));padding-right:14px}.box-pill small{display:none}}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:80;background:var(--cocoa);color:#F6EAD4;border-radius:999px;padding:12px 20px;font-size:.9rem;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:all .4s var(--ease-out);display:flex;gap:10px;align-items:center;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast a{color:var(--gold-hi)}

/* ---------- reveal (visible at rest; motion only) ---------- */
.js .reveal{transition:transform 1.1s var(--ease-out),opacity 1.1s var(--ease-out)}
.js .reveal:not(.in){transform:translateY(26px);opacity:.55}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}.js .reveal.d3{transition-delay:.24s}
.js .reveal-img:not(.in) img,.js .reveal-img:not(.in) video{transform:scale(1.08)}
.js .reveal-img img,.js .reveal-img video{transition:transform 1.6s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal:not(.in){transform:none;opacity:1}
}

/* ---------- page hero (inner pages) ---------- */
.page-hero{position:relative;padding-block:clamp(40px,6vw,88px) clamp(36px,5vw,64px);overflow:hidden}
.page-hero .container{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,72px);align-items:end}
.page-hero.solo .container{grid-template-columns:1fr}
.page-hero h1{font-size:clamp(2.5rem,5.4vw,4.6rem)}
.page-hero .ph-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--gold-ink)}
.crumbs span[aria-hidden]{color:var(--gold)}
.ph-stats{display:flex;flex-wrap:wrap;gap:12px 28px}
.ph-stats div{display:flex;flex-direction:column}
.ph-stats b{font-family:var(--display);font-weight:500;font-size:2rem;line-height:1.1;color:var(--cocoa)}
.ph-stats span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
@media (max-width:860px){.page-hero .container{grid-template-columns:1fr;align-items:start}}

/* ---------- collection page ---------- */
.filterbar{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));z-index:30;background:rgba(251,247,240,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-block:1px solid var(--line);padding-block:12px;margin-bottom:clamp(28px,4vw,48px)}
.filterbar .container{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;justify-content:space-between}
.fchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;max-width:100%}
.fchips::-webkit-scrollbar{display:none}
.fchip{flex:none;border:1px solid var(--line-2);background:var(--paper);border-radius:999px;padding:9px 16px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ganache);transition:all .3s var(--ease)}
.fchip:hover{border-color:var(--gold)}
.fchip[aria-pressed="true"]{background:var(--cocoa);color:#F7E9CF;border-color:var(--cocoa)}
.fsearch{position:relative;flex:0 1 280px;min-width:200px}
.fsearch input{width:100%;border:1px solid var(--line-2);background:var(--paper);border-radius:999px;padding:10px 16px 10px 40px;font-size:.95rem;color:var(--ink)}
.fsearch input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(173,131,47,.15)}
.fsearch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted)}
.col-group{margin-bottom:clamp(56px,7vw,96px);scroll-margin-top:150px}
.col-group-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;align-items:end;margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.col-group-head h2{font-size:var(--step-3)}
.col-group-head p{color:var(--muted)}
.no-results{text-align:center;padding:60px 0;color:var(--muted)}
@media (max-width:760px){.col-group-head{grid-template-columns:1fr}.filterbar{top:calc(58px + env(safe-area-inset-top,0px))}}

/* ---------- product page ---------- */
.pdp{padding-block:clamp(20px,3vw,36px) clamp(56px,7vw,100px)}
.pdp-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,80px);align-items:start;margin-top:22px}
.pdp-gallery{position:sticky;top:calc(84px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:14px;min-width:0}
.pdp-stage{--tint:var(--cream);--accent:var(--gold);position:relative;aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;
  background:radial-gradient(110% 85% at 50% 15%,#fff 0%,var(--tint) 60%,color-mix(in srgb,var(--tint) 80%,var(--accent) 20%) 100%)}
.pdp-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .5s var(--ease),transform .8s var(--ease-out)}
.pdp-stage>img.swap{opacity:0;transform:scale(.97)}
.pdp-stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
.pdp-stage canvas:active{cursor:grabbing}
.stage-ui{position:absolute;left:14px;right:14px;bottom:14px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;z-index:3}
.stage-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,253,249,.92);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--cocoa);transition:all .3s var(--ease)}
.stage-chip:hover{border-color:var(--gold)}
.stage-chip[aria-pressed="true"]{background:var(--cocoa);color:#F7E9CF;border-color:var(--cocoa)}
.stage-chip svg{width:15px;height:15px}
.stage-note{position:absolute;right:14px;top:14px;z-index:3;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:rgba(255,253,249,.8);border-radius:999px;padding:5px 10px}
.live-hint{position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:3;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;background:var(--cocoa);color:#F6EAD4;border-radius:999px;padding:6px 12px;pointer-events:none;transition:opacity .4s}
.pdp-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.thumb{position:relative;aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:radial-gradient(100% 90% at 50% 20%,#fff,var(--tint,var(--cream)));padding:0;transition:all .3s var(--ease)}
.thumb img{width:100%;height:100%;object-fit:contain}
.thumb span{position:absolute;left:6px;right:6px;bottom:6px;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,253,249,.88);border-radius:999px;padding:3px 6px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumb:hover{border-color:var(--gold)}
.thumb[aria-pressed="true"]{border-color:var(--cocoa);box-shadow:0 0 0 1px var(--cocoa)}
.thumb-live img{padding:10% 12% 24%;opacity:.92}
.thumb .live-ic{left:50%;right:auto;top:42%;bottom:auto;transform:translate(-50%,-50%);width:46px;height:46px;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(36,19,10,.84);box-shadow:0 10px 22px -10px rgba(0,0,0,.6),0 0 0 3px rgba(215,178,106,.45)}
.thumb .live-ic svg{width:22px;height:22px;color:#F3E3C6}
.pdp-info{display:flex;flex-direction:column;gap:24px;min-width:0}
.pdp-info h1{font-size:clamp(2.4rem,4.6vw,3.9rem)}
.pdp-tagline{font-family:var(--display);font-style:italic;font-size:clamp(1.2rem,1.8vw,1.45rem);color:var(--ganache);line-height:1.4}
.pdp-desc{color:var(--muted);font-size:1.05rem;line-height:1.75;max-width:58ch}
.catalog-note{margin:0;border-left:2px solid var(--gold);padding:4px 0 4px 18px;display:flex;flex-direction:column;gap:6px}
.catalog-note span{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);font-weight:500}
.catalog-note q{font-family:var(--display);font-size:1.08rem;color:var(--cocoa);quotes:"\201C" "\201D"}
.notes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.notes li{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.88rem;display:inline-flex;align-items:center;gap:8px}
.notes li::before{content:"";width:6px;height:6px;transform:rotate(45deg);background:var(--accent,var(--gold))}
.opt-h{font-family:var(--body);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);font-weight:500;margin-bottom:12px}
.shell-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shell-opt{position:relative;display:flex;align-items:center;gap:14px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:14px 16px;background:var(--paper);text-align:left;transition:all .3s var(--ease)}
.shell-opt:hover{border-color:var(--gold)}
.shell-opt[aria-pressed="true"]{border-color:var(--cocoa);box-shadow:0 0 0 1px var(--cocoa)}
.shell-opt .sw{flex:none;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 -4px 8px rgba(0,0,0,.25),inset 0 3px 6px rgba(255,255,255,.25)}
.shell-opt .sw.milk{background:radial-gradient(circle at 35% 30%,#A06A44,#6E4127 70%)}
.shell-opt .sw.dark{background:radial-gradient(circle at 35% 30%,#5A3424,#24130A 70%)}
.shell-opt b{display:block;font-family:var(--display);font-weight:500;font-size:1.08rem;line-height:1.2}
.shell-opt small{font-size:.78rem;color:var(--muted)}
.pdp-cta{display:flex;flex-wrap:wrap;gap:10px}
.pdp-cta .btn{flex:1 1 220px}
.price-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.price-strip div{padding:14px 12px;text-align:center;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.price-strip div:first-child{border-left:0}
.price-strip b{font-family:var(--display);font-weight:500;font-size:1.25rem;color:var(--cocoa)}
.price-strip span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.price-foot{font-size:.86rem;color:var(--muted);display:flex;gap:10px;align-items:flex-start}
.price-foot svg{flex:none;width:18px;height:18px;color:var(--gold);margin-top:2px}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 2px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--cocoa)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";width:12px;height:12px;flex:none;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg) translate(-3px,-3px);transition:transform .35s var(--ease)}
.acc details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.acc .acc-body{padding:0 2px 20px;color:var(--muted);font-size:.98rem;display:flex;flex-direction:column;gap:10px}
.acc .acc-body ul{margin:0;padding-left:18px}
@media (max-width:960px){.pdp-grid{grid-template-columns:1fr}.pdp-gallery{position:static}}
@media (max-width:520px){.shell-pick{grid-template-columns:1fr}.price-strip b{font-size:1.05rem}}
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;gap:10px;align-items:center;padding:10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom,0px)) var(--gutter);
  background:rgba(255,253,249,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -10px 30px -20px rgba(42,22,12,.5)}
.sticky-buy .sb-name{flex:1;min-width:0;font-family:var(--display);font-size:1.02rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-buy .btn{min-height:44px;padding:0 16px;font-size:.7rem}
@media (max-width:760px){.sticky-buy.show{display:flex}}
body.has-sticky .concierge{bottom:calc(84px + env(safe-area-inset-bottom,0px))}

/* ---------- box studio ---------- */
.studio{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:start}
.studio-visual{position:sticky;top:calc(88px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:18px;align-items:center;min-width:0}
.studio-visual .giftbox{width:min(100%,var(--box-w,420px))}
.studio-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.studio-meta b{color:var(--cocoa);font-weight:500}
.studio-panel{display:flex;flex-direction:column;gap:22px;min-width:0}
.sp-step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.4vw,28px);display:flex;flex-direction:column;gap:16px}
.sp-step header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sp-step header h3{font-size:1.45rem}
.sp-step header .sp-n{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);font-weight:500}
.size-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.size-opt{border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--ivory);padding:16px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .3s var(--ease)}
.size-opt b{font-family:var(--display);font-weight:500;font-size:2rem;line-height:1}
.size-opt span{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.size-opt em{font-style:normal;font-family:var(--display);font-size:1.1rem;color:var(--gold-ink);margin-top:6px}
.size-opt:hover{border-color:var(--gold)}
.size-opt[aria-pressed="true"]{border-color:var(--cocoa);box-shadow:0 0 0 1px var(--cocoa);background:var(--paper)}
.picker-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.picker-tools .fsearch{flex:1 1 200px}
.picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:430px;overflow:auto;padding:2px;scrollbar-width:thin}
.pk{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;background:var(--ivory);padding:6px 10px 6px 6px;text-align:left;min-width:0;transition:all .25s var(--ease)}
.pk img{width:48px;height:48px;flex:none;object-fit:contain}
.pk span{display:flex;flex-direction:column;min-width:0}
.pk b{font-weight:500;font-size:.92rem;line-height:1.25}
.pk small{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk:hover{border-color:var(--gold);background:var(--paper);transform:translateY(-1px)}
.pk .pk-c{margin-left:auto;flex:none;min-width:24px;height:24px;border-radius:999px;background:var(--cocoa);color:#F7E9CF;font-size:.72rem;display:grid;place-items:center;padding:0 7px}
.pk:disabled{opacity:.45;cursor:not-allowed;transform:none}
.sel-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sel-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--ivory);animation:popin .35s var(--ease-out)}
.sel-item img{width:44px;height:44px;object-fit:contain}
.sel-item b{font-weight:500;font-size:.95rem;line-height:1.25;display:block}
.sel-item small{color:var(--muted);font-size:.74rem}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;background:var(--paper)}
.seg button{border:0;background:transparent;border-radius:999px;padding:6px 10px;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--muted);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--cocoa);color:#F7E9CF}
.rm{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;display:grid;place-items:center;color:var(--muted)}
.rm:hover{border-color:var(--c-cake);color:var(--c-cake)}
.rm svg{width:14px;height:14px}
.sel-empty{border:1.5px dashed var(--line-2);border-radius:12px;padding:16px;text-align:center;color:var(--muted);font-size:.92rem}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.preset{border:1px dashed var(--line-gold);background:transparent;border-radius:999px;padding:8px 14px;font-size:.8rem;color:var(--ganache);transition:all .3s var(--ease)}
.preset:hover{background:var(--gold-pale);border-style:solid}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;background:var(--paper)}
.qty button{width:44px;height:46px;border:0;background:transparent;font-size:1.2rem;color:var(--cocoa)}
.qty input{width:64px;text-align:center;border:0;background:transparent;font-size:1.1rem;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line-2);background:var(--paper);border-radius:12px;padding:12px 14px;font-size:1rem;color:var(--ink)}
.field textarea{resize:vertical;min-height:90px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(173,131,47,.15)}
.summary{display:flex;flex-direction:column;gap:12px}
.sum-line{display:flex;justify-content:space-between;gap:12px;font-size:.98rem}
.sum-line.total{border-top:1px solid var(--line);padding-top:12px;font-family:var(--display);font-size:1.35rem;color:var(--cocoa)}
.moq{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 14px;font-size:.9rem;background:var(--gold-pale);color:var(--gold-ink)}
.moq.ok{background:#EAF1E1;color:#3F5A22}
.moq svg{flex:none;width:18px;height:18px;margin-top:2px}
.order-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.order-item{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--ivory);display:flex;flex-direction:column;gap:8px}
.order-item .oi-top{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.order-item b{font-family:var(--display);font-weight:500;font-size:1.1rem}
.order-item ul{margin:0;padding-left:18px;color:var(--muted);font-size:.9rem}
.send-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:1000px){.studio{grid-template-columns:1fr}.studio-visual{position:relative;top:0}}
@media (max-width:520px){.picker{grid-template-columns:1fr}.form-grid,.send-row{grid-template-columns:1fr}.sel-item{grid-template-columns:auto minmax(0,1fr) auto}.sel-item .seg{grid-column:2/4;justify-self:start}}

/* ---------- prose / blog ---------- */
.prose{font-size:1.08rem;line-height:1.8;color:#3A281C;max-width:70ch}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-top:1.8em}
.prose h3{font-size:1.35rem;margin-top:1.5em}
.prose a{color:var(--gold-ink);text-decoration:underline;text-decoration-color:var(--line-gold)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:2px solid var(--gold);font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--cocoa)}
.prose figure{margin:2em 0}
.prose figure img{border-radius:var(--r);width:100%}
.prose figcaption{font-size:.84rem;color:var(--muted);margin-top:10px}
.prose table{width:100%;border-collapse:collapse;font-size:.96rem}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.prose th{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);font-weight:500}
.table-wrap{overflow-x:auto}
.callout{background:var(--cream);border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.callout b{font-family:var(--display);font-weight:500;font-size:1.15rem;color:var(--cocoa)}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(30px,5vw,80px);align-items:start}
.article-aside{position:sticky;top:calc(96px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:18px}
.aside-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:12px}
.aside-card h4{font-family:var(--body);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);font-weight:500}
.toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.toc a{text-decoration:none;color:var(--muted)}
.toc a:hover{color:var(--cocoa)}
.article-hero{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/8;background:var(--cream);margin-block:28px clamp(32px,4vw,56px)}
.article-hero img{width:100%;height:100%;object-fit:cover}
.mini-prod{display:flex;align-items:center;gap:12px;text-decoration:none}
.mini-prod img{width:64px;height:64px;object-fit:contain;border-radius:12px;background:var(--cream)}
.mini-prod b{font-family:var(--display);font-weight:500;line-height:1.2;display:block}
.mini-prod small{color:var(--muted);font-size:.8rem}
@media (max-width:1000px){.article-grid{grid-template-columns:1fr}.article-aside{position:static}}
.blog-feature{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,56px);align-items:center;text-decoration:none;margin-bottom:clamp(40px,5vw,72px)}
.blog-feature .bf-img{aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;background:var(--cream)}
.blog-feature .bf-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.blog-feature:hover .bf-img img{transform:scale(1.04)}
.blog-feature h2{font-size:var(--step-3)}
.blog-feature .bf-copy{display:flex;flex-direction:column;gap:16px}
@media (max-width:860px){.blog-feature{grid-template-columns:1fr}}

/* ---------- about / promise / contact ---------- */
.story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,96px);align-items:center}
.story .arch{aspect-ratio:4/5}
.story-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.name-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.name-card div{background:var(--paper);padding:22px;display:flex;flex-direction:column;gap:6px}
.name-card b{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.6rem;color:var(--gold-ink)}
.name-card span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.name-card p{color:var(--muted);font-size:.95rem}
.numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(215,178,106,.22);border:1px solid rgba(215,178,106,.22);border-radius:var(--r);overflow:hidden}
.numbers div{background:var(--cocoa);padding:28px 22px;display:flex;flex-direction:column;gap:6px}
.numbers b{font-family:var(--display);font-weight:500;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;color:var(--gold-hi)}
.numbers span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(239,227,207,.75)}
@media (max-width:860px){.story{grid-template-columns:1fr}.numbers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.promise-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.promise{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;display:flex;flex-direction:column;gap:12px;min-width:0;overflow:hidden;transition:all .45s var(--ease)}
.promise::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--foil);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.promise:hover{transform:translateY(-4px);box-shadow:var(--shadow-1)}
.promise:hover::after{transform:scaleX(1)}
.promise .p-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--gold-pale);color:var(--gold-lo)}
.promise .p-ic svg{width:26px;height:26px}
.promise h3{font-size:1.25rem}
.promise p{color:var(--muted);font-size:.95rem}
@media (max-width:1100px){.promise-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.promise-grid{grid-template-columns:1fr}}
.care-table{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.care{border:1px solid rgba(215,178,106,.28);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px}
.care b{font-family:var(--display);font-weight:500;font-size:2.2rem;color:var(--gold-hi);line-height:1}
.care h4{font-family:var(--body);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:#F3E5CB;font-weight:500}
.care p{color:rgba(239,227,207,.75);font-size:.95rem}
@media (max-width:860px){.care-table{grid-template-columns:1fr}}
.contact-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.c-card{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:14px;text-decoration:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;min-width:0;transition:all .45s var(--ease)}
.c-card::before{content:"";position:absolute;inset:auto -30% -60% -30%;height:120%;z-index:-1;background:radial-gradient(closest-side,rgba(215,178,106,.25),transparent);transform:translateY(40%);transition:transform .7s var(--ease)}
.c-card:hover{transform:translateY(-5px);border-color:var(--line-gold);box-shadow:var(--shadow-2)}
.c-card:hover::before{transform:none}
.c-card .soc{width:58px;height:58px}
.c-card .soc svg{width:26px;height:26px}
.c-card h3{font-size:1.6rem}
.c-card .c-val{font-size:1.02rem;color:var(--ganache);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.c-card p{color:var(--muted);font-size:.95rem}
.c-card .link-arrow{margin-top:auto}
.copy-chip{align-self:flex-start;border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:6px 12px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);position:relative;z-index:2}
.copy-chip:hover{border-color:var(--gold);color:var(--cocoa)}
@media (max-width:900px){.contact-cards{grid-template-columns:1fr}}
.area-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.area-list li{border:1px solid var(--line-2);border-radius:999px;padding:8px 16px;font-size:.92rem;background:var(--paper)}
.faq{max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:var(--display);font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--cocoa)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--body);font-size:1.2rem;color:var(--gold-ink);transition:transform .4s var(--ease),background .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--gold-pale)}
.faq .faq-a{padding:0 0 22px;color:var(--muted);max-width:70ch;line-height:1.75}
.notfound{min-height:60vh;display:grid;place-items:center;text-align:center}

/* ---------- additions ---------- */
.about-gallery{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:16px}
.about-gallery .media-card{aspect-ratio:auto!important;height:clamp(300px,34vw,480px)}
@media (max-width:760px){.about-gallery{grid-template-columns:1fr 1fr}.about-gallery .media-card:first-child{grid-column:1/-1}.about-gallery .media-card{height:clamp(220px,60vw,340px)}}
.hand-stage{position:relative;min-height:440px;border-radius:var(--r-lg);overflow:hidden;background:radial-gradient(90% 80% at 40% 35%,#fff,var(--cream))}
.hand-stage img{position:absolute;right:0;bottom:0;height:96%;width:auto;filter:drop-shadow(-10px 24px 30px rgba(42,22,12,.25))}
.article-hero.render,.pc-img.render,.bf-img.render{background:radial-gradient(90% 90% at 50% 20%,#fff,var(--tint,var(--cream)))}
.article-hero.render img,.pc-img.render img,.bf-img.render img{object-fit:contain}
.cta-band .watermark{position:absolute;right:-40px;bottom:-30px;width:min(560px,70vw);height:auto;opacity:.06;pointer-events:none}
.drip-edge{position:relative;z-index:3;height:0;color:var(--cocoa);pointer-events:none}
.drip-edge svg{position:absolute;left:0;top:-1px;width:100%;height:clamp(34px,4.6vw,70px);fill:currentColor;overflow:visible}
.drip-edge .dr{transform-box:fill-box;transform-origin:50% 0;animation:drip 5s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
@keyframes drip{from{transform:scaleY(.78)}to{transform:scaleY(1.08)}}
.gold-it.foil{font-style:italic;padding-right:.08em}
@media (hover:hover) and (pointer:fine){
 .fc-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s;
   background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 60%)}
 .flav-card:hover .fc-media::after{opacity:1}
}
@media (max-width:640px){.cg-mini{opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
 body.past-hero .cg-mini{opacity:1;transform:none;pointer-events:auto}}
.js .box-anim.in .gb-cell img{animation:dropin .8s var(--ease-out) both;animation-delay:calc(var(--i,0) * .12s + .25s)}
.box-anim .gb-cell:nth-child(2) img{--i:1}.box-anim .gb-cell:nth-child(3) img{--i:2}.box-anim .gb-cell:nth-child(4) img{--i:3}
.box-anim .gb-cell:nth-child(5) img{--i:4}.box-anim .gb-cell:nth-child(6) img{--i:5}.box-anim .gb-cell:nth-child(7) img{--i:6}.box-anim .gb-cell:nth-child(8) img{--i:7}
.studio-mini{display:none}
@media (max-width:1000px){
 .studio-mini{display:flex;align-items:center;gap:12px;position:sticky;top:calc(58px + env(safe-area-inset-top,0px));z-index:20;background:rgba(255,253,249,.96);backdrop-filter:blur(10px);
   border:1px solid var(--line);border-radius:999px;padding:6px 16px 6px 8px;box-shadow:var(--shadow-1)}
 .studio-mini .sm-thumbs{display:flex;gap:2px;flex-wrap:nowrap;overflow:hidden;min-width:0}
 .studio-mini img,.studio-mini i{width:30px;height:30px;flex:none;border-radius:50%}
 .studio-mini i{border:1.5px dashed var(--line-2)}
 .studio-mini .sm-t{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;white-space:nowrap}
 .studio-mini b{font-family:var(--display);font-weight:500;font-size:.98rem}
 .studio-mini small{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
}
@media (max-width:640px){body[data-no-pill] .cg-mini{display:none}}

/* ---------- Milk / Dark: site-wide shell switch ---------- */
.fc-media img,.col-stage img,.studio img{transition:transform .9s var(--ease-out),opacity .35s ease}
img.fimg-swap{opacity:.15}
.shell-switch{display:inline-flex;align-items:center;gap:6px;padding:5px;border:1px solid var(--line-gold);border-radius:999px;background:var(--paper);box-shadow:var(--shadow-1)}
.shell-switch .ss-label{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:0 8px 0 12px;white-space:nowrap}
.shell-switch button{display:inline-flex;align-items:center;gap:9px;border:0;background:transparent;border-radius:999px;padding:8px 16px 8px 9px;font-size:.78rem;letter-spacing:.06em;color:var(--muted);transition:background .35s var(--ease),color .35s var(--ease)}
.shell-switch button b{font-weight:600;color:inherit}
.shell-switch button[aria-pressed="true"]{background:var(--cocoa);color:#F5E6CA}
.shell-switch button:not([aria-pressed="true"]):hover{color:var(--cocoa);background:rgba(173,131,47,.08)}
.shell-switch .sw,.sd-swatch{flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 -3px 6px rgba(0,0,0,.28),inset 0 2px 4px rgba(255,255,255,.28)}
.shell-switch .sw.milk,.sd-card.milk .sd-swatch{background:radial-gradient(circle at 35% 30%,#A06A44,#6E4127 70%)}
.shell-switch .sw.dark,.sd-card.dark .sd-swatch{background:radial-gradient(circle at 35% 30%,#5A3424,#24130A 70%)}
.ss-home{margin-top:22px}
.shell-divide{padding-block:4px 26px}
.shell-divide .container{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sd-card{position:relative;display:flex;align-items:center;gap:18px;text-align:left;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;background:var(--paper);color:var(--cocoa);overflow:hidden;isolation:isolate;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease),color .4s var(--ease)}
.sd-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s var(--ease)}
.sd-card.milk::before{background:linear-gradient(120deg,#7B4A2C,#9A6440 60%,#B07A4F)}
.sd-card.dark::before{background:linear-gradient(120deg,#1C0F08,#3A2116 60%,#4B2C1C)}
.sd-card .sd-swatch{width:54px;height:54px}
.sd-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.sd-copy small{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.sd-copy b{font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.15}
.sd-copy span{font-size:.86rem;color:var(--muted)}
.sd-tick{margin-left:auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;flex:none;color:transparent;transition:all .4s var(--ease)}
.sd-tick svg{width:16px;height:16px}
.sd-card:hover{border-color:var(--line-gold);transform:translateY(-2px)}
.sd-card[aria-pressed="true"]{border-color:transparent;box-shadow:0 22px 44px -28px rgba(42,22,12,.7);color:#FBF0DD}
.sd-card[aria-pressed="true"]::before{opacity:1}
.sd-card[aria-pressed="true"] .sd-copy small{color:var(--gold-hi)}
.sd-card[aria-pressed="true"] .sd-copy span{color:rgba(251,240,221,.78)}
.sd-card[aria-pressed="true"] .sd-tick{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--cocoa)}
.sd-card[aria-pressed="true"] .sd-swatch{box-shadow:inset 0 -3px 6px rgba(0,0,0,.28),inset 0 2px 4px rgba(255,255,255,.28),0 0 0 3px rgba(215,178,106,.55)}
@media (max-width:640px){
  .shell-divide .container{gap:10px}
  .sd-card{flex-direction:column;align-items:flex-start;gap:10px;padding:16px}
  .sd-card .sd-swatch{width:38px;height:38px}
  .sd-copy span{display:none}
  .sd-tick{position:absolute;right:12px;top:12px;width:26px;height:26px}
  .shell-switch .ss-label{display:none}
}

/* =====================================================================
   Cioccolatini definition
   ===================================================================== */
.ciocc-def{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:4px 0 0;padding:10px 14px;border-left:2px solid var(--gold);background:linear-gradient(90deg,rgba(240,226,191,.55),rgba(240,226,191,0));border-radius:0 12px 12px 0;max-width:560px;font-size:.92rem;line-height:1.5;color:var(--muted)}
.ciocc-def .cd-word{font-family:var(--display);font-style:italic;font-size:1.12rem;color:var(--cocoa)}
.ciocc-def .cd-say{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.ciocc-def .cd-mean{flex-basis:100%}
.ciocc-def .cd-mean i{font-style:normal;color:var(--gold-ink)}
.ciocc-def.on-dark{background:linear-gradient(90deg,rgba(215,178,106,.14),rgba(215,178,106,0));color:rgba(242,230,210,.75);margin-top:16px}
.ciocc-def.on-dark .cd-word{color:#F6E7C8}.ciocc-def.on-dark .cd-say,.ciocc-def.on-dark .cd-mean i{color:var(--gold-hi)}
.name-card>div:nth-child(3){grid-column:1/-1}

/* =====================================================================
   Header box button + badges
   ===================================================================== */
.box-btn{position:relative;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 6px;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);color:var(--cocoa);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;white-space:nowrap;transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.box-btn:hover{border-color:var(--gold);transform:translateY(-1px)}
.box-btn .bb-ic{position:relative;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--cocoa)}
.box-btn .bb-ic svg{width:18px;height:18px}
.bb-count,.tb-badge,.sb-box b{position:absolute;top:-5px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--cocoa);color:#F6E3B8;font:600 .66rem/19px var(--body);letter-spacing:0;text-align:center;box-shadow:0 0 0 2px var(--paper)}
body.has-box .box-btn{background:var(--cocoa);color:#F6EAD4;border-color:var(--cocoa)}
body.has-box .box-btn .bb-ic{background:var(--foil);color:#2A160C}
body.has-box .box-btn .bb-count{background:#F2DFA8;color:var(--cocoa);box-shadow:0 0 0 2px var(--cocoa)}
.bump{animation:bump-box .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump-box{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.fly-ghost{position:fixed;z-index:200;pointer-events:none;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(42,22,12,.35));will-change:transform,opacity}

/* =====================================================================
   ADD → stepper controls
   ===================================================================== */
.add-ctl{display:inline-flex;min-height:40px;align-items:center}
.add-btn{min-height:40px;padding:0 18px 0 14px;border:1.5px solid var(--gold);color:var(--gold-ink);font-weight:600;letter-spacing:.18em;background:var(--paper)}
.add-btn:hover{background:var(--foil);background-size:200% 100%;color:#24130A;border-color:#B88A36}
.stepper{display:inline-flex;align-items:center;height:40px;border-radius:999px;background:var(--cocoa);color:#F6E3B8;box-shadow:0 10px 22px -14px rgba(42,22,12,.8);animation:popin .35s var(--ease-out)}
.stepper button{width:40px;height:100%;border:0;background:transparent;color:inherit;display:grid;place-items:center;border-radius:999px;transition:background .2s}
.stepper button:hover{background:rgba(242,223,168,.14)}
.stepper button svg{width:16px;height:16px}
.stepper .st-n{min-width:22px;text-align:center;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;align-items:center;line-height:1.05}
.stepper .st-n b{font-weight:600;font-size:.98rem;color:#FFF3D6}
.stepper.lg{height:58px;padding:0 6px}
.stepper.lg button{width:52px}
.stepper.lg .st-n{min-width:120px}
.stepper.lg .st-n small{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,227,184,.75)}
.stepper.sticky{height:44px}
.add-ctl.lg{min-height:58px}
@keyframes popin{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}

/* =====================================================================
   Toast card (after adding)
   ===================================================================== */
.toast{border-radius:18px;padding:10px 12px}
.toast .tc{display:flex;align-items:center;gap:12px;min-width:min(380px,calc(100vw - 56px))}
.tc-img{flex:none;width:46px;height:46px;border-radius:12px;border:0;padding:0;background:#F6EEE2;overflow:hidden;pointer-events:auto}
.tc-img img{width:100%;height:100%;object-fit:contain}
.tc-t{display:flex;flex-direction:column;min-width:0;flex:1}
.tc-t b{font-weight:500;font-size:.92rem;color:#FFF6E6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-t small{font-size:.74rem;color:rgba(246,234,212,.72)}
.tc-go{flex:none;border:0;border-radius:999px;padding:9px 14px;background:var(--foil);background-size:200% 100%;color:#24130A;font:600 .68rem var(--body);letter-spacing:.14em;text-transform:uppercase;pointer-events:auto}
.toast.show{pointer-events:auto}

/* =====================================================================
   Floating "View your box" bar
   ===================================================================== */
.boxbar{position:fixed;left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:66;width:min(400px,calc(100vw - 140px));animation:barin .5s var(--ease-out)}
.boxbar[hidden]{display:none}
@keyframes barin{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
body.has-box .toast{bottom:calc(98px + env(safe-area-inset-bottom,0px))}
@media (min-width:761px){.boxbar{display:none!important}body.has-box .toast{bottom:calc(26px + env(safe-area-inset-bottom,0px))}}
.boxbar .bx{width:100%;display:flex;align-items:center;gap:12px;border:0;border-radius:18px;padding:10px 12px 10px 10px;background:var(--cocoa);color:#F6EAD4;text-align:left;box-shadow:0 24px 44px -18px rgba(42,22,12,.75),0 0 0 1px rgba(215,178,106,.25) inset}
.bx-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--foil);color:#2A160C}
.bx-ic svg{width:20px;height:20px}
.bx-thumbs{display:flex;flex:none}
.bx-thumbs img{width:38px;height:38px;border-radius:50%;object-fit:contain;background:#F6EEE2;border:2px solid var(--cocoa);margin-left:-12px}
.bx-thumbs img:first-child{margin-left:0}
.bx-t{display:flex;flex-direction:column;min-width:0;flex:1}
.bx-t b{font-weight:500;font-size:.95rem;color:#FFF6E6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-t small{font-size:.72rem;color:rgba(246,234,212,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-go{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#F2DFA8}
.bx-go svg{width:16px;height:16px}
.bx-prog{position:absolute;left:16px;right:16px;bottom:5px;height:3px;border-radius:3px;background:rgba(242,223,168,.16);overflow:hidden}
.bx-prog i{display:block;height:100%;width:0;background:var(--foil);transition:width .5s var(--ease-out)}
@media (max-width:760px){body.has-sticky .boxbar{display:none}}

/* =====================================================================
   Drawer / bottom sheet + quick view
   ===================================================================== */
html.lock,html.lock body{overflow:hidden}
.drawer,.qv{position:fixed;inset:0;z-index:150}
.qv{z-index:160}
.drawer[hidden],.qv[hidden]{display:none}
.dr-scrim{position:absolute;inset:0;background:rgba(28,14,6,.48);opacity:0;transition:opacity .35s var(--ease)}
.drawer.open .dr-scrim,.qv.open .dr-scrim{opacity:1}
.dr-panel{position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--ivory);display:flex;flex-direction:column;box-shadow:-30px 0 60px -30px rgba(0,0,0,.45);transform:translateX(104%);transition:transform .42s var(--ease-out);outline:none}
.drawer.open .dr-panel{transform:none}
.dr-top{flex:none;background:var(--paper);border-bottom:1px solid var(--line);touch-action:none}
.dr-grab{display:none;width:44px;height:5px;border-radius:5px;background:rgba(65,33,10,.2);margin:10px auto 0}
.dr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 14px}
.dr-head h2{font-size:1.6rem}
.dr-sub{margin:4px 0 0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dr-x{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);display:grid;place-items:center;color:var(--cocoa)}
.dr-x svg{width:18px;height:18px}
.dr-body{flex:1;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 20px 18px;display:flex;flex-direction:column;gap:6px}
.dr-sec{padding:16px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.dr-sec:last-child{border-bottom:0}
.dr-h{display:flex;align-items:center;gap:10px}
.dr-h b{font-family:var(--display);font-weight:500;font-size:1.12rem;color:var(--cocoa)}
.dr-h small{margin-left:auto;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dr-h .link-btn{margin-left:auto}
.dr-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--cocoa);color:#F2DFA8;font:600 .72rem/24px var(--body);text-align:center}
.dr-sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dr-sizes button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 6px;border-radius:14px;border:1px solid var(--line-2);background:var(--paper);color:var(--cocoa);transition:all .25s var(--ease)}
.dr-sizes button b{font-family:var(--display);font-weight:500;font-size:1.5rem;line-height:1.1}
.dr-sizes button span{font-weight:600;font-size:.86rem}
.dr-sizes button small{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dr-sizes button[aria-checked="true"]{background:var(--cocoa);border-color:var(--cocoa);color:#F6EAD4}
.dr-sizes button[aria-checked="true"] small{color:rgba(246,234,212,.7)}
.dr-gb{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:4px;background:#EFE8DD;padding:5px;border-radius:10px;box-shadow:inset 0 2px 6px rgba(42,22,12,.08)}
.dr-gb .c{aspect-ratio:1;border-radius:4px;background:linear-gradient(180deg,#FBF8F3,#F1EBE2);display:grid;place-items:center;position:relative}
.dr-gb .c:not(.fill)::before{content:"";position:absolute;inset:18%;border-radius:50%;border:1.5px dashed rgba(65,33,10,.16)}
.dr-gb .c img{width:100%;height:100%;object-fit:contain;animation:dropin .6s var(--ease-out) both}
.dr-gb.sm{width:96px;flex:none;gap:2px;padding:3px}
.dr-prog{height:4px;border-radius:4px;background:var(--sand);overflow:hidden}
.dr-prog i{display:block;height:100%;background:var(--foil);transition:width .5s var(--ease-out)}
.dr-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dr-item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-radius:16px;background:var(--paper);border:1px solid var(--line);animation:popin .35s var(--ease-out)}
.dr-img{position:relative;width:72px;height:72px;border-radius:12px;border:0;padding:0;background:radial-gradient(circle at 50% 30%,#fff,#F3EADB);overflow:hidden}
.dr-img img{width:100%;height:100%;object-fit:contain;transition:transform .4s var(--ease)}
.dr-img:hover img{transform:scale(1.08)}
.dr-eye,.pk-eye{position:absolute;left:4px;right:4px;bottom:4px;font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(36,19,10,.78);color:#F6E3B8;border-radius:999px;padding:2px 0;text-align:center}
.dr-info{display:flex;flex-direction:column;gap:3px;min-width:0;align-items:flex-start}
.dr-name,.pk-name{border:0;background:none;padding:0;text-align:left;font:500 1rem/1.25 var(--body);color:var(--cocoa);text-decoration:underline;text-decoration-color:var(--line-gold);text-underline-offset:3px}
.dr-info small{font-size:.74rem;color:var(--muted)}
.seg.sm{margin-top:4px}
.seg.sm button{padding:5px 9px;font-size:.6rem}
.dr-rm{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--muted);display:grid;place-items:center}
.dr-rm:hover{color:#A1322E;border-color:#E3B3AE;background:#FBEDEB}
.dr-rm svg{width:18px;height:18px}
.dr-slot{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1.5px dashed var(--line-2);border-radius:16px;color:var(--muted);font-size:.86rem}
.dr-slot-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--gold-ink)}
.dr-slot-ic svg{width:16px;height:16px}
.dr-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.link-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:6px 0;font:500 .72rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);text-decoration:none}
.link-btn svg{width:14px;height:14px}
.dr-rail{display:grid;grid-auto-flow:column;grid-auto-columns:132px;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;scrollbar-width:none;margin:0 -20px;padding-inline:20px}
.dr-rail::-webkit-scrollbar{display:none}
.sg{scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0}
.sg-img{width:132px;height:110px;border-radius:14px;border:1px solid var(--line);padding:0;background:radial-gradient(circle at 50% 30%,#fff,#F3EADB);overflow:hidden}
.sg-img img{width:100%;height:100%;object-fit:contain}
.sg b{font-weight:500;font-size:.84rem;line-height:1.2;color:var(--cocoa);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.sg small{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sg .add-ctl{margin-top:2px}
.sg .add-btn{min-height:34px;padding:0 12px 0 10px;font-size:.62rem}
.sg .stepper{height:34px}.sg .stepper button{width:34px}
.dr-qty{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dr-qty .tnum{font-size:.92rem;color:var(--muted)}
.dr-qty .tnum b{color:var(--cocoa);font-weight:600}
.dr-saved{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dr-saved li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.ds-t{display:flex;flex-direction:column;min-width:0}
.ds-t b{font-weight:500;font-size:.92rem}
.ds-t small{font-size:.74rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ds-act{grid-column:1/-1;display:flex;gap:16px;justify-content:flex-end;margin-top:-6px}
.dr-details summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px}
.dr-details summary::-webkit-details-marker{display:none}
.dr-details summary b{font-family:var(--display);font-weight:500;font-size:1.12rem}
.dr-details summary small{font-size:.72rem;color:var(--muted)}
.dr-details summary::after{content:"+";margin-left:auto;color:var(--gold);font-size:1.3rem;line-height:1}
.dr-details[open] summary::after{content:"–"}
.dr-details .form-grid{margin-top:12px}
.dr-full{border-radius:16px;background:#FFF6E3;border:1px solid var(--line-gold);padding:14px 16px;margin-top:12px;display:flex;flex-direction:column;gap:8px;animation:popin .35s var(--ease-out)}
.dr-full b{font-family:var(--display);font-weight:500;font-size:1.1rem;color:var(--cocoa)}
.dr-full p{margin:0;font-size:.9rem;color:var(--muted)}
.dr-full-act{display:flex;flex-wrap:wrap;gap:8px}
.dr-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 6px 10px}
.dr-empty-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--foil);color:#2A160C}
.dr-empty-ic svg{width:30px;height:30px}
.dr-empty b{font-family:var(--display);font-weight:500;font-size:1.3rem;color:var(--cocoa)}
.dr-empty p{margin:0;color:var(--muted);font-size:.92rem;max-width:34ch}
.dr-presets{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.dr-foot{flex:none;padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -16px 30px -24px rgba(42,22,12,.5);display:flex;flex-direction:column;gap:10px}
.dr-total{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dr-total span{display:flex;flex-direction:column}
.dr-total span b{font-weight:600;font-size:1rem;color:var(--cocoa)}
.dr-total span small{font-size:.7rem;color:var(--muted)}
.dr-total>b{font-family:var(--display);font-weight:500;font-size:1.6rem;color:var(--cocoa)}
.dr-moq{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:.8rem;line-height:1.45;color:#7A5818;background:#FFF7E6;border-radius:12px;padding:9px 12px}
.dr-moq svg{flex:none;width:16px;height:16px;margin-top:2px}
.dr-moq.ok{color:#3F6B33;background:#EEF5EA}
.dr-moq a{color:inherit;font-weight:600}
.dr-cta{display:grid;grid-template-columns:1fr auto;gap:8px}
.dr-cta .btn{min-height:54px}
.dr-cta .btn svg{width:20px;height:20px}
.dr-fine{margin:0;font-size:.72rem;color:var(--muted);text-align:center}

/* quick view */
.qv-panel{position:absolute;left:50%;top:50%;width:min(940px,calc(100vw - 48px));max-height:min(88vh,760px);overflow:auto;overscroll-behavior:contain;background:var(--ivory);border-radius:26px;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);transform:translate(-50%,-46%) scale(.97);opacity:0;transition:transform .4s var(--ease-out),opacity .3s var(--ease)}
.qv.open .qv-panel{transform:translate(-50%,-50%);opacity:1}
.qv-top{position:sticky;top:0;z-index:5;height:0;touch-action:none}
.qv-top .dr-grab{position:absolute;left:50%;top:0;transform:translateX(-50%)}
.qv-x{position:absolute;right:14px;top:14px;z-index:5;box-shadow:var(--shadow-1)}
.qv-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.qv-media{position:relative;min-height:460px;background:radial-gradient(110% 85% at 50% 15%,#fff 0%,var(--tint) 60%,color-mix(in srgb,var(--tint) 80%,var(--accent) 20%) 100%)}
.qv-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s}
.qv-media .stage-note{position:absolute;left:14px;right:auto;top:14px}
.qv-seg{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);box-shadow:var(--shadow-1)}
.qv-info{padding:34px 30px 28px;display:flex;flex-direction:column;gap:12px}
.qv-info h2{font-size:clamp(1.8rem,3vw,2.4rem)}
.qv-p{margin:0;color:var(--muted);font-size:.98rem}
.qv-flags{margin:0;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#9B3A2B}
.qv-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}

/* =====================================================================
   PDP sticky buy (mobile)
   ===================================================================== */
.sticky-buy .sb-name{display:flex;flex-direction:column;gap:3px}
.sticky-buy .sb-name b{font-weight:500;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-seg{display:inline-flex;align-self:flex-start;border:1px solid var(--line-2);border-radius:999px;padding:2px;font-family:var(--body)}
.sb-seg button{border:0;background:transparent;border-radius:999px;padding:3px 10px;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sb-seg button[aria-pressed="true"]{background:var(--cocoa);color:#F7E9CF}
.sb-box{position:relative;flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);display:grid;place-items:center;color:var(--cocoa)}
.sb-box svg{width:20px;height:20px}

/* =====================================================================
   Box Studio picker refresh
   ===================================================================== */
.pk{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;align-items:center;cursor:default}
.pk:hover{transform:none}
.pk-img{position:relative;width:56px;height:56px;border-radius:10px;border:0;padding:0;background:radial-gradient(circle at 50% 30%,#fff,#F3EADB);overflow:hidden}
.pk-img img{width:100%;height:100%;object-fit:contain}
.pk-eye{font-size:.46rem;bottom:2px;left:3px;right:3px}
.pk-t{display:flex;flex-direction:column;min-width:0}
.pk-name{font-size:.92rem}
.pk .add-btn{min-height:34px;padding:0 12px 0 10px;font-size:.62rem}
.pk .stepper{height:34px}.pk .stepper button{width:32px}
.sel-item .si-img{border:0;padding:0;background:none;width:44px;height:44px}
.sel-item .si-img img{width:44px;height:44px;object-fit:contain}
button.gb-cell{border:0;padding:0;cursor:pointer;font:inherit}
button.gb-cell:hover img{transform:scale(1.06)}
.gb-cell img{transition:transform .35s var(--ease)}

/* =====================================================================
   Mobile: app-like tab bar, sheets, lighter effects
   ===================================================================== */
.tabbar{display:none}
a,button{-webkit-tap-highlight-color:transparent}
.btn:active,.add-btn:active,.stepper button:active,.tb-i:active,.box-btn:active,.bx:active,.dr-sizes button:active,.sd-card:active{transform:scale(.96)}
@media (max-width:760px){
  :root{--tab-h:64px}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:68;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));padding:0 6px env(safe-area-inset-bottom,0px);
    background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -12px 30px -22px rgba(42,22,12,.45)}
  .tb-i{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;background:none;color:var(--muted);text-decoration:none;font:500 .6rem var(--body);letter-spacing:.1em;text-transform:uppercase;transition:color .2s,transform .2s}
  .tb-i svg{width:23px;height:23px}
  .tb-i[aria-current="page"]{color:var(--cocoa)}
  .tb-i[aria-current="page"]::before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;border-radius:2px;background:var(--foil)}
  .tb-box{color:var(--cocoa)}
  .tb-box svg{width:44px;height:44px;padding:10px;margin-top:-22px;border-radius:50%;background:var(--cocoa);color:#F2DFA8;box-shadow:0 10px 22px -10px rgba(42,22,12,.8),0 0 0 4px var(--paper)}
  body.has-box .tb-box svg{background:var(--foil);color:#2A160C}
  .tb-badge{top:-14px;right:calc(50% - 30px)}
  .tb-dot{position:absolute;top:10px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:#5CB85C;box-shadow:0 0 0 2px var(--paper);animation:bump 3s ease-in-out infinite}
  .tb-chat svg{color:var(--ganache)}
  body{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px))}
  body.has-box{padding-bottom:calc(var(--tab-h) + 74px + env(safe-area-inset-bottom,0px))}
  .boxbar{left:10px;right:10px;width:auto;bottom:calc(var(--tab-h) + 8px + env(safe-area-inset-bottom,0px))}
  @keyframes barin{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
  .bx-thumbs{display:none}
  .bx-go{font-size:.66rem}
  .toast{bottom:calc(var(--tab-h) + 16px + env(safe-area-inset-bottom,0px))}
  body.has-box .toast{bottom:calc(var(--tab-h) + 84px + env(safe-area-inset-bottom,0px))}
  .concierge .cg-mini,.concierge>.cg-wa{display:none}
  .concierge{left:10px;right:10px;bottom:calc(var(--tab-h) + 10px + env(safe-area-inset-bottom,0px));align-items:stretch;pointer-events:none}
  .concierge .cg-pop{position:static;width:auto;pointer-events:auto}
  body.has-box .concierge{bottom:calc(var(--tab-h) + 80px + env(safe-area-inset-bottom,0px))}
  .sticky-buy{bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));padding-bottom:10px;border-bottom:1px solid var(--line)}
  body.has-sticky .concierge{bottom:calc(var(--tab-h) + 80px + env(safe-area-inset-bottom,0px))}
  .box-btn{height:42px;padding:0;border:0;background:transparent}
  .box-btn .bb-label{display:none}
  .box-btn .bb-ic{width:42px;height:42px;border:1px solid var(--line-2);background:var(--paper)}
  body.has-box .box-btn{background:transparent}
  .nav-actions .btn.hide-sm{display:none}
  /* sheets */
  .dr-panel{top:auto;left:0;width:100%;max-height:92dvh;height:92dvh;border-radius:24px 24px 0 0;transform:translateY(104%);box-shadow:0 -30px 60px -30px rgba(0,0,0,.5)}
  .dr-top{border-radius:24px 24px 0 0}
  .dr-grab{display:block}
  .dr-head{padding:10px 18px 12px}
  .dr-head h2{font-size:1.4rem}
  .dr-body{padding:4px 16px 16px}
  .dr-rail{margin:0 -16px;padding-inline:16px}
  .dr-foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));gap:8px}
  .dr-fine,.dr-moq.ok{display:none}
  .dr-total>b{font-size:1.4rem}
  .dr-cta .btn{min-height:50px}
  .dr-item{grid-template-columns:64px minmax(0,1fr) auto}
  .dr-img{width:64px;height:64px}
  .qv-panel{left:0;right:0;top:auto;bottom:0;width:100%;max-height:92dvh;border-radius:24px 24px 0 0;transform:translateY(104%);opacity:1}
  .qv.open .qv-panel{transform:none}
  .qv-top .dr-grab{display:block;background:rgba(255,255,255,.8)}
  .qv-top{height:0}
  .qv-body{grid-template-columns:1fr}
  .qv-media{aspect-ratio:1/0.86;min-height:0}
  .qv-info{padding:20px 18px 24px}
  .form-grid{grid-template-columns:1fr}
  /* lighter, smoother rendering on phones */
  .site-header .bar,.site-header.scrolled .bar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(251,247,240,.98)}
  .filterbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(251,247,240,.98)}
  .kenburns{animation:none!important}
  .fchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-snap-type:x proximity}
  .fchips::-webkit-scrollbar{display:none}
  .fchip{flex:none;scroll-snap-align:start}
  main>section.section:not(#box-studio):not(:first-child){content-visibility:auto;contain-intrinsic-size:auto 900px}
  .flav-card .fc-actions{justify-content:space-between;align-items:center;flex-wrap:nowrap}
  .flav-card .add-btn{min-height:36px;padding:0 12px 0 10px;font-size:.62rem}
  .flav-card .stepper{height:36px}.flav-card .stepper button{width:34px}
  .flav-card .view-link{font-size:.62rem}
  .ciocc-def{font-size:.86rem}
}
@media (max-width:420px){.hide-xs{display:none}}
@media (prefers-reduced-motion:reduce){.stepper,.dr-item,.dr-full,.boxbar,.dr-gb .c img{animation:none}.dr-panel,.qv-panel{transition:none}}

.cg-foot .cg-ig{flex:none;width:44px;padding:0}
.cg-foot .cg-ig svg{width:18px;height:18px}