/* ─────────────────────────────────────────────────────────────
   The Loot House. One dark theme: near-black, electric yellow accent,
   Unbounded display, Inter Tight body, JetBrains Mono for prices.
   Tokens live at the top; components only read tokens.
   ───────────────────────────────────────────────────────────── */
:root{
  --ease:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.55,0,.75,.2);
  --gut:clamp(16px,4vw,40px); --max:1240px;
  --taka:"Noto Sans Bengali";
}
:root{
  --bg:#0f0f12; --surface:#18181e; --surface-2:#202028; --wall:#15151b; --ink:#f4f3ef; --ink-2:#a6a7b1; --ink-3:#74757f;
  --line:#2a2a34; --accent:#ffd23f; --accent-ink:#141416; --accent-text:#ffd23f; --on-ink:#141416;
  --ok:#6fe39a; --err:#ff8a80; --frame:#060608; --mat:#24242c;
  --shadow:0 1px 1px rgba(0,0,0,.5),0 16px 32px -12px rgba(0,0,0,.85);
  --shadow-lg:0 2px 2px rgba(0,0,0,.5),0 34px 60px -20px rgba(0,0,0,.95);
  --r:14px; --r-btn:999px; --r-in:10px; --r-chip:999px;
  --display:"Unbounded",var(--taka),ui-sans-serif,system-ui,sans-serif; --disp-stretch:100%; --disp-weight:700; --disp-case:none; --disp-track:-.03em;
  --sans:"Inter Tight",var(--taka),ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",var(--taka),ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}

/* base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ic{width:1.15em;height:1.15em;fill:currentColor;flex:none;vertical-align:-.18em}
.mono{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;text-transform:uppercase}
.muted{color:var(--ink-2)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;text-decoration:none}
.skip:focus{top:12px}
.h2{font:var(--disp-weight) clamp(1.35rem,2.6vw,2rem)/1.08 var(--display);font-stretch:var(--disp-stretch);text-transform:var(--disp-case);letter-spacing:var(--disp-track);margin:0;text-wrap:balance}
.lede{font-size:clamp(1.02rem,1.4vw,1.15rem);color:var(--ink-2);max-width:48ch;margin:0}
.sec{padding-block:clamp(48px,7vw,96px) 0}
.sec > .h2{margin-bottom:28px}
.sec-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.sec-head .muted{font-size:.95rem}
.more{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;white-space:nowrap}
.more:hover{color:var(--accent-text)}
.sec-note{margin:18px 0 0;color:var(--ink-2);font-size:.95rem}
.sec-note a{color:var(--ink);font-weight:600}

/* announcement bar */
.announce{background:var(--ink);color:var(--bg);font-size:.85rem;text-align:center}
.announce-in{max-width:var(--max);margin:0 auto;padding:8px var(--gut);display:grid;place-items:center;min-height:36px}
.announce span{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.announce span.on{opacity:1;transform:none}
.announce b{font-weight:700}
@media (min-width:860px){
  .announce-in{display:flex;justify-content:center;gap:28px}
  .announce span{opacity:1;transform:none}
  .announce span + span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.4;margin-right:28px;vertical-align:middle}
}

/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top-in{max-width:var(--max);margin:0 auto;padding:8px var(--gut);display:flex;align-items:center;gap:20px;min-height:64px}
.brand{text-decoration:none;display:inline-flex;align-items:center;flex:none;border-radius:6px}
.logo{display:block;height:54px;width:auto;transform-origin:50% 85%;transition:transform .45s var(--ease)}
.brand:hover .logo{transform:rotate(-4deg) scale(1.06)}
.brand:active .logo{transform:scale(.94)}
/* first paint: the house drops onto the header and settles */
.motion .top .logo{animation:landLogo .9s var(--ease) backwards .05s}
@keyframes landLogo{0%{opacity:0;transform:translateY(-22px) rotate(-10deg) scale(.8)}55%{opacity:1;transform:translateY(3px) rotate(3deg) scale(1.04)}100%{transform:none}}
@media (max-width:760px){.logo{height:44px}}
.foot-brand .logo{height:84px}
.cats{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;--fl:0px;--fr:0px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
.cats.more-l{--fl:28px}.cats.more-r{--fr:36px}
.cats::-webkit-scrollbar{display:none}
.cats a{text-decoration:none;padding:8px 12px;border-radius:var(--r-chip);font-weight:500;font-size:.93rem;color:var(--ink-2);white-space:nowrap;transition:color .2s,background-color .2s}
.cats a:hover{color:var(--ink)}
.cats a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.cart-btn{text-decoration:none;font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 4px 8px 8px;min-height:44px}
.cart-btn .ic{width:22px;height:22px}
.count{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--ink);color:var(--bg);font:500 .75rem/22px var(--mono);text-align:center}
.count.bump{animation:bump .5s var(--ease)}
@keyframes bump{30%{transform:scale(1.35)}}
.meter{display:flex;gap:3px;align-items:flex-end;transition:opacity .3s}
.meter:not(:has(.on)){display:none}
.meter i{width:5px;height:12px;border:1px solid var(--ink-3);transition:background-color .3s,border-color .3s,transform .3s var(--ease)}
.meter i.on{background:var(--accent);border-color:var(--accent);transform:scaleY(1.15)}
@media (max-width:760px){
  .top-in{flex-wrap:wrap;gap:4px 16px;padding-block:10px 0;min-height:0}
  .cats{order:3;flex-basis:100%;margin-inline:calc(var(--gut) * -1);padding:4px var(--gut) 10px}
  .cart-btn{margin-left:auto}
}

/* buttons */
.btn{appearance:none;border:1.5px solid var(--ink);background:var(--ink);color:var(--on-ink);padding:12px 22px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:var(--r-btn);white-space:nowrap;
  transition:transform .2s var(--ease),background-color .2s,color .2s,box-shadow .25s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0) scale(.98);box-shadow:none}
