/* ============================================================================
   buybox.css — the gift card buy box (V20 "one-screen buy") · shared by every ByteOSoft storefront.
   Colour comes from the site's own tokens (--ink, --muted, --surface, --surface2, --border) plus four
   call-to-action tokens set on .bb by includes/buybox.php: --bb-cta, --bb-cta2, --bb-cta-ink, --bb-ring.
   ============================================================================ */
.bb-wrap{--bb-r:18px;--bb-r-s:12px;--bb-ink:var(--ink,#101F3D);--bb-muted:var(--muted,#5D6C82);--bb-surface:var(--surface,#fff);--bb-surface2:var(--surface2,var(--surface,#F4F7FC));--bb-border:var(--border,#DCE5F0);
  --bb-good:#16A66C;--bb-good-bg:rgba(22,166,108,.12);--bb-tint:color-mix(in srgb,var(--bb-cta) 10%,transparent);--bb-tint2:color-mix(in srgb,var(--bb-cta) 22%,transparent);color:var(--bb-ink)}
html[data-theme="dark"] .bb-wrap,body.dark .bb-wrap{--bb-good:#2FD98A;--bb-good-bg:rgba(47,217,138,.14)}
.bb{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:12px;color:var(--bb-ink);font-variant-numeric:tabular-nums}
@media (min-width:960px){.bb{grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:28px;align-items:start}}
.bb *{box-sizing:border-box}
.bb button{font-family:inherit}

/* ---------- left: the card itself (desktop) ---------- */
.bb-art{display:none}
@media (min-width:960px){.bb-art{display:block;position:sticky;top:84px}}
.bb-art-card{position:relative;aspect-ratio:8/5;border-radius:22px;overflow:hidden;background:linear-gradient(145deg,color-mix(in srgb,var(--bb-brand) 85%,#000 15%),color-mix(in srgb,var(--bb-brand) 55%,#0B1B33 45%));box-shadow:0 24px 50px -22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.bb-art-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bb-art-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 45%,rgba(0,0,0,.28));pointer-events:none}
.bb-art-mark{position:absolute;inset:0;display:grid;place-items:center}
.bb-art-mark img{width:56%;max-height:52%;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.bb-art-val{position:absolute;right:18px;bottom:14px;z-index:2;font-size:30px;font-weight:800;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.bb-art-trust{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.bb-art-trust li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--bb-muted)}
.bb-art-trust i{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-size:13px;background:var(--bb-surface2);border:1px solid var(--bb-border);color:var(--bb-ink)}

/* ---------- right: the buy box ---------- */
.bb-main{background:var(--bb-surface);border:1px solid var(--bb-border);border-radius:var(--bb-r);padding:16px 16px 14px;box-shadow:0 18px 44px -30px rgba(0,0,0,.35)}
@media (min-width:600px){.bb-main{padding:22px 24px 18px}}
.bb-head{display:flex;gap:14px;align-items:center}
.bb-thumb{flex:none;width:84px;height:54px;border-radius:12px;overflow:hidden;background:linear-gradient(145deg,color-mix(in srgb,var(--bb-brand) 85%,#000 15%),color-mix(in srgb,var(--bb-brand) 50%,#0B1B33 50%));display:grid;place-items:center;box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
.bb-thumb img{width:100%;height:100%;object-fit:cover}
.bb-thumb img[width="64"]{width:70%;height:auto;object-fit:contain}
@media (min-width:960px){.bb-thumb{display:none}}
.bb-title{min-width:0;flex:1}
.bb-title h1{margin:0;font-size:clamp(1.25rem,4.2vw,1.75rem);line-height:1.15;letter-spacing:-.015em}
.bb-sub{margin:5px 0 0;font-size:13px;color:var(--bb-muted);display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;line-height:1.35}
.bb-sub a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.bb-sub>span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:960px){.bb-sub>span:last-child{display:inline;-webkit-line-clamp:none}}
.bb-stars{color:#E9A51A;font-weight:700}
.bb-dot{opacity:.5}

.bb-row{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-top:14px}
.bb-sel{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 34px 0 12px;border:1.5px solid var(--bb-border);border-radius:999px;background:var(--bb-surface2);font-weight:600;font-size:14px;color:var(--bb-ink);max-width:100%;cursor:pointer}
.bb-sel:focus-within{border-color:var(--bb-ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--bb-ring) 25%,transparent)}
.bb-sel select{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;padding:8px 0;max-width:min(62vw,340px);text-overflow:ellipsis;cursor:pointer;outline:none}
.bb-sel-flag{font-size:18px;line-height:1}
.bb-sel-chev{position:absolute;right:12px;top:50%;transform:translateY(-62%);font-size:18px;line-height:1;opacity:.7;pointer-events:none}
.bb-lock{font-size:12.5px;color:var(--bb-muted);display:inline-flex;align-items:center;gap:5px}
.bb-lock.global{color:var(--bb-good)}

.bb-sale{display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;padding:10px 12px;border:1px dashed color-mix(in srgb,var(--bb-cta) 55%,transparent);border-radius:var(--bb-r-s);background:var(--bb-tint);color:var(--bb-ink);text-align:left;font:inherit;font-size:13.5px;line-height:1.3;cursor:pointer;transition:background .15s}
.bb-sale:hover{background:var(--bb-tint2)}
.bb-sale.soft{cursor:default;border-style:solid;border-color:var(--bb-border);background:var(--bb-surface2)}
.bb-sale.soft:hover{background:var(--bb-surface2)}
.bb-sale-ic{flex:none;font-size:18px}
.bb-sale-t{flex:1;min-width:0}
.bb-sale-t b{font-weight:800}
.bb-sale-go{flex:none;font-weight:700;font-size:12.5px;color:var(--bb-cta);filter:saturate(1.1)}
html[data-theme="dark"] .bb-sale-go,body.dark .bb-sale-go{color:color-mix(in srgb,var(--bb-cta) 70%,#fff)}

/* ---------- the value rail ---------- */
.bb-values{margin-top:16px}
.bb-values-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;font-weight:700;margin-bottom:8px}
.bb-values-hint{font-weight:500;color:var(--bb-muted);font-size:12px}
.bb-railwrap{position:relative}
.bb-rail{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:4px 2px 6px;margin:0 -2px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.bb-rail::-webkit-scrollbar{display:none}
.bb-v{flex:none;scroll-snap-align:start;width:98px;min-height:88px;padding:11px 8px 9px;border:1.5px solid var(--bb-border);border-radius:14px;background:var(--bb-surface);color:var(--bb-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;position:relative;transition:transform .16s,box-shadow .16s,border-color .16s,background .16s;font:inherit}
.bb-v:hover{border-color:color-mix(in srgb,var(--bb-ring) 60%,var(--bb-border));transform:translateY(-1px)}
.bb-v .v{font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.bb-v .p{font-size:12.5px;color:var(--bb-muted);font-weight:600}
.bb-v .s{font-size:11px;font-weight:700;color:var(--bb-good);background:var(--bb-good-bg);border-radius:999px;padding:1px 7px;margin-top:2px;white-space:nowrap}
.bb-v .d{position:absolute;top:-7px;right:8px;font-size:10.5px;font-weight:800;letter-spacing:.01em;padding:2px 7px;border-radius:999px;background:var(--bb-cta);color:var(--bb-cta-ink);box-shadow:0 2px 8px -2px color-mix(in srgb,var(--bb-cta) 70%,transparent)}
.bb-v.sale{border-color:color-mix(in srgb,var(--bb-cta) 45%,var(--bb-border))}
.bb-v.on{background:linear-gradient(160deg,var(--bb-cta2),var(--bb-cta));border-color:transparent;color:var(--bb-cta-ink);transform:translateY(-2px);box-shadow:0 12px 26px -12px color-mix(in srgb,var(--bb-cta) 80%,#000),0 0 0 3px color-mix(in srgb,var(--bb-ring) 28%,transparent)}
.bb-v.on .p{color:color-mix(in srgb,var(--bb-cta-ink) 78%,transparent)}
.bb-v.on .s{background:color-mix(in srgb,var(--bb-cta-ink) 16%,transparent);color:var(--bb-cta-ink)}
.bb-v.on .d{background:var(--bb-cta-ink);color:var(--bb-cta)}
.bb-v.pop{animation:bbPop .28s ease-out}
@keyframes bbPop{0%{transform:translateY(-2px) scale(.94)}60%{transform:translateY(-3px) scale(1.04)}100%{transform:translateY(-2px) scale(1)}}
.bb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:30px;height:30px;border-radius:50%;border:1px solid var(--bb-border);background:var(--bb-surface);color:var(--bb-ink);font-size:20px;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.14);padding:0 0 2px}
.bb-arrow.l{left:-12px}.bb-arrow.r{right:-12px}
.bb-arrow:disabled{opacity:0;pointer-events:none}
@media (hover:hover) and (min-width:700px){.bb-arrow{display:inline-flex}}
.bb-railwrap.wide .bb-arrow{width:36px;height:36px}

/* ---------- the price line ---------- */
.bb-receipt{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l r" "m q";gap:4px 12px;align-items:center;margin-top:12px;padding:11px 14px;border-radius:var(--bb-r-s);background:var(--bb-surface2);border:1px solid var(--bb-border)}
@media (min-width:600px){.bb-receipt{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"l q r" "m q r";gap:2px 16px;padding:12px 16px}}
.bb-rl{grid-area:l;font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bb-rm{grid-area:m;font-size:12.5px;color:var(--bb-muted);display:flex;gap:8px;align-items:center;min-height:18px}
.bb-rm s{opacity:.85}
.bb-off{font-style:normal;font-weight:700;color:var(--bb-good)}
.bb-off:empty,.bb-rm s:empty{display:none}
.bb-qty{grid-area:q;display:inline-flex;align-items:center;gap:2px;border:1px solid var(--bb-border);border-radius:999px;background:var(--bb-surface);padding:2px;width:max-content;justify-self:end}
.bb-qty button{width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:var(--bb-ink);font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center}
.bb-qty button:hover{background:var(--bb-surface2)}
.bb-qty button:disabled{opacity:.35;cursor:default}
.bb-qty output{min-width:24px;text-align:center;font-weight:800;font-size:14px}
.bb-rr{grid-area:r;text-align:right;display:flex;flex-direction:column;align-items:flex-end;justify-self:end}
.bb-rr span{font-size:11.5px;color:var(--bb-muted);font-weight:600}
.bb-pay{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.05;transition:color .2s}
.bb-pay.rolling{color:var(--bb-cta)}
html[data-theme="dark"] .bb-pay.rolling,body.dark .bb-pay.rolling{color:color-mix(in srgb,var(--bb-cta) 65%,#fff)}
.bb-sv{font-style:normal;color:var(--bb-good);font-weight:600}
.bb-sv b{font-weight:800}
.bb-sv[hidden]{display:none}

/* ---------- actions ---------- */
.bb-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin-top:14px}
.bb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 18px;border-radius:14px;border:1.5px solid transparent;font-weight:800;font-size:15.5px;letter-spacing:-.005em;cursor:pointer;text-decoration:none;transition:transform .14s,box-shadow .14s,background .14s,filter .14s;white-space:nowrap}
.bb-btn:focus-visible{outline:3px solid var(--bb-ring);outline-offset:2px}
.bb-btn.sm{min-height:42px;padding:0 14px;font-size:14px;border-radius:12px}
.bb-buy{background:linear-gradient(135deg,var(--bb-cta2),var(--bb-cta));color:var(--bb-cta-ink);box-shadow:0 14px 28px -12px color-mix(in srgb,var(--bb-cta) 85%,#000)}
.bb-buy:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 18px 34px -12px color-mix(in srgb,var(--bb-cta) 85%,#000)}
.bb-buy:active{transform:translateY(0)}
.bb-buy .bb-btn-ar{transition:transform .18s}
.bb-buy:hover .bb-btn-ar{transform:translateX(3px)}
.bb-buy.busy{pointer-events:none;filter:saturate(.6)}
.bb-cart{background:var(--bb-surface);border-color:color-mix(in srgb,var(--bb-cta) 55%,var(--bb-border));color:var(--bb-ink)}
.bb-cart:hover{background:var(--bb-tint);transform:translateY(-1px)}
.bb-cart.busy{pointer-events:none;opacity:.7}
.bb-cart.done{border-color:var(--bb-good);color:var(--bb-good)}
.bb-btn-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bb-msg{margin:10px 2px 0;font-size:13px;color:var(--bb-muted)}
.bb-msg.err{color:var(--danger,#D1434C);font-weight:600}
.bb-trust{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--bb-muted)}
.bb-trust li{display:inline-flex;align-items:center;gap:5px}
.bb-trust i{font-style:normal;font-size:11px}
@media (max-width:599px){.bb-crumb{display:none}.bb{margin-top:8px}.bb-trust{gap:4px 12px;font-size:11.5px}.bb-trust li:nth-child(3){display:none}.bb-btn{min-height:50px}.bb-values{margin-top:12px}.bb-sale{margin-top:10px;padding:8px 10px;font-size:12.5px}.bb-row{margin-top:10px;flex-wrap:nowrap}.bb-sel{flex:0 1 auto;min-width:0;min-height:38px}.bb-sel select{max-width:54vw;padding:7px 0}.bb-rm s{display:none}.bb-lock{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.bb-rr{flex-direction:row;align-items:baseline;gap:6px}.bb-pay{font-size:22px}.bb-qty button{width:26px;height:26px}.bb-receipt{padding:9px 12px;gap:2px 10px}.bb-actions{margin-top:12px}}
.bb-stocknote{margin:10px 0 0;font-size:12.5px;color:var(--bb-muted)}

/* ---------- promo (collapsed) ---------- */
.bb-promo{margin-top:14px;border-top:1px solid var(--bb-border);padding-top:4px}
.bb-promo summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 2px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--bb-ink)}
.bb-promo summary::-webkit-details-marker{display:none}
.bb-promo summary em{font-style:normal;font-size:12px;color:var(--bb-muted);font-weight:500}
.bb-promo[open] summary em{color:var(--bb-good)}
.bb-promo-row{display:flex;gap:8px;margin-top:6px}
.bb-promo-row input{flex:1;min-width:0;height:42px;border:1.5px solid var(--bb-border);border-radius:12px;padding:0 12px;font:inherit;font-weight:600;letter-spacing:.04em;background:var(--bb-surface2);color:var(--bb-ink)}
.bb-promo-row input:focus{outline:none;border-color:var(--bb-ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--bb-ring) 22%,transparent)}
.bb-promo-msg{margin:8px 2px 0;font-size:12.5px;color:var(--bb-good)}
.bb-promo-msg.err{color:var(--danger,#D1434C)}
.bb-link{border:0;background:none;padding:0;font:inherit;font-size:inherit;font-weight:700;color:var(--bb-cta);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
html[data-theme="dark"] .bb-link,body.dark .bb-link{color:color-mix(in srgb,var(--bb-cta) 70%,#fff)}
.bb-coupons{list-style:none;margin:10px 0 2px;padding:0;display:grid;gap:8px}
.bb-coupons li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border:1px dashed var(--bb-border);border-radius:12px;font-size:12.5px}
.bb-coupons li.no{opacity:.6}
.bb-coupons code{font-weight:800;font-size:12px;background:var(--bb-tint);color:var(--bb-ink);padding:4px 8px;border-radius:8px;letter-spacing:.04em}
.bb-coupons span{display:flex;flex-direction:column;gap:1px;min-width:0}
.bb-coupons small{color:var(--bb-muted);font-size:11.5px}
.bb-coupons .bb-coupon-state:empty{display:none}
.bb-coupons li.ok .bb-coupon-state{color:var(--bb-good);font-weight:600}
.bb-coupons li.no .bb-link{pointer-events:none;opacity:.5;text-decoration:none}

/* ---------- below the box: bigger values · more cards ---------- */
.bb-sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0 0 12px}
.bb-sec-head h2{margin:0;font-size:clamp(1.1rem,3vw,1.35rem);letter-spacing:-.01em}
.bb-sec-head p{margin:0;font-size:13px;color:var(--bb-muted)}
.bb-up,.bb-more{margin-top:34px;color:var(--bb-ink)}
.bb-uprail,.bb-morerail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:6px 2px 10px;margin:0 -2px}
.bb-uprail::-webkit-scrollbar,.bb-morerail::-webkit-scrollbar{display:none}
.bb-upcard{flex:none;scroll-snap-align:start;width:176px;border:1.5px solid var(--bb-border);border-radius:16px;background:var(--bb-surface);color:var(--bb-ink);text-align:left;padding:0;overflow:hidden;cursor:pointer;position:relative;transition:transform .16s,box-shadow .16s,border-color .16s;font:inherit}
.bb-upcard:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(0,0,0,.45);border-color:color-mix(in srgb,var(--bb-ring) 55%,var(--bb-border))}
.bb-upcard.on{border-color:var(--bb-ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--bb-ring) 25%,transparent)}
.bb-upcard .art{display:block;height:92px;background:linear-gradient(145deg,color-mix(in srgb,var(--bb-brand) 85%,#000 15%),color-mix(in srgb,var(--bb-brand) 50%,#0B1B33 50%));position:relative;overflow:hidden}
.bb-upcard .art img{width:100%;height:100%;object-fit:cover;display:block}
.bb-upcard .art .mk{position:absolute;inset:0;display:grid;place-items:center}
.bb-upcard .art .mk img{width:52%;height:auto;max-height:60%;object-fit:contain}
.bb-upcard .rib{position:absolute;left:10px;top:10px;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--bb-cta);color:var(--bb-cta-ink);box-shadow:0 3px 10px -3px rgba(0,0,0,.4)}
.bb-upcard .bd{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px}
.bb-upcard .bd b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.bb-upcard .bd small{font-size:12.5px;color:var(--bb-muted)}
.bb-upcard .bd small s{margin-right:4px}
.bb-upcard .bd em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--bb-good);background:var(--bb-good-bg);border-radius:999px;padding:2px 8px;width:max-content;margin-top:4px}
a.bb-tile,a.bb-tile:hover{flex:none;scroll-snap-align:start;width:172px;border:1px solid var(--bb-border);border-radius:16px;background:var(--bb-surface);color:var(--bb-ink);text-decoration:none;overflow:hidden;transition:transform .16s,box-shadow .16s}
a.bb-tile:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(0,0,0,.45)}
.bb-tile-art{display:block;position:relative;height:104px;background:linear-gradient(145deg,color-mix(in srgb,var(--bb-brand) 85%,#000 15%),color-mix(in srgb,var(--bb-brand) 50%,#0B1B33 50%));overflow:hidden}
.bb-tile-art img{width:100%;height:100%;object-fit:cover;display:block}
.bb-tile-mark{position:absolute;inset:0;display:grid;place-items:center}
.bb-tile-mark img{width:52%;height:auto;max-height:60%;object-fit:contain}
.bb-tile-off{position:absolute;left:10px;top:10px;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:rgba(10,14,24,.78);color:#fff;font-style:normal;backdrop-filter:blur(4px)}
.bb-tile-body{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px}
.bb-tile-body b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-tile-body small{font-size:12px;color:var(--bb-muted)}

/* ---------- the sticky buy bar ---------- */
.bb-bar{position:fixed;left:0;right:0;bottom:var(--bb-bottom,0px);z-index:88;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bb-surface,#fff) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--bb-border);box-shadow:0 -10px 30px -14px rgba(0,0,0,.35);transform:translateY(110%);transition:transform .26s cubic-bezier(.2,.8,.2,1);color:var(--bb-ink)}
.bb-bar[hidden]{display:grid}
.bb-bar.on{transform:translateY(0)}
.bb-bar-thumb{width:46px;height:30px;border-radius:7px;overflow:hidden;background:#0B1B33;display:grid;place-items:center}
.bb-bar-thumb img{width:100%;height:100%;object-fit:cover}
.bb-bar-t{min-width:0;display:flex;flex-direction:column;line-height:1.15}
.bb-bar-t b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-bar-t small{font-size:12px;color:var(--bb-muted)}
.bb-bar .bb-cart.sm{width:42px;padding:0}
.bb-bar .bb-cart svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:960px){.bb-bar{left:auto;right:24px;bottom:calc(var(--bb-bottom,0px) + 18px);width:min(560px,calc(100vw - 48px));border:1px solid var(--bb-border);border-radius:16px;padding:10px 12px}}
body.bb-bar-on{padding-bottom:72px}

/* ---------- the added-to-cart drawer ---------- */
.bb-drawer{position:fixed;inset:0;z-index:120;display:block}
.bb-drawer[hidden]{display:none}
.bb-drawer-bg{position:absolute;inset:0;background:rgba(6,10,20,.5);backdrop-filter:blur(3px);animation:bbFade .2s ease-out}
.bb-drawer-panel{position:absolute;left:0;right:0;bottom:0;background:var(--bb-surface,#fff);color:var(--bb-ink);border-radius:20px 20px 0 0;padding:14px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -20px 50px rgba(0,0,0,.35);animation:bbUpIn .28s cubic-bezier(.2,.8,.2,1)}
@media (min-width:720px){.bb-drawer-panel{left:auto;top:0;bottom:0;width:400px;border-radius:0;padding:20px 22px;animation:bbSideIn .28s cubic-bezier(.2,.8,.2,1)}}
.bb-drawer header{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:16px}
.bb-x{width:34px;height:34px;border-radius:50%;border:1px solid var(--bb-border);background:transparent;color:var(--bb-ink);font-size:14px;cursor:pointer}
.bb-drawer-item{display:flex;gap:12px;align-items:center;margin-top:14px;padding:12px;border:1px solid var(--bb-border);border-radius:14px;background:var(--bb-surface2)}
.bb-drawer-item .th{flex:none;width:64px;height:40px;border-radius:8px;overflow:hidden;background:#0B1B33;display:grid;place-items:center}
.bb-drawer-item .th img{width:100%;height:100%;object-fit:cover}
.bb-drawer-item .tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.bb-drawer-item .tx b{font-size:14.5px}
.bb-drawer-item .tx small{font-size:12.5px;color:var(--bb-muted)}
.bb-drawer-item .pr{font-weight:800;font-size:15px;white-space:nowrap}
.bb-drawer-total{margin:12px 2px 0;font-size:13.5px;color:var(--bb-muted)}
.bb-drawer-total b{color:var(--bb-ink)}
.bb-drawer-acts{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;margin-top:14px}
.bb-drawer-more{display:block;margin:14px auto 0;font-size:13.5px}
@keyframes bbFade{from{opacity:0}}
@keyframes bbUpIn{from{transform:translateY(40px);opacity:.6}}
@keyframes bbSideIn{from{transform:translateX(40px);opacity:.6}}

/* ---------- what sits under the box ---------- */
.bb-indep{margin:14px 0 0;font-size:12px;color:var(--bb-muted);line-height:1.45}
.bb-indep a{color:inherit;text-decoration:underline}
.bb-after{margin-top:34px}
@media (prefers-reduced-motion:reduce){.bb-v,.bb-btn,.bb-bar,.bb-drawer-bg,.bb-drawer-panel,.bb-upcard,.bb-tile{transition:none;animation:none}}

/* ============================================================================
   cart.php (V20) — the cart page shares the buy box tokens
   ============================================================================ */
.ct{--bb-cta:var(--amber,#0F62E6);--bb-cta2:var(--amber,#0F62E6);--bb-cta-ink:#fff;--bb-ring:var(--amber,#0F62E6);--bb-ink:var(--ink,#101F3D);--bb-muted:var(--muted,#5D6C82);--bb-surface:var(--surface,#fff);--bb-surface2:var(--surface2,var(--surface,#F4F7FC));--bb-border:var(--border,#DCE5F0);--bb-good:#16A66C;--bb-good-bg:rgba(22,166,108,.12);--bb-tint:color-mix(in srgb,var(--bb-cta) 10%,transparent);color:var(--bb-ink);font-variant-numeric:tabular-nums;padding-bottom:40px}
html[data-theme="dark"] .ct,body.dark .ct{--bb-good:#2FD98A;--bb-good-bg:rgba(47,217,138,.14)}
.ct-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ct-head h1{margin:0;font-size:clamp(1.5rem,4vw,2rem)}
.ct-count{font-size:13px;color:var(--bb-muted);font-weight:600}
.ct-continue{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--bb-muted);text-decoration:none}
.ct-continue:hover{color:var(--bb-ink)}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:18px}
@media (min-width:900px){.ct-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}}
.ct-lines{display:grid;gap:10px}
.ct-line{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px 14px;align-items:center;padding:12px;border:1px solid var(--bb-border);border-radius:16px;background:var(--bb-surface)}
.ct-line.bad{opacity:.55}
.ct-art{position:relative;display:block;width:96px;height:60px;border-radius:10px;overflow:hidden;background:linear-gradient(145deg,color-mix(in srgb,var(--bb-brand) 85%,#000 15%),color-mix(in srgb,var(--bb-brand) 50%,#0B1B33 50%))}
.ct-art img{width:100%;height:100%;object-fit:cover;display:block}
.ct-art .mk{position:absolute;inset:0;display:grid;place-items:center}
.ct-art .mk img{width:60%;height:auto;max-height:60%;object-fit:contain}
.ct-art b{position:absolute;right:6px;bottom:4px;font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.ct-info{min-width:0}
.ct-info h2{margin:0;font-size:15.5px;line-height:1.25}
.ct-info h2 a{color:inherit;text-decoration:none}
.ct-info h2 a:hover{text-decoration:underline}
.ct-meta{margin:3px 0 0;font-size:12.5px;color:var(--bb-muted)}
.ct-meta em{font-style:normal;color:var(--bb-good);font-weight:700}
.ct-meta strong{color:var(--danger,#D1434C)}
.ct-acts{display:flex;align-items:center;gap:14px;margin-top:8px;flex-wrap:wrap}
.ct-acts .bb-qty{margin:0}
.ct-remove{font-size:12.5px;color:var(--bb-muted);font-weight:600}
.ct-price{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:1px;white-space:nowrap}
.ct-price b{font-size:16px;font-weight:800}
.ct-price s{font-size:12px;color:var(--bb-muted)}
.ct-price small{font-size:11.5px;color:var(--bb-muted)}
@media (max-width:560px){.ct-line{grid-template-columns:76px minmax(0,1fr);grid-template-areas:"art info" "art price"}.ct-art{width:76px;height:48px;grid-area:art;align-self:start}.ct-info{grid-area:info}.ct-price{grid-area:price;flex-direction:row;align-items:baseline;gap:8px;justify-content:flex-start;text-align:left;margin-top:-4px}}
.ct-sum{position:sticky;top:84px;padding:18px;border:1px solid var(--bb-border);border-radius:16px;background:var(--bb-surface)}
.ct-sum h2{margin:0 0 10px;font-size:17px}
.ct-sum dl{margin:0;display:grid;gap:8px}
.ct-sum dl div{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.ct-sum dd{margin:0;font-weight:700}
.ct-sum dd.good{color:var(--bb-good)}
.ct-sum .tot{border-top:1px solid var(--bb-border);padding-top:10px;margin-top:4px;font-size:15px}
.ct-sum .tot dd{font-size:22px;font-weight:800;letter-spacing:-.02em}
.ct-nudge{margin:12px 0 0;font-size:12.5px;padding:9px 11px;border-radius:10px;background:var(--bb-surface2);border:1px dashed var(--bb-border);color:var(--bb-muted)}
.ct-nudge.on{color:var(--bb-good);border-color:var(--bb-good)}
.ct-go{width:100%;margin-top:14px}
span.ct-go{opacity:.6;cursor:default}
.ct-pay{margin:10px 0 0;font-size:12px;color:var(--bb-muted);text-align:center;line-height:1.45}
.ct-empty{margin-top:28px;padding:48px 20px;text-align:center;border:1px dashed var(--bb-border);border-radius:20px;background:var(--bb-surface)}
.ct-empty-ic{font-size:44px;display:block}
.ct-empty h2{margin:12px 0 6px}
.ct-empty p{margin:0 auto 18px;max-width:46ch;color:var(--bb-muted);font-size:14px}
.ct-empty .bb-btn{display:inline-flex}
.ct-bar{display:none}
@media (max-width:899px){.ct-bar{position:fixed;left:0;right:0;bottom:0;z-index:88;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bb-surface) 94%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--bb-border)}.ct-bar small{display:block;font-size:11.5px;color:var(--bb-muted)}.ct-bar b{font-size:18px;font-weight:800}.ct{padding-bottom:90px}}

/* links styled as buttons keep the button colours whatever the site's own a{} rule says */
.bb-wrap a.bb-btn,.ct a.bb-btn,.bb-wrap a.bb-btn:hover,.ct a.bb-btn:hover{text-decoration:none}
.bb-wrap .bb-buy,.ct .bb-buy,.bb-wrap a.bb-buy:hover,.ct a.bb-buy:hover,body .bb-wrap .bb-buy{color:var(--bb-cta-ink)}
.bb-wrap .bb-cart,.ct .bb-cart,.bb-wrap a.bb-cart:hover,.ct a.bb-cart:hover,body .bb-wrap .bb-cart{color:var(--bb-ink)}
.bb-wrap .bb-cart.done{color:var(--bb-good)}
.bb-wrap h1,.bb-wrap h2,.ct h1,.ct h2{color:var(--bb-ink)}

/* stock levels · custom amount (storefronts that sell from live stock) */
.bb-v .lf{font-size:10.5px;font-weight:700;color:var(--warning,#B8860B);margin-top:1px}
.bb-v.out{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.bb-v.other{border-style:dashed}
.bb-v.other .v{font-size:19px;line-height:1}
.bb-custom{margin-top:10px;padding:10px 12px;border:1px dashed var(--bb-border);border-radius:var(--bb-r-s);background:var(--bb-surface2)}
.bb-custom[hidden]{display:none}
.bb-custom label{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;font-weight:700;margin-bottom:6px}
.bb-custom label small{font-weight:500;color:var(--bb-muted)}
.bb-custom-row{display:flex;align-items:center;gap:8px}
.bb-custom-cur{font-size:12px;font-weight:800;color:var(--bb-muted);min-width:34px}
.bb-custom-row input{flex:1;min-width:0;height:40px;border:1.5px solid var(--bb-border);border-radius:10px;padding:0 12px;font:inherit;font-weight:700;font-size:16px;background:var(--bb-surface);color:var(--bb-ink)}
.bb-custom-row input:focus{outline:none;border-color:var(--bb-ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--bb-ring) 22%,transparent)}
.bb-custom-msg{margin:6px 0 0;font-size:12px;color:var(--danger,#D1434C);font-weight:600}
.bb-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* GiftSello: its dark theme keeps the light --ink/--surface tokens and forces p, li, h1 and a light one by one —
   under that theme the box and the cart take the site's own dark palette, so the forced light text sits on dark surfaces */
html[data-theme="dark"] .bb-wrap.bb-gsel,html[data-theme="dark"] .ct.bb-gsel{--bb-ink:#EAF0F9;--bb-muted:#93A3BC;--bb-surface:#121B2C;--bb-surface2:#18243A;--bb-border:#223049;--bb-good:#2FD98A;--bb-good-bg:rgba(47,217,138,.14);color:var(--bb-ink)}
html[data-theme="dark"] .bb-wrap.bb-gsel a.bb-tile,html[data-theme="dark"] .bb-wrap.bb-gsel a.bb-tile:hover,html[data-theme="dark"] .ct.bb-gsel a.ct-name{color:var(--bb-ink)}
html[data-theme="dark"] .bb-wrap.bb-gsel .bb-sub,html[data-theme="dark"] .bb-wrap.bb-gsel .bb-stocknote,html[data-theme="dark"] .bb-wrap.bb-gsel .bb-trust li,html[data-theme="dark"] .bb-wrap.bb-gsel .bb-indep,html[data-theme="dark"] .bb-wrap.bb-gsel .bb-up p{color:var(--bb-muted)}
html[data-theme="dark"] .bb-wrap.bb-gsel .bb-sel select,html[data-theme="dark"] .bb-wrap.bb-gsel .bb-custom-row input,html[data-theme="dark"] .bb-wrap.bb-gsel .bb-promo input{background:var(--bb-surface2);color:var(--bb-ink);border-color:var(--bb-border)}
html[data-theme="dark"] .bb-wrap.bb-gsel .bb-v:not(.on){background:var(--bb-surface2)}