/* BLACKNUNITED sticky buy panel + scroll-driven product animation (band, card, slim, magazine pre-order).
 * Loads after inner.css and shop.css and uses their tokens: --r-btn 14px, --h-btn 48px, --h-btn-lg 56px (hero only), --h-chip 44px.
 * Two button styles only: solid (sun on the dark panel) and line (also what a disabled button becomes). */
.bsx{--bs-top:calc(var(--nav) + 16px);--bs-h:clamp(520px,calc(100vh - var(--bs-top) - 16px),880px);--bs-panel:410px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--bs-panel);gap:0 28px;align-items:start;padding:16px calc(var(--side) + var(--gut)) 64px;color:var(--ink);background:linear-gradient(180deg,var(--sky-a),var(--sky-b) 62%,var(--sky-c)) fixed}
.bsx-main{min-width:0}
.bs-track{position:relative}
.bs-stage{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;min-height:560px;overflow:hidden;border-radius:30px;padding:8px 6px 10px}
.bs-on .bs-track{height:310vh}
.bs-on .bs-stage{position:sticky;top:var(--bs-top);height:var(--bs-h)}
.bs-orb{position:absolute;z-index:0;width:min(58%,430px);aspect-ratio:1;border-radius:50%;background:var(--sun);left:50%;top:50%;margin:calc(min(58%,430px)/-2) 0 0 calc(min(58%,430px)/-2);box-shadow:0 0 0 clamp(14px,2.4vw,34px) rgba(249,210,48,.28),0 0 0 clamp(30px,5vw,70px) rgba(249,210,48,.14);transform:translateY(calc(var(--p,0)*-60px))}
.bs-head{position:relative;z-index:2}
.bs-head .crumb{display:block;margin-bottom:10px}
.bs-head h1{font:400 clamp(44px,5.4vw,84px)/.92 var(--disp);text-transform:uppercase}
.bs-head .sub{margin-top:10px;max-width:26em;font-weight:600}
/* skip links: the first one shows on focus only, the second is always there next to the 1 2 3 steps */
.bs-skipbuy{position:absolute;left:12px;top:12px;z-index:5;min-height:var(--h-btn);transform:translateY(-200%);opacity:0}
.bs-skipbuy:focus{transform:none;opacity:1}
/* scenes */
.bs-scene{position:relative;z-index:1;container-type:size;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;min-height:0}
.bs-scene[hidden],[data-for][hidden]{display:none}
.bs-anim{display:none;position:relative;width:100%;height:100%;place-items:center;perspective:1500px}
.bs-still{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;width:100%;height:100%;min-height:0}
.bs-still img{max-height:100%;object-fit:contain}
.bs-still img.mult{border-radius:26px;box-shadow:0 26px 40px rgba(10,10,10,.25);background:#fff}
.bs-on .bs-anim{display:grid}.bs-on .bs-still{display:none}
.bs-obj{position:relative;transform-style:preserve-3d;will-change:transform}
.bs-obj img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 26px 22px rgba(10,10,10,.28))}
.bs-band{height:min(92cqh,calc(92cqw*1.328));aspect-ratio:720/956}
.bs-slim{height:min(72cqh,calc(92cqw*.8));aspect-ratio:1200/960;overflow:hidden;border-radius:26px;background:var(--bone);box-shadow:0 26px 40px rgba(10,10,10,.25)}
.bs-slim img{filter:none;transform-origin:center;will-change:transform}
.bs-card{height:min(76cqh,calc(60cqw*1.5));aspect-ratio:.654}
.bs-card .fc,.bs-card .bc{position:absolute;inset:0;border-radius:5.5%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 26px 40px rgba(10,10,10,.3),0 0 0 1px rgba(245,245,242,.2)}
.bs-card .bc{transform:rotateY(180deg)}
.bs-card img{filter:none;object-fit:cover;width:100%;height:100%}
.bs-shadow{position:absolute;left:50%;bottom:4%;width:50%;height:5%;transform:translateX(-50%);border-radius:50%;background:rgba(10,10,10,.35);filter:blur(14px)}
.bs-fade{animation:bsf .35s ease}@keyframes bsf{from{opacity:.2}to{opacity:1}}
/* magazine book: the cover opens on its spine onto the first inside spread (inside front cover and page 3) */
.bs-book{position:relative;height:min(90cqh,calc(88cqw/1.334));aspect-ratio:1.334/1;transform-style:flat;will-change:transform}
.bs-book .lf,.bs-book .base{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center}
.bs-book .lf{transform-style:preserve-3d;z-index:6}
.bs-book .lf>div,.bs-book .base>div{position:absolute;inset:0}
.bs-book .base{z-index:2}
.bs-book img{width:100%;height:100%;object-fit:cover;display:block}
.bs-book .pg{box-shadow:0 18px 30px rgba(10,10,10,.28),0 0 0 1px rgba(10,10,10,.18);overflow:hidden;background:var(--bone)}
.bs-book .bk{transform:rotateY(180deg);backface-visibility:hidden}
.bs-book .lf>.ft,.bs-book .lf>.bk{backface-visibility:hidden}
.bs-book .pg::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,10,10,.22),rgba(10,10,10,0) 12%)}
.bs-book .bk.pg::after{background:linear-gradient(270deg,rgba(10,10,10,.22),rgba(10,10,10,0) 12%)}
.bs-book .relph{border-width:2px;font-size:clamp(14px,1.9cqw,26px)}
/* reduced motion / ?still: the cover and the two held pages side by side, same frames as in the book */
.bs-rmmag{display:flex;gap:2cqw;align-items:center;justify-content:center;width:100%;height:100%}
.bs-rmmag>*{height:min(80cqh,29cqw*1.5);width:auto;aspect-ratio:2/3;flex:none;border-radius:6px;overflow:hidden}
.bs-rmmag>img{border:3px solid var(--ink);box-shadow:0 18px 30px rgba(10,10,10,.28)}
.bs-rmmag .relph{font-size:clamp(14px,1.9cqw,26px)}
.bs-scene[data-edition=one100] .bs-anim,.bs-scene[data-edition=sealed] .bs-anim,.bs-scene[data-edition=one100] .bs-still,.bs-scene[data-edition=sealed] .bs-still{display:none}
.bs-ph{display:none;color:var(--ink);align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center;border:4px dashed var(--ink);border-radius:26px;background:rgba(245,245,242,.6);font:400 clamp(28px,3vw,44px)/1 var(--disp);text-transform:uppercase;padding:20px;height:min(90cqh,calc(80cqw*1.333));width:auto;aspect-ratio:3/4}
.bs-ph small{font:700 16px var(--body);letter-spacing:.06em;text-transform:none}
.bs-ph .case{width:56%;aspect-ratio:3/4;border:5px solid var(--ink);border-radius:14px;background:var(--sun);display:grid;place-items:center;box-shadow:8px 8px 0 var(--ink);font-size:30px}
.bs-ph .case[hidden]{display:none}
.bs-scene[data-edition=one100] .bs-ph,.bs-scene[data-edition=sealed] .bs-ph{display:flex}
/* captions + the 1 2 3 steps */
.bs-foot{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:end;padding-bottom:10px}
.bs-steps{position:relative;min-height:116px}
.bs-steps li{position:absolute;left:0;bottom:0;max-width:27em;background:var(--ink);color:var(--bone);border-radius:22px;padding:14px 20px 16px;opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s;pointer-events:none}
.bs-steps li.on{opacity:1;transform:none}
.bs-steps b{display:block;font:400 28px/1 var(--disp);text-transform:uppercase;color:var(--sun);margin-bottom:4px}
.bs-steps span{font-weight:600;line-height:1.35;display:block}
.bs-steps li:first-child{opacity:1;transform:none}
.bs-on .bs-steps li:first-child:not(.on){opacity:0;transform:translateY(12px)}
.bs-ctl{display:none;gap:8px;align-items:center}
.bs-on .bs-ctl{display:flex}
.bs-ctl .bs-step{width:var(--h-btn);min-height:var(--h-btn);padding:0;border:2px solid var(--ink);border-radius:var(--r-btn);background:transparent;color:var(--ink);font:400 24px/1 var(--disp);cursor:pointer}
.bs-ctl .bs-step[aria-current=step]{background:var(--ink);color:var(--sun)}
.bs-ctl .bs-skip{color:var(--ink);padding:0 16px;min-height:var(--h-btn);font-size:16px;white-space:nowrap}
.bs-prog{position:absolute;left:0;right:0;bottom:0;height:5px;border-radius:5px;background:rgba(10,10,10,.14);display:none;overflow:hidden}
.bs-on .bs-prog{display:block}
.bs-prog i{display:block;height:100%;width:calc(var(--p,0)*100%);background:var(--ink);border-radius:5px}
.bs-hint{position:absolute;z-index:3;right:8px;bottom:104px;display:none;align-items:center;gap:8px;background:var(--ink);color:var(--sun);font:700 16px var(--body);letter-spacing:.08em;text-transform:uppercase;padding:10px 16px;border-radius:var(--r-tag);transition:opacity .4s}
.bs-on .bs-hint{display:inline-flex}.bs-moved .bs-hint{opacity:0;pointer-events:none}
.bs-hint::after{content:"\2193"}
/* content cards after the animation */
.bsx .band.bs-card2{margin-top:24px;padding:clamp(28px,3.4vw,48px);border-radius:30px}
.bsx .band.bs-card2 .wrap{padding:0;max-width:none}
.bsx .band.bs-card2 .two{grid-template-columns:1fr;gap:28px}
.bsx .band.bs-card2 h2.big{font-size:clamp(34px,3.4vw,52px)}
.bsx .band.bs-card2 .boxlist{grid-template-columns:1fr}
/* the panel (right on desktop, sticky) */
.bs-panel{max-height:calc(100vh - var(--bs-top) - 16px);overflow:auto;position:sticky;top:var(--bs-top);align-self:start;background:var(--ink);color:var(--bone);border-radius:30px;padding:28px 28px 24px;box-shadow:0 18px 50px rgba(10,10,10,.3);z-index:20}
.bs-form{display:block}
.bs-grab,.bs-close,.bs-bar,.bs-scrim,.bs-howm{display:none}
.bs-pname{font:400 34px/1 var(--disp);text-transform:uppercase;margin-bottom:12px}
.bs-price{margin:8px 0 2px;font:400 76px/1 var(--disp);color:var(--sun)}
.bs-price[data-mode=sealed]{font-size:48px}
.bs-pnote{font:700 16px var(--body);letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}
.bs-sub{font-weight:600;margin:0 0 4px}
.bs-lab{font:700 16px var(--body);letter-spacing:.12em;text-transform:uppercase;margin:16px 0 8px;display:block}
.bs-cname{color:var(--sun)}
.bs-dots{display:flex;gap:12px;flex-wrap:wrap;align-items:center;min-height:56px}
.bs-dots button{width:var(--h-chip);height:var(--h-chip);border-radius:50%;border:2px solid var(--bone);background:var(--s);cursor:pointer;padding:0;transition:transform .2s,box-shadow .2s}
.bs-dots button[aria-pressed=true]{box-shadow:0 0 0 3px var(--ink),0 0 0 6px var(--sun);transform:scale(1.04)}
.bs-eds{display:grid;gap:8px;margin-top:6px}
.bs-eds button{display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;min-height:var(--h-btn);padding:8px 16px;border-radius:var(--r-btn);border:2px solid rgba(245,245,242,.4);background:transparent;color:var(--bone);font:700 16px/1.2 var(--body);cursor:pointer}
.bs-eds button b{font:400 22px/1 var(--disp);color:var(--sun);white-space:nowrap}
.bs-eds button[aria-pressed=true]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.bs-eds button[aria-pressed=true] b{color:var(--ink)}
.bs-qty{margin:16px 0 0;border-top:1.5px solid rgba(245,245,242,.22);padding-top:14px;font-weight:600;line-height:1.4}
.bs-qty b{color:var(--sun)}
.bs-qtyrow{margin:14px 0 0}
.bs-qtyrow .qty{border-color:var(--bone)}.bs-qtyrow .qty button{color:var(--bone)}.bs-qtyrow .qty button:hover{background:rgba(245,245,242,.15)}
.bs-actions{margin-top:16px;display:grid;gap:10px}
.bs-buyrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.bs-buy{flex:1 1 180px;min-height:var(--h-btn-lg);font-size:18px;background:var(--sun);color:var(--ink);border-color:var(--sun)}
.bs-buy[disabled]{background:transparent;color:var(--bone);border-color:rgba(245,245,242,.55);opacity:1;cursor:not-allowed}
.bs-buy:hover[disabled]{transform:none}
.bs-ask{background:transparent;color:var(--bone);border-color:var(--bone);min-height:var(--h-btn)}
.bs-ask[hidden]{display:none}
.bs-choice{font-weight:700;color:var(--bone)}
html[data-pay=cart] .bs-choice{display:none}
.bs-note{margin-top:14px;font-size:16px;line-height:1.4;color:rgba(245,245,242,.88)}
.bs-note b{color:var(--sun)}
.bs-edNote{margin-top:14px;font-size:16px;line-height:1.4}.bs-edNote b{color:var(--sun)}
/* phone and narrow: the panel becomes a bottom bar (price, choice, Buy now) and a bottom sheet for the color or edition choice */
@media(max-width:900px){
 .bsx{display:block;--bs-top:calc(var(--nav) + 6px);--bs-h:calc(100svh - var(--nav) - 112px);padding:6px 12px 24px;background-attachment:scroll}
 .bs-on .bs-track{height:270vh}
 .bs-stage{min-height:440px;padding:6px 4px 0;gap:6px;border-radius:24px}
 .bs-head .crumb,.bs-head .sub{display:none}
 .bs-head h1{font-size:42px}
 .bs-orb{width:70%;margin:-35% 0 0 -35%}
 .bs-steps{min-height:104px}.bs-steps li{padding:10px 16px 12px;border-radius:18px;max-width:none;right:0}
 .bs-steps b{font-size:24px}
 .bs-foot{grid-template-columns:1fr}
 .bs-ctl{display:none!important}
 .bs-hint{bottom:112px;right:4px}
 .bsx[data-prod=mag]{--bs-h:calc(100svh - var(--nav) - 112px)}
 /* the sheet */
 .bs-scrim{display:block;position:fixed;inset:0;z-index:89;background:rgba(10,10,10,.55);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
 .bs-sheet-open .bs-scrim{opacity:1;visibility:visible}
 .bs-panel{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:90;max-height:86svh;overflow:auto;border-radius:22px 22px 0 0;padding:8px 18px calc(18px + env(safe-area-inset-bottom));border-top:2px solid var(--sun);box-shadow:0 -10px 30px rgba(10,10,10,.28);transform:translateY(105%);visibility:hidden;transition:transform .3s,visibility .3s}
 .bs-sheet-open .bs-panel{transform:none;visibility:visible}
 .bs-grab{display:block;width:44px;height:5px;border-radius:5px;background:rgba(245,245,242,.4);margin:4px auto 10px}
 .bs-close{display:inline-flex;position:absolute;right:10px;top:8px;min-height:var(--h-btn);min-width:var(--h-btn);padding:0 14px;font-size:16px}
 .bs-pname{font-size:30px;padding-right:96px;margin-bottom:6px}
 .bs-price{font-size:52px}
 .bs-buy{flex:1 1 100%}
 /* the bar */
 .bs-bar{display:flex;align-items:center;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink);color:var(--bone);border-top:2px solid var(--sun);border-radius:22px 22px 0 0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(10,10,10,.28);transition:transform .35s}
 .bsx:not(.is-in) .bs-bar{transform:translateY(112%)}
 .bs-bar .bs-bprice{font:400 36px/1 var(--disp);color:var(--sun);flex:none}
 .bs-bar .bs-bprice[data-mode=sealed]{font-size:22px}
 .bs-bar .bs-choose{flex:1 1 auto;min-width:0;min-height:var(--h-btn);padding:0 12px;border-radius:var(--r-btn);border:2px solid rgba(245,245,242,.55);background:transparent;color:var(--bone);font:700 16px/1.15 var(--body);text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}
 .bs-bar .bs-choose::after{content:"\25B4";flex:none;color:var(--sun)}
 .bs-bar .bs-bnote{flex:1 1 auto;min-width:0;font:600 16px/1.2 var(--body);color:rgba(245,245,242,.88)}
 .bs-bar .bs-bbuy{flex:none;min-height:var(--h-btn);min-width:112px;padding:0 16px;font-size:17px;background:var(--sun);color:var(--ink);border-color:var(--sun)}
 .bs-bar .bs-bbuy[disabled]{background:transparent;color:var(--bone);border-color:rgba(245,245,242,.55);opacity:1;cursor:not-allowed;padding:0 10px;font-size:16px}
 .bs-bar .bs-bbuy:hover[disabled]{transform:none}
 body.bs-has-bar{padding-bottom:84px}
 html.bs-lock{overflow:hidden}
 .bsx .band.bs-card2{border-radius:24px;margin-top:14px}
 .bs-howm{display:block}
}
@media(min-width:901px){.bs-howm{display:none!important}}
@media(prefers-reduced-motion:reduce){.bs-steps li{transition:none}.bs-fade{animation:none}.bs-orb{transform:none}.bs-panel,.bs-scrim,.bs-bar{transition:none}}
/* still mode (reduced motion or ?still): the product stands still, nothing scrolls or transforms */
.bs-static .bs-track{height:auto}.bs-static .bs-stage{position:relative;height:auto;min-height:0;top:auto}
.bs-static .bs-steps{min-height:0}.bs-static .bs-steps li{position:relative;opacity:1!important;transform:none!important;margin-top:8px;pointer-events:auto}
.bs-static .bs-scene{height:min(70vh,560px)}
.bs-static .bs-orb{transform:none}

/* cart mode (Vercel only) has its own quantity stepper, so the Stripe-checkout notes step aside */
html[data-pay=cart] .bs-qty,html[data-pay=cart] .bs-note,html[data-pay=cart] .bs-howm{display:none!important}
.bs-head .crumb a{display:inline-flex;align-items:center;min-height:44px}
.bsx[data-ed=sealed] .bs-qty,.bsx[data-ed=sealed] .bs-note{display:none}