.btn .ic{transition:transform .25s var(--ease)}
.btn:hover .ic{transform:translateX(3px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.block{width:100%}
.btn.big{min-height:56px;font-size:1.05rem}
.btn.done{background:var(--ok);border-color:var(--ok);color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn.busy{opacity:.7}
.icon-btn{appearance:none;border:0;background:none;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;border-radius:var(--r-btn);color:var(--ink)}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn .ic{width:22px;height:22px}
.linkbtn{background:none;border:0;padding:6px 0;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:.88rem}
.linkbtn:hover{color:var(--ink)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(32px,5vw,64px) clamp(24px,4vw,40px);min-height:min(68dvh,660px)}
.hero-copy{display:grid;gap:22px;justify-items:start;container-type:inline-size;width:100%}
/* sized to the column so each line stays on one line: two lines, never four */
.h-display{white-space:nowrap;font:var(--disp-weight) clamp(1.6rem,9.6cqi,5.4rem)/.92 var(--display);font-stretch:var(--disp-stretch);text-transform:var(--disp-case);letter-spacing:var(--disp-track);margin:0}
.h-display .ln{display:block;overflow:hidden;padding-bottom:.06em}
.h-display .ln > span{display:block}
.motion .h-display .ln > span{animation:rise .9s var(--ease) both;animation-delay:calc(var(--i) * 110ms + 60ms)}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.motion .hero .lede,.motion .hero .cta-row{animation:fadeUp .8s var(--ease) both;animation-delay:.32s}
.motion .hero .cta-row{animation-delay:.42s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-wall{position:relative;background:var(--wall);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.2vw,26px);padding:clamp(28px,5vw,56px) clamp(18px,3.5vw,44px) clamp(56px,7vw,80px);align-items:start;border-radius:var(--r)}
.hang{display:grid;gap:12px;justify-items:center;text-decoration:none;transform-origin:50% -20px}
.hang:nth-child(2){margin-top:clamp(18px,3vw,36px)}
.hang-frame{display:block;width:100%;background:var(--frame);padding:6%;box-shadow:var(--shadow-lg);transition:transform .45s var(--ease)}
.hang-frame img{aspect-ratio:2/3;width:100%;object-fit:cover;background:var(--mat)}
.hang:hover .hang-frame{transform:translateY(-6px) rotate(-.6deg)}
.hang-tag{background:var(--surface);color:var(--ink);padding:5px 9px;font-size:.7rem;box-shadow:var(--shadow);white-space:nowrap}
.hang:last-of-type .hang-tag{background:var(--accent);color:var(--accent-ink);font-weight:500}
.motion .hang{animation:hang 1s var(--ease) both;animation-delay:calc(var(--i) * 160ms + 250ms)}
@keyframes hang{0%{opacity:0;transform:translateY(-46px) rotate(-7deg)}55%{opacity:1;transform:translateY(5px) rotate(2.2deg)}78%{transform:translateY(-1px) rotate(-.8deg)}100%{opacity:1;transform:none}}
.wall-cap{position:absolute;left:0;right:0;bottom:clamp(16px,2.6vw,26px);margin:0;text-align:center;font-size:.95rem;color:var(--ink-2)}
.wall-cap b{color:var(--ink)}
.motion .wall-cap{animation:fadeUp .7s var(--ease) both;animation-delay:.95s}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0;gap:28px}
  .hero-wall{margin-inline:calc(var(--gut) * -1);border-radius:0}
}

/* bundle tiers */
.deal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,18px)}
.tier{position:relative;background:var(--surface);border:1px solid var(--line);padding:clamp(18px,2.4vw,28px);display:grid;gap:4px;border-radius:var(--r);transition:transform .35s var(--ease),border-color .3s}
.tier:hover{transform:translateY(-4px)}
.tier-n{font-weight:600}
.tier-total{font:var(--disp-weight) clamp(1.7rem,3.6vw,2.8rem)/1.05 var(--display);font-stretch:var(--disp-stretch);letter-spacing:-.02em;margin:6px 0 4px}
.tier-each{font-family:var(--mono);font-size:.9rem;color:var(--ink-2)}
.tier-save{font-weight:600;color:var(--accent-text);font-size:.95rem}
.tier.best{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.tier.best .tier-each{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.tier.best .tier-save{color:var(--accent)}
.best-tag{position:absolute;top:-1px;right:-1px;background:var(--accent);color:var(--accent-ink);font:600 .7rem/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:7px 10px;border-radius:0 var(--r) 0 var(--r)}
.deal.compact .tier-total{font-size:clamp(1.3rem,2.4vw,1.8rem)}
@media (max-width:640px){
  .deal{grid-template-columns:1fr}
  .tier{grid-template-columns:1fr auto;align-items:baseline;column-gap:16px}
  .tier-total{grid-row:1 / span 2;grid-column:2;margin:0;text-align:right}
  .best-tag{position:static;justify-self:start;grid-column:1;border-radius:var(--r-chip);margin-bottom:4px}
}

/* product cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(18px,2.4vw,30px) clamp(14px,2vw,26px)}
@media (max-width:520px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}}
.card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0}
.card-img{display:block;text-decoration:none}
.wallbox{position:relative;background:var(--wall);aspect-ratio:4/5;display:grid;place-items:center;padding:13%;border-radius:var(--r);overflow:hidden;transition:background-color .3s}
.wallbox img{aspect-ratio:2/3;width:100%;object-fit:cover;box-shadow:var(--shadow);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover .wallbox img{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lg)}
.tag{position:absolute;top:10px;left:10px;z-index:1;background:var(--accent);color:var(--accent-ink);padding:4px 8px;font:600 .66rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r-chip)}
.card-meta{display:grid;gap:2px}
.card-title{font-weight:650;line-height:1.25;text-decoration:none;font-size:1rem}
.card-title::after{content:"";position:absolute;inset:0;z-index:0}
.card-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.card-sub{color:var(--ink-2);font-size:.85rem}
.price{font-family:var(--mono);font-size:.85rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.card-media{position:relative}
.quick{position:absolute;z-index:2;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;border:0;background:var(--surface);color:var(--ink);font-weight:600;font-size:.85rem;padding:8px 12px;min-height:38px;cursor:pointer;box-shadow:var(--shadow);border-radius:var(--r-btn);
  transition:transform .25s var(--ease),opacity .25s,background-color .2s}
.quick:hover{background:var(--ink);color:var(--bg)}
.quick:active{transform:scale(.95)}
.quick.done{background:var(--ok);color:#fff}
@media (hover:hover) and (min-width:761px){
  .card-media .quick{opacity:0;transform:translateY(6px)}
  .card:hover .quick,.quick:focus-visible,.quick.done{opacity:1;transform:none}
}

/* rails */
.rail-wrap{overflow:hidden}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(180px,22vw,260px);gap:clamp(14px,2vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding-bottom:12px;scrollbar-width:thin}
.rail > .card{scroll-snap-align:start}

/* category tiles */
/* 10 categories: 5 × 2 on desktop, 2 × 5 on phones, so no row is left half-empty */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.6vw,18px)}
.tile{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:12px;background:var(--surface);border:1px solid var(--line);text-decoration:none;border-radius:var(--r);overflow:hidden;transition:border-color .25s,transform .35s var(--ease)}
.tile:hover{border-color:var(--ink);transform:translateY(-3px)}
.tile-img{width:58px;background:var(--wall);padding:7px;display:block;border-radius:calc(var(--r) * .6)}
.tile-img img{aspect-ratio:2/3;object-fit:cover;width:100%;box-shadow:var(--shadow);transition:transform .45s var(--ease)}
.tile:hover .tile-img img{transform:rotate(-4deg) scale(1.06)}
.tile-label{display:grid;gap:3px;min-width:0}
.tile-label b{font-weight:650;line-height:1.2}
.tile-label .mono{color:var(--ink-2)}
@media (min-width:1001px){.tile{grid-template-columns:1fr;align-items:start;padding:14px}.tile-img{width:72px}}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:380px){.tile{grid-template-columns:1fr}.tile-img{width:64px}}

