/* ─────────────────────────────────────────────────────────────────────────────
   WeeWoo homepage v2.1 — "Shared, made visible"

   THESIS      WeeWoo is a shop of premium apps you share. The first screen shows
               the shop itself — every app on one turntable you can spin — and
               says the deal in five words. No themed worlds, no slogan walls.
   OWN-WORLD   Daylight white, warm stone mist, deep ink type, one tangerine that
               owns the turntable and the price chips. Glossy tangerine/white 3D
               objects for categories and promises. Bricolage Grotesque display,
               Schibsted Grotesk text.
   STORY       See the apps → understand "you pay only your share" → jump to a
               category → every plan in a clear grid → trust the delivery.
   FIRST VIEW  Desktop: headline + one line + two buttons left, turntable right.
               Phone: turntable first, then the same three things, all above
               the fold on a 360×740 screen.
   MOTION      One authored moment: the turntable (auto-spins, drag to spin,
               stops off-screen). Headline lines rise once. Product cards rise
               as you scroll to them (scroll-linked, no JS). Chat plays once.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  --paper:#ffffff; --mist:#f4f3f0; --mist-2:#ebe8e3; --line:#e5e1db;
  --ink:#17130f; --ink-2:#3d3631; --muted:#6b645d;
  --tang:#ff5b1f; --tang-hi:#ff8a57; --tang-lo:#d9440c; --tang-ink:#b5350a; --tang-soft:#fff0e8;
  --wa:#11804a;
  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:36px;
  --sh-1:0 1px 2px rgba(23,19,15,.05),0 10px 24px -14px rgba(23,19,15,.22);
  --sh-2:0 2px 6px rgba(23,19,15,.05),0 34px 70px -30px rgba(23,19,15,.34);
  --f-d:'Bricolage Grotesque',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-b:'Schibsted Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,4vw,40px);
  --sec:clamp(56px,8vw,120px);
  --max:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-b);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2.5px solid var(--tang);outline-offset:3px;border-radius:8px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

h1,h2,h3{font-family:var(--f-d);font-weight:700;letter-spacing:-.035em;line-height:1;margin:0;text-wrap:balance}
h2{font-size:clamp(34px,4.8vw,60px)}
h3{font-size:clamp(20px,2vw,24px);letter-spacing:-.02em;line-height:1.15}
.h-sm{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.025em}
p{margin:0}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(28px,4vw,48px)}
.sec-head p{max-width:30em;color:var(--muted)}
@media (min-width:760px){.sec-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px}}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;
  font-weight:600;font-size:16px;letter-spacing:-.005em;white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn-ink{background:var(--ink);color:#fff;box-shadow:0 14px 30px -16px rgba(23,19,15,.7)}
.btn-ink:hover{transform:translateY(-2px);box-shadow:0 20px 36px -16px rgba(23,19,15,.75)}
.btn .arw{transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-line{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn:active{transform:scale(.97)}
.wa-i{display:grid;color:var(--wa)}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 1px 0 var(--line)}
.nav.hidden{transform:translateY(-100%)}
.nav{transition:transform .35s var(--ease),box-shadow .3s}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.nav-l{display:flex;align-items:center;gap:2px;margin-left:-10px}
.logo{display:inline-flex;align-items:center;gap:2px;font-family:var(--f-d);font-weight:800;font-size:22px;letter-spacing:-.04em}
.logo svg{width:16px;height:16px;fill:var(--tang);margin:0 1px}
.nav-links{display:none}
.nav-r{display:flex;gap:2px;margin-right:-10px}
.icon-btn{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;position:relative;transition:background .2s}
.icon-btn:hover{background:var(--mist)}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cart-count{position:absolute;top:5px;right:4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--tang);color:var(--ink);
  font-size:11px;font-weight:700;line-height:18px;text-align:center}
.cart-count:not(.on){display:none}
@media (min-width:1000px){
  .nav .menu-btn{display:none}
  .nav-l{margin-left:0}
  .nav-links{display:flex;align-items:center;gap:4px}
  .nav-links > a,.dd > button{position:relative;display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 14px;border-radius:999px;
    font-weight:500;font-size:15px;color:var(--ink-2);transition:background .2s,color .2s}
  .nav-links > a:hover,.dd > button:hover,.dd:focus-within > button{background:var(--mist);color:var(--ink)}
  .nav-links > a.on{color:var(--ink);font-weight:650}
  .nav-links > a.on::after{content:"";position:absolute;left:50%;bottom:3px;width:18px;height:3px;border-radius:2px;background:var(--tang);transform:translateX(-50%)}
  .dd{position:relative}
  .dd > button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
  .dd:hover > button svg,.dd:focus-within > button svg{transform:rotate(180deg)}
  .dd-menu{position:absolute;top:calc(100% + 8px);left:50%;min-width:240px;padding:8px;border-radius:20px;background:#fff;border:1px solid var(--line);
    box-shadow:var(--sh-2);display:grid;gap:2px;opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .2s,transform .3s var(--ease),visibility 0s .3s}
  .dd-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
  .dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd button[aria-expanded="true"] + .dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s,transform .3s var(--ease),visibility 0s}
  .dd-menu a{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:13px;font-weight:550;font-size:15px}
  .dd-menu a img{width:34px;height:34px;object-fit:contain;border-radius:10px;background:var(--mist);padding:3px}
  .dd-menu a:hover{background:var(--mist)}
  .dd-text a{padding:11px 14px}
}

/* ── HERO ────────────────────────────────────────────────────────────── */
.hero{padding:clamp(8px,2vw,24px) 0 var(--sec);overflow-x:clip}
.hero .wrap{display:grid;gap:clamp(4px,1vw,12px)}
.hero h1{font-size:clamp(44px,12.4vw,72px);letter-spacing:-.05em;line-height:.92}
.hero h1 .ln{display:block;overflow:hidden;white-space:nowrap;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .ln > span{display:inline-block}
.hero h1 .t{color:var(--tang)}
.hero-sub{margin-top:18px;font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:22em}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.proof{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:22px;font-size:14px;color:var(--muted)}
.proof b{color:var(--ink);font-weight:650;margin-right:-4px}
.proof i{width:4px;height:4px;border-radius:50%;background:#cfc9c1}
@media (max-width:999px){.proof{display:none}}

/* the turntable */
.hero-visual{position:relative}
.hero-visual::before{content:"";position:absolute;left:50%;top:52%;width:min(110%,720px);aspect-ratio:1.6;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,91,31,.16),rgba(255,91,31,.05) 55%,transparent);pointer-events:none}
.orbit{position:relative;width:100%;aspect-ratio:1/.8;container-type:inline-size;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.orbit.grabbing{cursor:grabbing}
.deck{position:absolute;left:50%;top:59%;width:94cqw;height:38cqw;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(ellipse 72% 64% at 50% 34%,#ffc6a8 0%,#ff8b52 38%,#ff5b1f 78%,#f04e12 100%);
  box-shadow:inset 0 3cqw 4cqw -2cqw rgba(255,255,255,.45),inset 0 -2cqw 3cqw rgba(160,45,5,.25),0 5cqw 7cqw -4cqw rgba(196,64,12,.55)}
.deck::before{content:"";position:absolute;inset:0;border-radius:50%;transform:translateY(2.6cqw);z-index:-1;background:linear-gradient(90deg,#c2400c,#e2541a 50%,#c2400c);
  box-shadow:0 4cqw 6cqw -3cqw rgba(23,19,15,.35)}
.deck::after{content:"";position:absolute;inset:14% 17%;border-radius:50%;border:1.5px solid rgba(255,255,255,.35)}
.tile{position:absolute;left:50%;top:46%;width:25cqw;aspect-ratio:1;margin:0;border-radius:22%;overflow:hidden;background:#111;
  box-shadow:0 2.4cqw 4cqw -1.6cqw rgba(23,19,15,.5),0 0 0 .6cqw rgba(255,255,255,.95);will-change:transform}
.tile img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.orbit-cap{display:flex;justify-content:center;align-items:baseline;gap:10px;margin-top:-1cqw;font-family:var(--f-d);font-weight:700;font-size:18px;letter-spacing:-.02em}
.orbit-cap small{font-family:var(--f-b);font-weight:500;font-size:13px;color:var(--muted);letter-spacing:0}
#orbitName{display:inline-block;transition:opacity .25s,transform .35s var(--ease)}
#orbitName.swap{opacity:0;transform:translateY(6px)}

/* one authored entrance */
.js .hero h1 .ln > span{animation:rise .9s var(--ease) both}
.js .hero h1 .ln:nth-child(2) > span{animation-delay:.08s}
.js .hero-sub,.js .hero-cta,.js .proof{animation:fade .8s var(--ease) both;animation-delay:.25s}
.js .orbit{animation:spinIn 1.2s var(--ease) both}
@keyframes rise{from{transform:translateY(105%)}}
@keyframes fade{from{opacity:0;transform:translateY(12px)}}
@keyframes spinIn{from{opacity:0;transform:scale(.9) rotate(-4deg)}}

@media (min-width:1000px){
  .hero h1{font-size:min(6.3vw,86px)}
  .hero{padding-top:clamp(12px,3vw,40px)}
  .hero .wrap{grid-template-columns:1.05fr 1fr;align-items:center;gap:40px}
}
@media (max-width:999px){
  .hero-visual{order:-1;margin:0 calc(var(--gut) * -1)}
  .orbit{width:100%;max-width:560px;margin:0 auto;aspect-ratio:1/.74}
  .orbit-cap{font-size:16px;margin-top:-3cqw}
  .hero-copy{margin-top:18px}
  .hero-cta .btn{flex:1 1 160px}
}
@media (max-width:999px) and (max-height:760px){ .orbit{max-width:360px} }

/* ── categories (minimal) ────────────────────────────────────────────── */
.cats{padding:0 0 var(--sec)}
.cats .h-sm{margin-bottom:20px}
.ct-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 10px}
.ct{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.ct-art{width:100%;aspect-ratio:1;border-radius:var(--r-l);background:var(--mist);display:grid;place-items:center;transition:background .35s var(--ease)}
.ct-art img{width:66%;height:66%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(23,19,15,.16));transition:transform .6s var(--ease)}
.ct b{margin-top:10px;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.ct:hover .ct-art{background:var(--tang-soft)}
.ct:hover .ct-art img{transform:translateY(-6px) rotate(-5deg) scale(1.05)}
@media (min-width:860px){.ct-grid{grid-template-columns:repeat(6,1fr);gap:16px}.ct b{font-size:16px}}

/* ── product grids ───────────────────────────────────────────────────── */
.shop{padding:0 0 calc(var(--sec) * .6)}
.shop-h{margin-bottom:clamp(8px,2vw,16px)}
.block{padding-top:clamp(26px,4vw,40px)}
.block + .block{margin-top:clamp(18px,3vw,30px)}
.block-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.block-head h3{font-size:clamp(22px,2.4vw,30px)}
.see{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;background:var(--mist);
  font-weight:600;font-size:14px;color:var(--ink);white-space:nowrap;transition:background .2s}
.see:hover{background:var(--tang-soft)}
.see svg{width:15px;height:15px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1240px){.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;min-width:0;padding:8px 8px 10px;border-radius:22px;background:#fff;border:1px solid var(--line);
  transition:border-color .25s,box-shadow .35s var(--ease)}
.card:hover{border-color:#d6d0c8;box-shadow:var(--sh-1)}
.card-art{position:relative;border-radius:15px;overflow:hidden;aspect-ratio:1;background:var(--mist)}
.card-art img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card-art img{transform:scale(1.045)}
.off{position:absolute;left:8px;top:8px;height:23px;padding:0 8px;border-radius:999px;background:var(--tang);color:var(--ink);
  font-size:11.5px;font-weight:750;line-height:23px;letter-spacing:.01em}
.card.oos .card-art img{filter:grayscale(1) opacity(.55)}
.card.oos .off{background:#fff;color:var(--ink-2)}
.card-body{padding:10px 4px 12px}
.card h4{margin:0;font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;margin-top:4px;font-size:12px;color:var(--muted)}
.price b{font-family:var(--f-d);font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.03em}
.price s{font-size:12.5px}
.card-act{display:grid;grid-template-columns:40px 1fr;gap:6px;margin-top:auto}
.c-cart{height:40px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--line);display:grid;place-items:center;transition:box-shadow .2s,transform .2s}
.c-cart:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.c-cart:active{transform:scale(.92)}
.c-cart svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.c-buy{height:40px;border-radius:12px;background:var(--ink);color:#fff;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background .25s,transform .2s}
.c-buy svg{width:14px;height:14px;fill:var(--tang)}
.c-buy:hover{background:#000}
.c-buy:active{transform:scale(.97)}
.card.oos .c-buy{background:var(--mist);color:var(--muted)}
/* cards rise once as their grid comes into view. Hidden only after app.js has armed the observer
   (html.reveal-on), so a failed script can never leave the catalogue invisible. */
.grid .card{transition:opacity .7s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)}
.ww-reveal .grid .card:not(.in){opacity:0;transform:translateY(22px)}

/* ── delivery demo ───────────────────────────────────────────────────── */
.deliver{background:var(--mist);padding:var(--sec) 0;overflow:hidden}
.deliver .wrap{display:grid;gap:clamp(44px,6vw,80px);align-items:center}
.flow{list-style:none;margin:clamp(26px,4vw,40px) 0 0;padding:0}
.flow li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.flow li:last-child{border-bottom:1px solid var(--line)}
.flow .k{width:44px;height:44px;border-radius:14px;background:#fff;display:grid;place-items:center;box-shadow:var(--sh-1);font-family:var(--f-d);font-weight:700}
.flow b{display:block;font-size:17px;letter-spacing:-.01em}
.flow span{color:var(--muted);font-size:15px}
.phone{position:relative;width:min(100%,340px);margin:0 auto;border-radius:46px;background:#0f0d0b;padding:10px;box-shadow:var(--sh-2)}
.screen{border-radius:37px;overflow:hidden;background:#efe7dd;min-height:560px;display:flex;flex-direction:column}
.wa-top{background:#075e54;color:#fff;display:flex;align-items:center;gap:10px;padding:44px 14px 12px}
.wa-top .av{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:var(--f-d);font-weight:800;color:var(--ink);font-size:13px}
.wa-top b{font-size:15px;display:block;font-weight:600}
.wa-top small{font-size:12px;opacity:.8}
.chat{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.4}
.day{align-self:center;background:#e1f2fb;color:#3d5260;font-size:11.5px;padding:4px 10px;border-radius:8px;margin-bottom:6px}
.bub{max-width:88%;padding:8px 10px 6px;border-radius:10px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bub.out{align-self:flex-end;background:#d9fdd3}
.bub time{display:block;text-align:right;font-size:10.5px;color:#667781;margin-top:2px}
.cred{margin-top:8px;border-radius:10px;background:#f6f4ef;padding:10px 12px;font-size:13px;display:grid;gap:4px}
.cred div{display:flex;justify-content:space-between;gap:12px}
.cred span{color:#667781}
.cred code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.sample{position:absolute;top:-14px;right:18px;height:28px;padding:0 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;line-height:28px}
.js .chat .bub{opacity:0;transform:translateY(10px) scale(.98)}
.js .chat.play .bub{animation:pop .55s var(--ease) forwards}
.js .chat.play .bub:nth-of-type(2){animation-delay:.5s}
.js .chat.play .bub:nth-of-type(3){animation-delay:1.3s}
.js .chat.play .bub:nth-of-type(4){animation-delay:2.1s}
.js .chat.done .bub{opacity:1;transform:none;animation:none}
@keyframes pop{to{opacity:1;transform:none}}
@media (min-width:900px){.deliver .wrap{grid-template-columns:1fr 1fr}}

/* ── promises ────────────────────────────────────────────────────────── */
.promise{padding:var(--sec) 0 0}
.promise h2{margin-bottom:clamp(22px,3vw,32px)}
.pr-panel{display:grid;border:1px solid var(--line);border-radius:var(--r-l);background:#fff;overflow:hidden}
.pr{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;padding:20px}
.pr + .pr{border-top:1px solid var(--line)}
.pr img{width:64px;height:64px;object-fit:contain;transition:transform .6s var(--ease)}
.pr:hover img{transform:rotate(-8deg) scale(1.06)}
.pr h3{font-size:18px;letter-spacing:-.02em}
.pr p{margin-top:4px;color:var(--muted);font-size:14.5px;line-height:1.5}
.pr-note{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pr-note li{height:34px;padding:0 14px;border-radius:999px;background:var(--mist);display:inline-flex;align-items:center;gap:5px;font-size:13.5px;color:var(--ink-2)}
.pr-note b{color:var(--ink)}
@media (min-width:860px){
  .pr-panel{grid-template-columns:repeat(3,1fr)}
  .pr{grid-template-columns:1fr;align-items:start;padding:30px 28px 32px;gap:18px}
  .pr + .pr{border-top:0;border-left:1px solid var(--line)}
  .pr img{width:88px;height:88px}
  .pr h3{font-size:22px}
  .pr p{font-size:15.5px}
}

/* ── reviews ─────────────────────────────────────────────────────────── */
.reviews{padding:var(--sec) 0 calc(var(--sec) * .6)}
.rv-h{margin-bottom:clamp(20px,3vw,32px)}
.rv-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,330px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:0 calc(var(--gut) * -1);padding:6px var(--gut) 18px;scroll-padding:0 var(--gut)}
.rv-track::-webkit-scrollbar{display:none}
.rv{scroll-snap-align:start;background:var(--mist);border-radius:var(--r-l);padding:24px 22px 20px;display:flex;flex-direction:column;gap:16px}
.rv q{quotes:none;font-size:16.5px;line-height:1.5;flex:1}
.rv q::before,.rv q::after{content:none}
.rv.big q{font-family:var(--f-d);font-size:clamp(23px,2.3vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.14}
.rv footer{display:flex;align-items:center;gap:11px}
.rv .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-family:var(--f-d);color:var(--ink)}
.rv footer b{display:block;font-size:14.5px}
.rv footer span{color:var(--muted);font-size:13px}
.stars{display:flex;gap:2px}
.stars svg{width:15px;height:15px;fill:var(--tang)}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{padding:calc(var(--sec) * .6) 0 var(--sec)}
.faq .wrap{display:grid;gap:28px}
.faq-help{margin-top:14px;color:var(--muted);max-width:22em}
.faq-help a{color:var(--wa);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 0;cursor:pointer;
  font-family:var(--f-d);font-weight:600;font-size:clamp(17.5px,1.7vw,21px);letter-spacing:-.02em;line-height:1.25}
.qa summary::-webkit-details-marker{display:none}
.qa .pm{flex:0 0 32px;height:32px;border-radius:50%;background:var(--mist);position:relative;transition:background .3s,transform .45s var(--ease)}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--ink);transform:translate(-50%,-50%)}
.qa .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .45s var(--ease)}
.qa[open] .pm{background:var(--tang);transform:rotate(180deg)}
.qa[open] .pm::after{transform:translate(-50%,-50%) rotate(0)}
.qa p{padding:0 0 22px;color:var(--ink-2);max-width:42em}
@media (min-width:900px){.faq .wrap{grid-template-columns:.8fr 1.2fr;gap:60px}.faq-side{position:sticky;top:96px;align-self:start}}

/* ── refer ───────────────────────────────────────────────────────────── */
.refer{padding:0 0 calc(var(--sec) * .7)}
.refer-card{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--tang-soft);border:1px solid #ffdccb;
  padding:26px 22px 22px;display:grid;gap:18px}
.refer-art{position:absolute;right:-14px;top:-8px;width:120px;transform:rotate(8deg);pointer-events:none}
.refer-copy{padding-right:96px}
.refer-card h2{font-size:clamp(28px,4vw,46px);letter-spacing:-.04em}
.refer-card h2 span{display:block;color:var(--tang-ink)}
.refer-card p{margin-top:10px;color:var(--ink-2);font-size:15px;max-width:30em}
.refer-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.refer-steps li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;border-radius:16px;background:#fff;font-size:13.5px;font-weight:600;line-height:1.2}
.refer-steps em{font-style:normal;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--tang);display:grid;place-items:center;
  font-family:var(--f-d);font-weight:700;font-size:12px}
.refer-btn{width:100%}
@media (min-width:860px){
  .refer-card{grid-template-columns:1.2fr 1fr;grid-template-areas:"copy art" "steps art" "btn art";align-items:start;padding:44px 48px}
  .refer-copy{grid-area:copy;padding-right:0}
  .refer-steps{grid-area:steps;max-width:420px}
  .refer-btn{grid-area:btn;width:auto;justify-self:start}
  .refer-art{grid-area:art;position:static;width:min(100%,250px);justify-self:center;align-self:center;transform:rotate(6deg)}
}

/* ── about + footer ──────────────────────────────────────────────────── */
.about{padding:0 0 clamp(28px,4vw,48px)}
.about p{max-width:62ch;margin:0 auto;text-align:center;font-size:13.5px;color:var(--muted);line-height:1.65}
.about b{color:var(--ink-2);font-weight:600}
.foot{border-top:1px solid var(--line);padding:24px 0}
.foot .wrap{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.foot .logo{font-size:20px}
.foot-copy{font-size:13.5px;color:var(--muted)}
.foot-copy .heart{color:var(--tang)}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;font-size:14px;font-weight:550}
.foot-links a:hover{color:var(--tang-ink)}
@media (min-width:860px){.foot .wrap{flex-direction:row;justify-content:space-between}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .chat .bub{opacity:1;transform:none}
}

/* ═══ live-site wiring (template-weewoo-home-v2.php) ═══════════════════════════════════ */
html{background:#fff}
body.ww-home2{background:#fff}

/* drawers — opened by ww_drawer_bootstrap() / weewoo-homepage.js via .open */
.drawer-overlay{position:fixed;inset:0;z-index:100040;background:rgba(23,19,15,.38);opacity:0;pointer-events:none;transition:opacity .35s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;z-index:100050;width:min(88vw,380px);background:var(--paper);display:flex;flex-direction:column;
  padding:12px 20px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;transition:transform .45s var(--ease),visibility 0s .45s;visibility:hidden}
.drawer.open{visibility:visible;transition:transform .45s var(--ease),visibility 0s}
.drawer-menu{left:0;transform:translateX(-102%)}
.drawer-cart{right:0;transform:translateX(102%)}
.drawer.open{transform:none}
.d-row{display:flex;justify-content:space-between;align-items:center;margin:0 -8px 10px 0;min-height:52px}
.d-main{display:flex;align-items:center;height:52px;padding:0 14px;margin:0 -14px;border-radius:14px;font-family:var(--f-d);font-weight:650;font-size:22px;letter-spacing:-.02em}
.d-main.on{background:var(--ink);color:#fff}
.d-main:not(.on):hover{background:var(--mist)}
.d-label{margin:22px 0 10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.d-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.d-cats a{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;border:1px solid var(--line);font-weight:600;font-size:14px;line-height:1.2}
.d-cats img{width:36px;height:36px;object-fit:contain;flex:0 0 auto}
.d-links{display:grid}
.d-links a{padding:11px 0;border-bottom:1px solid var(--line);font-weight:500}
.cart-h{font-family:var(--f-d);font-size:21px;letter-spacing:-.02em}
.drawer-body{flex:1}
.cart-loading{padding:30px 0;color:var(--muted);text-align:center}
.cart-empty{display:grid;justify-items:center;gap:10px;padding:48px 0;color:var(--muted)}
.cart-empty svg{width:48px;height:48px;fill:none;stroke:#c9c2b8;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cart-item{display:grid;grid-template-columns:60px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.cart-item img{width:60px;height:60px;border-radius:14px;object-fit:cover}
.cart-item-info b{display:block;font-size:15px;font-weight:650;line-height:1.3}
.cart-item-info > span{font-size:13px;color:var(--muted)}
.cart-item-row{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.cart-item-price{font-family:var(--f-d);font-weight:700;font-size:16px}
.cart-remove{font-size:13px;font-weight:600;color:var(--muted);padding:6px 0}
.cart-remove:hover{color:#b42318}
.drawer-foot{padding-top:14px;border-top:1px solid var(--line);display:grid;gap:12px}
.cart-total-row{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
.cart-total-row b{font-family:var(--f-d);font-size:22px}
.drawer-foot .btn{width:100%}
.drawer-foot .btn svg{fill:var(--tang)}

/* search */
.search-overlay{position:fixed;inset:0;z-index:100060;visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s .25s}
.search-overlay.open{visibility:visible;opacity:1;transition:opacity .25s}
.search-overlay-bg{position:absolute;inset:0;background:rgba(23,19,15,.4)}
.search-modal{position:relative;max-width:640px;margin:12px auto 0;padding:12px;border-radius:24px;background:#fff;box-shadow:var(--sh-2);width:calc(100% - 24px)}
.search-bar{display:flex;align-items:center;gap:10px;height:54px;padding:0 14px;border-radius:16px;background:var(--mist)}
.search-bar > svg{width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;flex:0 0 auto}
.search-bar input{flex:1;min-width:0;border:0;background:none;font:500 16px var(--f-b);color:var(--ink);outline:0}
.search-bar-clear{width:32px;height:32px;border-radius:50%;display:none;place-items:center}
.search-bar-clear.show{display:grid}
.search-bar-clear svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.search-results{max-height:60vh;overflow-y:auto}
.search-result{display:flex;align-items:center;gap:12px;padding:10px 6px;border-bottom:1px solid var(--line)}
.search-result-img{width:48px;height:48px;border-radius:13px;object-fit:cover;background:var(--mist);flex:0 0 auto}
.search-result-name{font-weight:600;font-size:15px}
.search-result-price{font-size:13.5px;color:var(--ink-2)}
.search-result-price del{color:var(--muted);margin-right:4px}
.search-loading,.search-no-results{padding:18px 6px;color:var(--muted);font-size:14px}
.search-close-btn{display:block;margin:10px auto 2px;padding:8px 16px;font-weight:600;color:var(--muted)}

/* toast + add-to-cart feedback from weewoo-homepage.js */
.toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));z-index:100070;display:flex;align-items:center;gap:8px;
  padding:12px 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:14.5px;box-shadow:var(--sh-2);
  transform:translate(-50%,20px);opacity:0;transition:transform .4s var(--ease),opacity .3s;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast svg{width:18px;height:18px;fill:none;stroke:var(--tang);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.c-cart.loading{opacity:.5;pointer-events:none}
.c-cart.added{background:var(--tang);box-shadow:none}
.cart-count.pop{animation:cartPop .4s var(--ease)}
@keyframes cartPop{50%{transform:scale(1.3)}}

/* ⚡ INSTANT placeholder from the Vault plugin: top-right of the artwork, our chip style */
.card-art .ww-instant-badge{position:absolute!important;bottom:8px!important;left:8px!important;top:auto!important;right:auto!important;
  height:23px;padding:0 8px!important;border-radius:999px!important;background:var(--ink)!important;color:#fff!important;font:700 11px/23px var(--f-b)!important;
  letter-spacing:.01em;box-shadow:none!important;z-index:2!important}

/* the site-wide mobile dock (printed by ww_mobile_dock) in this palette */
body.ww-home2 .ww-dock-in{background:#fff;border:1px solid var(--line);border-radius:24px;padding:6px;gap:4px;max-width:420px;
  box-shadow:0 18px 40px -18px rgba(23,19,15,.45)}
body.ww-home2 .ww-dk{gap:3px;padding:7px 0 6px;border-radius:18px;color:var(--muted);font:600 11px/1.1 var(--f-b);transition:background .25s,color .25s}
body.ww-home2 .ww-dk svg{padding:0;background:none!important;width:22px;height:22px}
body.ww-home2 .ww-dk.on{background:var(--ink);color:#fff}
body.ww-home2 .ww-dk.on svg{stroke:var(--tang)}

/* Minimog prints its own fly cart, search popup and mobile menu into wp_footer on every page.
   Their stylesheets are dequeued on this template (it draws its own chrome), so without this they
   render as raw, unstyled text under the footer ("Shopping Cart Subtotal ₹0 Checkout"). */
#popup-fly-cart,#popup-search,#page-mobile-main-menu{display:none!important}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* page canvas: the dock's inline style paints <html> cream; this page is white */
:root{background:#fff!important}
/* PWA install sheet (ww_pwa_install_ui) in this palette */
html body.ww-home2 .wwp{font-family:var(--f-b);border-radius:28px}
html body.ww-home2 .wwp-top b{font-family:var(--f-d);color:var(--ink)}
html body.ww-home2 .wwp-top i{color:var(--muted)}
html body.ww-home2 .wwp-pts li{color:var(--ink-2)}
html body.ww-home2 .wwp-pts span{background:var(--tang-soft)}
html body.ww-home2 .wwp-ios{background:var(--mist)}
html body.ww-home2 .wwp-sn{background:var(--ink);color:var(--tang)}
html body.ww-home2 .wwp-go{background:var(--ink);color:#fff;border-radius:999px;font-weight:700;box-shadow:0 14px 30px -16px rgba(23,19,15,.7)}
html body.ww-home2 .wwp-no{color:var(--muted)}
html body.ww-home2 .wwp-scrim{background:rgba(23,19,15,.38)}