/* Horeka Ask — /ask/
   Horeka Quick-OS shell (green header, white sections on #F9F9F9, hq-so-card style), compact type:
   12 / 13.5 / 15 / 18; prices 18–22 in Outfit. Light only, like the live storefront. */
:root{
  --green:#2C8515;--green-press:#236B10;--green-deep:#2D6A1F;--green-soft:#EDF7E8;--green-line:#3D7A2E;
  --navy:#0D1B40;--link:#2563EB;--gold:#FCBA0E;--yellow:#FFDB15;
  --cream:#FFF9E6;--cream-line:#FFE699;--cream-ink:#7A5A00;
  --page:#F9F9F9;--img:#F8F8F8;--line:#ECEEF1;--line-2:#E2E6EB;
  --ink:#0D1B40;--text:#1D2327;--muted:#5F6B7A;--faint:#9AA3AE;--red:#EF4444;
  --f-d:'Outfit','Inter',system-ui,sans-serif;--f-b:'Inter',-apple-system,'Segoe UI',Roboto,system-ui,sans-serif;
  color-scheme:light
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#E7EBEF}
body{font:14px/1.45 var(--f-b);color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num{font-variant-numeric:tabular-nums}
.app{position:relative;height:100%;max-width:520px;margin:0 auto;background:var(--page);display:flex;flex-direction:column;overflow:hidden}
@media (min-width:560px){.app{box-shadow:0 0 0 1px #DDE2E8,0 20px 50px rgba(13,27,64,.12)}}
.scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}

/* header */
.hdr{background:var(--green);color:#fff;flex:none;position:relative;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,.14);padding-top:env(safe-area-inset-top,0px)}
.hrow{display:flex;align-items:center;gap:6px;min-height:56px;padding:0 8px 0 6px}
.hrow .logo{display:flex;align-items:center;padding-left:8px;flex:1;min-width:0}
.hrow .logo img{height:30px;width:auto;display:block}
.ib{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none;position:relative}
.ib:active{background:rgba(255,255,255,.18)}
.ib .cc{position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--yellow);color:#111;font:800 10px/17px var(--f-b);text-align:center}
.ttl{flex:1;min-width:0;font:600 16px var(--f-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qp{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:#fff;color:var(--ink);border-radius:11px;padding:8px 12px;text-align:left}
.qp span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:13px}
.qp svg{width:16px;height:16px;color:var(--muted)}

/* home */
.hero{background:var(--green);padding:6px 16px 22px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-70px;bottom:-100px;width:260px;height:260px;border-radius:50%;border:34px solid rgba(255,255,255,.05);pointer-events:none}
.hero h1{position:relative;margin:4px 0 4px;color:#fff;font:800 26px/1.12 var(--f-d);letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{position:relative;margin:0 0 14px;color:rgba(255,255,255,.86);font-size:13px}
.box{position:relative;display:flex;align-items:center;gap:6px;background:#fff;border-radius:12px;padding:4px 4px 4px 14px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:500 15px var(--f-b);padding:10px 0}
.box input::placeholder{color:var(--faint)}
.sb{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:var(--muted)}
.sb.go{background:var(--green);color:#fff}
.modes{position:relative;display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.mode{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;font:600 12px var(--f-b)}
.mode svg{width:15px;height:15px}
.sect{background:#fff;margin-top:8px;padding:14px 0 6px}
.sect-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 16px 8px}
.sect-h h3{margin:0;font:700 15.5px var(--f-d);color:var(--ink)}
.sect-h small{color:var(--muted);font-size:12px}
.sug{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 16px;border-top:1px solid var(--line)}
.sug .sq{width:32px;height:32px;border-radius:9px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;flex:none}
.sug .sq svg{width:16px;height:16px}
.sug .tx{flex:1;min-width:0;font-weight:500;color:var(--text)}
.sug .kind{font:700 10px var(--f-b);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.how{display:grid;gap:10px;padding:2px 16px 14px}
.how div{display:flex;gap:10px;font-size:13px;color:var(--muted)}
.how b{color:var(--ink);font-weight:600}
.how svg{width:18px;height:18px;color:var(--green);margin-top:1px}
.foot{padding:16px 16px 28px;text-align:center;font-size:12px;color:var(--faint)}
.foot a{color:var(--link);text-decoration:none;font-weight:600}

/* thinking */
.think{padding:20px 16px;display:grid;gap:12px;background:#fff}
.tl{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;opacity:.4;transition:opacity .25s}
.tl.on{opacity:1;color:var(--ink)}
.tk{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;flex:none}
.tl.on .tk{background:var(--green);border-color:var(--green);color:#fff}
.tl.spin .tk{border-color:var(--green);border-top-color:transparent;animation:spin .8s linear infinite;background:none}
.tk svg{width:12px;height:12px;stroke-width:3}
.think .photo{width:84px;height:84px;object-fit:cover;border-radius:12px;border:1px solid var(--line-2)}
.skel{height:110px;margin:8px 16px 0;border-radius:12px;background:linear-gradient(90deg,#F1F3F5,#E6E9EC,#F1F3F5);background-size:200% 100%;animation:sh 1.2s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* results */
.und{background:#fff;padding:14px 16px;display:flex;gap:10px}
.spark{width:28px;height:28px;border-radius:8px;flex:none;background:var(--green);color:#fff;display:grid;place-items:center}
.spark svg{width:15px;height:15px;stroke-width:2.2}
.und p{margin:3px 0 8px;font-size:14px;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;background:var(--green-soft);color:var(--green-deep);font-size:12px;font-weight:600}
.chip.y{background:var(--cream);color:var(--cream-ink);border:1px solid var(--cream-line)}
.chip svg{width:13px;height:13px}
.ask{margin-top:8px;background:var(--cream);border-top:1px solid var(--cream-line);border-bottom:1px solid var(--cream-line);padding:12px 16px}
.ask-h{display:flex;align-items:center;gap:6px;font:700 10.5px var(--f-b);letter-spacing:.08em;text-transform:uppercase;color:var(--cream-ink)}
.ask-h svg{width:14px;height:14px}
.ask-q{font:600 15.5px/1.3 var(--f-d);color:var(--ink);margin:4px 0 10px}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--cream-line);background:#fff;font:600 13px var(--f-b);color:var(--ink)}
.opt.ghost{background:transparent;border-color:transparent;color:var(--cream-ink)}
.answered{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--cream-ink)}
.answered b{color:var(--ink)}
.lnk{color:var(--link);font:600 12.5px var(--f-b)}
.pick{display:grid;grid-template-columns:116px minmax(0,1fr);gap:12px;padding:0 16px}
.iw{position:relative;background:var(--img);aspect-ratio:1/1;border-radius:10px;overflow:hidden;display:block;width:100%;max-width:100%}
.iw img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.flag{position:absolute;top:8px;left:0;background:var(--green-deep);color:#fff;font:800 9px/1.4 var(--f-b);padding:3px 8px;border-radius:0 4px 4px 0;text-transform:uppercase;letter-spacing:.3px;z-index:2}
.flag.y{background:var(--gold);color:#3A2A00}
.flag.n{background:var(--navy)}
.pn{font:600 14.5px/1.3 var(--f-d);color:var(--ink);text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rt{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);margin-top:3px}
.rt .st{display:inline-flex;align-items:center;gap:3px;background:var(--green-deep);color:#fff;font-weight:700;padding:1px 6px;border-radius:5px;font-size:11.5px}
.rt .st svg{width:11px;height:11px;fill:#fff;stroke:#fff}
.pr{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:5px}
.pr b{font:800 19px var(--f-d);color:#111}
.pr s{color:#AAA;font-size:12px}
.pr .off{color:var(--green);font-weight:700;font-size:12px}
.why{list-style:none;margin:10px 16px 0;padding:10px 12px;background:var(--page);border-radius:12px;display:grid;gap:6px}
.why li{display:flex;gap:8px;font-size:13px}
.why li svg{width:15px;height:15px;color:var(--green);margin-top:2px;stroke-width:2.4}
.why li.con{color:var(--muted)}
.why li.con svg{color:#C27C00}
.checks{margin:8px 16px 0;display:grid;gap:4px}
.ck{display:grid;grid-template-columns:18px 96px minmax(0,1fr);gap:8px;font-size:12.5px;align-items:center}
.ck i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-style:normal}
.ck i svg{width:10px;height:10px;stroke-width:3}
.ck.ok i{background:var(--green);color:#fff}.ck.part i{background:var(--gold);color:#3A2600}.ck.no i{background:#FDE2E1;color:#B42318}
.ck span{color:var(--muted)}
.ck b{font-weight:600;color:var(--ink)}
.acts{display:flex;gap:8px;padding:12px 16px 14px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 14px;border-radius:10px;font:600 13.5px/1 var(--f-b);white-space:nowrap;text-decoration:none}
.btn svg{width:16px;height:16px}
.btn.p{background:var(--green);color:#fff}
.btn.p:active{background:var(--green-press)}
.btn.l{border:1px solid var(--line-2);background:#fff;color:var(--ink)}
.btn.grow{flex:1;min-width:0}
.btn.lg{height:46px;font-size:15px;font-weight:700;border-radius:12px}
.btn[disabled]{opacity:.5;pointer-events:none}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.card{background:#fff;display:flex;flex-direction:column;min-width:0;text-align:left}
.card .iw{border-radius:0}
.card .ov{position:absolute;bottom:6px;right:6px;z-index:2}
.add{background:#fff;border:1px solid var(--green-line);border-radius:6px;color:var(--green-line);font:800 10.5px var(--f-b);height:26px;padding:0 11px;letter-spacing:.4px}
.add.on{background:var(--green-line);color:#fff}
.card .in{padding:8px 10px 12px;display:flex;flex-direction:column;gap:3px}
.card .nm{font-size:12px;color:#444;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;text-align:left}
.card .p2{font:800 15px var(--f-d);color:#111}
.card .p2 s{font:500 11px var(--f-b);color:#AAA;margin-left:4px}
.card .rs{font-size:12px;line-height:1.35;color:var(--green-deep);font-weight:600}
.verdict{margin:8px 16px 0;display:flex;gap:8px;font-size:13px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.verdict svg{width:16px;height:16px;color:var(--green);flex:none;margin-top:1px}
.note{display:flex;gap:8px;margin:12px 16px 0;padding:10px 12px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:12px;color:var(--muted)}
.note svg{width:15px;height:15px;color:var(--green);flex:none;margin-top:1px}
.empty{background:#fff;padding:28px 22px;text-align:center}
.empty h3{margin:8px 0 0;font:700 17px var(--f-d);color:var(--ink)}
.empty p{margin:6px 0 14px;color:var(--muted)}
.pad-b{height:28px}

/* sheet */
.scrim{position:fixed;inset:0;background:rgba(13,27,64,.45);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;width:100%;max-width:520px;transform:translate(-50%,102%);z-index:51;background:#fff;border-radius:18px 18px 0 0;max-height:90%;overflow-y:auto;transition:transform .28s cubic-bezier(.2,.8,.2,1);padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.sheet.on{transform:translate(-50%,0)}
.grab{width:40px;height:4px;border-radius:4px;background:var(--line-2);margin:4px auto 12px}
.big{background:var(--img);border-radius:12px;aspect-ratio:16/10;max-width:100%;display:grid;place-items:center;overflow:hidden}
.big img{height:90%;width:auto;max-width:90%;object-fit:contain;mix-blend-mode:multiply}
.sheet h2{font:600 17px/1.3 var(--f-d);color:var(--ink);margin:12px 0 2px}
.lbl{font:700 10.5px var(--f-b);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:16px 0 6px}
.ctx{margin-top:14px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:12px 14px}
.ctx .from{display:flex;align-items:center;gap:6px;font:700 10.5px var(--f-b);letter-spacing:.06em;text-transform:uppercase;color:var(--cream-ink)}
.ctx .from svg{width:14px;height:14px}
.ctx h4{margin:6px 0 6px;font:600 15px var(--f-d);color:var(--ink)}
.ctx .why{margin:0;background:none;padding:0}
.who{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center;font-size:12px;color:var(--muted)}
.who span{padding:3px 8px;border-radius:6px;background:var(--cream);border:1px solid var(--cream-line);color:var(--ink);font-weight:600}
.sk{height:11px;border-radius:6px;background:linear-gradient(90deg,#F1F3F5,#E6E9EC,#F1F3F5);background-size:200% 100%;animation:sh 1.2s linear infinite;margin-top:8px}
.qa{display:flex;flex-wrap:wrap;gap:6px}
.qc{padding:7px 11px;border-radius:9px;border:1px solid var(--cream-line);background:var(--cream);font:600 12.5px var(--f-b);color:var(--ink);text-align:left}
.ans{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--page);font-size:13.5px;color:var(--text)}
.ans b{display:block;margin-bottom:3px;color:var(--ink)}
.ans small{display:block;margin-top:6px;color:var(--muted);font-size:11.5px}
.ans .shop{color:var(--green-deep);font-weight:600}
.qin{display:flex;gap:8px;margin-top:10px}
.qin input{flex:1;min-width:0;height:40px;border:1px solid var(--line-2);border-radius:10px;padding:0 12px;font:500 14px var(--f-b);color:var(--ink);outline:0}
.qin input:focus{border-color:var(--green)}
.rowx{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.rowx img{width:52px;height:52px;object-fit:contain;background:var(--img);border-radius:8px;mix-blend-mode:multiply}
.rowx .nm{font-size:13px;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rowx small{display:block;color:var(--muted);font-size:11.5px}
.rowx .r{text-align:right}
.rowx .r b{font:700 14px var(--f-d)}
.rowx .btn{height:30px;padding:0 10px;font-size:12px;border-radius:8px;margin-top:4px}
.ctab{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
.ctab th,.ctab td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ctab thead td{text-align:center}
.ctab thead img{width:56px;height:56px;object-fit:contain;background:var(--img);border-radius:8px}
.ctab th{color:var(--muted);font-weight:600;width:70px}
.ctab .best{color:var(--green);font-weight:800}
.sumrow{display:flex;justify-content:space-between;font:700 15px var(--f-d);color:var(--ink);padding:12px 0 4px}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);width:calc(100% - 32px);max-width:488px;z-index:60;background:var(--navy);color:#fff;padding:10px 12px;border-radius:10px;font-size:12.5px;opacity:0;transition:.2s;pointer-events:none;display:flex;align-items:center;gap:10px}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast span{flex:1}
.toast a{color:var(--yellow);font-weight:700;text-decoration:none}

/* walk */
.wprog{flex:none;background:#fff;border-bottom:1px solid var(--line);padding:9px 14px 10px;box-shadow:0 6px 10px -8px rgba(13,27,64,.2);position:relative;z-index:4}
.wprog .l2{display:flex;justify-content:space-between;align-items:center;gap:10px;font:600 12.5px var(--f-b);color:var(--ink)}
.wprog .l2 span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wprog .l2 small{color:var(--muted);font-weight:500}
.wprog .mapb{display:inline-flex;align-items:center;gap:5px;color:var(--link);font:600 12px var(--f-b);flex:none}
.wprog .mapb svg{width:14px;height:14px}
.bar{height:4px;border-radius:2px;background:#E3E7EB;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--green);border-radius:2px;transition:width .4s cubic-bezier(.2,.8,.2,1)}
.bar i.over{background:#D92D20}
.stage{padding:12px 14px 22px;display:flex;flex-direction:column;gap:12px;min-height:100%}
.stage.in{animation:stIn .38s cubic-bezier(.2,.8,.2,1)}
@keyframes stIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.cap{display:flex;gap:9px;align-items:flex-start}
.cap .av{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font:800 12px var(--f-d);flex:none;margin-top:1px}
.cap p{margin:2px 0 0;font-size:14px;line-height:1.5;color:var(--ink)}
.cap p small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.typing{display:inline-flex;gap:4px;padding:6px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--faint);animation:td 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes td{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.wq h2{margin:0;font:700 19px/1.25 var(--f-d);color:var(--ink)}
.whyask{display:flex;gap:8px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.whyask svg{width:15px;height:15px;color:var(--green);flex:none;margin-top:2px}
.list{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.list>*+*{border-top:1px solid var(--line)}
.wo{display:grid;grid-template-columns:38px minmax(0,1fr) 16px;gap:12px;align-items:center;width:100%;text-align:left;padding:12px}
.wo:active,.wo.sel{background:var(--green-soft)}
.wo .wic{width:38px;height:38px;border-radius:10px;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center}
.wo .wic svg{width:19px;height:19px;stroke-width:1.8}
.wo b{display:block;font:600 14.5px var(--f-d);color:var(--ink)}
.wo small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.wo .ch{color:var(--faint)}
.wnav{display:flex;justify-content:space-between;align-items:center}
.wnav button{color:var(--muted);font:600 12.5px var(--f-b)}
.tailor{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:40px 0}
.orb{width:76px;height:76px;border-radius:50%;background:conic-gradient(from 0deg,var(--green),var(--gold),var(--green));animation:spin 1.4s linear infinite;display:grid;place-items:center}
.orb span{width:60px;height:60px;border-radius:50%;background:var(--page);display:grid;place-items:center;color:var(--green);animation:spin 1.4s linear infinite reverse}
.orb svg{width:26px;height:26px}
.tailor h2{margin:0;font:700 18px var(--f-d);color:var(--ink)}
.pchips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pchips span{padding:4px 10px;border-radius:999px;background:#fff;border:1px solid var(--line-2);font:600 12px var(--f-b);color:var(--ink)}
.tmsg{color:var(--muted);font-size:13px;min-height:1.4em}
.prof{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.prof span{background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--ink);font-weight:500}
.prof button{color:var(--link);font:600 12px var(--f-b)}
.aisle{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;text-align:left;padding:12px}
.aisle:active{background:var(--page)}
.aisle.done{opacity:.55}
.th3{display:flex}
.th3 img{width:40px;height:40px;object-fit:contain;background:var(--img);border-radius:9px;border:2px solid #fff;margin-left:-10px}
.th3 img:first-child{margin-left:0}
.ai b{display:block;font:600 15px/1.25 var(--f-d);color:var(--ink)}
.ai small{display:block;font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.air{text-align:right;font-size:11.5px;color:var(--muted);white-space:nowrap}
.pc{display:inline-block;min-width:34px;text-align:center;font:700 11.5px var(--f-b);color:var(--green-deep);background:var(--green-soft);border-radius:999px;padding:2px 7px;margin-bottom:3px}
.pc.ok{background:var(--green);color:#fff}
.lnk2{align-self:center;color:var(--muted);font:500 12.5px var(--f-b);text-decoration:underline;text-underline-offset:3px}
.intro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:40px 0;cursor:pointer}
.intro .eyb{font:800 11px var(--f-b);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.intro h2{margin:0;font:800 26px/1.1 var(--f-d);color:var(--ink)}
.intro .th3 img{width:72px;height:72px;border-radius:14px;margin-left:-16px;animation:pop .5s cubic-bezier(.34,1.56,.64,1) both}
.intro .th3 img:first-child{margin-left:0}
.intro .th3 img:nth-child(2){animation-delay:.08s}.intro .th3 img:nth-child(3){animation-delay:.16s}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.7)}}
.intro p{margin:0;color:var(--muted)}
.intro small{color:var(--faint);font-size:12px}
.ty{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;text-align:left;padding:10px 12px;position:relative}
.ty:active{background:var(--page)}
.ty img{width:56px;height:56px;object-fit:contain;background:var(--img);border-radius:10px;mix-blend-mode:multiply}
.ty b{font:600 14.5px var(--f-d);color:var(--ink)}
.ty .tag{display:inline-block;margin-left:6px;vertical-align:1px;font:700 9.5px var(--f-b);letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--green);border-radius:4px;padding:2px 5px}
.ty .tag.same{background:var(--cream);color:var(--cream-ink);border:1px solid var(--cream-line)}
.ty small{display:block;font-size:12.5px;line-height:1.35;color:var(--muted);margin-top:2px}
.ty .rw{color:var(--green-deep)}
.ty .r{text-align:right;font-size:11.5px;color:var(--muted);white-space:nowrap}
.ty .r b{display:block;font:700 14px var(--f-d);color:var(--ink)}
.ty.rec{background:linear-gradient(90deg,var(--green-soft),#fff 60%)}
.ty.rec::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--green)}
.ns{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;color:var(--link);font:600 13px var(--f-b)}
.ns svg{width:14px;height:14px}
.skips{display:flex;justify-content:center;gap:16px}
.skips button{color:var(--muted);font:600 12.5px var(--f-b)}
.nextup{text-align:center;font-size:12px;color:var(--muted)}
.nextup b{color:var(--ink)}
.tip{display:flex;gap:10px;background:var(--cream);border:1px solid var(--cream-line);border-radius:12px;padding:9px 11px;font-size:12.5px;line-height:1.45;color:var(--ink)}
.tip svg{width:15px;height:15px;color:var(--cream-ink);flex:none;margin-top:1px}
.tip b{display:block;font:700 10px var(--f-b);letter-spacing:.08em;text-transform:uppercase;color:var(--cream-ink);margin-bottom:1px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:#E9EDF1;border-radius:12px;padding:3px;gap:3px}
.seg button{border-radius:10px;padding:6px 4px;text-align:center;font:600 12.5px var(--f-b);color:var(--muted);line-height:1.15}
.seg button small{display:block;font-size:11px;color:var(--faint);margin-top:2px}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(13,27,64,.12)}
.seg button.on small{color:var(--green-deep)}
.hero2{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 14px rgba(13,27,64,.08);border:1.5px solid var(--green)}
.hero2 .hi{position:relative;background:var(--img);aspect-ratio:16/10;max-height:200px;width:100%;display:grid;place-items:center;overflow:hidden}
.hero2 .hi img{height:88%;width:auto;max-width:80%;object-fit:contain;mix-blend-mode:multiply}
.hero2.swap .hi img{animation:swapIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes swapIn{from{opacity:0;transform:scale(.88) translateY(8px)}}
.mp{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:5px;background:var(--green);color:#fff;font:800 10px var(--f-b);letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:999px}
.mp svg{width:12px;height:12px;stroke-width:2.6}
.mp.val{background:var(--ink)}
.mp.pre{background:var(--gold);color:#3A2A00}
.hb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px}
.wfy{display:flex;gap:8px;background:var(--green-soft);border-radius:10px;padding:8px 10px;font-size:12.5px;color:var(--ink);line-height:1.4}
.wfy svg{width:15px;height:15px;color:var(--green);flex:none;margin-top:1px;stroke-width:2.4}
.wfy b{color:var(--green-deep)}
.wfy.trade{background:var(--page)}
.wfy.trade svg{color:var(--cream-ink)}
.lk{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px}
.lk button{color:var(--link);font:600 12px var(--f-b)}
.rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -14px;padding:2px 14px 6px;scrollbar-width:none}
.rc{flex:0 0 78%;scroll-snap-align:center;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(13,27,64,.08);display:flex;flex-direction:column;min-width:0}
.rc .hi{background:var(--img);aspect-ratio:1/1;max-height:190px;width:100%;display:grid;place-items:center;overflow:hidden}
.rc .hi img{width:80%;height:86%;object-fit:contain;mix-blend-mode:multiply}
.got{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.got .g{flex:none;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 10px 6px 6px;max-width:230px}
.got img{width:36px;height:36px;object-fit:contain;background:var(--img);border-radius:8px;mix-blend-mode:multiply}
.got span{font-size:12px;line-height:1.3;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.got span small{display:block;color:var(--muted);font-size:11px}
.got button{color:var(--faint)}
.got button svg{width:14px;height:14px}
.use{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;padding:11px 12px}
.use .pl{width:32px;height:32px;border-radius:50%;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center}
.use .pl svg{width:16px;height:16px;stroke-width:2.4}
.use b{font:600 14px var(--f-d);color:var(--ink)}
.use small{display:block;font-size:12px;color:var(--muted)}
.use .ch{color:var(--faint)}
.ack{display:flex;align-items:center;gap:8px;background:var(--green-soft);color:var(--green-deep);border-radius:10px;padding:7px 10px;font:600 12.5px var(--f-b)}
.ack svg{width:15px;height:15px;stroke-width:2.6}
.ack span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ack button{color:var(--green-deep);font:700 12px var(--f-b);text-decoration:underline;text-underline-offset:2px}
.sum{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sum .sh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 14px 6px}
.sum .sh b{font:600 15px var(--f-d);color:var(--ink)}
.sum .sh small{font-size:12px;color:var(--muted)}
.sum .bb{padding:0 14px 12px}
.sum .r7{display:flex;justify-content:space-between;margin-top:5px;font-size:12px;color:var(--muted)}
.sum .r7 b{color:var(--ink);font:700 13px var(--f-d)}
.li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 14px;border-top:1px solid var(--line)}
.li img{width:40px;height:40px;object-fit:contain;background:var(--img);border-radius:8px;mix-blend-mode:multiply}
.li span{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li span small{display:block;color:var(--muted);font-size:11px}
.li b{font:700 13px var(--f-d)}
.left{display:flex;gap:10px;align-items:center;background:var(--cream);border:1px solid var(--cream-line);border-radius:12px;padding:10px 12px;font-size:12.5px;color:var(--ink)}
.left svg{width:16px;height:16px;color:var(--cream-ink);flex:none}
.row2b{display:flex;gap:8px}
.wfoot{flex:none;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(13,27,64,.06);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
.wbar{display:flex;align-items:center;gap:10px}
.bask{position:relative;width:42px;height:42px;border-radius:12px;background:var(--yellow);color:#111;display:grid;place-items:center;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.bask svg{width:20px;height:20px;stroke-width:2}
.bask .bc{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;font:800 11px/20px var(--f-b);text-align:center;box-shadow:0 0 0 2px #fff}
.bask.bump{animation:bump .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes bump{40%{transform:scale(1.18)}}
.tray{flex:1;min-width:0;text-align:left}
.tray b{font:700 14px var(--f-d);color:var(--ink)}
.tray b small{font:500 12px var(--f-b);color:var(--muted)}
.tray small{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.askb{width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);background:#fff;display:grid;place-items:center;color:var(--green);flex:none}
.askb svg{width:19px;height:19px}
.comp{display:flex;gap:8px;margin-top:10px}
.comp input{flex:1;min-width:0;height:40px;border:1px solid var(--line-2);border-radius:999px;padding:0 14px;font:500 14px var(--f-b);color:var(--ink);background:var(--page);outline:0}
.comp input:focus{border-color:var(--green);background:#fff}
.comp .send{width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;flex:none}
.fly{position:fixed;z-index:70;pointer-events:none;object-fit:contain;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(13,27,64,.3)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Puchh ke Lo inside /ask/ ---------- */
.gwrap{background:#fff;margin-top:8px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}
.pk{display:flex;gap:12px;margin-top:8px;background:var(--cream);border-top:1px solid var(--cream-line);border-bottom:1px solid var(--cream-line);padding:14px 16px}
.pk-i{width:36px;height:36px;border-radius:10px;background:#fff;border:1px solid var(--cream-line);color:var(--cream-ink);display:grid;place-items:center;flex:none}
.pk b{font:700 15px var(--f-d);color:var(--ink)}
.pk p{margin:2px 0 10px;font-size:13px;color:var(--ink)}
.pk .btn{height:36px}
.gq{display:flex;flex-direction:column;gap:6px}
.gq h2{margin:0;font:700 19px/1.25 var(--f-d);color:var(--ink)}
.gdots{display:flex;gap:4px}
.gdots i{width:18px;height:4px;border-radius:2px;background:#DDE3E8}
.gdots i.d{background:var(--green)}
.gdots i.c{background:var(--gold)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:#fff;border:1.5px solid var(--line-2);border-radius:14px;padding:12px;min-height:96px;transition:border-color .15s,background .15s,transform .1s}
.tile:active{transform:scale(.98)}
.tile.wide{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;gap:10px}
.tile .ti{width:34px;height:34px;border-radius:10px;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;margin-bottom:4px;flex:none}
.tile.wide .ti{margin:0}
.tile .ti svg{width:18px;height:18px}
.tile b{font:600 14px/1.3 var(--f-d);color:var(--ink)}
.tile small{font-size:12px;line-height:1.35;color:var(--muted)}
.tile.wide small{margin-left:auto;text-align:right}
.tile.on{border-color:var(--green);background:var(--green-soft)}
.tile.on .ti{background:var(--green);color:#fff}
.tk2{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);display:grid;place-items:center;color:#fff}
.tile.on .tk2{background:var(--green);border-color:var(--green)}
.tk2 svg{width:12px;height:12px;stroke-width:3}
.known{display:flex;flex-wrap:wrap;gap:6px}
.known button,.known span{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:#fff;border:1px solid var(--line-2);font:600 12px var(--f-b);color:var(--ink)}
.known button i{font-style:normal;font:700 9.5px var(--f-b);letter-spacing:.04em;text-transform:uppercase;color:var(--green-deep);background:var(--green-soft);border-radius:999px;padding:1px 6px}
.known.big span{font-size:13px;padding:6px 12px;background:var(--green-soft);border-color:transparent;color:var(--green-deep)}
.pastnote{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--ink)}
.pastnote svg{width:18px;height:18px;color:var(--cream-ink);flex:none}
.pastnote span{flex:1}
.pastnote button{flex:none;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);font:600 12px var(--f-b);background:#fff}
.why2{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px}
.why2 li{display:flex;gap:8px;font-size:13px;color:var(--text)}
.why2 li svg{width:15px;height:15px;color:var(--green);margin-top:2px;stroke-width:2.4}
.why2 li.con{color:var(--muted)}
.why2 li.con svg{color:#C27C00}
.relax{font-size:12px;color:var(--cream-ink);background:var(--cream);border:1px solid var(--cream-line);border-radius:8px;padding:6px 9px}
.hrail{display:flex;gap:10px;overflow-x:auto;padding:0 16px 2px;scrollbar-width:none}
.mc{flex:0 0 132px;display:flex;flex-direction:column;gap:4px;min-width:0}
.mc .iw{border-radius:12px}
.mc .nm{font-size:12px;color:#444;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;text-align:left}
.mc .p2{font:800 14px var(--f-d);color:#111}
.mc small{font-size:11px;color:var(--muted)}
.mc .add{align-self:flex-start;margin-top:2px}

/* ---------- result: best + decide + alternatives ---------- */
.cap p small{font-size:11.5px}
.ans1{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;margin:0 -14px;padding:0 14px}
.ans1 span{font:700 10px var(--f-b);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);flex:none}
.ans1 button{flex:none;padding:4px 9px;border-radius:999px;background:#fff;border:1px solid var(--line-2);font:600 12px var(--f-b);color:var(--ink)}
.bestc{background:#fff;border:1.5px solid var(--green);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 4px 18px rgba(44,133,21,.10)}
.ribbon{display:inline-flex;align-items:center;gap:5px;background:var(--green);color:#fff;font:800 10px var(--f-b);letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.ribbon svg{width:12px;height:12px;stroke-width:2.8}
.bt{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:start}
.bt .iw{border-radius:12px}
.bestc .btn.lg{width:100%}
.decide{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.dh{display:flex;align-items:center;gap:6px;font:700 10.5px var(--f-b);letter-spacing:.06em;text-transform:uppercase;color:var(--cream-ink);margin-bottom:4px}
.dh svg{width:14px;height:14px}
.df{display:grid;grid-template-columns:88px minmax(0,1fr);gap:2px 10px;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.df:first-of-type{border-top:0}
.df b{font:600 12.5px var(--f-d);color:var(--ink);grid-row:1/3}
.df span{color:var(--muted);line-height:1.35}
.df em{font-style:normal;display:inline-flex;align-items:center;gap:4px;color:var(--green-deep);font-weight:600}
.df em svg{width:12px;height:12px;stroke-width:3}
.alth{display:flex;justify-content:space-between;align-items:baseline;margin-top:2px}
.alth b{font:700 15px var(--f-d);color:var(--ink)}
.alth small{font-size:12px;color:var(--muted)}
.alts{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.alt{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)}
.alt:first-child{border-top:0}
.alt .iw{border-radius:10px}
.am{min-width:0;display:flex;flex-direction:column;gap:2px}
.tg{align-self:flex-start;font:700 9.5px var(--f-b);letter-spacing:.05em;text-transform:uppercase;color:var(--cream-ink);background:var(--cream);border:1px solid var(--cream-line);border-radius:4px;padding:1px 5px}
.an{font-size:12.5px;line-height:1.3;color:var(--ink);text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.al{font-size:12px;line-height:1.35;color:var(--green-deep)}
.ar{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.ar b{font:800 14px var(--f-d);color:#111}
.ar small{font-size:11px}
.ar small.lo{color:var(--green)}
.ar small.hi{color:var(--muted)}

/* ---------- store map ---------- */
.plan{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.plan .ph{display:flex;justify-content:space-between;align-items:baseline}
.plan .ph b{font:700 16px var(--f-d);color:var(--ink)}
.plan .ph small{font-size:12px;color:var(--muted)}
.split{display:flex;height:10px;border-radius:5px;overflow:hidden;background:#EEF1F4;gap:2px}
.split i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.legend em{font-style:normal;color:var(--muted)}
.plan .btn.lg{width:100%}
.prof span{display:inline-flex;align-items:center;gap:5px}
.prof span i{font-style:normal;font:700 9.5px var(--f-b);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ich{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.ich em{font-style:normal;font-size:11.5px;padding:2px 7px;border-radius:999px;background:var(--page);color:var(--muted);border:1px solid var(--line)}
.ich em.ok{background:var(--green-soft);color:var(--green-deep);border-color:transparent}
.ich em.sk{text-decoration:line-through;opacity:.7}
.aisle{align-items:start}
.aisle .air{padding-top:2px}
.svc{display:flex;gap:8px;align-items:flex-start;background:#EEF4FF;border:1px solid #D6E4FF;border-radius:10px;padding:8px 10px;font-size:12.5px;line-height:1.4;color:var(--ink)}
.svc svg{width:15px;height:15px;color:#2563EB;flex:none;margin-top:1px}
.svc b{color:#1D4ED8;font-weight:700}
.svc.sm{background:none;border:0;padding:0;margin-top:2px;font-size:11.5px;color:var(--muted);gap:5px}
.svc.sm svg{width:12px;height:12px}
.sheet .svc{margin-top:10px}

/* ---------- waiting screen: the plan, item by item ---------- */
.tl2{display:flex;flex-direction:column;gap:12px}
.tl2h{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.tl2h b{display:block;font:700 15px var(--f-d);color:var(--ink)}
.tl2h small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.pulse{width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font:800 15px var(--f-d);flex:none;box-shadow:0 0 0 0 rgba(44,133,21,.5);animation:pls 1.6s infinite}
@keyframes pls{70%{box-shadow:0 0 0 12px rgba(44,133,21,0)}100%{box-shadow:0 0 0 0 rgba(44,133,21,0)}}
.tz{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tzh{font:700 10.5px var(--f-b);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:10px 12px 4px}
.tn{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;opacity:.45;transition:opacity .3s,background .3s}
.tn .tk{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;flex:none;color:transparent;margin-top:1px;transition:.3s}
.tn .tk svg{width:12px;height:12px;stroke-width:3}
.tnn b{display:block;font:600 14px var(--f-d);color:var(--ink)}
.tnn small{display:block;font-size:12px;color:var(--muted);max-height:0;overflow:hidden;transition:max-height .3s}
.tn.now{opacity:1;background:var(--green-soft)}
.tn.now .tk{border-color:var(--green);border-top-color:transparent;animation:spin .8s linear infinite}
.tn.now .tnn small{max-height:40px}
.tn.done{opacity:1}
.tn.done .tk{background:var(--green);border-color:var(--green);color:#fff;animation:none}

/* ---------- product gallery ---------- */
.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;scrollbar-width:none;border-radius:14px}
.gi{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;max-height:340px;background:#fff;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;overflow:hidden}
.gi img{max-width:88%;max-height:88%;width:auto;height:auto;object-fit:contain}
.gdot{display:flex;justify-content:center;gap:5px;margin-top:8px}
.gdot i{width:6px;height:6px;border-radius:3px;background:#C9CFD6;transition:width .2s}
.gdot i.on{width:16px;background:var(--green)}

/* ---------- brands in the category ---------- */
.brw{display:flex;flex-direction:column;gap:6px}
.brw>span{font:700 10.5px var(--f-b);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.brs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
.brs button{flex:none;height:30px;padding:0 11px;border-radius:999px;background:#fff;border:1px solid var(--line-2);font:600 12.5px var(--f-b);color:var(--ink)}
.brs button em{font-style:normal;color:var(--faint);font-weight:500;margin-left:2px}
.brs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.brs button.on em{color:#B8C2D0}
.brw small{font-size:11.5px;color:var(--muted)}

/* ---------- adding to cart ---------- */
.addov{position:fixed;inset:0;z-index:80;background:rgba(13,27,64,.55);display:grid;place-items:center;opacity:0;transition:opacity .2s;padding:20px}
.addov.on{opacity:1}
.aob{background:#fff;border-radius:20px;padding:22px 20px;width:100%;max-width:340px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.aor{position:relative;width:64px;height:64px;margin-bottom:4px}
.aor svg{width:64px;height:64px;transform:rotate(-90deg)}
.aor circle{fill:none;stroke:#E3E7EB;stroke-width:4}
.aor .arc{stroke:var(--green);stroke-linecap:round;stroke-dasharray:126;stroke-dashoffset:126;transition:stroke-dashoffset .35s}
.aor span{position:absolute;inset:0;display:grid;place-items:center;color:var(--green)}
.aor span svg{width:24px;height:24px;transform:none}
.aob b{font:700 16px var(--f-d);color:var(--ink)}
.aob small{font-size:12.5px;color:var(--muted)}
.aoth{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
.aoth span{position:relative;width:44px;height:44px;border-radius:10px;background:var(--img);border:1px solid var(--line);overflow:hidden;opacity:.5;transition:opacity .25s}
.aoth img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.aoth i{position:absolute;right:-1px;bottom:-1px;width:16px;height:16px;border-radius:50%;background:var(--green);color:#fff;display:none;place-items:center}
.aoth i svg{width:10px;height:10px;stroke-width:3}
.aoth span.ok{opacity:1}.aoth span.ok i{display:grid}
.aoth span.bad{opacity:1;outline:2px solid #F3B4B0}
.addov.done .aor .arc{stroke:var(--green)}

/* ---------- welcome back ---------- */
.wb{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.wbh{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px 6px}
.wbh b{font:700 15px var(--f-d);color:var(--ink)}
.wbh small{font-size:11.5px;color:var(--faint)}
.wbr{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}
.wbr .wic{width:38px;height:38px;border-radius:10px;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center}
.wbr .wic svg{width:19px;height:19px}
.wbt small{display:block;font-size:11.5px;color:var(--muted);line-height:1.3}
.wbt b{display:block;font:600 15px var(--f-d);color:var(--ink);margin-top:1px}
.wbr button{color:var(--link);font:600 12.5px var(--f-b)}
.wbf{padding:10px 14px 12px;border-top:1px solid var(--line);background:var(--page);font-size:12.5px;color:var(--muted)}
.stage>.btn.lg{width:100%}

/* ---------- personal shopper conversation ---------- */
.kn{background:#fff;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:3px;animation:up .35s cubic-bezier(.2,.8,.2,1)}
.knh{display:flex;align-items:center;gap:6px;font:700 10.5px var(--f-b);letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep);margin-bottom:2px}
.knh svg{width:13px;height:13px}
.knr{font-size:12.5px;color:var(--ink);line-height:1.4}
.qa2{display:flex;flex-direction:column;gap:4px}
.qa2 .qs{font-size:12.5px;color:var(--muted);padding-left:35px}
.qa2 .me{align-self:flex-end;max-width:82%;background:var(--green);color:#fff;border-radius:14px 14px 4px 14px;padding:7px 12px;font-size:13.5px}
.qa2 .re{font-size:12.5px;color:var(--green-deep);padding-left:35px;font-style:italic}
.bt2{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bt3{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line-2);border-radius:14px;padding:8px 6px 10px;text-align:center;transition:border-color .15s,transform .1s}
.bt3:active{transform:scale(.97)}
.bt3.on{border-color:var(--green);background:var(--green-soft)}
.bt3 .bi{width:100%;aspect-ratio:1/1;border-radius:10px;background:var(--img);display:grid;place-items:center;overflow:hidden}
.bt3 .bi img{width:82%;height:82%;object-fit:contain;mix-blend-mode:multiply}
.bt3 b{font:600 13px var(--f-d);color:var(--ink)}
.bt3.other .bi{background:var(--page);color:var(--green)}
.bt3.other .bi svg{width:26px;height:26px}
.first{align-self:center;color:var(--link);font:600 13px var(--f-b);padding:4px}
.tlw{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 12px 12px}
.tlt{position:relative;height:4px;border-radius:2px;background:#E3E7EB;margin:0 calc(10% - 4px)}
.tlt i{position:absolute;left:0;top:0;bottom:0;background:var(--green);border-radius:2px;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.tld{display:grid;grid-template-columns:repeat(5,1fr);margin-top:-12px}
.tld button{display:flex;flex-direction:column;align-items:center;gap:8px}
.tld span{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #D5DBE2;transition:.2s}
.tld button.on span{border-color:var(--green);background:var(--green-soft)}
.tld button.cur span{background:var(--green);box-shadow:0 0 0 5px var(--green-soft);transform:scale(1.1)}
.tld small{font-size:11px;line-height:1.25;color:var(--muted);text-align:center}
.tld button.cur small{color:var(--ink);font-weight:700}
.rx{align-self:flex-start;background:var(--cream);border:1px solid var(--cream-line);color:var(--ink);border-radius:14px 14px 14px 4px;padding:8px 12px;font-size:13.5px;animation:up .3s cubic-bezier(.2,.8,.2,1)}
.cgh{font:700 10.5px var(--f-b);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.cgh.pos{color:var(--green-deep)}.cgh.neg{color:#B42318}
.cw{display:flex;flex-wrap:wrap;gap:6px}
.ch2{padding:8px 13px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;font:600 13px var(--f-b);color:var(--ink);transition:.15s}
.ch2.on{border-color:var(--green);background:var(--green);color:#fff}
.rt2{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rr{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-areas:"i t" "i f";gap:4px 10px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)}
.rr:first-child{border-top:0}
.ri2{grid-area:i;width:34px;height:34px;border-radius:10px;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center}
.ri2 svg{width:17px;height:17px}
.rr b{grid-area:t;font:600 14px var(--f-d);color:var(--ink)}
.fq{grid-area:f;display:flex;gap:6px}
.fq button{flex:1;height:30px;border-radius:8px;border:1px solid var(--line-2);font:600 12px var(--f-b);color:var(--muted);background:#fff}
.fq button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.vsc{display:flex;gap:8px;align-items:flex-start;background:var(--cream);border:1px solid var(--cream-line);border-radius:10px;padding:8px 10px;font-size:12.5px;color:var(--ink)}
.vsc svg{width:15px;height:15px;color:var(--cream-ink);flex:none;margin-top:1px}
.okc{background:#fff;border:1.5px dashed var(--gold);border-radius:14px;padding:12px}
.okh{display:flex;align-items:center;gap:6px;font:700 13.5px var(--f-d);color:var(--ink);margin-bottom:8px}
.okh svg{width:15px;height:15px;color:var(--cream-ink)}
.okr{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;align-items:center}
.okr .iw{border-radius:10px}
.okr>div{display:flex;flex-direction:column;gap:3px}

/* ---------- your people & gifting ---------- */
.ccard{display:flex;align-items:center;gap:12px;width:calc(100% - 32px);margin:0 16px 10px;padding:12px;border-radius:14px;background:linear-gradient(120deg,#FFF9E6,#fff 70%);border:1px solid var(--cream-line);text-align:left}
.ccard>svg{color:var(--cream-ink)}
.avs{display:flex}
.av2{width:34px;height:34px;border-radius:50%;color:#fff;display:grid;place-items:center;font:700 14px var(--f-d);border:2px solid #fff;margin-left:-10px;flex:none}
.avs .av2:first-child{margin-left:0}
.av2 svg{width:16px;height:16px}
.cct{flex:1;min-width:0}
.cct b{display:block;font:700 14.5px var(--f-d);color:var(--ink)}
.cct small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.howg{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.howg div{display:flex;gap:10px;font-size:13px;color:var(--muted)}
.howg b{color:var(--ink)}
.howg svg{width:18px;height:18px;color:var(--green);flex:none;margin-top:1px}
.upc{background:#fff;border:1px solid var(--cream-line);border-radius:14px;overflow:hidden}
.upch{font:700 10.5px var(--f-b);letter-spacing:.06em;text-transform:uppercase;color:var(--cream-ink);background:var(--cream);padding:7px 12px}
.upr{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-top:1px solid var(--line);text-align:left}
.upr:first-of-type{border-top:0}
.upr span{flex:1;min-width:0}
.upr b{display:block;font:600 14px var(--f-d);color:var(--ink)}
.upr small{font-size:12px;color:var(--muted)}
.upr em{font-style:normal;display:inline-flex;align-items:center;gap:2px;color:var(--link);font:600 12.5px var(--f-b)}
.upr em svg{width:14px;height:14px}
.pl{display:flex;flex-direction:column;gap:8px}
.pc{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.pc .av2{width:40px;height:40px;border:0;margin:0;font-size:16px}
.pcm{min-width:0;display:flex;flex-direction:column;gap:3px}
.pcm b{font:700 15px var(--f-d);color:var(--ink)}
.pcm>small{font-size:12px;color:var(--muted)}
.gl{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink)}
.gl svg{width:13px;height:13px;color:var(--cream-ink);flex:none}
.gl.muted{color:var(--faint)}
.pca{grid-column:1/-1;display:flex;align-items:center;gap:12px;justify-content:flex-end}
.pca .btn{height:36px}
.pf{display:flex;flex-direction:column;gap:8px}
.fl{font:600 12.5px var(--f-b);color:var(--ink);margin-top:6px;display:flex;flex-direction:column;gap:6px}
.fl.inl{flex-direction:row;align-items:center;justify-content:space-between}
.pf input,.pf select{height:40px;border:1px solid var(--line-2);border-radius:10px;padding:0 12px;font:500 14px var(--f-b);color:var(--ink);background:#fff;outline:0;min-width:0}
.pf input:focus,.pf select:focus{border-color:var(--green)}
.cw.sm .ch2{padding:5px 10px;font-size:12px}
.gr{display:flex;align-items:center;gap:10px;background:var(--page);border-radius:10px;padding:8px 10px}
.gr svg{width:15px;height:15px;color:var(--cream-ink);flex:none}
.gr.gv svg{color:var(--green)}
.gr span{flex:1;min-width:0}
.gr b{display:block;font:600 13px var(--f-b);color:var(--ink)}
.gr small{font-size:11.5px;color:var(--muted)}
.gr button{color:var(--faint)}
.gadd{display:flex;flex-direction:column;gap:8px;border:1px dashed var(--line-2);border-radius:12px;padding:10px}
.grow3{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:8px}
.bud,.avd{display:flex;gap:8px;align-items:flex-start;border-radius:10px;padding:8px 10px;font-size:12.5px;color:var(--ink)}
.bud{background:var(--green-soft)}.bud svg{width:15px;height:15px;color:var(--green);flex:none;margin-top:1px}
.avd{background:#FFF6F5;border:1px solid #F8D7D4}.avd svg{width:15px;height:15px;color:#B42318;flex:none;margin-top:1px}
.gc{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.gc .iw{border-radius:12px}
.gcm{min-width:0;display:flex;flex-direction:column;gap:4px}
.gcm>b{font:800 16px var(--f-d);color:#111}
.gcr{font-size:12.5px;line-height:1.4;color:var(--green-deep)}
.gca{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.gca .btn{height:34px;font-size:12.5px;padding:0 12px}
.msg{background:#fff;border:1px solid var(--cream-line);border-radius:14px;padding:12px;position:relative}
.msgh{display:flex;align-items:center;gap:6px;font:700 10.5px var(--f-b);letter-spacing:.06em;text-transform:uppercase;color:var(--cream-ink)}
.msgh svg{width:13px;height:13px}
.msg p{margin:6px 0 0;font:500 15px/1.5 var(--f-d);color:var(--ink);font-style:italic}
.msg .lnk{position:absolute;top:10px;right:12px}

/* ---------- recently viewed / buy again cards ---------- */
.rsub{margin:-4px 16px 10px;font-size:12.5px;color:var(--muted)}
.hrail{display:flex;gap:10px;overflow-x:auto;padding:0 16px 4px;scrollbar-width:none;scroll-snap-type:x proximity;align-items:stretch}
.mc2{flex:0 0 138px;scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mph{position:relative;display:grid;place-items:center;aspect-ratio:1/1;width:100%;background:#fff;border-bottom:1px solid var(--line)}
.mph img{max-width:84%;max-height:84%;width:auto;height:auto;object-fit:contain}
.moff{position:absolute;top:8px;left:0;background:var(--green-deep);color:#fff;font:800 9px/1.4 var(--f-b);padding:2px 7px;border-radius:0 4px 4px 0;text-transform:uppercase}
.mnm{padding:8px 10px 0;font-size:12.5px;line-height:1.3;color:var(--ink);text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2.6em + 8px)}
.mnote{padding:2px 10px 0;font-size:11px;color:var(--muted)}
.mbt{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 8px 10px 10px}
.mbt span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.mbt b{font:800 15px var(--f-d);color:#111}
.mbt s{font-size:11px;color:#AAA}
.madd{width:32px;height:32px;border-radius:10px;border:1.5px solid var(--green-line);color:var(--green-line);background:var(--green-soft);display:grid;place-items:center;flex:none}
.madd svg{width:16px;height:16px;stroke-width:2.4}
.madd.on{background:var(--green);border-color:var(--green);color:#fff}

/* ---------- your people: v2 ---------- */
.upn{background:linear-gradient(135deg,#FFF6DA,#FFFDF6 65%);border:1px solid var(--cream-line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:12px}
.upnt{display:flex;gap:12px;align-items:flex-start}
.upd{flex:none;width:56px;height:60px;border-radius:12px;background:#fff;border:1px solid var(--cream-line);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.upd b{font:800 22px var(--f-d);color:var(--cream-ink)}
.upd small{font:600 10.5px var(--f-b);color:var(--muted);margin-top:3px}
.upt{min-width:0;display:flex;flex-direction:column;gap:3px}
.upt>small{font:700 10.5px var(--f-b);letter-spacing:.05em;text-transform:uppercase;color:var(--cream-ink)}
.upt>b{font:700 16px var(--f-d);color:var(--ink)}
.upt>span{font-size:12.5px;line-height:1.45;color:var(--muted)}
.upn .btn{height:40px;width:100%;justify-content:center;gap:6px}
.upn .btn svg{width:16px;height:16px}
.upr .av2{width:32px;height:32px;border:0;margin:0;font-size:13px}
.upr span.upx{flex:1;min-width:0}
.upr span.av2{flex:none}
.plh{display:flex;align-items:baseline;justify-content:space-between;margin:6px 2px -2px}
.plh b{font:700 14px var(--f-d);color:var(--ink)}
.plh small{font-size:12px;color:var(--muted)}
.pcd{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;text-align:left}
.pch{display:flex;align-items:center;gap:10px}
.pch .av2{width:40px;height:40px;border:0;margin:0;font-size:16px}
.pcn{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pcn b{font:700 15px var(--f-d);color:var(--ink)}
.pcn small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ped{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--muted);border:1px solid var(--line);flex:none}
.ped svg{width:15px;height:15px}
.ldn{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ldc{padding:8px 10px;display:flex;flex-direction:column;gap:1px;min-width:0}
.ldc+.ldc{border-left:1px solid var(--line)}
.ldc small{font:600 10.5px var(--f-b);letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.ldc b{font:600 13px var(--f-b);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ldc span{font-size:11.5px;color:var(--muted)}
.ldc span.muted{color:var(--faint);font-size:12.5px;margin-top:2px}
.pcf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nxt{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);min-width:0}
.nxt svg{width:14px;height:14px;color:var(--cream-ink);flex:none}
.pcf .btn{height:34px;padding:0 14px;font-size:13px}
.padd{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:1.5px dashed var(--line-2);border-radius:14px;background:transparent;text-align:left}
.padd>svg{width:36px;height:36px;padding:9px;border-radius:50%;background:var(--green-soft);color:var(--green-deep);flex:none}
.padd span{display:flex;flex-direction:column;gap:1px}
.padd b{font:700 14px var(--f-d);color:var(--ink)}
.padd small{font-size:12px;color:var(--muted)}

/* ---------- gift small-talk ---------- */
.kny{display:flex;gap:8px;align-items:flex-start;background:var(--green-soft);border-radius:10px;padding:8px 10px;font-size:12.5px;color:var(--green-deep)}
.kny svg{width:15px;height:15px;flex:none;margin-top:1px}
.kq{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.kqh{display:flex;gap:10px;align-items:flex-start}
.kqh>svg{width:30px;height:30px;padding:7px;border-radius:50%;background:var(--cream);color:var(--cream-ink);flex:none}
.kqh span{display:flex;flex-direction:column;gap:1px}
.kqh b{font:700 14.5px var(--f-d);color:var(--ink)}
.kqh small{font-size:12px;color:var(--muted)}
.kqa{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.kqa em{font-style:normal;font:600 12px var(--f-b);color:var(--muted);background:var(--page);border-radius:999px;padding:3px 10px;flex:none}
.kqa em.y{background:var(--green-soft);color:var(--green-deep)}
.kqr{display:flex;flex-direction:column;gap:8px;margin-top:-2px}
.kqr>p{margin:0;font:600 12.5px var(--f-b);color:var(--cream-ink)}
.kqr>p.muted{color:var(--faint);font-weight:500}
.kqp{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--page);border-radius:12px;padding:8px}
.kqp .iw{border-radius:10px;background:#fff}
.kqp>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.kqp .an{font-size:12.5px;line-height:1.3;color:var(--ink);text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kqp b{font:800 14px var(--f-d);color:#111}
.kqp span{font-size:12px;line-height:1.35;color:var(--green-deep)}
.kqc{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.kqc>b{font:600 15px var(--f-d);color:var(--ink)}
.kqb{display:flex;gap:8px}
.kqb button{flex:1;height:38px;border-radius:10px;border:1px solid var(--line-2);background:#fff;font:600 13.5px var(--f-b);color:var(--ink)}
.kqb button:active{border-color:var(--green);background:var(--green-soft);color:var(--green-deep)}
.kqd{display:flex;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:10px;font-size:12.5px;color:var(--muted)}
.kqd svg{width:15px;height:15px;color:var(--green);flex:none}

/* ---------- gift: waiting ---------- */
.gw{display:flex;flex-direction:column;gap:12px}
.gwh{display:flex;align-items:center;gap:12px}
.gwbox{width:40px;height:40px;padding:6px;border-radius:12px;background:var(--cream);color:var(--cream-ink);flex:none;overflow:visible}
.gwlid{transform-box:fill-box;transform-origin:50% 100%;animation:gwlid 2.4s ease-in-out infinite}
@keyframes gwlid{0%,55%,100%{transform:translateY(0) rotate(0)}70%{transform:translateY(-3px) rotate(-4deg)}85%{transform:translateY(-1px) rotate(2deg)}}
.gwh span{display:flex;flex-direction:column;gap:1px}
.gwh b{font:700 15px var(--f-d);color:var(--ink)}
.gwh small{font-size:12px;color:var(--muted)}
.gws{list-style:none;margin:0;padding:12px;background:#fff;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:9px}
.gws li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink);opacity:0;transform:translateY(4px);animation:gwin .45s ease forwards}
.gws i{position:relative;width:16px;height:16px;border-radius:50%;flex:none;border:1.6px solid var(--line-2);border-top-color:var(--green);animation:gwspin .8s linear infinite}
.gws i:not(.on){animation:gwspin .8s linear infinite,gwdone .01s linear forwards;animation-delay:0s,var(--td)}
.gws i:not(.on)::after{content:"";position:absolute;left:4px;top:1.5px;width:4px;height:7px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg);opacity:0;animation:gwtick .2s ease forwards;animation-delay:var(--td)}
@keyframes gwin{to{opacity:1;transform:none}}
@keyframes gwspin{to{transform:rotate(360deg)}}
@keyframes gwdone{to{transform:none;background:var(--green);border-color:var(--green);animation-play-state:paused}}
@keyframes gwtick{to{opacity:1}}
.gwc{display:flex;flex-direction:column;gap:8px}
.gwk{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;opacity:0;animation:gwin .5s ease forwards}
.gwi,.gwl em{background:linear-gradient(90deg,#F1F2F4 0%,#F8F9FA 45%,#F1F2F4 90%);background-size:220% 100%;animation:gwsh 1.6s ease-in-out infinite}
.gwi{display:block;aspect-ratio:1/1;border-radius:10px}
.gwl{display:flex;flex-direction:column;gap:8px}
.gwl em{display:block;height:10px;border-radius:6px;width:90%}
.gwl em+em{width:65%}
.gwl em.s{width:35%;height:12px}
@keyframes gwsh{0%{background-position:100% 0}100%{background-position:-20% 0}}
@media (prefers-reduced-motion:reduce){.gwlid,.gws i,.gwi,.gwl em{animation:none}.gws li,.gwk{animation-duration:.01s}}

/* ---------- gift results v2 ---------- */
@keyframes grise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes gpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}70%{transform:translate(-50%,-50%) scale(1.12)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.gsc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px 12px;display:flex;flex-direction:column;gap:10px}
.gsch{display:flex;justify-content:space-between;align-items:baseline}
.gsch span{font:600 12px var(--f-b);color:var(--muted)}
.gsch b{font:800 15px var(--f-d);color:var(--ink)}
.gst{position:relative;height:42px;margin:0 4px}
.gst::before{content:"";position:absolute;left:0;right:0;top:14px;height:4px;border-radius:4px;background:var(--page)}
.gsr{position:absolute;top:14px;height:4px;border-radius:4px;background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green-line)}
.gsa{position:absolute;top:6px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
.gsa i{width:2px;height:20px;border-radius:2px;background:var(--cream-ink)}
.gsa small{font:600 10.5px var(--f-b);color:var(--cream-ink);white-space:nowrap;text-transform:capitalize}
.gsd{position:absolute;top:16px;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font:700 10.5px/20px var(--f-b);text-align:center;box-shadow:0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.18);opacity:0;animation:gpop .45s ease forwards}
.gsk{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);border-top:1px dashed var(--line);padding-top:9px}
.gsk svg{width:13px;height:13px;color:#C2410C;flex:none}
.gh{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 6px 20px -12px rgba(13,27,64,.25);opacity:0;animation:grise .5s ease forwards}
.ghl{display:flex;align-items:center;gap:8px;padding:10px 14px;font:700 12.5px var(--f-b);color:var(--green-deep);background:linear-gradient(90deg,var(--green-soft),#fff)}
.ghl span,.gri span{width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font:700 10.5px/20px var(--f-b);text-align:center;flex:none}
.ghi{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:4/3;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ghi img{max-width:78%;max-height:88%;object-fit:contain}
.ghb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.ghb .an{font:600 14.5px/1.35 var(--f-d);color:var(--ink);text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ghp{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ghp b{font:800 18px var(--f-d);color:#111}
.ghp s{font-size:12px;color:#AAA}
.vs{font-style:normal;font:600 11px var(--f-b);color:var(--cream-ink);background:var(--cream);border-radius:999px;padding:2px 8px}
.vs.eq{color:var(--green-deep);background:var(--green-soft)}
.ghr{margin:2px 0 0;font-size:13px;line-height:1.5;color:#3d4451;border-left:2px solid var(--green-line);padding-left:10px}
.gha{display:flex;align-items:center;gap:12px;margin-top:6px}
.gha .btn{height:40px;flex:1;justify-content:center;gap:6px}
.gha .btn svg{width:16px;height:16px}
.gmk{display:inline-flex;align-items:center;gap:5px;font:600 12.5px var(--f-b);color:var(--muted);white-space:nowrap}
.gmk svg{width:14px;height:14px}
.gmk.on{color:var(--green-deep)}
.gr2{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;opacity:0;animation:grise .45s ease forwards}
.gri{position:relative;display:grid;place-items:center;aspect-ratio:1/1;border-radius:10px;background:#fff;border:1px solid var(--line);overflow:hidden}
.gri img{max-width:86%;max-height:86%;object-fit:contain}
.gri span{position:absolute;top:5px;left:5px;width:18px;height:18px;font-size:10px;line-height:18px}
.grm{min-width:0;display:flex;flex-direction:column;gap:4px}
.grm .an{font-size:13px;line-height:1.3;color:var(--ink);text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grm .ghp b{font-size:15px}
.grr{margin:0;font-size:12px;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.grf{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.gtag{position:relative;background:linear-gradient(160deg,#FFF8E4,#FFFDF7);border:1px solid var(--cream-line);border-radius:6px 16px 16px 6px;padding:14px 16px 14px 26px}
.gtag::before{content:"";position:absolute;left:9px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--page);box-shadow:inset 0 0 0 1.5px var(--cream-line)}
.gtag::after{content:"";position:absolute;left:20px;top:10px;bottom:10px;border-left:1.5px dashed var(--cream-line)}
.gtagh{display:flex;align-items:center;gap:6px;font:700 10.5px var(--f-b);letter-spacing:.06em;text-transform:uppercase;color:var(--cream-ink)}
.gtagh svg{width:13px;height:13px}
.gtagh span{flex:1}
.gtag p{margin:6px 0 0;font:500 15px/1.5 var(--f-d);color:var(--ink);font-style:italic}
.gtag p.gto{font-style:normal;font-size:13px;color:var(--muted);margin-top:8px}
@media (prefers-reduced-motion:reduce){.gh,.gr2,.gsd{animation:none;opacity:1}.gsd{transform:translate(-50%,-50%)}}

/* ---------- quantity stepper (replaces any add button once the item is in the cart) ---------- */
.qhid{display:none!important}
div.qty{display:inline-flex;flex-direction:row;align-items:center;justify-content:space-between;flex:none;box-sizing:border-box;background:var(--green);color:#fff;border-radius:10px;overflow:hidden;padding:0;margin:0;animation:qin .18s ease;box-shadow:0 1px 2px rgba(0,0,0,.12)}
@keyframes qin{from{transform:scale(.9);opacity:.3}to{transform:none;opacity:1}}
div.qty>button{display:grid;place-items:center;flex:none;height:100%;width:30px;padding:0;margin:0;border:0;background:none;color:#fff}
div.qty>button svg{width:14px;height:14px;stroke-width:2.6;color:#fff}
div.qty>button:active{background:rgba(0,0,0,.14)}
div.qty>.qn{flex:1;min-width:14px;text-align:center;font:700 13px/1 var(--f-b);color:#fff;white-space:nowrap}
div.qty.qs{height:32px;width:88px}
div.qty.qm{height:28px;width:84px;border-radius:7px}
div.qty.qm>button{width:26px}
div.qty.ql{height:40px;min-width:140px;flex:1}
div.qty.ql>button{width:44px}
div.qty.ql>.qn{font-size:14px}
div.qty.grow{flex:1}
.mbt>span:first-child{flex:1;min-width:0}

/* ---------- variation picker (product sheet) ---------- */
.vp{display:flex;flex-direction:column;gap:14px;margin:14px 0 4px}
.va{display:flex;flex-direction:column;gap:7px}
.vah{display:flex;align-items:baseline;gap:8px}
.vah b{font:700 13.5px var(--f-d);color:var(--ink)}
.vah span{font-size:13px;color:var(--muted)}
.vht{font-size:11.5px;color:var(--faint);margin-top:-4px}
.vo{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;margin:0 -2px}
.vo button{flex:none;position:relative;transition:border-color .15s,box-shadow .15s,transform .1s}
.vo button:active{transform:scale(.97)}
.vo.sz button{min-width:64px;height:auto;padding:8px 12px;border:1.5px solid var(--line-2);border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:1px}
.vo.sz b{font:600 13px var(--f-b);color:var(--ink);white-space:nowrap}
.vo.sz small{font-size:11px;color:var(--muted)}
.vo.sz button.on{border-color:var(--green);background:var(--green-soft);box-shadow:0 0 0 1px var(--green) inset}
.vo.sz button.on b{color:var(--green-deep)}
.vo.col button{width:66px;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;padding:0}
.vt{position:relative;width:58px;height:58px;border-radius:12px;background:#fff;border:1.5px solid var(--line-2);display:grid;place-items:center;overflow:hidden}
.vt img{max-width:86%;max-height:86%;object-fit:contain}
.vt i{position:absolute;right:4px;bottom:4px;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 2.6px rgba(0,0,0,.12)}
.vo.col em{font-style:normal;font-size:11px;line-height:1.2;color:var(--muted);text-align:center;max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vo.col button.on .vt{border-color:var(--green);box-shadow:0 0 0 2px var(--green-soft)}
.vo.col button.on em{color:var(--green-deep);font-weight:600}
.vo button.oos{opacity:.45}
.vo.sz button.oos b{text-decoration:line-through}
.vo.col button.oos .vt::after{content:"";position:absolute;left:-10%;top:50%;width:120%;height:1.5px;background:#9aa0a6;transform:rotate(-35deg)}
.vg{background:linear-gradient(135deg,#F3FAEF,#fff 70%);border:1px solid var(--green-line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.vgq{display:flex;gap:10px;align-items:center}
.vgq>svg{width:30px;height:30px;padding:7px;border-radius:50%;background:#fff;color:var(--green);border:1px solid var(--green-line);flex:none}
.vgq span{display:flex;flex-direction:column}
.vgq small{font-size:11.5px;color:var(--muted)}
.vgq b{font:700 14.5px var(--f-d);color:var(--ink)}
.vgo{display:flex;gap:8px;flex-wrap:wrap}
.vgo button{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font:600 13px var(--f-b);color:var(--ink)}
.vgo button.on{background:var(--green);border-color:var(--green);color:#fff}
.vgw{margin:0;display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--green-deep);animation:grise .35s ease}
.vgw svg{width:15px;height:15px;flex:none;margin-top:2px}
.gal.swap .gi img{animation:gswap .35s ease}
@keyframes gswap{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
/* Gallery frame: fixed height, photo always fully visible (contained, never cropped by the frame). */
.gi{aspect-ratio:auto;height:min(380px,calc(100vw - 40px));max-height:none;padding:14px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.gi img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
/* Same rule for every framed photo: percentage max-heights inside aspect-ratio boxes can overflow and get clipped. */
.mph,.ghi,.gri,.vt,.big{padding:8px;box-sizing:border-box}
.ghi{padding:14px}
.mph img,.ghi img,.gri img,.vt img,.big img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.vt{padding:5px}

/* ---------- gift search: who is it for ---------- */
.gfc{margin:0 16px 12px;background:linear-gradient(135deg,#FFF6DA,#FFFDF6 65%);border:1px solid var(--cream-line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.gfch{display:flex;gap:10px;align-items:flex-start}
.gfch>svg{width:30px;height:30px;padding:7px;border-radius:50%;background:#fff;color:var(--cream-ink);border:1px solid var(--cream-line);flex:none}
.gfch span{display:flex;flex-direction:column;gap:1px}
.gfch b{font:700 14.5px var(--f-d);color:var(--ink)}
.gfch small{font-size:12px;color:var(--muted)}
.gfcp{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.gfcp button{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;width:58px}
.gfcp .av2{width:44px;height:44px;border:0;margin:0;font-size:17px}
.gfcp .av2.add{background:#fff;color:var(--cream-ink);border:1.5px dashed var(--cream-line)}
.gfcp .av2.add svg{width:18px;height:18px}
.gfcp button>span:last-child{font-size:11.5px;color:var(--ink);max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- most in demand ---------- */
.mtag{position:absolute;top:8px;right:8px;background:#FFF3C4;color:#7A5300;border:1px solid #F2D27A;font:700 9px/1.4 var(--f-b);padding:1px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.03em}
.sect.feat{padding-bottom:14px}
.stage .sect.feat{padding:4px 0 0;background:none}
.stage .sect.feat .sect-h{padding:0}
/* Small cards are too narrow for price + stepper side by side: once in the cart, the stepper takes its own full-width row. */
.mbt{flex-wrap:wrap;row-gap:8px}
.mbt>div.qty.qs{order:3;width:100%;height:34px}
.mbt>div.qty.qs>button{width:40px}
.kqp>div.qty.qs{width:84px}

/* ---------- hero: rotating "Try" suggestion ---------- */
.tryr{position:relative;display:flex;align-items:center;gap:10px;width:100%;margin-top:16px;padding:0;background:none;border:0;color:#fff;text-align:left}
.tryl{flex:none;font:700 10.5px var(--f-b);letter-spacing:.08em;text-transform:uppercase;color:#FFD54A}
.tryw{position:relative;flex:1;min-width:0;height:22px;overflow:hidden}
.tryt{display:block;font:500 14px/22px var(--f-b);color:rgba(255,255,255,.95);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .26s ease,opacity .26s ease}
.tryt.out{transform:translateY(-100%);opacity:0}
.tryt.in{transform:translateY(100%);opacity:0;transition:none}
.tryr>svg{flex:none;width:16px;height:16px;color:rgba(255,255,255,.8)}
@media (prefers-reduced-motion:reduce){.tryt{transition:none}}

/* ---------- add → tick → quantity wheel (small buttons) ---------- */
.madd.busy,.add.busy{opacity:.6}
.madd.done,.add.done{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important}
.tkd{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:tkdraw .35s .05s ease forwards}
@keyframes tkdraw{to{stroke-dashoffset:0}}
.qw{position:relative;flex:none;box-sizing:border-box;border-radius:10px;background:var(--green);color:#fff;overflow:hidden;animation:qin .22s ease}
.qw.qwm{border-radius:6px}
.qwl{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.qwl::-webkit-scrollbar{display:none}
.qwl span{display:flex;align-items:center;justify-content:center;scroll-snap-align:center;font:800 14px/1 var(--f-b);color:#fff}
.qw.qwm .qwl span{font-size:12.5px}
.qwl span svg{width:14px;height:14px}
.qwu,.qwd{position:absolute;left:50%;width:6px;height:6px;margin-left:-3px;border:solid rgba(255,255,255,.75);border-width:1.6px 0 0 1.6px;pointer-events:none}
.qwu{top:3px;transform:rotate(45deg)}
.qwd{bottom:3px;transform:rotate(225deg)}
.qw.qwm .qwu,.qw.qwm .qwd{display:none}
.qw.moving{box-shadow:0 0 0 3px var(--green-soft)}
.qw.nudge .qwl{animation:qwnudge 1.5s ease}
@keyframes qwnudge{0%,100%{transform:none}25%{transform:translateY(-35%)}55%{transform:translateY(20%)}80%{transform:translateY(-8%)}}
.qwtip{position:fixed;z-index:70;background:var(--navy);color:#fff;border-radius:10px;padding:8px 11px;display:flex;flex-direction:column;gap:1px;max-width:220px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none;box-shadow:0 6px 18px -6px rgba(0,0,0,.35)}
.qwtip.on{opacity:1;transform:none}
.qwtip b{font:700 12.5px var(--f-b)}
.qwtip span{font-size:11.5px;color:rgba(255,255,255,.75)}
.qwtip::after{content:"";position:absolute;bottom:-5px;left:var(--ax,50%);margin-left:-5px;width:10px;height:10px;background:var(--navy);transform:rotate(45deg)}
/* softer toast for cart adds */
.toast.soft{width:auto;max-width:calc(100% - 32px);left:50%;padding:8px 14px 8px 8px;border-radius:999px;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 8px 24px -10px rgba(13,27,64,.35);font:600 12.5px var(--f-b)}
.toast.soft span{flex:none}
.toast.soft a{color:var(--green-deep);font-weight:700;padding-left:10px;border-left:1px solid var(--line)}
.toast.soft .tk{width:22px;height:22px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:none}
.toast.soft .tk svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.tkd{animation:none;stroke-dashoffset:0}.qw.nudge .qwl{animation:none}}
/* Wheel cells must not pick up the host card's span styles (.mbt span, .kqp span, …). */
.qw .qwl>span{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;color:#fff!important;font:800 14px/1 var(--f-b)!important;margin:0!important;padding:0!important;min-width:0}
.qw.qwm .qwl>span{font-size:12.5px!important}
/* gift shelves */
.glh{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.glh b{font:700 16px var(--f-d);color:var(--ink)}
.glh small{font-size:12px;color:var(--muted)}
.gln{display:flex;flex-direction:column;gap:8px}
.gln .alth b{font-size:14px}

/* ---------- hear it run (real recordings) ---------- */
.snd{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.snd.on{border-color:var(--green-line);box-shadow:0 4px 16px -10px rgba(44,133,21,.5)}
.sndh{display:flex;align-items:center;gap:10px;position:relative}
.sndi{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;flex:none;overflow:hidden;padding:3px;box-sizing:border-box;position:relative;z-index:1}
.sndi img{width:100%;height:100%;object-fit:contain}
.sndr{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:12px;background:var(--green-soft);opacity:0;transition:transform .08s linear}
.snd.on .sndr{opacity:1}
.sndt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sndt b{font:700 13.5px var(--f-d);color:var(--ink)}
.sndt small{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--muted)}
.sndt small svg{width:12px;height:12px;color:var(--green)}
.sndw{position:relative;height:36px;border-radius:8px;background:var(--page);overflow:hidden}
.sndb,.sndf{position:absolute;inset:0}
.sndb svg,.sndf svg{width:100%;height:100%;display:block}
.sndb rect{fill:#CBD2D9}
.sndf rect{fill:var(--green)}
.sndf{clip-path:inset(0 100% 0 0)}
.sndz{position:absolute;top:0;bottom:0;background:rgba(44,133,21,.08)}
.sndp{position:absolute;top:3px;bottom:3px;left:0;width:2px;border-radius:2px;background:var(--green-deep);opacity:0}
.snd.on .sndp{opacity:1}
.snds{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px}
.snds button{display:flex;align-items:flex-start;gap:6px;text-align:left;padding:8px;border:1px solid var(--line-2);border-radius:10px;background:#fff;min-width:0}
.snds button>svg{width:14px;height:14px;color:var(--green);flex:none;margin-top:1px}
.snds button span{display:flex;flex-direction:column;gap:1px;min-width:0}
.snds button b{font:700 12.5px var(--f-b);color:var(--ink)}
.snds button small{font-size:10.5px;line-height:1.3;color:var(--muted)}
.snds button.on{border-color:var(--green);background:var(--green-soft)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;width:14px;height:14px;flex:none;margin-top:1px}
.eq b{display:block;width:3px;background:var(--green);border-radius:1px;animation:eqb .7s ease-in-out infinite}
.eq b:nth-child(2){animation-delay:.15s}.eq b:nth-child(3){animation-delay:.3s}
@keyframes eqb{0%,100%{height:30%}50%{height:100%}}
@media (prefers-reduced-motion:reduce){.eq b{animation:none;height:70%}}

/* ---------- festive skin (home only, Diwali) ---------- */
.app.fest{background:#0f3d14 url(fest/diwali-bg.webp) center top/cover no-repeat}
.app.fest .hdr{background:transparent;box-shadow:none}
.app.fest .hero{background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(6,40,10,.45),rgba(6,40,10,0) 75%);padding:14px 12% 30px}
.app.fest .hero::after{display:none}
.app.fest .hero h1{text-shadow:0 2px 12px rgba(0,0,0,.35)}
.app.fest .sect:first-of-type{margin-top:0}
.app.fest .sect,.app.fest .ccard{box-shadow:0 -1px 0 rgba(255,255,255,.04)}
.app.fest .foot{color:rgba(255,255,255,.75);background:transparent}
.app.fest .foot a{color:#FFD54A}
@media (max-width:360px){.app.fest .hero{padding-left:9%;padding-right:9%}}

/* ---------- home: quick starts, categories, gift budgets ---------- */
.sect.qk{padding:12px 0 12px}
.qkg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 12px}
.qkt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 4px;border:1px solid var(--line);border-radius:14px;background:#fff;min-width:0}
.qki{width:40px;height:40px;border-radius:12px;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;margin-bottom:2px}
.qki svg{width:20px;height:20px}
.qkt b{font:700 12px/1.25 var(--f-d);color:var(--ink)}
.qkt small{font-size:10.5px;line-height:1.3;color:var(--muted)}
.qkt:active{background:var(--green-soft)}
.catg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px;padding:0 12px 8px}
.catt{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;background:none;padding:0}
.cati{width:100%;aspect-ratio:1/1;border-radius:14px;background:#F6F7F8;display:grid;place-items:center;overflow:hidden;padding:8px;box-sizing:border-box}
.cati img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.catt b{font:600 11.5px/1.25 var(--f-b);color:var(--ink);text-align:center}
.catt:active .cati{background:var(--green-soft)}
.gfb .gfbg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 12px 6px}
.gfbg button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:12px 10px;border-radius:12px;border:1px solid var(--cream-line);background:linear-gradient(150deg,#FFF6DA,#FFFDF6);text-align:left}
.gfbg small{font:700 9.5px var(--f-b);letter-spacing:.06em;text-transform:uppercase;color:var(--cream-ink)}
.gfbg b{font:800 13.5px/1.2 var(--f-d);color:var(--ink)}
.how2 .how{padding-bottom:4px}
@media (max-width:360px){.qkt small{display:none}.gfbg b{font-size:12px}}

/* ---------- home: your people (profile stack) ---------- */
.sect.pcs{padding:12px 0}
.pcw{margin:0 16px;border-radius:16px;border:1px solid var(--cream-line);background:linear-gradient(135deg,#FFF6DA 0%,#FFFDF6 60%,#fff 100%);overflow:hidden}
.pcm2{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;padding:14px 14px 12px;background:none;text-align:left}
.ptx{display:flex;flex-direction:column;gap:2px}
.ptx b{font:700 15px var(--f-d);color:var(--ink)}
.ptx small{font-size:12.5px;color:var(--muted)}
.pstack{display:flex;align-items:center;padding-left:4px}
.pav{position:relative;margin-left:-12px;display:inline-flex}
.pav:first-child{margin-left:0}
.pav .av2{width:46px;height:46px;margin:0;border:3px solid #FFFBEF;font-size:17px;box-shadow:0 2px 6px rgba(13,27,64,.12)}
.pav.soon .av2{border-color:#F2C14E;box-shadow:0 0 0 2px #FFFBEF,0 3px 10px rgba(183,121,31,.35)}
.pav em{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);font-style:normal;font:700 9.5px/1 var(--f-b);background:var(--cream-ink);color:#fff;padding:3px 6px;border-radius:999px;white-space:nowrap;border:1.5px solid #FFFBEF}
.pav .pmore{background:#E7E1CF;color:var(--cream-ink);font-size:14px}
.padd2 .av2{background:#fff;color:var(--cream-ink);border-style:dashed;border-color:var(--cream-line);box-shadow:none}
.padd2 .av2 svg{width:18px;height:18px}
.pgi{display:flex;align-items:center;gap:8px;width:100%;padding:11px 14px;border-top:1px dashed var(--cream-line);background:rgba(255,255,255,.55);font:600 13px var(--f-b);color:var(--green-deep);text-align:left}
.pgi span{flex:1}
.pgi svg{width:16px;height:16px}

/* ---------- AI-first home ---------- */
.aitag{position:relative;display:inline-flex;align-items:center;gap:5px;margin:2px 0 6px;padding:3px 9px 3px 7px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;font:700 10.5px var(--f-b);letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(4px)}
.aitag svg{width:13px;height:13px;color:#FFD54A}
/* composer: a soft moving glow around the box = "the assistant is here" */
.box.ai{isolation:isolate}
.box.ai::before{content:"";position:absolute;inset:-2px;border-radius:14px;z-index:-1;background:conic-gradient(from var(--ga,0deg),#FFD54A,#7EE081,#5CC8FF,#C79BFF,#FFD54A);animation:aiglow 6s linear infinite;opacity:.9;filter:blur(.3px)}
.box.ai::after{content:"";position:absolute;inset:0;border-radius:12px;background:#fff;z-index:-1}
@property --ga{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes aiglow{to{--ga:360deg}}
.aisp{width:18px;height:18px;color:var(--green);flex:none}
.box.rec::before{animation-duration:1.4s;background:conic-gradient(from var(--ga,0deg),#ff5a5a,#FFD54A,#ff5a5a)}
.box.rec [data-act="mic"]{color:#d33}
@media (prefers-reduced-motion:reduce){.box.ai::before{animation:none}}
/* For you */
.sect.aif{padding:14px 16px 12px;display:flex;flex-direction:column;gap:10px}
.aifh{display:flex;align-items:center;gap:10px}
.aiav{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;background:conic-gradient(from 200deg,#2C8515,#58B848,#1f6b10,#2C8515);box-shadow:0 0 0 3px var(--green-soft)}
.aiav svg{width:17px;height:17px}
.aifh span:last-child{display:flex;flex-direction:column}
.aifh b{font:700 15px var(--f-d);color:var(--ink)}
.aifh small{font-size:11.5px;color:var(--muted)}
.aib{margin-left:44px;background:#F4F8F2;border:1px solid #E1EEDC;border-radius:4px 16px 16px 16px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(6px);animation:grise .45s ease forwards}
.aib p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink)}
.aib button{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--green-line);color:var(--green-deep);font:600 12.5px var(--f-b)}
.aib button svg{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){.aib{animation:none;opacity:1;transform:none}}

/* ---------- Diwali theme (home, FEST) ---------- */
.dvs{display:flex;align-items:center;gap:10px;margin:0;padding:10px 16px;background:linear-gradient(90deg,#7A1F0E,#B8461B 55%,#E07B22);color:#fff}
.dvs b{display:block;font:700 14px var(--f-d)}
.dvs small{display:block;font-size:11.5px;color:rgba(255,255,255,.85)}
.dvi{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:radial-gradient(circle at 50% 40%,#FFE7A3,#F4B63F);color:#7A3B05;box-shadow:0 0 0 3px rgba(255,214,120,.35),0 0 14px rgba(255,190,80,.55)}
.dvi svg{width:19px;height:19px;stroke-width:1.8}
/* warm ivory sections with a marigold edge during the festival */
.app.fest .sect{background:#FFFDF8}
.app.fest .sect.gbs,.app.fest .sect.aif{position:relative}
.app.fest .sect.gbs::before,.app.fest .sect.aif::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:radial-gradient(circle at 5px 3px,#F59E0B 3px,transparent 3.4px) 0 0/12px 6px repeat-x,radial-gradient(circle at 11px 3px,#EA580C 3px,transparent 3.4px) 0 0/12px 6px repeat-x;opacity:.9}
.app.fest .sect-h h3,.app.fest .gbh b{color:#3B1406}
.app.fest .qki{background:#FFF1D6;color:#9A4A0B}
.app.fest .aiav{background:conic-gradient(from 200deg,#E07B22,#F4B63F,#B8461B,#E07B22);box-shadow:0 0 0 3px #FFF1D6}
.app.fest .aib{background:#FFF8EC;border-color:#F6DEB4}
.app.fest .aib button{border-color:#E8B66B;color:#8A3E08}
/* budgeted gifting */
.sect.gbs{padding:16px 0 10px}
.gbh{display:flex;align-items:center;gap:10px;padding:0 16px 10px}
.gbh span:last-child{display:flex;flex-direction:column}
.gbh b{font:700 16px var(--f-d);color:var(--ink)}
.gbh small{font-size:12px;color:var(--muted)}
.gbc{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 16px 12px}
.gbc button{flex:none;height:34px;padding:0 14px;border-radius:999px;border:1px solid #EBC98C;background:#fff;font:600 12.5px var(--f-b);color:#7A3B05}
.gbc button.on{background:linear-gradient(135deg,#B8461B,#E07B22);border-color:transparent;color:#fff;box-shadow:0 4px 12px -6px rgba(184,70,27,.7)}
.gbr{display:flex;flex-direction:column;gap:6px;padding:4px 0 12px}
.gbr .alth{padding:0 16px}
.gbr .alth b{font-size:14px}
.gbe{margin:0 16px;font-size:12.5px;color:var(--muted)}

/* ---------- home v3: personal ---------- */
.inw{position:relative;flex:1;min-width:0;display:flex}
.inw input{flex:1}
.phw{position:absolute;left:0;right:4px;top:50%;height:22px;margin-top:-11px;overflow:hidden;pointer-events:none}
.phw .tryt{color:#8A93A0;font:500 15px/22px var(--f-b)}
.inw input:not(:placeholder-shown)+.phw,.box.has .phw{opacity:0}
.hch{position:relative;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:12px -16px 0;padding:0 16px}
.app.fest .hch{margin-left:-12%;margin-right:-12%;padding:0 12%}
.hch button{flex:none;height:32px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;font:600 12.5px var(--f-b);backdrop-filter:blur(4px);white-space:nowrap}
.hch button:active{background:rgba(255,255,255,.3)}
.dlv{position:relative;display:flex;align-items:center;gap:6px;margin:12px 0 0;font-size:12px;color:rgba(255,255,255,.85)}
.dlv svg{width:14px;height:14px;color:#FFD54A;flex:none}
.dlv b{color:#fff}
.knw{margin:0 0 0 44px;display:flex;gap:6px;align-items:flex-start;font-size:12.5px;line-height:1.4;color:var(--muted)}
.knw svg{width:14px;height:14px;color:var(--green);flex:none;margin-top:2px}
.pplh{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.pplh b{font:700 14px var(--f-d);color:var(--ink)}
.pplr{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px}
.ppl{flex:none;width:64px;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;padding:0}
.ppl .av2{width:54px;height:54px;margin:0 0 3px;border:3px solid #fff;font-size:20px;box-shadow:0 2px 8px rgba(13,27,64,.14)}
.ppl.soon .av2{border-color:#F2C14E;box-shadow:0 0 0 2px #fff,0 3px 12px rgba(183,121,31,.4)}
.ppl b{font:600 12px var(--f-b);color:var(--ink);max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppl small{font-size:10.5px;color:var(--muted);max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppl.soon small{color:#9A4A0B;font-weight:600}
.ppl.ppladd .av2{background:#fff;color:var(--green-deep);border:2px dashed var(--green-line);box-shadow:none}
.ppl.ppladd .av2 svg{width:20px;height:20px}
.pplx{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.shtab{display:flex;gap:4px;background:var(--page);border-radius:999px;padding:3px}
.shtab button{height:26px;padding:0 11px;border-radius:999px;font:600 12px var(--f-b);color:var(--muted);background:none}
.shtab button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.mnote{color:#6B7380}

/* ---------- festive home: see-through sections over the artwork, light text ---------- */
.app.fest{background:linear-gradient(180deg,rgba(4,28,8,0) 0,rgba(4,28,8,.28) 32%,rgba(4,28,8,.55) 70%,rgba(4,28,8,.7) 100%),#0f3d14 url(fest/diwali-bg.webp) center top/cover no-repeat}
.app.fest .sect{background:transparent;margin-top:0;padding-top:18px;padding-bottom:16px;border-top:1px solid rgba(255,255,255,.08)}
.app.fest .sect.gbs::before,.app.fest .sect.aif::before{display:none}
.app.fest .sect-h h3,.app.fest .gbh b,.app.fest .alth b,.app.fest .pplh b,.app.fest .aifh b{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.app.fest .sect-h small,.app.fest .gbh small,.app.fest .alth small,.app.fest .aifh small,.app.fest .rsub,.app.fest .gbe,.app.fest .pplx{color:rgba(255,255,255,.75)}
.app.fest .lnk{color:#FFD54A}
/* For you: frosted bubbles */
.app.fest .knw{color:rgba(255,255,255,.85)}
.app.fest .knw svg{color:#FFD54A}
.app.fest .aib{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.app.fest .aib p{color:#fff}
.app.fest .aib button{background:#fff;border-color:#fff;color:var(--green-deep)}
.app.fest .aiav{box-shadow:0 0 0 3px rgba(255,255,255,.18)}
/* people */
.app.fest .ppl b{color:#fff}
.app.fest .ppl small{color:rgba(255,255,255,.72)}
.app.fest .ppl.soon small{color:#FFD54A}
.app.fest .ppl .av2{border-color:rgba(255,255,255,.9)}
.app.fest .ppl.ppladd .av2{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.6)}
/* budget chips, shelf tabs, categories */
.app.fest .gbc button{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
.app.fest .gbc button.on{background:linear-gradient(135deg,#E07B22,#F4B63F);color:#3B1406;border-color:transparent}
.app.fest .shtab{background:rgba(255,255,255,.12)}
.app.fest .shtab button{color:rgba(255,255,255,.8)}
.app.fest .shtab button.on{background:#fff;color:var(--ink)}
.app.fest .cati{background:rgba(255,255,255,.94)}
.app.fest .catt b{color:#fff}
/* how it works + product cards keep their white faces */
.app.fest .how div{color:rgba(255,255,255,.8)}
.app.fest .how b{color:#fff}
.app.fest .how svg{color:#FFD54A}
.app.fest .mc2{box-shadow:0 6px 18px -10px rgba(0,0,0,.5);border-color:rgba(255,255,255,.6)}
/* ---------- hero layout: centred between the garlands ---------- */
.htop{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 10px}
.htop .aitag{margin:0}
.dlv{position:relative;display:inline-flex;align-items:center;gap:5px;margin:0;padding:4px 10px 4px 8px;border-radius:999px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.18);font:500 11.5px var(--f-b);color:rgba(255,255,255,.9);white-space:nowrap}
.dlv svg{width:13px;height:13px;color:#FFD54A;flex:none}
.dlv b{color:#fff;font-weight:700}
.hero h1{margin:0 0 14px}
.hch{flex-wrap:wrap;justify-content:flex-start;overflow:visible;margin:12px 0 0;padding:0;gap:8px}
.app.fest .hch{margin:12px 0 0;padding:0}
.hch button{height:30px;padding:0 12px;font-size:12px}
.app.fest .hero{padding:20px 13% 26px;text-align:center}
.app.fest .htop{justify-content:center}
.app.fest .hero h1{font-size:25px}
.app.fest .hch{justify-content:center}
.app.fest .box{text-align:left}
@media (max-width:380px){.app.fest .hero{padding-left:10%;padding-right:10%}.app.fest .hero h1{font-size:23px}}
/* Two-line titles that actually clamp on iOS (line-clamp is ignored on <button>; it works on a span inside). */
.mnm,.nm,.an{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;min-height:0}
.mnm>span,.nm>span,.grm .an>span,.kqp .an>span,.ghb .an>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;word-break:break-word}
.mnm{min-height:calc(2.6em + 8px)}
/* ---------- hear it run v2: play all / loop a speed / tap to seek ---------- */
.snd{gap:12px;padding:14px}
.sndh{display:flex;align-items:center;gap:12px}
.sndgo{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--green);color:#fff;box-shadow:0 6px 16px -6px rgba(44,133,21,.7)}
.sndgo svg{width:20px;height:20px}
.snd.on .sndgo{background:var(--green-deep)}
.sndt{flex:1}
.sndi{position:relative;width:48px;height:48px;border-radius:12px;padding:4px;transition:transform .08s linear}
.sndi .rotor{position:absolute;right:-6px;bottom:-6px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);display:grid;place-items:center;color:var(--green);animation:rot .6s linear infinite}
.sndi .rotor svg{width:18px;height:18px}
@keyframes rot{to{transform:rotate(360deg)}}
.sndr{display:none}
.sndw{height:62px;border-radius:10px;cursor:pointer;padding-top:18px;box-sizing:border-box}
.sndb,.sndf{top:18px}
.sseg{position:absolute;top:0;bottom:0;border-left:1px dashed rgba(0,0,0,.12);background:transparent;transition:background .2s}
.sseg:first-child{border-left:0}
.sseg em{position:absolute;top:2px;left:6px;font:600 10px var(--f-b);font-style:normal;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.sseg.on{background:rgba(44,133,21,.09)}
.sseg.on em{color:var(--green-deep)}
.sndp{top:20px;bottom:2px}
.snds button.on{border-color:var(--green);background:var(--green-soft)}
.sndn{margin:0;font-size:11.5px;line-height:1.4;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.sndi .rotor{animation:none!important}}
/* ---------- festive skin v2: navy night (user's artwork) ---------- */
.app.fest{background:linear-gradient(180deg,rgba(6,14,38,0) 0,rgba(6,14,38,.25) 30%,rgba(6,14,38,.5) 68%,rgba(6,14,38,.68) 100%),#0D1B40 url(fest/diwali-bg-navy.webp) center top/cover no-repeat}
.app.fest .hero{background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(8,16,44,.45),rgba(8,16,44,0) 75%)}
.app.fest .aib{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16)}
.app.fest .aib button{color:#0D1B40}
.app.fest .gbc button.on{background:linear-gradient(135deg,#E07B22,#F4B63F);color:#2A1300}
.app.fest .sect{border-top-color:rgba(255,215,140,.12)}
/* festive home: logo centred, just under the string of lights; cart stays top-right */
.app.fest .hrow{position:relative;justify-content:center;min-height:64px;padding-top:30px}
.app.fest .hrow .logo{flex:none;padding-left:0;justify-content:center;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
.app.fest .hrow .logo img{height:36px}
.app.fest .hrow>.ib{position:absolute;right:8px;top:8px}
.app.fest .hero{padding-top:10px}
.app.fest .hrow{min-height:88px;padding-top:52px}
.app.fest .hrow .logo img{height:46px}
.app.fest .hero{padding-top:14px}
.app.fest .hrow{min-height:112px;padding-top:76px}
/* festive home: breathing room under the logo, and content fades out as it scrolls up under it (no hard cut) */
.app.fest .hdr{padding-bottom:16px}
.app.fest .scroll{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px);mask-image:linear-gradient(to bottom,transparent 0,#000 28px)}
/* ---------- results: follow-up bar (chat-style) ---------- */
.fu{flex:none;background:#fff;border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;box-shadow:0 -6px 18px -12px rgba(13,27,64,.3);position:relative;z-index:5}
.fuc{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px}
.fuc button{flex:none;height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font:600 12px var(--f-b);color:var(--ink);white-space:nowrap}
.fuc button:active{background:var(--green-soft);border-color:var(--green-line)}
.fub{position:relative;display:flex;align-items:center;gap:6px;border:1.5px solid var(--green-line);border-radius:12px;padding:3px 3px 3px 10px;background:#fff}
.fub input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 14px var(--f-b);color:var(--ink);padding:8px 0}
.fub .sb{width:36px;height:36px}
/* Sheet scrolling on iPhone: keep swipes inside the sheet (no chaining to the page behind), lock the page while it is open */
.sheet{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.gal,.vo,.hrail,.snds,.pplr,.gbc,.hch,.fuc{overscroll-behavior-x:contain;touch-action:pan-x pan-y}
body.shopen .app .scroll,body:has(.sheet.on) .app .scroll{overflow:hidden}
.scrim{touch-action:none}

/* ---------- Ask end-cap: "This page ends here. Your questions don't." ---------- */
.sect.aec{padding:28px 18px 22px;background:#FFFCF6}
.aec h2{margin:0 0 10px;font:800 30px/1.08 var(--f-d);letter-spacing:-.02em;color:#0d1b40}
.aec h2 em{font-style:normal;background:linear-gradient(90deg,#2C8515,#1f6b10);-webkit-background-clip:text;background-clip:text;color:transparent}
.aecs{margin:0;font-size:14px;line-height:1.5;color:#55606e}
.aecq{margin:6px 0 0;font-size:13px;font-style:italic;color:#7a8492}
.aecd{display:flex;align-items:center;gap:10px;margin:18px 0 14px;color:#E8A33D}
.aecd i{flex:1;height:1px;background:#EBD9B8}
.aecd svg{width:14px;height:14px}
.aecf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.aecf div{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:0 4px}
.aecf div+div{border-left:1px solid #EFE3CC}
.aecf span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center}
.aecf div:nth-child(1) span{background:#E4F6EA;color:#1f7a3f}.aecf div:nth-child(2) span{background:#FFF3D6;color:#B7791F}
.aecf div:nth-child(3) span{background:#FCE7F0;color:#B83273}.aecf div:nth-child(4) span{background:#E6EEFF;color:#2F55C9}
.aecf svg{width:19px;height:19px}
.aecf b{font:600 11.5px/1.3 var(--f-b);color:#1b2433}
.aecc{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:18px;padding:14px 14px 14px 18px;border-radius:18px;background:#fff;text-align:left;box-shadow:0 10px 24px -14px rgba(13,27,64,.35)}
.aecc::before{content:"";position:absolute;inset:-2px;border-radius:20px;z-index:-1;background:conic-gradient(from var(--ga,0deg),#FFD54A,#7EE081,#5CC8FF,#C79BFF,#FFD54A);animation:aiglow 6s linear infinite}
.aecc::after{content:"";position:absolute;inset:0;border-radius:18px;background:#fff;z-index:-1}
.aecc span{display:flex;flex-direction:column;gap:2px}
.aecc b{font:800 17px var(--f-d);color:#0d1b40}
.aecc small{font-size:12.5px;color:#7a8492}
.aecc i{width:50px;height:50px;border-radius:50%;flex:none;display:grid;place-items:center;background:#0d1b40;color:#fff}
.aecc i svg{width:20px;height:20px}
.aecr{margin:16px 0 0;text-align:center;font-size:13.5px;color:#55606e}
.aecr a{display:inline-flex;align-items:center;gap:3px;color:#0d1b40;font-weight:700;text-decoration:none}
.aecr a svg{width:13px;height:13px}
/* over the Diwali artwork: same section, light on dark */
.app.fest .sect.aec{background:transparent}
.app.fest .aec h2{color:#fff}
.app.fest .aec h2 em{background:linear-gradient(90deg,#FFD54A,#F4B63F);-webkit-background-clip:text;background-clip:text}
.app.fest .aecs,.app.fest .aecq{color:rgba(255,255,255,.78)}
.app.fest .aecd i{background:rgba(255,215,140,.3)}
.app.fest .aecf div+div{border-left-color:rgba(255,255,255,.14)}
.app.fest .aecf b{color:#fff}
.app.fest .aecr{color:rgba(255,255,255,.78)}
.app.fest .aecr a{color:#FFD54A}
@media (prefers-reduced-motion:reduce){.aecc::before{animation:none}}

/* ---------- Help me decide ---------- */
.dcw{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:0}
.dcr{display:grid;gap:10px}
.dcc{display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:left;background:none;padding:0;min-width:0}
.dci{position:relative;display:grid;place-items:center;aspect-ratio:1/1;border-radius:12px;background:#fff;border:1px solid var(--line);padding:10px;box-sizing:border-box;overflow:hidden}
.dci img{width:100%;height:100%;object-fit:contain}
.dci em{position:absolute;top:8px;left:0;font-style:normal;background:var(--green-deep);color:#fff;font:800 9.5px/1.4 var(--f-b);padding:2px 7px;border-radius:0 4px 4px 0;text-transform:uppercase}
.dcc b{font:600 13px/1.3 var(--f-d);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.dvs{position:absolute;left:50%;top:calc(12px + (100% - 24px) * 0);transform:translate(-50%,0);margin-top:calc((min(100%, 520px) - 34px) / 4);width:34px;height:34px;border-radius:50%;background:#0d1b40;color:#FFD54A;display:grid;place-items:center;font:800 12px var(--f-d);box-shadow:0 0 0 4px #fff}
.dch{margin:12px 0 4px;font:700 10.5px var(--f-b);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border-top:1px dashed var(--line);padding-top:10px}
.dcv{display:flex;flex-direction:column;gap:1px;min-width:0}
.dcv b{font:700 14px var(--f-d);color:var(--ink)}
.dcv small{font-size:11.5px;color:var(--muted);display:inline-flex;align-items:center;gap:3px}
.dcv small.good{color:var(--green-deep);font-weight:600}
.dcv small svg{width:12px;height:12px}
.dcq{margin-top:12px;background:linear-gradient(135deg,#F3FAEF,#fff 70%);border:1px solid var(--green-line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:12px;animation:grise .4s .15s ease both}
.dcqh{display:flex;gap:10px;align-items:flex-start}
.dcqh>span:last-child{display:flex;flex-direction:column;gap:3px}
.dcqh b{font:700 15px var(--f-d);color:var(--ink)}
.dcqh small{font-size:12.5px;line-height:1.45;color:var(--muted)}
.dcqa{display:flex;flex-direction:column;gap:8px}
.dcqa .btn{height:44px;justify-content:center;gap:6px;width:100%}
.dcqa .btn svg{width:16px;height:16px}