/* how it works */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px);counter-reset:s}
.steps li{position:relative;display:grid;gap:8px;align-content:start;padding-top:16px;border-top:2px solid var(--ink);counter-increment:s}
.steps li::before{content:counter(s);position:absolute;top:16px;right:0;font:500 .75rem/1 var(--mono);background:var(--ink);color:var(--bg);padding:5px 7px}
.step-ic{width:44px;height:44px;display:grid;place-items:center;background:var(--surface-2);border-radius:var(--r-btn)}
.step-ic .ic{width:22px;height:22px}
.steps b{font-size:1.05rem}
.steps p{margin:0;color:var(--ink-2);font-size:.95rem}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.steps{grid-template-columns:1fr}.steps li{grid-template-columns:44px 1fr;column-gap:14px}.steps li .step-ic{grid-row:span 2}.steps p{grid-column:2}}

/* questions */
.qa{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,5vw,72px);align-items:start}
.qa-side{display:grid;gap:12px;position:sticky;top:110px}
.qa-side p{margin:0}
.qa-side a{color:var(--ink);font-weight:600}
@media (max-width:820px){.qa{grid-template-columns:1fr}.qa-side{position:static}}
.faq{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;cursor:pointer;font-weight:600;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{transition:transform .35s var(--ease)}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq-a{padding:0 0 20px;color:var(--ink-2);max-width:62ch}
.faq-a p{margin:0 0 10px}
.motion .faq details[open] .faq-a{animation:fadeUp .45s var(--ease)}
.size-table{display:grid;gap:6px;margin-bottom:12px}
.size-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;padding:10px 12px;background:var(--surface);border-radius:var(--r-in);font-size:.9rem}
.size-row b{color:var(--ink)}
@media (max-width:520px){.size-row{grid-template-columns:1fr 1fr}}

