/* ===== Premium pass 2: hero, stat band, steps, tiles, reviews, footer ===== */

/* ---- hero (particle canvas) ---- */
.hero{--hbg:#4a2616;background:var(--hbg);transition:background .9s}
.hero[data-s="1"]{--hbg:#a1432b}
.hero[data-s="2"]{--hbg:#3b461e}
.has-cv .slide{background:transparent!important}
.has-cv .slide-art>*{display:none}
.has-cv .slide-art{align-self:stretch;min-height:430px}
.has-cv .slide-art,.has-cv .slide-art::before{transform:none!important}
.has-cv .slide-art::before{display:none}
.hero-cv{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.has-cv::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(130% 95% at 60% 50%,transparent 52%,rgba(0,0,0,.38))}
.hero-hint{position:absolute;left:clamp(1.5rem,5vw,4.5rem);bottom:1.5rem;z-index:5;display:flex;align-items:center;gap:.7rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-2);opacity:.8;transition:opacity .9s;pointer-events:none}
.hero-hint::before{content:"";width:30px;height:1px;background:currentColor}
.hero-hint.gone{opacity:0}
html[lang=kn] .hero-hint{letter-spacing:.03em;text-transform:none;font-size:.85rem}
@media(max-width:860px){.hero-hint{display:none}.has-cv .slide-art{min-height:270px}}

/* ---- stat band ---- */
.statband{position:relative;width:min(1180px,calc(100% - 1.6rem));margin:3rem auto 0;border-radius:34px;background:var(--brown);color:var(--cream);display:grid;grid-template-columns:repeat(4,1fr);padding:2.6rem .6rem 2.4rem;overflow:hidden;box-shadow:0 40px 70px -40px rgba(63,34,20,.75)}
.statband::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 50% 0,rgba(222,180,158,.22),transparent 65%);pointer-events:none}
.sb-star{position:absolute;width:340px;right:-90px;top:-130px;color:#deb49e;opacity:.07;animation:rot 90s linear infinite;pointer-events:none}
.stat{position:relative;text-align:center;padding:0 1rem}
.stat+.stat::before{content:"";position:absolute;left:0;top:8%;bottom:8%;border-left:1.5px dashed rgba(251,249,193,.22)}
.stat b{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(3rem,6vw,5.3rem);line-height:1;background:linear-gradient(180deg,#fffbe2 5%,#deb49e 95%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 26px rgba(222,180,158,.35))}
.stat>span{display:block;margin-top:.7rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
html[lang=kn] .stat>span{letter-spacing:0;text-transform:none;font-size:.92rem}
.st-art{display:block;width:76px;height:76px;margin:0 auto .8rem;overflow:visible}
.s-dots .dot{fill:#deb49e;opacity:.28;transform-box:fill-box;transform-origin:center}
.stat.in .s-dots .dot{animation:dotp 2.6s ease-in-out infinite;animation-delay:calc(var(--i)*.2s)}
@keyframes dotp{0%,100%{opacity:.28;transform:scale(1)}18%{opacity:1;transform:scale(1.7)}40%{opacity:.5;transform:scale(1)}}
.s-none .ring,.s-ring .track{fill:none;stroke:rgba(222,180,158,.35);stroke-width:2.5}
.s-none .leafp{fill:none;stroke:#deb49e;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s-none .slash{fill:none;stroke:#ec7357;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s .6s cubic-bezier(.6,0,.2,1)}
.stat.in .s-none .slash{stroke-dashoffset:0}
.s-ring .prog{fill:none;stroke:#deb49e;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:40px 40px;transition:stroke-dashoffset 1.9s .3s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 4px rgba(222,180,158,.8))}
.stat.in .s-ring .prog{stroke-dashoffset:0}
.s-sizes rect{fill:#deb49e;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .8s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(.3s + var(--i)*.15s)}
.stat.in .s-sizes rect{transform:scaleY(1)}
@media(max-width:700px){
  .statband{grid-template-columns:1fr 1fr;row-gap:2rem;padding-block:2rem}
  .stat:nth-child(odd)::before{display:none}.stat:nth-child(n+4)::before{display:block}.stat:nth-child(3)::before{display:none}
  .st-art{width:60px;height:60px}
}

/* ---- why cards: icon badge ---- */
.why-card .ico{position:absolute;top:1.4rem;right:1.4rem;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--rose-2);color:#5c3421;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.why-card .ico svg{width:24px;height:24px}
.why-card .ico path,.why-card .ico circle{stroke-dasharray:1;stroke-dashoffset:0}
.why-card:hover .ico{transform:rotate(-12deg) scale(1.12)}
.why-card:hover .ico path,.why-card:hover .ico circle{animation:draw 1.1s ease}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ---- big type strip ---- */
.bigtype{overflow:hidden;padding:2rem 0 .5rem;display:grid;gap:.1rem;user-select:none;pointer-events:none}
.bt{display:flex;gap:2.2rem;align-items:center;white-space:nowrap;width:max-content;margin-left:-12%;font-family:var(--serif);font-weight:800;font-size:clamp(3.2rem,9vw,8rem);line-height:1.04;letter-spacing:-.02em;text-transform:uppercase}
.bt span{color:transparent;-webkit-text-stroke:1.5px var(--brown);opacity:.85}
.bt i{font-style:normal;color:var(--rose);font-size:.45em}
.bt.alt{margin-left:-48%}
.bt.alt span{color:var(--rose);-webkit-text-stroke:0;opacity:.55}
html[lang=kn] .bt{letter-spacing:0}

/* ---- ordering timeline ---- */
.steps{position:relative;grid-template-columns:repeat(4,1fr)}
.steps::before{content:"";position:absolute;left:1.5rem;right:1.5rem;top:1.5rem;height:2px;background:rgba(92,52,33,.2)}
.steps::after{content:"";position:absolute;left:1.5rem;top:1.5rem;height:2px;width:calc((100% - 3rem)*var(--p,0));background:var(--brown);box-shadow:0 0 12px rgba(222,180,158,.9)}
.steps li{padding:4.3rem 1rem 0 0;border:0}
.steps li::after{display:none}
.steps li::before{top:0;left:0;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;background:var(--cream);border:2px solid rgba(92,52,33,.35);color:var(--brown);font-size:1.25rem;z-index:1;transition:background .5s,color .5s,transform .5s,border-color .5s,box-shadow .5s}
.steps li.on::before{background:var(--brown);color:var(--cream);border-color:var(--brown);transform:scale(1.1);box-shadow:0 0 0 7px rgba(216,172,151,.35)}
.steps li:hover::before{transform:scale(1.15) rotate(-6deg)}
@media(max-width:860px){
  .steps{grid-template-columns:1fr}
  .steps::before{left:1.5rem;right:auto;width:2px;top:1.5rem;bottom:1.5rem;height:auto}
  .steps::after{left:1.5rem;width:2px;top:1.5rem;height:calc((100% - 3rem)*var(--p,0))}
  .steps li{padding:.2rem 0 1.6rem 4.4rem}
}

/* ---- collection tiles: fanned pouches ---- */
.tile h3,.tile>span{position:relative;z-index:2}
.fan{position:absolute;right:.2rem;bottom:-1rem;width:62%;display:flex;justify-content:center;pointer-events:none}
.fan svg{width:34%;flex:none;margin-left:-8%;filter:drop-shadow(0 14px 12px rgba(0,0,0,.38));transition:transform .7s cubic-bezier(.2,.9,.2,1)}
.fan svg:nth-child(1){transform:rotate(-12deg) translateY(16px)}
.fan svg:nth-child(2){transform:rotate(2deg) translateY(-6px);z-index:2}
.fan svg:nth-child(3){transform:rotate(14deg) translateY(12px)}
.tile:hover .fan svg:nth-child(1){transform:rotate(-24deg) translate(-16px,-4px)}
.tile:hover .fan svg:nth-child(2){transform:rotate(0deg) translateY(-22px) scale(1.06)}
.tile:hover .fan svg:nth-child(3){transform:rotate(25deg) translate(16px,-2px)}

/* ---- reviews: rating gauge ---- */
.rev-score{display:grid;justify-items:center;gap:.5rem}
.gauge{position:relative;width:160px;height:160px}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.g-bg{fill:none;stroke:rgba(251,249,193,.16);stroke-width:7}
.g-fg{fill:none;stroke:var(--rose-2);stroke-width:7;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 1.8s .2s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 7px rgba(222,180,158,.8))}
.rev-score .gauge b{position:absolute;inset:0;display:grid;place-items:center;font-size:3.3rem}

/* ---- wholesale seal ---- */
.bulk>.seal{position:absolute;right:-28px;bottom:-28px;width:176px;height:176px;opacity:.92;pointer-events:none}
.seal text{font-family:var(--serif);font-weight:700;font-size:13.5px;letter-spacing:.17em;fill:#fbf9c1}
.seal-rot{transform-origin:80px 80px;animation:rot 26s linear infinite}
@media(max-width:700px){.bulk>.seal{width:110px;height:110px;right:-18px;bottom:-18px}}

/* ---- FAQ open animation (progressive) ---- */
:root{interpolate-size:allow-keywords}
details::details-content{block-size:0;overflow:clip;transition:block-size .45s ease,content-visibility .45s allow-discrete}
details[open]::details-content{block-size:auto}
details summary{transition:color .3s}
details:hover summary{color:var(--ink)}

/* ---- footer wordmark ---- */
.footer{position:relative;overflow:hidden}
.foot-mark{font-family:var(--serif);font-weight:800;font-size:clamp(4.5rem,20vw,18rem);line-height:.8;text-align:center;letter-spacing:-.03em;white-space:nowrap;margin:1.5rem 0 -.2em;background:linear-gradient(180deg,rgba(222,180,158,.5),rgba(222,180,158,0) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;pointer-events:none}
html[lang=kn] .foot-mark{letter-spacing:0}

/* dark theme: the brown panels keep their palette */
:root[data-theme=dark] :is(.statband){--cream:#fbf9c1;--brown:#5c3421;--ink:#2b170d;--rose:#d8ac97}
:root[data-theme=dark] .steps::before{background:rgba(230,187,164,.22)}
:root[data-theme=dark] .bt span{-webkit-text-stroke-color:var(--brown)}
:root[data-theme=dark] .why-card .ico{color:#5c3421}

/* tiles: text on top, pouch fan along the bottom */
.tile{justify-content:flex-start;min-height:280px}
.tile>span{max-width:78%;line-height:1.45}
.fan{right:auto;left:50%;translate:-50% 0;bottom:-1.6rem;width:74%}
.fan svg{width:31%;margin-left:-5%}
.bulk>.seal{right:-54px;bottom:-54px}
@media(max-width:700px){.bulk>.seal{right:-34px;bottom:-34px}}

/* ===== Review pass: usability, closing moment, performance ===== */
.skip{position:fixed;left:.8rem;top:-4rem;z-index:500;background:var(--brown);color:var(--cream);padding:.6rem 1rem;border-radius:10px;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:.8rem}
.dots button{width:9px;height:9px;border-radius:50%;background:rgba(251,249,193,.4);cursor:pointer;transition:.3s;position:relative}
.dots button::after{content:"";position:absolute;inset:-12px -6px}
.dots button.on{background:var(--cream);width:26px;border-radius:5px}

/* bigger touch targets */
.sizes button{min-height:40px;padding:.4rem .5rem}
.qty button{width:34px;height:34px;font-size:1.1rem}
.qty{gap:.7rem}
.add{min-height:44px;padding:.6rem 1.2rem}
.filters button{min-height:44px}
.chip-btn{min-height:42px}
.map-results button{min-height:44px}
.burger{width:44px;height:44px}
.drawer-head button{width:44px;height:44px}
.faq summary{min-height:48px;align-items:center}
.btn.big{padding:1rem 2.2rem;font-size:1.1rem}

/* closing section */
.closer{position:relative;overflow:hidden;margin:4rem clamp(.6rem,2vw,1.4rem) 0;border-radius:34px;background:var(--brown);color:var(--cream);text-align:center;padding:clamp(3.2rem,8vw,6rem) 1.4rem}
.closer::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 50% 0,rgba(222,180,158,.28),transparent 65%);pointer-events:none}
.cl-star{position:absolute;width:420px;left:50%;top:50%;translate:-50% -50%;color:#deb49e;opacity:.07;animation:rot 120s linear infinite;pointer-events:none}
.closer>*:not(.cl-star){position:relative}
.closer h2{font-size:clamp(2.1rem,5vw,3.8rem);margin:.2rem auto 1rem;max-width:16em}
.cl-sub{max-width:34em;margin:0 auto 1.8rem;opacity:.9}
.closer .cta-row{justify-content:center;margin-top:0}
.btn.ghost-l{background:transparent;color:var(--cream);border-color:rgba(251,249,193,.55)}
.btn.ghost-l:hover{background:rgba(251,249,193,.12);box-shadow:none}
.cl-thanks{margin-top:2rem;font-family:var(--serif);font-style:italic;opacity:.8}
:root[data-theme=dark] .closer{--cream:#fbf9c1;--brown:#5c3421;--ink:#2b170d;--rose:#d8ac97}

/* thank-you screen (end of the order flow) */
.order-done{flex:1;display:grid;align-content:center;justify-items:center;gap:1rem;text-align:center;padding:2rem 1.6rem}
.order-done[hidden]{display:none}
.drawer.done .drawer-body,.drawer.done .drawer-foot{display:none}
.order-done h3{font-size:1.8rem;color:var(--brown)}
.order-done p{max-width:22em;opacity:.85}
.tick{width:84px;height:84px}
.tick circle{fill:var(--brown);transform-origin:center;animation:popin .5s cubic-bezier(.3,1.6,.5,1) both}
.tick path{fill:none;stroke:var(--cream);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .6s .35s ease forwards}
@keyframes popin{from{transform:scale(.3);opacity:0}}

/* add-to-cart toast + mobile cart bar */
#addToast{position:fixed;left:50%;bottom:24px;translate:-50% 30px;z-index:95;display:flex;align-items:center;gap:1rem;background:var(--brown-2);color:#fbf9c1;padding:.55rem .6rem .55rem 1.1rem;border-radius:999px;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.35s;max-width:92vw;font-size:.92rem}
#addToast.on{opacity:1;translate:-50% 0;pointer-events:auto}
#addToast button{background:#fbf9c1;color:#3f2214;border:0;border-radius:999px;padding:.45rem 1rem;font-weight:600;cursor:pointer;min-height:36px;white-space:nowrap}
:root[data-theme=dark] #addToast{background:#fbf9c1;color:#2b170d}
:root[data-theme=dark] #addToast button{background:#5c3421;color:#fbf9c1}
.cartbar{display:none}
@media(max-width:860px){
  .cartbar{position:fixed;left:.8rem;right:5.4rem;bottom:.8rem;z-index:80;display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:54px;border:0;border-radius:999px;background:var(--brown);color:var(--cream);font-weight:600;font-size:1rem;box-shadow:0 14px 30px -10px rgba(0,0,0,.55);cursor:pointer}
  .cartbar[hidden]{display:none}
  body.has-cartbar{padding-bottom:5rem}
  body.has-cartbar #addToast{bottom:84px}
}
.rev-empty{border:1.5px dashed rgba(92,52,33,.35);border-radius:var(--r);padding:2rem;text-align:center;column-span:all;opacity:.85}

/* performance: no full-screen blend layer or per-card GPU layers on touch devices */
@media(hover:none){body::after{display:none}.card,.tile,.why-card{will-change:auto}}
.card,.tile,.why-card{will-change:auto}
.card:hover,.tile:hover,.why-card:hover{will-change:transform}

.why-card .num,.steps li::before{--numc:#a8745d}
.why-card .num{color:#a8745d}
:root[data-theme=dark] .why-card .num{color:#a8745d}
.nav a{padding:.7rem .2rem}
.hero-ui>button{width:40px;height:40px}
.star-input button{min-width:40px;min-height:40px;font-size:1.9rem;display:grid;place-items:center}
.footer a{display:inline-block;padding:.5rem 0}
.foot-grid small{opacity:.8}

/* ===== Search, sort, filters ===== */
.shop-tools{display:flex;gap:.6rem;max-width:760px;margin:0 auto 1.1rem}
.search{position:relative;flex:1;display:block}
.search svg{position:absolute;left:.9rem;top:50%;translate:0 -50%;color:var(--brown);opacity:.7;pointer-events:none}
.search input{width:100%;min-height:48px;padding:.7rem 2.6rem .7rem 2.7rem;border-radius:999px;-webkit-appearance:none;appearance:none;font-size:1rem}
.search input::-webkit-search-cancel-button{display:none}
#qClear{position:absolute;right:.35rem;top:50%;translate:0 -50%;width:40px;height:40px;border:0;background:none;color:var(--brown);font-size:1.05rem;cursor:pointer;border-radius:50%}
#qClear[hidden]{display:none}
#sort{width:auto;min-width:11.5rem;min-height:48px;border-radius:999px;padding:.6rem 1rem;font-size:1rem;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c3421' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem}
:root[data-theme=dark] #sort{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e6bba4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.result-count{text-align:center;font-size:.85rem;opacity:.7;margin:-.9rem 0 1rem}
.no-results{grid-column:1/-1;text-align:center;padding:2.4rem 1rem;display:grid;justify-items:center;gap:1rem}
.gprog{display:none}

/* ===== Phone layout: swipe rows instead of long vertical lists ===== */
@media(max-width:700px){
  .grid,.tiles,.why,.rev-list{display:flex;flex-wrap:nowrap;columns:auto;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:.9rem;margin-inline:-1rem;padding:.4rem 1rem 1.3rem;scroll-padding-inline:1rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .grid::-webkit-scrollbar,.tiles::-webkit-scrollbar,.why::-webkit-scrollbar,.rev-list::-webkit-scrollbar{display:none}
  .grid>.card{flex:0 0 78%;scroll-snap-align:start}
  .tiles>.tile{flex:0 0 80%;scroll-snap-align:start;min-height:270px}
  .why>.why-card{flex:0 0 84%;scroll-snap-align:start}
  .rev-list>.rev{flex:0 0 86%;scroll-snap-align:start;margin-bottom:0}
  .rev-list>.rev-empty,.grid>.no-results{flex:0 0 100%}
  .grid>.card.reveal,.tiles>.tile.reveal,.why>.why-card.reveal,.rev-list>.rev.reveal{opacity:1;transform:none;transition-delay:0s}
  .gprog{display:block;height:4px;border-radius:2px;background:rgba(92,52,33,.15);position:relative;margin:-.2rem auto 0;width:120px}
  .gprog.off{display:none}
  .gprog i{position:absolute;top:0;bottom:0;border-radius:2px;background:var(--brown);transition:left .1s linear}
  .shop-tools{flex-direction:column;gap:.5rem}
  #sort{width:100%;min-width:0}
  .filters{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin-inline:-1rem;padding:.1rem 1rem .5rem;scrollbar-width:none;scroll-padding-inline:1rem}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:none;scroll-snap-align:start}
  .result-count{margin:-.2rem 0 .7rem}
  .card-art{padding:1.2rem 1rem .8rem}.card-art .pouch{width:46%}
  .card-body{padding:1rem 1rem 1.2rem}

  /* tighter, better padded phone page */
  .hero{min-height:0;margin:.5rem;border-radius:26px}
  .slide{padding:1.5rem 1.15rem 4.6rem;gap:.4rem}
  .has-cv .slide-art{min-height:225px}
  .slide h1,.slide h2{font-size:2.1rem;margin-bottom:.7rem}
  html[lang=kn] .slide h1,html[lang=kn] .slide h2{font-size:1.9rem}
  .slide p{font-size:1rem}
  .cta-row{margin-top:1.1rem;gap:.6rem}
  .cta-row .btn{padding:.8rem 1.3rem}
  .sec{padding-block:2.8rem}
  .sec-head{margin-bottom:1.5rem}
  .statband{margin-top:1.4rem;border-radius:26px}
  .story,.bulk,.closer{margin-inline:.5rem;border-radius:26px}
  .story{padding:2.2rem 1.2rem}
  .bulk{padding:2rem 1.2rem}
  .bigtype{padding-top:.6rem}
  .rev-top{gap:1rem}
  .footer{padding:2.4rem 1.1rem 1.2rem}
  .announce{font-size:.8rem}
}
/* notches / home bar */
.wa-float{bottom:calc(18px + env(safe-area-inset-bottom));right:calc(18px + env(safe-area-inset-right))}
@media(max-width:860px){
  .cartbar{bottom:calc(.8rem + env(safe-area-inset-bottom))}
  body.has-cartbar{padding-bottom:calc(5rem + env(safe-area-inset-bottom))}
}
.drawer-foot{padding-bottom:calc(1.3rem + env(safe-area-inset-bottom))}
@media(max-width:480px){.drawer{width:100%}}

/* review form toggle (phone only) + compact phone sections */
.rev-toggle{display:none}
@media(max-width:700px){
  .rev-toggle{display:inline-flex;width:100%}
  .rev-form:not(.open){display:none}
  .rev-top{grid-template-columns:1fr;gap:.8rem}
  .rev-score{grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;justify-items:start;align-items:center;column-gap:1.2rem;padding:1.1rem 1.4rem;text-align:left}
  .rev-score .gauge{grid-row:1/3;width:104px;height:104px}
  .rev-score .gauge b{font-size:2.2rem}
  .rev-score .stars{align-self:end}.rev-score small{align-self:start}
  .statband{padding:1.5rem .3rem 1.4rem;row-gap:1.3rem}
  .st-art{width:46px;height:46px;margin-bottom:.4rem}
  .stat b{font-size:2.7rem}
  .stat>span{font-size:.64rem;margin-top:.4rem}
  .story-logo{width:112px}.logo-wrap{padding:20px}.story-inner{gap:.8rem}
  .steps li{padding-bottom:1rem}
  .closer{padding:2.6rem 1.2rem}
  .foot-grid{gap:1.3rem}.foot-logo{width:60px;height:60px}
  .foot-mark{margin-top:.8rem}
  .has-cv .slide-art{min-height:200px}
  .slide{padding-top:1.1rem;padding-bottom:4.2rem}
}
@media(max-width:700px){#collections{display:none}}

/* never let decoration widen the page (this pushed the fixed WhatsApp button off to the right on phones) */
html,body{overflow-x:clip;max-width:100%}
.sec{overflow-x:clip}
@media(max-width:860px){.gstar{display:none}}
@media(max-width:700px){
  .slide{align-content:start;align-items:start}
  .has-cv .slide-art{min-height:190px;align-self:auto}
}

/* Send-order button: bright WhatsApp green instead of near-black (clear, obviously clickable) */
.btn.wa{background:#178a47;border-color:#178a47;color:#fff;gap:.65rem;font-size:1.05rem;min-height:54px;box-shadow:0 12px 24px -12px rgba(23,138,71,.9)}
.btn.wa::before{content:"";flex:none;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.6-4.6A9 9 0 1 1 8 19.6z'/%3E%3Cpath d='M9 9.5c0 3 2.5 5.5 5.5 5.5l1.2-1.3-2-1-.8.8c-.9-.4-1.700-1.200-2.100-2.100l.8-.8-1-2z'/%3E%3C/svg%3E") center/contain no-repeat}
.btn.wa:hover:not(:disabled){background:#0f6f38;border-color:#0f6f38;box-shadow:0 14px 28px -10px rgba(23,138,71,.9)}
.btn.wa:disabled{background:#7d9486;border-color:#7d9486;box-shadow:none;cursor:not-allowed}

/* phones: skip the expensive blur / blend layers that sit above the animated hero */
@media(max-width:860px),(hover:none){
  .site-header,.site-header.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--cream)}
  :root[data-theme=dark] .site-header,:root[data-theme=dark] .site-header.scrolled{background:#1c0f09}
  .hero-ui{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(20,10,5,.5)}
  .hero::before{display:none}
  .map-modal{-webkit-backdrop-filter:none;backdrop-filter:none}
  .stat b{filter:none}
}

/* ===== Hero art: logo medallion + orbiting illustrated spices (replaces the particle canvas) ===== */
.slide-art.art{min-height:0;align-self:center}
.art-wheel,.art-pouches{position:relative;width:min(100%,470px);aspect-ratio:1;margin:auto;container-type:inline-size}
.art-wheel::before,.art-wheel::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.art-wheel::before{inset:4%;border:1.5px dashed rgba(251,249,193,.28)}
.art-wheel::after{inset:15%;border:1.5px dotted rgba(251,249,193,.18)}
.medal{position:absolute;inset:25%;border-radius:50%;overflow:hidden;box-shadow:0 0 0 7px rgba(251,249,193,.14),0 0 0 16px rgba(251,249,193,.06),0 34px 50px -12px rgba(0,0,0,.55);translate:calc(var(--px,0) * -14px) calc(var(--py,0) * -10px)}
.medal img{display:block;width:100%;height:100%;object-fit:cover}
.orbit{position:absolute;inset:0;animation:rot 110s linear infinite;translate:calc(var(--px,0) * -24px) calc(var(--py,0) * -18px)}
.sp{position:absolute;left:50%;top:50%;width:15cqw;height:15cqw;margin:-7.5cqw 0 0 -7.5cqw;transform:rotate(var(--a)) translateY(-40cqw) rotate(calc(var(--a) * -1))}
.sp i{display:block;width:100%;height:100%;animation:rotrev 110s linear infinite,bob 5.5s ease-in-out infinite;animation-delay:0s,calc(var(--i) * -.7s);filter:drop-shadow(0 9px 8px rgba(0,0,0,.38))}
.sp svg,.fl svg{display:block;width:100%;height:100%}
@keyframes rotrev{to{transform:rotate(-360deg)}}
@keyframes bob{50%{translate:0 -9px}}
.slide.active .medal{animation:medalIn 1.1s cubic-bezier(.2,.9,.2,1) both}
@keyframes medalIn{from{opacity:0;transform:scale(.55) rotate(-24deg)}}
.slide.active .sp{animation:spIn 1.1s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(.25s + var(--i) * .09s)}
@keyframes spIn{from{opacity:0;transform:rotate(var(--a)) translateY(-72cqw) rotate(calc(var(--a) * -1)) scale(.25)}}

.art-pouches{display:block}
.art-pouches .pouch-big{position:absolute;top:50%;left:50%;width:36cqw;margin:0;transform:translate(-98%,-50%) rotate(-8deg);animation:float 6s ease-in-out infinite}
.art-pouches .pouch-big.b2{transform:translate(-2%,-46%) rotate(8deg);animation-delay:-3s;margin:0}
.fl{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);translate:calc(var(--px,0) * var(--pf,-20px)) calc(var(--py,0) * var(--pf,-20px))}
.fl i{display:block;width:100%;height:100%;animation:drift 7s ease-in-out infinite;animation-delay:var(--d);filter:drop-shadow(0 9px 8px rgba(0,0,0,.35))}
@keyframes drift{0%,100%{transform:translateY(0) rotate(var(--r0))}50%{transform:translateY(-14px) rotate(calc(var(--r0) + 16deg))}}
.slide.active .fl{animation:flIn .9s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(.3s + var(--k) * .1s)}
@keyframes flIn{from{opacity:0;transform:translateY(40px) scale(.3)}}
.slide.active .art-pouches .pouch-big{animation:float 6s ease-in-out infinite,pouchIn .9s cubic-bezier(.2,.9,.2,1) both}
@keyframes pouchIn{from{opacity:0;scale:.7}}

@media(max-width:860px){
  .art-wheel{width:min(74vw,262px)}
  .art-pouches{width:min(78vw,290px)}
  .fl:nth-of-type(n+4){display:none}
}
@media(prefers-reduced-motion:reduce){.orbit,.sp i,.fl i,.art-pouches .pouch-big{animation:none!important}}
/* sizing pass: bolder spices and pouches */
.sp{width:18cqw;height:18cqw;margin:-9cqw 0 0 -9cqw;transform:rotate(var(--a)) translateY(-40.5cqw) rotate(calc(var(--a) * -1))}
@keyframes spIn{from{opacity:0;transform:rotate(var(--a)) translateY(-74cqw) rotate(calc(var(--a) * -1)) scale(.25)}}
.art-pouches .pouch-big{width:42cqw}
.fl{width:calc(var(--s) * 1.25);height:calc(var(--s) * 1.25)}
@media(max-width:860px){.art-wheel{width:min(68vw,240px)}.art-pouches{width:min(72vw,262px)}.slide-art.art{margin-bottom:.4rem}}