/* closing band */
.band{margin-top:clamp(56px,8vw,110px);background:var(--accent);color:var(--accent-ink)}
.band-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:clamp(28px,4vw,44px)}
.band-logo{height:clamp(56px,7vw,84px);width:auto;flex:none}
.band-in .band-big{flex:1;min-width:min(100%,260px)}
.motion .band.in .band-logo{animation:landLogo .9s var(--ease) backwards .2s}
.band-big{margin:0;font:var(--disp-weight) clamp(1.4rem,3vw,2.3rem)/1.05 var(--display);font-stretch:var(--disp-stretch);text-transform:var(--disp-case);letter-spacing:var(--disp-track)}
.band .btn{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--accent)}

/* category page */
.cat-head{display:grid;gap:10px;padding-block:clamp(28px,5vw,56px) clamp(20px,3vw,32px)}
.page-title{font:var(--disp-weight) clamp(2rem,5vw,3.6rem)/.98 var(--display);font-stretch:var(--disp-stretch);text-transform:var(--disp-case);letter-spacing:var(--disp-track);margin:0;text-wrap:balance}
.empty{padding:40px 0;display:grid;gap:16px;justify-items:start;color:var(--ink-2)}

/* product page */
.crumbs{padding-block:20px 0;color:var(--ink-2);font-size:.9rem;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink);text-decoration:underline}
.pdp{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);padding-block:20px 0;align-items:start}
.stage{background:var(--wall);display:grid;place-items:center;padding:clamp(40px,8%,80px) clamp(36px,8%,80px);border-radius:var(--r);position:sticky;top:96px;min-height:min(70vh,640px)}
.poster{position:relative;width:min(100%,var(--pw,370px));box-shadow:var(--shadow-lg);transition:width .5s var(--ease),padding .35s var(--ease),background-color .35s}
.poster img{aspect-ratio:var(--ar,2/3);width:100%;object-fit:cover;transition:aspect-ratio .4s var(--ease)}
.poster .mat{transition:padding .35s var(--ease),background-color .35s}
.poster.framed{background:var(--frame);padding:clamp(10px,3%,16px)}
.poster.framed .mat{background:var(--mat);padding:clamp(16px,7%,34px)}
.dim{position:absolute;color:var(--ink-2);font-size:.68rem;white-space:nowrap;display:flex;align-items:center;gap:6px}
.dim-w{left:0;right:0;top:-24px;justify-content:center}
.dim-w::before,.dim-w::after{content:"";flex:1;height:1px;background:var(--ink-3)}
.dim-h{top:0;bottom:0;right:-30px;writing-mode:vertical-rl;justify-content:center}
.dim-h::before,.dim-h::after{content:"";flex:1;width:1px;background:var(--ink-3)}
.info{display:grid;gap:14px;align-content:start}
.info h1{font:var(--disp-weight) clamp(1.9rem,3.6vw,2.9rem)/1 var(--display);font-stretch:var(--disp-stretch);text-transform:var(--disp-case);letter-spacing:var(--disp-track);margin:0;text-wrap:balance}
.big-price{font:500 1.5rem/1.2 var(--mono);font-variant-numeric:tabular-nums}
.big-price .each{font-size:.85rem;color:var(--ink-2);letter-spacing:0}
.ladder-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);padding:6px 10px;font:500 .78rem/1.2 var(--mono);color:var(--ink-2);border-radius:var(--r-chip);transition:background-color .3s,color .3s,border-color .3s}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.opt{border:0;margin:0;padding:0;min-width:0}
.opt-label{display:block;margin:0 0 8px;font-weight:600;font-size:.92rem;padding:0}
.seg.sizes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:var(--surface);padding:4px;gap:4px;border-radius:calc(var(--r-in) + 4px)}
.seg label{display:grid;gap:2px;padding:10px 12px;cursor:pointer;border-radius:var(--r-in);transition:background-color .25s,color .25s;min-height:44px}
.seg label:hover{background:var(--surface-2)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){background:var(--ink);color:var(--bg)}
.seg label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.seg span{font-weight:600;font-size:.95rem}
.seg small{font-family:var(--mono);font-size:.8rem;opacity:.8}
.qty{display:flex;align-items:center;border:1px solid var(--line);background:var(--surface);width:max-content;border-radius:var(--r-btn)}
.qty button{width:44px;height:48px;border:0;background:none;cursor:pointer;display:grid;place-items:center;border-radius:var(--r-btn)}
.qty button:hover{background:var(--surface-2)}
.qty input{width:40px;text-align:center;border:0;background:none;font-family:var(--mono);-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.qty.sm button{height:38px;width:38px}
.buy-row{position:relative;display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.bb-sent{position:absolute;left:0;width:1px;top:-4000px;bottom:0;pointer-events:none;visibility:hidden}
.buy-row .btn{flex:1;min-width:180px}
.pdp-nudge{margin:0;min-height:1.5em;font-size:.95rem;color:var(--ink-2);border-left:3px solid var(--accent);padding:2px 0 2px 12px}
.pdp-nudge:empty{display:none}
.pdp-nudge b{color:var(--ink)}
.wa-order{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.95rem;color:var(--ink-2);text-decoration:none;padding:6px 0;min-height:44px;transition:color .2s}
.wa-order .ic{width:20px;height:20px;color:#25d366}
.wa-order:hover{color:var(--ink)}
.summary .wa-order{justify-self:center}
.facts-grid{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.facts-grid li{display:flex;gap:10px;align-items:flex-start;padding:12px;background:var(--surface);border-radius:var(--r-in)}
.facts-grid .ic{width:22px;height:22px;margin-top:1px;color:var(--ink-2)}
.facts-grid span{display:grid;gap:1px;min-width:0}
.facts-grid b{font-size:.9rem;font-weight:600}
.facts-grid small{color:var(--ink-2);font-size:.8rem;line-height:1.35}
.flash{animation:flash .6s var(--ease)}
@keyframes flash{0%{opacity:.35;transform:translateY(3px)}100%{opacity:1;transform:none}}
@media (max-width:860px){
  .pdp{grid-template-columns:1fr}
  .stage{position:static;min-height:0;padding:40px 40px 30px;margin-inline:calc(var(--gut) * -1);border-radius:0}
  .poster{width:min(60%,var(--pw,370px))}
}
@media (max-width:380px){.facts-grid{grid-template-columns:1fr}}

/* sticky buy bar (phones) */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:25;display:none;align-items:center;gap:12px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s var(--ease)}
.buybar img{width:34px;aspect-ratio:2/3;object-fit:cover}
.buybar-t{display:grid;flex:1;min-width:0;line-height:1.25}
.buybar-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .btn{min-height:44px;padding-inline:18px}
.buybar.show{transform:none}
@media (max-width:860px){.buybar{display:flex}}

/* fly-to-cart copy */
.flyer{position:fixed;z-index:60;pointer-events:none;object-fit:cover;box-shadow:var(--shadow-lg)}

/* drawer */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(10,10,12,.45);opacity:0;transition:opacity .3s}
.scrim.open{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:50;width:min(440px,100%);background:var(--bg);display:grid;grid-template-rows:auto 1fr auto;box-shadow:-20px 0 60px -20px rgba(0,0,0,.4);transform:translateX(104%);transition:transform .38s var(--ease)}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 20px;border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.drawer-head h2 .ic{color:var(--ok)}
.drawer-body{overflow:auto;padding:20px;display:grid;gap:20px;align-content:start}
.drawer-foot{padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:grid;gap:10px}
.added{display:flex;gap:12px;align-items:center}
.added img{width:44px;aspect-ratio:2/3;object-fit:cover;box-shadow:var(--shadow)}
.added div{display:grid}
.motion .drawer.open .added{animation:fadeUp .5s var(--ease) .1s both}
.row{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.row span:last-child{font-family:var(--mono)}
.row.total{font-weight:700;font-size:1.08rem}
.row.saved span:last-child{color:var(--ok)}

/* the bundle meter (signature) */
.bmeter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:end;padding:16px;background:var(--wall);border-radius:var(--r)}
.slot{display:grid;gap:8px;justify-items:center}
.slot-frame{width:100%;aspect-ratio:2/3;border:1.5px dashed var(--ink-3);display:grid;place-items:center;color:var(--ink-3);font:600 1rem var(--mono);border-radius:calc(var(--r) * .5);transition:border-color .3s,background-color .3s}
.slot.on .slot-frame{border:0;background:var(--frame);padding:6%;box-shadow:var(--shadow)}
.slot-frame img{width:100%;height:100%;object-fit:cover}
.motion .slot.on .slot-frame{animation:slotIn .55s var(--ease) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes slotIn{from{transform:translateY(-12px) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
.slot-price{font-size:.68rem;color:var(--ink-2);white-space:nowrap}
.slot.on .slot-price{color:var(--ink)}
.slot.last .slot-price{color:var(--accent-text);font-weight:600}
.slot-more{align-self:center;font-size:.8rem;color:var(--ink-2)}
.nudge{margin:10px 0 0;padding:10px 12px;background:color-mix(in srgb,var(--accent) 14%,var(--surface));border-left:3px solid var(--accent);font-size:.92rem;color:var(--ink);border-radius:0 var(--r-in) var(--r-in) 0}
.nudge a{color:var(--ink);font-weight:600}
.motion .nudge{animation:fadeUp .5s var(--ease) both .15s}
.sug h3{margin:0 0 10px;font-size:.95rem}
.sug-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sug-card{gap:6px;align-content:start}
.sug-card .card-img{background:var(--wall);padding:12%;border-radius:var(--r)}
.sug-card img{aspect-ratio:2/3;object-fit:cover;box-shadow:var(--shadow)}
.sug-t{font-size:.82rem;font-weight:600;line-height:1.2}
.sug-card .quick{position:static;justify-content:center;box-shadow:none;border:1px solid var(--line);padding:6px 8px;min-height:36px;opacity:1;transform:none}

/* cart + checkout */
.two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.cart-meter{margin-bottom:22px}
.cart-meter .bmeter{max-width:440px}
.cart-meter .nudge{max-width:none}
.lines{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.line{display:grid;grid-template-columns:72px 1fr auto;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start;transition:opacity .25s,transform .25s var(--ease-in)}
.line img{width:72px;aspect-ratio:2/3;object-fit:cover;box-shadow:var(--shadow)}
.line-title{font-weight:650;text-decoration:none}
.line-title:hover{text-decoration:underline}
.line-sub{color:var(--ink-2);font-size:.88rem}
.line-sub s{color:var(--ink-3)}
.line-actions{display:flex;gap:14px;align-items:center;margin-top:10px;flex-wrap:wrap}
.leaving-line{opacity:0;transform:translateX(24px)}
.summary{background:var(--surface);border:1px solid var(--line);padding:22px;display:grid;gap:12px;position:sticky;top:96px;border-radius:var(--r)}
.summary .total{border-top:1px solid var(--line);padding-top:12px}
.note{font-size:.85rem;color:var(--ink-2);margin:0;display:flex;gap:8px;align-items:flex-start}
.note .ic{margin-top:2px}
.mini-lines{list-style:none;margin:0 0 4px;padding:0 0 12px;display:grid;gap:10px;border-bottom:1px solid var(--line)}
.mini-lines li{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;font-size:.9rem}
.mini-lines img{width:40px;aspect-ratio:2/3;object-fit:cover}
.mini-lines span{display:grid;min-width:0}
.progress{list-style:none;display:flex;gap:6px;margin:24px 0 0;padding:0;font-size:.85rem;color:var(--ink-3);flex-wrap:wrap}
.progress li{display:flex;align-items:center;gap:6px}
.progress li + li::before{content:"";width:18px;height:1px;background:var(--line)}
.progress .done{color:var(--ink-2)}
.progress [aria-current]{color:var(--ink);font-weight:600}
.progress a{text-decoration:none}
.two .page-title,.wrap > .page-title{margin:clamp(24px,4vw,44px) 0 26px}
.progress + .page-title{margin-top:14px!important}
form.co{display:grid;gap:16px}
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:.92rem}
.field input,.field textarea{border:1.5px solid var(--line);background:var(--surface);padding:12px 14px;border-radius:var(--r-in);width:100%;min-height:48px;transition:border-color .2s}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:hover,.field textarea:hover{border-color:var(--ink-3)}
.field input:focus,.field textarea:focus{outline:2px solid var(--ink);outline-offset:-1px;border-color:var(--ink)}
.field input,.field textarea{scroll-margin-top:120px}
.field .hint{font-size:.8rem;color:var(--ink-2)}
.field.bad input,.field.bad textarea{border-color:var(--err)}
.field .err,.err{color:var(--err);font-size:.85rem;margin:0}
.motion .field .err{animation:fadeUp .3s var(--ease)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.cod{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--ink);background:var(--surface);padding:14px 16px;border-radius:var(--r-in)}
.cod > .ic{width:26px;height:26px}
.cod div{display:grid;gap:2px}
.cod .muted{font-size:.9rem}

/* empty, 404, thanks */
.empty-page{display:grid;justify-items:start;gap:16px;padding-block:clamp(40px,8vw,96px) 0}
.empty-wall{display:flex;gap:14px;padding:22px 26px;background:var(--wall);border-radius:var(--r);margin-bottom:8px}
.empty-wall span{width:clamp(46px,8vw,70px);aspect-ratio:2/3;border:2px dashed var(--ink-3);border-radius:calc(var(--r) * .4)}
.motion .empty-wall span{animation:hang 1s var(--ease) both;animation-delay:calc(var(--i) * 140ms);transform-origin:50% -10px}
.nf .empty-wall span{width:clamp(70px,12vw,100px);animation-name:swing;animation-duration:2.4s;animation-timing-function:ease-in-out;animation-iteration-count:2;animation-direction:alternate}
@keyframes swing{0%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(4deg)}100%{transform:rotate(-1deg)}}
.thanks{max-width:660px;display:grid;gap:16px;padding-block:8px 20px}
.thanks h1{font:var(--disp-weight) clamp(1.9rem,4.4vw,3rem)/1.02 var(--display);font-stretch:var(--disp-stretch);text-transform:var(--disp-case);letter-spacing:var(--disp-track);margin:0}
.seal{width:64px;height:64px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);border-radius:50%;margin-top:18px}
.seal .ic{width:34px;height:34px}
.motion .seal.in{animation:pop .7s var(--ease)}
@keyframes pop{0%{transform:scale(.4) rotate(-20deg)}60%{transform:scale(1.12) rotate(4deg)}100%{transform:none}}
.oid{font:500 1.05rem var(--mono);background:var(--surface);border:1px solid var(--line);padding:10px 14px;justify-self:start;border-radius:var(--r-in)}
.next{list-style:none;margin:6px 0;padding:0;display:grid;gap:10px}
.next li{display:flex;gap:12px;align-items:flex-start;padding:14px;background:var(--surface);border-radius:var(--r-in)}
.next .ic{width:22px;height:22px;color:var(--accent-text);margin-top:1px}
.help-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:860px){.help-grid{grid-template-columns:1fr}}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:clamp(64px,9vw,120px)}
.band + .foot,main:has(> .band:last-child) + .foot{margin-top:0}
.foot-in{max-width:var(--max);margin:0 auto;padding:44px var(--gut) 32px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.foot-brand{display:grid;gap:12px;align-content:start}
.foot-brand p{margin:0;max-width:32ch}
.foot-col{display:grid;gap:8px;align-content:start;font-size:.93rem}
.foot-col h2{font:600 .75rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:0 0 4px}
.foot-col a{text-decoration:none;color:var(--ink-2);display:inline-flex;gap:6px;align-items:center}
.foot-col a:hover{color:var(--ink)}
.social{display:flex;gap:14px;font-size:.93rem}
.social a{text-decoration:none;color:var(--ink-2)}.social a:hover{color:var(--ink)}
.foot-base{max-width:var(--max);margin:0 auto;padding:16px var(--gut) calc(24px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.82rem;color:var(--ink-3);border-top:1px solid var(--line)}
@media (max-width:860px){.foot-in{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1 / -1}}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:55;display:flex;gap:14px;align-items:center;background:var(--ink);color:var(--bg);padding:12px 18px;font-weight:500;box-shadow:var(--shadow-lg);max-width:calc(100% - 32px);border-radius:var(--r-in);transform:translateX(-50%)}
.toast .linkbtn{color:var(--bg);font-weight:600;padding:0}
.motion .toast:not([hidden]){animation:toastIn .35s var(--ease)}
.toast.out{opacity:0;transform:translate(-50%,10px);transition:opacity .2s,transform .2s var(--ease-in)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translateX(-50%)}}


/* motion: reveal on scroll, leave before route change */
.motion .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.motion .rv.in{opacity:1;transform:none}
.motion #view{transition:opacity .17s var(--ease-in),transform .17s var(--ease-in)}
.motion #view.leaving{opacity:0;transform:translateY(-8px)}

/* yellow accents: stickers, tilted frames, pops */
.announce{background:var(--accent);color:var(--accent-ink)}
.cats a[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
.count{background:var(--accent);color:var(--accent-ink)}
.btn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.done{background:var(--ok);border-color:var(--ok);color:#0b2a16}
.band .btn{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--accent)}
.h-display .ln:last-child > span{color:var(--accent)}
.h-display{font-size:clamp(1.6rem,8.6cqi,4.8rem);line-height:1}
.hero-wall{background:radial-gradient(120% 90% at 50% 0%,#23232c 0%,var(--wall) 70%)}
.hang:nth-child(1){--rot:-3deg}
.hang:nth-child(2){--rot:2deg}
.hang:nth-child(3){--rot:-1.5deg}
.hang-frame{transform:rotate(var(--rot,0));border-radius:6px}
.hang:hover .hang-frame{transform:rotate(0) translateY(-8px) scale(1.03)}
.hang-tag{background:var(--accent);color:var(--accent-ink);font-weight:600;border-radius:6px;transform:rotate(calc(var(--rot,0) * -1.4))}
.hang:not(:last-of-type) .hang-tag{background:var(--ink);color:var(--bg)}
.wallbox{background:linear-gradient(160deg,#1d1d25,#14141a)}
.wallbox img{border-radius:4px}
.card:hover .wallbox img{transform:translateY(-8px) rotate(-2deg) scale(1.03)}
.card .price{color:var(--accent)}
.tag{transform:rotate(-4deg)}
.tier.best{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tier.best .tier-each{color:rgba(20,20,22,.7)}
.tier.best .tier-save{color:var(--accent-ink)}
.best-tag{background:var(--accent-ink);color:var(--accent);transform:rotate(3deg) translate(-6px,-8px);border-radius:999px}
.steps li{border-top-color:var(--accent)}
.steps li::before{background:var(--accent);color:var(--accent-ink);border-radius:999px}
.seg label:has(input:checked){background:var(--accent);color:var(--accent-ink)}
.stage{background:radial-gradient(110% 80% at 50% 10%,#23232c 0%,var(--wall) 75%)}
.poster{border-radius:6px;overflow:visible}
.poster img{border-radius:6px}
.poster.framed img{border-radius:0}
.tile:hover{border-color:var(--accent)}
.faq summary .ic{color:var(--accent)}
.slot.on .slot-frame{border-radius:6px}
.quick:hover{background:var(--accent);color:var(--accent-ink)}
.seal{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 18%,transparent)}
:focus-visible{outline-color:var(--accent)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.ts{min-height:65px}
.co .err a{color:inherit;font-weight:600;text-decoration:underline}