/* ============================================================
   KLUB · MARKETPLACE · Golden Hour
   Merch storefront + buy + sell + orders, and fan-to-fan ticket
   resale. Tokens come from golden-hour.css — nothing here invents
   a color; every value is a var(--…) or a tint/alpha of one.
   Load AFTER golden-hour.css + styles.css.
   Class prefixes:  sh* storefront · pd* product detail · bag* buy ·
   shmgr* seller · ord* buyer orders · mk* resale marketplace.
   ============================================================ */

/* ---------- STOREFRONT entry on a profile (artist/venue) ---------- */
.shopmod { position:relative; z-index:5; margin:14px 20px 0; border-radius:18px; overflow:hidden;
  background:linear-gradient(150deg, rgba(255,194,75,.12), rgba(255,46,147,.06) 70%); border:1px solid rgba(255,194,75,.28); }
.shopmod .smtop { display:flex; align-items:center; gap:12px; padding:15px 16px 0; }
.shopmod .smic { width:40px; height:40px; border-radius:12px; background:rgba(255,194,75,.16); border:1px solid rgba(255,194,75,.36); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:19px; flex-shrink:0; }
.shopmod .smt { flex:1; min-width:0; }
.shopmod .smt .h { font-family:var(--disp); font-weight:700; font-size:16px; color:var(--bone); }
.shopmod .smt .s { font-size:11.5px; color:var(--bone-3); margin-top:2px; }
.shopmod .smt .s b { color:var(--gold); font-weight:600; }
.shopmod .smrow { display:flex; gap:10px; padding:13px 16px 16px; overflow-x:auto; scrollbar-width:none; }
.shopmod .smrow::-webkit-scrollbar { display:none; }
.shopmod .smp { width:96px; flex-shrink:0; }
.shopmod .smp .ph { width:96px; height:96px; border-radius:13px; overflow:hidden; background:var(--n3); position:relative; }
.shopmod .smp .ph img { width:100%; height:100%; object-fit:cover; }
.shopmod .smp .ph .drop { position:absolute; top:6px; left:6px; font-weight:700; font-size:8px; letter-spacing:.06em; text-transform:uppercase; color:var(--acid-ink); background:var(--acid); padding:3px 6px; border-radius:999px; }
.shopmod .smp .nm { font-size:11.5px; color:var(--bone); font-weight:600; margin-top:7px; line-height:1.2; }
.shopmod .smp .pr { font-family:var(--disp); font-weight:800; font-size:13px; color:var(--gold); margin-top:2px; }
.shopmod .small { display:block; text-align:center; font-weight:700; font-size:12.5px; color:var(--gold); padding:0 16px 15px; }

/* ---------- STOREFRONT screen header (artist shop) ---------- */
.shophead { position:relative; height:172px; flex-shrink:0; }
.shophead > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.1) brightness(.62); }
.shophead .sc { position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,5,12,.5) 0%, transparent 36%, rgba(13,10,21,.5) 70%, var(--n0) 100%); }
.shophead .ptop { position:absolute; top:34px; left:16px; right:16px; z-index:6; display:flex; align-items:center; justify-content:space-between; }
.shophead .ptop .r { display:flex; gap:9px; }
.shophead .ptop .cir { width:38px; height:38px; border-radius:50%; background:rgba(7,5,12,.42); backdrop-filter:blur(10px); border:1px solid rgba(247,242,234,.16); display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; }
.shophead .ptop .cir .nb { position:absolute; top:-1px; right:-1px; min-width:15px; height:15px; padding:0 4px; border-radius:999px; background:var(--pink); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px rgba(7,5,12,.8); }
.shophead .si { position:absolute; left:20px; right:20px; bottom:14px; display:flex; align-items:center; gap:12px; }
.shophead .si .av { width:48px; height:48px; border-radius:50%; background-size:cover; background-position:center; border:2px solid var(--n0); flex-shrink:0; }
.shophead .si .t .eye { font-weight:700; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.shophead .si .t .nm { font-family:var(--disp); font-weight:800; font-size:21px; color:#fff; letter-spacing:-.02em; line-height:1.05; }
.shophead .si .t .mt { font-size:11px; color:rgba(247,242,234,.78); margin-top:2px; }

/* featured drop band */
.shdrop { position:relative; z-index:2; margin:14px 20px 4px; border-radius:18px; overflow:hidden; border:1px solid rgba(255,210,61,.3);
  background:linear-gradient(150deg, rgba(255,210,61,.1), var(--n2) 64%); }
.shdrop .dph { position:relative; height:160px; }
.shdrop .dph img { width:100%; height:100%; object-fit:cover; filter:saturate(1.1) brightness(.86); }
.shdrop .dph .sc { position:absolute; inset:0; background:linear-gradient(110deg, rgba(7,5,12,.65), transparent 60%); }
.shdrop .dph .flag { position:absolute; top:11px; left:11px; display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--acid-ink); background:var(--acid); padding:5px 10px; border-radius:999px; }
.shdrop .dph .flag .d { width:6px; height:6px; border-radius:50%; background:var(--acid-ink); animation:ghpulse 1.6s infinite; }
.shdrop .dbd { padding:14px 16px 16px; }
.shdrop .dbd .nm { font-family:var(--disp); font-weight:800; font-size:19px; color:var(--bone); letter-spacing:-.01em; }
.shdrop .dbd .ds { font-size:12px; color:var(--bone-2); margin-top:4px; line-height:1.45; }
.shdrop .drow { display:flex; align-items:center; gap:12px; margin-top:13px; }
.shdrop .cdmini { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; background:rgba(255,210,61,.1); border:1px solid rgba(255,210,61,.3); }
.shdrop .cdmini .lab { font-weight:700; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--acid); }
.shdrop .cdmini b { font-family:var(--disp); font-weight:800; font-size:14px; color:var(--bone); font-variant-numeric:tabular-nums; }
.shdrop .dbtn { margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:13px; color:var(--acid-ink); background:var(--acid); padding:10px 16px; border-radius:999px; box-shadow:0 6px 18px -7px var(--gold-glow); }

/* fulfillment toggle (Ship / Collect at show) */
.fulftoggle { display:flex; gap:0; margin:16px 20px 2px; padding:4px; border-radius:13px; background:var(--n2); border:1px solid var(--hair-2); }
.fulftoggle .ft { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; height:40px; border-radius:10px; font-weight:600; font-size:12.5px; color:var(--bone-3); }
.fulftoggle .ft i { font-size:15px; }
.fulftoggle .ft.on { background:var(--sunset); color:#fff; box-shadow:0 5px 14px -6px var(--pink-glow); }
.fulfnote { font-size:11px; color:var(--bone-3); padding:8px 20px 0; display:flex; align-items:center; gap:7px; }
.fulfnote i { color:var(--gold); font-size:13px; }

/* category chips */
.shcats { display:flex; gap:8px; padding:14px 20px 4px; overflow-x:auto; scrollbar-width:none; }
.shcats::-webkit-scrollbar { display:none; }
.shcat { flex-shrink:0; font-weight:600; font-size:12.5px; color:var(--bone-2); padding:8px 14px; border-radius:999px; background:var(--n2); border:1px solid var(--hair-2); }
.shcat.on { background:var(--bone); color:var(--n0); border-color:transparent; }

/* product grid (2-up) */
.pgrid { display:grid; grid-template-columns:1fr 1fr; gap:13px; padding:10px 20px 0; }
.pcard { border-radius:15px; overflow:hidden; background:var(--n2); border:1px solid var(--hair); }
.pcard .ph { position:relative; aspect-ratio:1; background:var(--n3); }
.pcard .ph img { width:100%; height:100%; object-fit:cover; }
.pcard .ph .flags { position:absolute; top:8px; left:8px; right:8px; display:flex; align-items:flex-start; justify-content:space-between; gap:6px; }
.pcard .ph .ltag { font-weight:700; font-size:8px; letter-spacing:.06em; text-transform:uppercase; padding:4px 7px; border-radius:999px; }
.pcard .ph .ltag.drop { color:var(--acid-ink); background:var(--acid); }
.pcard .ph .ltag.low { color:#fff; background:rgba(255,69,58,.85); }
.pcard .ph .ltag.new { color:#fff; background:var(--sunset); }
.pcard .ph .sav { width:30px; height:30px; border-radius:50%; background:rgba(7,5,12,.5); backdrop-filter:blur(8px); border:1px solid var(--hair-2); display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; flex-shrink:0; }
.pcard .ph .soldov { position:absolute; inset:0; background:rgba(7,5,12,.6); display:flex; align-items:center; justify-content:center; }
.pcard .ph .soldov span { font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#fff; border:1px solid var(--hair-2); padding:6px 12px; border-radius:999px; background:rgba(7,5,12,.5); }
.pcard .bd { padding:11px 12px 13px; }
.pcard .bd .nm { font-weight:600; font-size:13px; color:var(--bone); line-height:1.25; min-height:32px; }
.pcard .bd .vr { display:flex; align-items:center; gap:5px; margin-top:8px; }
.pcard .bd .vr .sw { width:13px; height:13px; border-radius:50%; border:1px solid rgba(247,242,234,.25); }
.pcard .bd .vr .more { font-size:10px; color:var(--bone-3); margin-left:2px; }
.pcard .bd .prow { display:flex; align-items:baseline; justify-content:space-between; margin-top:9px; }
.pcard .bd .pr { font-family:var(--disp); font-weight:800; font-size:16px; color:var(--bone); }
.pcard .bd .pr .was { font-family:var(--grot); font-weight:500; font-size:11px; color:var(--bone-4); text-decoration:line-through; margin-left:5px; }
.pcard .bd .ship { font-size:9.5px; color:var(--bone-3); display:flex; align-items:center; gap:4px; }
.pcard .bd .ship i { font-size:11px; }
.pcard .bd .ship.coll { color:var(--gold); }

/* trust / shipping band */
.shtrust { display:flex; gap:9px; padding:18px 20px 4px; }
.shtrust .tc { flex:1; border-radius:13px; background:var(--n2); border:1px solid var(--hair); padding:12px 12px; text-align:center; }
.shtrust .tc i { font-size:18px; color:var(--gold); }
.shtrust .tc .t { font-weight:600; font-size:11px; color:var(--bone); margin-top:6px; }
.shtrust .tc .s { font-size:9.5px; color:var(--bone-3); margin-top:2px; line-height:1.3; }

/* ---------- PRODUCT DETAIL ---------- */
.pdgal { position:relative; aspect-ratio:1/1.04; flex-shrink:0; background:var(--n3); }
.pdgal > img { width:100%; height:100%; object-fit:cover; }
.pdgal .sc { position:absolute; top:0; left:0; right:0; height:120px; background:linear-gradient(180deg, rgba(7,5,12,.5), transparent); }
.pdgal .ptop { position:absolute; top:34px; left:16px; right:16px; z-index:6; display:flex; align-items:center; justify-content:space-between; }
.pdgal .ptop .cir { width:38px; height:38px; border-radius:50%; background:rgba(7,5,12,.42); backdrop-filter:blur(10px); border:1px solid rgba(247,242,234,.16); display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; }
.pdgal .ptop .r { display:flex; gap:9px; }
.pdgal .gflag { position:absolute; left:16px; bottom:60px; display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--acid-ink); background:var(--acid); padding:5px 10px; border-radius:999px; }
.pdgal .gdots { position:absolute; left:0; right:0; bottom:18px; display:flex; gap:6px; justify-content:center; }
.pdgal .gdots i { width:6px; height:6px; border-radius:50%; background:rgba(247,242,234,.4); }
.pdgal .gdots i.on { width:18px; border-radius:3px; background:#fff; }
.pdthumbs { display:flex; gap:9px; padding:12px 20px 0; }
.pdthumbs .th { width:54px; height:54px; border-radius:11px; overflow:hidden; border:1px solid var(--hair-2); flex-shrink:0; }
.pdthumbs .th.on { border-color:var(--pink); box-shadow:0 0 0 2px rgba(255,46,147,.25); }
.pdthumbs .th img { width:100%; height:100%; object-fit:cover; }

.pdhead { padding:16px 20px 0; }
.pdhead .by { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--bone-3); }
.pdhead .by .av { width:20px; height:20px; border-radius:50%; background-size:cover; background-position:center; }
.pdhead .by b { color:var(--gold); font-weight:600; }
.pdhead .by .vf { color:var(--purple-hi); font-size:12px; display:flex; }
.pdhead .nm { font-family:var(--disp); font-weight:800; font-size:25px; letter-spacing:-.02em; color:var(--bone); margin-top:9px; line-height:1.05; }
.pdhead .prow { display:flex; align-items:center; gap:10px; margin-top:9px; }
.pdhead .pr { font-family:var(--disp); font-weight:800; font-size:24px; color:var(--bone); }
.pdhead .pr .was { font-family:var(--grot); font-weight:500; font-size:14px; color:var(--bone-4); text-decoration:line-through; margin-left:6px; }
.pdhead .save { font-weight:700; font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--go); background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3); padding:4px 9px; border-radius:999px; }
.pdhead .stockline { display:flex; align-items:center; gap:7px; margin-top:11px; font-size:12px; color:var(--bone-2); }
.pdhead .stockline .d { width:7px; height:7px; border-radius:50%; background:var(--warn); }
.pdhead .stockline.low .d { background:var(--warn); animation:ghpulse 2s infinite; }
.pdhead .stockline b { color:var(--warn); font-weight:700; }

/* drop countdown bar (limited edition) */
.pdcount { margin:14px 20px 0; display:flex; align-items:center; gap:11px; padding:12px 15px; border-radius:14px; background:linear-gradient(150deg, rgba(255,210,61,.1), var(--n2) 70%); border:1px solid rgba(255,210,61,.3); }
.pdcount .ic { width:34px; height:34px; border-radius:10px; background:rgba(255,210,61,.14); display:flex; align-items:center; justify-content:center; color:var(--acid); font-size:17px; flex-shrink:0; }
.pdcount .t { flex:1; } .pdcount .t .l { font-weight:700; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--acid); } .pdcount .t .s { font-size:11.5px; color:var(--bone-2); margin-top:2px; }
.pdcount .timer { display:flex; gap:5px; }
.pdcount .timer .seg { text-align:center; background:rgba(7,5,12,.4); border-radius:8px; padding:5px 7px; min-width:34px; }
.pdcount .timer .seg b { display:block; font-family:var(--disp); font-weight:800; font-size:15px; color:var(--bone); font-variant-numeric:tabular-nums; line-height:1; }
.pdcount .timer .seg span { font-size:8px; color:var(--bone-3); letter-spacing:.06em; text-transform:uppercase; }

/* option groups (color swatch / size) */
.pdopt { padding:18px 20px 0; }
.pdopt .ol { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:11px; }
.pdopt .ol .l { font-weight:700; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-3); }
.pdopt .ol .v { font-size:12.5px; color:var(--bone); font-weight:600; }
.pdopt .ol .guide { font-size:11.5px; color:var(--pink-hi); font-weight:600; display:flex; align-items:center; gap:4px; }
.swrow { display:flex; gap:11px; }
.swrow .sw { width:42px; height:42px; border-radius:50%; position:relative; border:1px solid rgba(247,242,234,.18); }
.swrow .sw.on::after { content:''; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--bone); }
.swrow .sw.dis { opacity:.3; } .swrow .sw.dis::before { content:''; position:absolute; inset:0; border-radius:50%; background:linear-gradient(45deg, transparent 46%, rgba(255,69,58,.8) 46%, rgba(255,69,58,.8) 54%, transparent 54%); }
.sizerow { display:flex; gap:9px; flex-wrap:wrap; }
.sizebx { min-width:48px; height:46px; padding:0 13px; border-radius:12px; background:var(--n2); border:1px solid var(--hair-2); display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:700; font-size:14px; color:var(--bone); }
.sizebx.on { background:var(--bone); color:var(--n0); border-color:transparent; }
.sizebx.dis { color:var(--bone-4); position:relative; }
.sizebx.dis::after { content:''; position:absolute; left:8px; right:8px; top:50%; height:1px; background:var(--bone-4); transform:rotate(-12deg); }

/* fulfillment choice cards */
.fulfcards { display:flex; flex-direction:column; gap:10px; }
.fulfc { display:flex; align-items:center; gap:12px; padding:14px 15px; border-radius:14px; background:var(--n2); border:1px solid var(--hair-2); }
.fulfc.on { border-color:transparent; box-shadow:0 0 0 1.5px var(--gold); background:linear-gradient(150deg, rgba(255,194,75,.08), var(--n2) 60%); }
.fulfc .rad { width:22px; height:22px; border-radius:50%; border:2px solid var(--hair-2); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.fulfc.on .rad { border-color:var(--gold); } .fulfc.on .rad::after { content:''; width:11px; height:11px; border-radius:50%; background:var(--gold); }
.fulfc .fic { width:34px; height:34px; border-radius:10px; background:rgba(255,194,75,.12); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.fulfc .ft2 { flex:1; min-width:0; } .fulfc .ft2 .t { font-family:var(--disp); font-weight:700; font-size:14.5px; color:var(--bone); } .fulfc .ft2 .s { font-size:11px; color:var(--bone-3); margin-top:2px; line-height:1.35; }
.fulfc .px { font-weight:700; font-size:12px; color:var(--go); white-space:nowrap; }

/* product description / specs */
.pddesc { padding:18px 20px 0; }
.pddesc p { font-size:13.5px; line-height:1.6; color:var(--bone-2); margin:0; }
.pdspecs { margin:14px 20px 0; border-radius:14px; background:var(--n2); border:1px solid var(--hair); padding:4px 15px; }
.pdspecs .sr { display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--hair); font-size:12.5px; }
.pdspecs .sr:last-child { border-bottom:0; }
.pdspecs .sr i { color:var(--bone-3); font-size:15px; } .pdspecs .sr .k { color:var(--bone-3); flex:1; } .pdspecs .sr .v { color:var(--bone); font-weight:600; }

/* sticky add-to-bag bar */
.pdbar { position:relative; z-index:8; flex-shrink:0; border-top:1px solid var(--hair); background:rgba(7,5,12,.92); backdrop-filter:blur(22px); padding:12px 18px 16px; display:flex; align-items:center; gap:13px; }
.pdbar .qty { display:flex; align-items:center; background:var(--n2); border:1px solid var(--hair-2); border-radius:999px; padding:5px 6px; }
.pdbar .qty .b { width:30px; height:30px; border-radius:50%; background:rgba(247,242,234,.06); color:var(--bone); display:flex; align-items:center; justify-content:center; font-size:17px; }
.pdbar .qty .v { font-family:var(--disp); font-weight:700; font-size:16px; color:var(--bone); min-width:26px; text-align:center; }
.pdbar .addbag { flex:1; height:52px; border-radius:14px; border:0; background:var(--sunset); color:#fff; font-family:var(--grot); font-weight:700; font-size:14.5px; display:flex; align-items:center; justify-content:center; gap:9px; box-shadow:0 8px 22px -6px var(--pink-glow); }
.pdbar .addbag i { font-size:17px; }
.pdbar .addbag .px { opacity:.85; font-weight:600; }
.pdbar .addbag.sold { background:linear-gradient(180deg,#3A3348,#2A2438); color:var(--bone-4); box-shadow:none; }

/* ---------- BAG / MERCH CHECKOUT (reuses .ckphone shell) ---------- */
.bagitem { display:flex; gap:13px; padding:13px 0; border-bottom:1px solid var(--hair); }
.bagitem:last-of-type { border-bottom:0; }
.bagitem .bph { width:72px; height:72px; border-radius:12px; overflow:hidden; background:var(--n3); flex-shrink:0; }
.bagitem .bph img { width:100%; height:100%; object-fit:cover; }
.bagitem .bi { flex:1; min-width:0; }
.bagitem .bi .seller { font-size:10px; color:var(--gold); font-weight:600; }
.bagitem .bi .nm { font-weight:600; font-size:14px; color:var(--bone); margin-top:2px; line-height:1.25; }
.bagitem .bi .var { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.bagitem .bi .var .vt { font-size:10.5px; color:var(--bone-2); background:rgba(247,242,234,.05); border:1px solid var(--hair); padding:3px 8px; border-radius:7px; }
.bagitem .bi .ful { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--gold); margin-top:7px; } .bagitem .bi .ful i { font-size:12px; }
.bagitem .br { text-align:right; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; }
.bagitem .br .pr { font-family:var(--disp); font-weight:800; font-size:16px; color:var(--bone); }
.bagitem .br .qty2 { display:flex; align-items:center; gap:10px; background:var(--n2); border:1px solid var(--hair-2); border-radius:999px; padding:4px 6px; margin-top:8px; }
.bagitem .br .qty2 .b { width:24px; height:24px; border-radius:50%; background:rgba(247,242,234,.06); color:var(--bone); display:flex; align-items:center; justify-content:center; font-size:14px; }
.bagitem .br .qty2 .v { font-weight:700; font-size:13px; color:var(--bone); min-width:14px; text-align:center; }

/* fulfillment summary block in checkout */
.fulfsec { margin:6px 0 0; }
.fulfblk { border-radius:14px; background:var(--n2); border:1px solid var(--hair-2); overflow:hidden; }
.fulfblk .fh { display:flex; align-items:center; gap:10px; padding:13px 15px; }
.fulfblk .fh .ic { width:34px; height:34px; border-radius:10px; background:rgba(255,194,75,.12); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.fulfblk .fh .ft { flex:1; } .fulfblk .fh .ft .t { font-weight:600; font-size:13.5px; color:var(--bone); } .fulfblk .fh .ft .s { font-size:11px; color:var(--bone-3); margin-top:2px; }
.fulfblk .fh .ch { font-weight:600; font-size:12px; color:var(--pink-hi); }
.fulfblk .addr { border-top:1px solid var(--hair); padding:13px 15px; font-size:12.5px; color:var(--bone-2); line-height:1.5; }
.fulfblk .addr b { color:var(--bone); font-weight:600; }
.fulfblk .pickup { border-top:1px solid var(--hair); padding:13px 15px; display:flex; align-items:center; gap:10px; }
.fulfblk .pickup i { color:var(--gold); font-size:16px; }
.fulfblk .pickup .pt { font-size:12px; color:var(--bone-2); line-height:1.4; } .fulfblk .pickup .pt b { color:var(--bone); font-weight:600; }

/* ---------- ORDER CONFIRMED (collect) reuses .ckok / qrcard ---------- */
.ordtrack { margin:18px 20px 0; }
.ordtl { position:relative; padding-left:30px; }
.ordtl::before { content:''; position:absolute; left:10px; top:8px; bottom:24px; width:2px; background:var(--hair-2); }
.ordtl .step { position:relative; padding:0 0 20px; }
.ordtl .step:last-child { padding-bottom:0; }
.ordtl .step .dot { position:absolute; left:-30px; top:1px; width:22px; height:22px; border-radius:50%; background:var(--n2); border:2px solid var(--hair-2); display:flex; align-items:center; justify-content:center; color:var(--bone-4); font-size:11px; }
.ordtl .step.done .dot { background:var(--go); border-color:var(--go); color:#06281C; }
.ordtl .step.now .dot { background:var(--pink); border-color:var(--pink); color:#fff; box-shadow:0 0 0 4px rgba(255,46,147,.18); }
.ordtl .step .t { font-weight:600; font-size:13.5px; color:var(--bone); }
.ordtl .step.todo .t { color:var(--bone-3); }
.ordtl .step .s { font-size:11.5px; color:var(--bone-3); margin-top:2px; }
.ordtl .step .s b { color:var(--bone-2); }

/* ---------- BUYER ORDERS (in Pass) ---------- */
.ordseg { position:relative; z-index:6; display:flex; gap:22px; padding:0 20px; border-bottom:1px solid var(--hair); }
.ordseg .s { padding:12px 0; border-bottom:2px solid transparent; color:var(--bone-3); font-weight:600; font-size:13.5px; }
.ordseg .s.on { color:var(--bone); border-bottom-color:var(--gold); }
.ordcard { position:relative; z-index:5; margin:14px 20px 0; border-radius:16px; background:var(--n2); border:1px solid var(--hair); overflow:hidden; }
.ordcard .oh { display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid var(--hair); }
.ordcard .oh .seller { display:flex; align-items:center; gap:7px; flex:1; }
.ordcard .oh .seller .av { width:24px; height:24px; border-radius:50%; background-size:cover; background-position:center; }
.ordcard .oh .seller .nm { font-weight:600; font-size:12.5px; color:var(--bone); } .ordcard .oh .seller .vf { color:var(--purple-hi); font-size:12px; display:flex; }
.ordcard .oh .ostat { display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:10px; letter-spacing:.04em; padding:5px 10px; border-radius:999px; }
.ordcard .oh .ostat.ship { color:var(--purple-hi); background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.3); }
.ordcard .oh .ostat.ready { color:var(--gold); background:rgba(255,210,61,.1); border:1px solid rgba(255,210,61,.3); }
.ordcard .oh .ostat.done { color:var(--go); background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.28); }
.ordcard .oitems { display:flex; gap:10px; padding:13px 14px; }
.ordcard .oitems .opic { width:56px; height:56px; border-radius:11px; overflow:hidden; background:var(--n3); flex-shrink:0; position:relative; }
.ordcard .oitems .opic img { width:100%; height:100%; object-fit:cover; }
.ordcard .oitems .opic .mq { position:absolute; right:3px; bottom:3px; font-size:9px; font-weight:700; color:#fff; background:rgba(7,5,12,.72); padding:2px 6px; border-radius:6px; }
.ordcard .oitems .oi { flex:1; min-width:0; }
.ordcard .oitems .oi .nm { font-weight:600; font-size:13.5px; color:var(--bone); line-height:1.25; }
.ordcard .oitems .oi .mt { font-size:11px; color:var(--bone-3); margin-top:4px; }
.ordcard .oitems .oi .mt b { color:var(--bone-2); }
.ordcard .oitems .oi .when { font-size:11px; color:var(--gold); margin-top:5px; display:flex; align-items:center; gap:5px; } .ordcard .oitems .oi .when i { font-size:12px; }
.ordcard .ofoot { display:flex; align-items:center; gap:10px; padding:0 14px 14px; }
.ordcard .ofoot .tot { font-size:12px; color:var(--bone-3); } .ordcard .ofoot .tot b { font-family:var(--disp); font-weight:800; font-size:15px; color:var(--bone); }
.ordcard .ofoot .obtn { margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:12.5px; padding:9px 15px; border-radius:999px; }
.ordcard .ofoot .obtn.collect { background:var(--acid); color:var(--acid-ink); box-shadow:0 5px 14px -6px var(--gold-glow); }
.ordcard .ofoot .obtn.track { background:rgba(247,242,234,.06); border:1px solid var(--hair-2); color:var(--bone); }

/* ---------- SELLER · shop manager ---------- */
.shmgrtabs { position:relative; z-index:6; display:flex; gap:22px; padding:0 20px; border-bottom:1px solid var(--hair); }
.shmgrtabs .t { display:flex; align-items:center; gap:6px; padding:12px 0; border-bottom:2px solid transparent; color:var(--bone-3); font-weight:600; font-size:13.5px; }
.shmgrtabs .t i { font-size:15px; }
.shmgrtabs .t.on { color:var(--bone); border-bottom-color:var(--gold); } .shmgrtabs .t.on i { color:var(--gold); }
.shstats { display:flex; gap:10px; padding:16px 20px 4px; }
.shstat { flex:1; border-radius:14px; background:var(--n2); border:1px solid var(--hair); padding:13px; }
.shstat .v { font-family:var(--disp); font-weight:800; font-size:21px; color:var(--bone); } .shstat .v.acid { color:var(--acid); } .shstat .v.go { color:var(--go); }
.shstat .l { font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-3); margin-top:3px; }
.shstat .tr { font-size:10px; color:var(--go); margin-top:4px; display:flex; align-items:center; gap:3px; } .shstat .tr i { font-size:11px; }
.payoutcard { margin:12px 20px 0; border-radius:16px; padding:15px 16px; background:linear-gradient(150deg, rgba(52,211,153,.1), var(--n2) 70%); border:1px solid rgba(52,211,153,.28); }
.payoutcard .ph { display:flex; align-items:center; gap:11px; }
.payoutcard .ph .ic { width:38px; height:38px; border-radius:11px; background:rgba(52,211,153,.16); color:var(--go); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.payoutcard .ph .pt { flex:1; } .payoutcard .ph .pt .l { font-size:11px; color:var(--bone-3); } .payoutcard .ph .pt .v { font-family:var(--disp); font-weight:800; font-size:22px; color:var(--bone); } 
.payoutcard .ph .pb2 { font-weight:700; font-size:12px; color:#06281C; background:var(--go); padding:9px 14px; border-radius:999px; }
.payoutcard .nx { font-size:11px; color:var(--bone-3); margin-top:10px; }

.shmgrsec { font-weight:600; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-3); padding:20px 20px 8px; display:flex; align-items:center; justify-content:space-between; }
.shmgrsec .add { font-family:var(--grot); font-weight:700; font-size:12px; color:var(--gold); display:flex; align-items:center; gap:5px; letter-spacing:0; text-transform:none; }
.prow2 { display:flex; align-items:center; gap:12px; margin:0 20px 10px; padding:11px 12px; border-radius:14px; background:var(--n2); border:1px solid var(--hair); }
.prow2 .ph { width:52px; height:52px; border-radius:11px; overflow:hidden; background:var(--n3); flex-shrink:0; position:relative; }
.prow2 .ph img { width:100%; height:100%; object-fit:cover; }
.prow2 .ph.dim img { opacity:.4; }
.prow2 .pi { flex:1; min-width:0; }
.prow2 .pi .nm { font-weight:600; font-size:13.5px; color:var(--bone); line-height:1.2; }
.prow2 .pi .mt { display:flex; align-items:center; gap:8px; margin-top:5px; font-size:11px; color:var(--bone-3); }
.prow2 .pi .mt .pr { color:var(--bone); font-weight:600; }
.prow2 .stk { display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:10px; padding:4px 9px; border-radius:999px; }
.prow2 .stk.ok { color:var(--go); background:rgba(52,211,153,.1); }
.prow2 .stk.low { color:var(--warn); background:rgba(255,176,32,.1); }
.prow2 .stk.out { color:#FF6A60; background:rgba(255,69,58,.1); }
.prow2 .men { color:var(--bone-3); font-size:18px; display:flex; flex-shrink:0; }

/* order row (seller view) */
.sordrow { display:flex; align-items:center; gap:12px; margin:0 20px 10px; padding:12px; border-radius:14px; background:var(--n2); border:1px solid var(--hair); }
.sordrow .av { width:38px; height:38px; border-radius:50%; background-size:cover; background-position:center; flex-shrink:0; }
.sordrow .si { flex:1; min-width:0; }
.sordrow .si .nm { font-weight:600; font-size:13px; color:var(--bone); } .sordrow .si .nm b { color:var(--bone); }
.sordrow .si .mt { font-size:11px; color:var(--bone-3); margin-top:3px; } .sordrow .si .mt .ful { color:var(--gold); font-weight:600; }
.sordrow .amt { font-family:var(--disp); font-weight:800; font-size:15px; color:var(--bone); white-space:nowrap; }
.sordrow .act { font-weight:700; font-size:11px; color:var(--gold); white-space:nowrap; }

/* image upload slot (add product) */
.upslot { margin:0 0 6px; display:flex; gap:10px; }
.upslot .main { width:96px; height:96px; border-radius:14px; border:1.5px dashed var(--hair-2); background:var(--n2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--bone-3); flex-shrink:0; }
.upslot .main i { font-size:22px; color:var(--gold); } .upslot .main span { font-size:10px; }
.upslot .thumbs { display:flex; gap:8px; flex-wrap:wrap; flex:1; }
.upslot .thumbs .u { width:64px; height:64px; border-radius:11px; overflow:hidden; border:1px solid var(--hair-2); position:relative; }
.upslot .thumbs .u img { width:100%; height:100%; object-fit:cover; }
.upslot .thumbs .u .x { position:absolute; top:3px; right:3px; width:16px; height:16px; border-radius:50%; background:rgba(7,5,12,.7); color:#fff; display:flex; align-items:center; justify-content:center; font-size:9px; }
.varadd { display:flex; flex-wrap:wrap; gap:8px; }
.varadd .vchip { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--bone-2); padding:8px 12px; border-radius:10px; background:var(--n2); border:1px solid var(--hair-2); }
.varadd .vchip .sw { width:13px; height:13px; border-radius:50%; } .varadd .vchip .x { color:var(--bone-4); font-size:12px; }
.varadd .vchip.add { color:var(--gold); border-style:dashed; }

/* ---------- RESALE MARKETPLACE ---------- */
.mkbanner { position:relative; z-index:5; margin:8px 20px 0; display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:15px; background:rgba(52,211,153,.07); border:1px solid rgba(52,211,153,.26); }
.mkbanner .ic { width:34px; height:34px; border-radius:10px; background:rgba(52,211,153,.15); color:var(--go); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.mkbanner .t { flex:1; font-size:12px; color:var(--bone-2); line-height:1.4; } .mkbanner .t b { color:var(--bone); font-weight:700; }
.mkstats { display:flex; gap:10px; padding:14px 20px 4px; }
.mkstats .ms { flex:1; border-radius:13px; background:var(--n2); border:1px solid var(--hair); padding:12px; text-align:center; }
.mkstats .ms .v { font-family:var(--disp); font-weight:800; font-size:18px; color:var(--bone); } .mkstats .ms .v.go { color:var(--go); }
.mkstats .ms .l { font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-3); margin-top:3px; }
.mkevt { display:flex; gap:12px; align-items:center; padding:14px 20px 4px; }
.mkevt img { width:54px; height:54px; border-radius:13px; object-fit:cover; flex-shrink:0; }
.mkevt .mi { flex:1; min-width:0; } .mkevt .mi .nm { font-family:var(--disp); font-weight:700; font-size:17px; color:var(--bone); } .mkevt .mi .mt { font-size:11.5px; color:var(--bone-3); margin-top:3px; }

.lcard { margin:0 20px 12px; border-radius:16px; background:var(--n2); border:1px solid var(--hair-2); overflow:hidden; }
.lcard .lh { display:flex; align-items:center; gap:11px; padding:13px 14px; }
.lcard .lh .tierb { display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:10px; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:999px; }
.lcard .lh .tierb.ga { color:var(--bone); background:rgba(247,242,234,.06); border:1px solid var(--hair-2); }
.lcard .lh .tierb.vip { color:#fff; background:linear-gradient(135deg,#8B5CF6,#C084FC); }
.lcard .lh .price { margin-left:auto; text-align:right; }
.lcard .lh .price .v { font-family:var(--disp); font-weight:800; font-size:20px; color:var(--bone); }
.lcard .lh .price .was { font-size:11px; color:var(--bone-4); text-decoration:line-through; }
.lcard .fair { display:flex; align-items:center; gap:8px; padding:0 14px 12px; }
.lcard .fair .meter { flex:1; height:6px; border-radius:999px; background:rgba(7,5,12,.4); overflow:hidden; position:relative; }
.lcard .fair .meter i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--go),var(--gold)); }
.lcard .fair .meter .cap { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--bone-3); }
.lcard .fair .lab { font-weight:700; font-size:10px; letter-spacing:.03em; white-space:nowrap; }
.lcard .fair .lab.below { color:var(--go); } .lcard .fair .lab.face { color:var(--gold); }
.lcard .lseller { display:flex; align-items:center; gap:10px; padding:12px 14px; border-top:1px solid var(--hair); }
.lcard .lseller .av { width:32px; height:32px; border-radius:50%; background-size:cover; background-position:center; flex-shrink:0; }
.lcard .lseller .si { flex:1; min-width:0; }
.lcard .lseller .si .nm { font-weight:600; font-size:12.5px; color:var(--bone); display:flex; align-items:center; gap:5px; } .lcard .lseller .si .nm .vf { color:var(--go); font-size:12px; display:flex; }
.lcard .lseller .si .rt { display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--bone-3); margin-top:2px; } .lcard .lseller .si .rt i { color:var(--acid); font-size:11px; }
.lcard .lseller .lbtn { font-weight:700; font-size:12.5px; color:#fff; background:var(--sunset); padding:9px 16px; border-radius:999px; box-shadow:0 5px 14px -6px var(--pink-glow); }
.lcard .lnote { padding:0 14px 13px; font-size:11.5px; font-style:italic; color:var(--bone-3); }

/* listing detail: fee breakdown */
.feebd { margin:14px 20px 0; border-radius:16px; background:var(--n2); border:1px solid var(--hair); padding:15px; }
.feebd .fr { display:flex; justify-content:space-between; align-items:center; padding:7px 0; font-size:13px; }
.feebd .fr .k { color:var(--bone-2); } .feebd .fr .v { color:var(--bone); font-weight:600; font-variant-numeric:tabular-nums; }
.feebd .fr.muted .k, .feebd .fr.muted .v { color:var(--bone-3); }
.feebd .fr.save .k, .feebd .fr.save .v { color:var(--go); font-style:italic; }
.feebd .ftot { display:flex; justify-content:space-between; align-items:baseline; padding-top:11px; margin-top:5px; border-top:1px solid var(--hair-2); }
.feebd .ftot .k { font-family:var(--disp); font-weight:700; font-size:16px; color:var(--bone); } .feebd .ftot .v { font-family:var(--disp); font-weight:800; font-size:21px; color:var(--bone); }

/* fair-cap explainer pill */
.cappill { display:inline-flex; align-items:center; gap:7px; margin:14px 20px 0; padding:9px 13px; border-radius:12px; background:rgba(52,211,153,.07); border:1px solid rgba(52,211,153,.26); font-size:11.5px; color:var(--bone-2); line-height:1.4; }
.cappill i { color:var(--go); font-size:15px; flex-shrink:0; }
.cappill b { color:var(--bone); font-weight:600; }

/* create listing: price input + cap slider */
.priceinput { margin:0 20px; display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:16px; background:var(--n2); border:1px solid var(--hair-2); }
.priceinput .cur { font-family:var(--disp); font-weight:800; font-size:30px; color:var(--bone-3); }
.priceinput .amt { font-family:var(--disp); font-weight:800; font-size:40px; color:var(--bone); line-height:1; flex:1; }
.priceinput .cur2 { font-size:13px; color:var(--bone-3); font-weight:600; }
.caprange { margin:14px 20px 0; }
.caprange .track { position:relative; height:8px; border-radius:999px; background:rgba(7,5,12,.5); }
.caprange .track .fill { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg,var(--go),var(--gold)); }
.caprange .track .knob { position:absolute; top:50%; transform:translate(-50%,-50%); width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.4); border:3px solid var(--gold); }
.caprange .track .capline { position:absolute; top:-5px; bottom:-5px; width:2px; background:var(--bone-3); }
.caprange .marks { display:flex; justify-content:space-between; margin-top:10px; font-size:10.5px; color:var(--bone-3); }
.caprange .marks .face { color:var(--gold); font-weight:600; } .caprange .marks .max { color:var(--bone-2); }

/* my-listings status pill row */
.mlcard { margin:0 20px 12px; border-radius:15px; background:var(--n2); border:1px solid var(--hair); overflow:hidden; }
.mlcard .mh { display:flex; gap:12px; padding:13px 14px; }
.mlcard .mh img { width:58px; height:58px; border-radius:12px; object-fit:cover; flex-shrink:0; }
.mlcard .mh .mi { flex:1; min-width:0; } .mlcard .mh .mi .nm { font-family:var(--disp); font-weight:700; font-size:15px; color:var(--bone); } .mlcard .mh .mi .mt { font-size:11px; color:var(--bone-3); margin-top:3px; } .mlcard .mh .mi .tier { font-size:11px; color:var(--bone-2); margin-top:4px; }
.mlcard .mh .mp { text-align:right; } .mlcard .mh .mp .v { font-family:var(--disp); font-weight:800; font-size:17px; color:var(--bone); } .mlcard .mh .mp .st { font-weight:700; font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:999px; margin-top:5px; display:inline-block; }
.mlcard .mp .st.active { color:var(--go); background:rgba(52,211,153,.1); } .mlcard .mp .st.sold { color:var(--purple-hi); background:rgba(139,92,246,.12); } .mlcard .mp .st.exp { color:var(--bone-3); background:rgba(247,242,234,.05); }
.mlcard .mfoot { display:flex; align-items:center; gap:9px; padding:0 14px 13px; }
.mlcard .mfoot .earn { font-size:11.5px; color:var(--bone-3); } .mlcard .mfoot .earn b { color:var(--go); font-weight:700; }
.mlcard .mfoot .mbtn { font-weight:700; font-size:12px; padding:8px 14px; border-radius:999px; }
.mlcard .mfoot .mbtn.edit { background:rgba(247,242,234,.06); border:1px solid var(--hair-2); color:var(--bone); }
.mlcard .mfoot .mbtn.cancel { background:rgba(255,69,58,.08); border:1px solid rgba(255,69,58,.3); color:#FF6A60; }
.mlcard .mfoot .ml-r { margin-left:auto; display:flex; gap:9px; }

/* ============================================================
   ENTRY POINTS — merch teaser (event detail) · resale strip
   (sold out) · merch step inside the ticket-purchase flow
   ============================================================ */

/* merch teaser band on the public event detail */
.merchband { margin:18px 20px 4px; border-radius:18px; overflow:hidden; border:1px solid rgba(255,194,75,.28);
  background:linear-gradient(150deg, rgba(255,194,75,.1), rgba(255,46,147,.05) 72%); }
.merchband .mb-h { display:flex; align-items:center; gap:11px; padding:15px 16px 0; }
.merchband .mb-ic { width:38px; height:38px; border-radius:11px; background:rgba(255,194,75,.16); border:1px solid rgba(255,194,75,.34); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:18px; flex-shrink:0; }
.merchband .mb-t { flex:1; min-width:0; } .merchband .mb-t .h { font-family:var(--disp); font-weight:700; font-size:16px; color:var(--bone); } .merchband .mb-t .s { font-size:11.5px; color:var(--bone-2); margin-top:2px; } .merchband .mb-t .s b { color:var(--gold); font-weight:600; }
.merchband .mb-row { display:flex; gap:10px; padding:13px 16px; overflow-x:auto; scrollbar-width:none; } .merchband .mb-row::-webkit-scrollbar { display:none; }
.merchband .mb-p { width:90px; flex-shrink:0; } .merchband .mb-p .ph { width:90px; height:90px; border-radius:12px; overflow:hidden; background:var(--n3); position:relative; } .merchband .mb-p .ph img { width:100%; height:100%; object-fit:cover; } .merchband .mb-p .ph .dt { position:absolute; top:5px; left:5px; font-weight:700; font-size:7.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--acid-ink); background:var(--acid); padding:2px 5px; border-radius:999px; }
.merchband .mb-p .nm { font-size:11px; color:var(--bone); font-weight:500; margin-top:6px; line-height:1.2; } .merchband .mb-p .pr { font-family:var(--disp); font-weight:800; font-size:12.5px; color:var(--gold); margin-top:2px; }
.merchband .mb-cta { display:flex; align-items:center; justify-content:center; gap:7px; margin:0 16px 15px; height:42px; border-radius:12px; background:rgba(255,194,75,.12); border:1px solid rgba(255,194,75,.3); font-weight:700; font-size:13px; color:var(--gold); }

/* resale entry strip on sold-out events */
.resaleband { margin:6px 20px 4px; border-radius:16px; overflow:hidden; border:1px solid rgba(52,211,153,.3);
  background:linear-gradient(150deg, rgba(52,211,153,.1), var(--n2) 70%); }
.resaleband .rb-top { display:flex; align-items:center; gap:12px; padding:15px 16px; }
.resaleband .rb-ic { width:42px; height:42px; border-radius:12px; background:rgba(52,211,153,.16); border:1px solid rgba(52,211,153,.34); display:flex; align-items:center; justify-content:center; color:var(--go); font-size:20px; flex-shrink:0; }
.resaleband .rb-t { flex:1; min-width:0; } .resaleband .rb-t .h { font-family:var(--disp); font-weight:700; font-size:16px; color:var(--bone); } .resaleband .rb-t .s { font-size:11.5px; color:var(--bone-2); margin-top:3px; } .resaleband .rb-t .s b { color:var(--go); font-weight:700; }
.resaleband .rb-pr { text-align:right; flex-shrink:0; } .resaleband .rb-pr .lab { font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-3); } .resaleband .rb-pr .v { font-family:var(--disp); font-weight:800; font-size:18px; color:var(--go); }
.resaleband .rb-cta { display:flex; align-items:center; justify-content:center; gap:7px; margin:0 16px 15px; height:46px; border-radius:13px; background:var(--go); color:#06281C; font-weight:700; font-size:13.5px; }
.resaleband .rb-cta i { font-size:16px; }
.resaleband .rb-note { display:flex; align-items:center; gap:6px; padding:0 16px 14px; font-size:10.5px; color:var(--bone-3); } .resaleband .rb-note i { color:var(--go); font-size:12px; }

/* merch step inside the ticket checkout (ckMerch) */
.ckmerch-hero { display:flex; align-items:center; gap:11px; margin-bottom:16px; padding:13px 14px; border-radius:14px; background:var(--sunset-soft); border:1px solid rgba(255,194,75,.26); }
.ckmerch-hero .ic { width:38px; height:38px; border-radius:11px; background:rgba(255,194,75,.16); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.ckmerch-hero .t { flex:1; } .ckmerch-hero .t .h { font-weight:700; font-size:13.5px; color:var(--bone); } .ckmerch-hero .t .s { font-size:11px; color:var(--bone-2); margin-top:2px; } .ckmerch-hero .t .s b { color:var(--gold); }
.ckmerch-list { display:flex; flex-direction:column; gap:11px; }
.ckmerch-item { display:flex; align-items:center; gap:12px; padding:11px; border-radius:14px; background:var(--n2); border:1px solid var(--hair-2); }
.ckmerch-item.on { border-color:var(--gold); background:linear-gradient(150deg, rgba(255,194,75,.07), var(--n2) 60%); }
.ckmerch-item .ph { width:58px; height:58px; border-radius:11px; overflow:hidden; background:var(--n3); flex-shrink:0; position:relative; } .ckmerch-item .ph img { width:100%; height:100%; object-fit:cover; } .ckmerch-item .ph .dt { position:absolute; top:4px; left:4px; font-weight:700; font-size:7px; letter-spacing:.05em; text-transform:uppercase; color:var(--acid-ink); background:var(--acid); padding:2px 5px; border-radius:999px; }
.ckmerch-item .mi { flex:1; min-width:0; } .ckmerch-item .mi .nm { font-weight:600; font-size:13.5px; color:var(--bone); line-height:1.2; } .ckmerch-item .mi .mt { font-size:11px; color:var(--bone-3); margin-top:4px; } .ckmerch-item .mi .coll { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; color:var(--gold); margin-top:5px; } .ckmerch-item .mi .coll i { font-size:11px; }
.ckmerch-item .mr { text-align:right; flex-shrink:0; } .ckmerch-item .mr .pr { font-family:var(--disp); font-weight:800; font-size:15px; color:var(--bone); }
.ckmerch-item .add { margin-top:8px; display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:11.5px; padding:7px 13px; border-radius:999px; border:1px solid var(--hair-2); color:var(--bone); background:rgba(247,242,234,.05); }
.ckmerch-item.on .add { background:var(--gold); color:var(--acid-ink); border-color:transparent; }
.ckmerch-item .add i { font-size:12px; }

/* sell-your-ticket entry on the event detail (when you hold a ticket) */
.sellstrip { margin:14px 20px 0; display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:15px; background:rgba(52,211,153,.07); border:1px solid rgba(52,211,153,.26); }
.sellstrip .ic { width:36px; height:36px; border-radius:10px; background:rgba(52,211,153,.15); color:var(--go); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.sellstrip .t { flex:1; min-width:0; } .sellstrip .t .h { font-family:var(--disp); font-weight:700; font-size:14px; color:var(--bone); } .sellstrip .t .s { font-size:11.5px; color:var(--bone-2); margin-top:2px; }
.sellstrip .chev { color:var(--go); font-size:16px; display:flex; flex-shrink:0; }

/* real-implementation nav: red invitation badge on the Tickets tab */
.nav .i { position:relative; }
.nav .i .navbadge { position:absolute; top:-5px; right:-8px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#EF4444; color:#fff; font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--n0); }

/* Option B: profile avatar moved into the top header (next to bell + DM) */
.hav { width:30px; height:30px; border-radius:50%; background-size:cover; background-position:center; position:relative; flex-shrink:0; }
.hav.on::after { content:''; position:absolute; inset:-3px; border-radius:50%; padding:1.5px; background:var(--sunset); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.bigtitle .bt-acts { display:flex; align-items:center; gap:12px; }
.feedhead .acts .hav { margin-left:2px; }
/* small caption banner under a mock header explaining the option */
.optcap { display:flex; align-items:center; gap:8px; margin:0 0 2px; padding:9px 18px; font-size:11px; line-height:1.35; color:var(--bone-2); background:rgba(139,92,246,.1); border-bottom:1px solid rgba(139,92,246,.2); }
.optcap i { color:var(--purple-hi); font-size:14px; flex-shrink:0; }
.optcap b { color:var(--bone); font-weight:700; }
.optcap.a { background:rgba(52,211,153,.1); border-bottom-color:rgba(52,211,153,.22); } .optcap.a i { color:var(--go); }
.optcap.top { padding-top:42px; }
/* marketplace hub */
.mkhub-seg { position:relative; z-index:6; display:flex; gap:22px; padding:0 20px; border-bottom:1px solid var(--hair); }
.mkhub-seg .s { display:flex; align-items:center; gap:7px; padding:13px 0; border-bottom:2px solid transparent; color:var(--bone-3); font-weight:600; font-size:14px; } .mkhub-seg .s i { font-size:16px; }
.mkhub-seg .s.on { color:var(--bone); border-bottom-color:var(--gold); } .mkhub-seg .s.on i { color:var(--gold); }
.mkhub-sec { display:flex; align-items:baseline; justify-content:space-between; padding:18px 20px 10px; }
.mkhub-sec .h { font-family:var(--disp); font-weight:700; font-size:17px; color:var(--bone); } .mkhub-sec .all { font-weight:600; font-size:12px; color:var(--gold); }

/* ============================================================
   SERVICES (3rd marketplace tab) — recovery, rides, glam, etc.
   Teal/green wellness accent to read distinct from merch (gold)
   and resale (green-on-listing). Uses --go family.
   ============================================================ */
.svc-hero { margin:14px 20px 4px; border-radius:18px; overflow:hidden; border:1px solid rgba(52,211,153,.3); background:linear-gradient(150deg, rgba(52,211,153,.14), rgba(139,92,246,.06) 72%); }
.svc-hero .top { display:flex; align-items:center; gap:13px; padding:16px 16px 0; }
.svc-hero .ic { width:46px; height:46px; border-radius:13px; background:rgba(52,211,153,.16); border:1px solid rgba(52,211,153,.36); display:flex; align-items:center; justify-content:center; color:var(--go); font-size:23px; flex-shrink:0; }
.svc-hero .t { flex:1; min-width:0; } .svc-hero .t .eye { font-weight:700; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--go); } .svc-hero .t .h { font-family:var(--disp); font-weight:800; font-size:20px; color:var(--bone); letter-spacing:-.01em; margin-top:3px; } .svc-hero .t .s { font-size:12px; color:var(--bone-2); margin-top:4px; line-height:1.4; }
.svc-hero .meta { display:flex; gap:8px; padding:13px 16px 0; flex-wrap:wrap; }
.svc-hero .chip { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--bone-2); background:rgba(247,242,234,.05); border:1px solid var(--hair); padding:6px 10px; border-radius:999px; } .svc-hero .chip i { font-size:12px; color:var(--go); }
.svc-hero .cta { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px 16px; }
.svc-hero .cta .pr { } .svc-hero .cta .pr .l { font-size:10px; color:var(--bone-3); } .svc-hero .cta .pr .v { font-family:var(--disp); font-weight:800; font-size:22px; color:var(--bone); } .svc-hero .cta .pr .v span { font-size:12px; color:var(--bone-3); font-weight:600; font-family:var(--grot); }
.svc-hero .cta .book { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:13.5px; color:#06281C; background:var(--go); padding:12px 18px; border-radius:13px; box-shadow:0 6px 18px -7px rgba(52,211,153,.6); }

/* service category cards (Recovery / Glam / Rides / Photo / Security) */
.svc-cats { display:flex; gap:11px; padding:10px 20px 4px; overflow-x:auto; scrollbar-width:none; } .svc-cats::-webkit-scrollbar { display:none; }
.svc-cat { flex-shrink:0; width:96px; text-align:center; border-radius:15px; padding:15px 8px 13px; background:var(--n2); border:1px solid var(--hair); }
.svc-cat .ci { width:46px; height:46px; border-radius:13px; margin:0 auto 9px; display:flex; align-items:center; justify-content:center; font-size:21px; }
.svc-cat .ci.rec { background:rgba(52,211,153,.13); color:var(--go); border:1px solid rgba(52,211,153,.3); }
.svc-cat .ci.glam { background:rgba(255,46,147,.12); color:var(--pink-hi); border:1px solid rgba(255,46,147,.3); }
.svc-cat .ci.ride { background:rgba(139,92,246,.14); color:var(--purple-hi); border:1px solid rgba(139,92,246,.3); }
.svc-cat .ci.photo { background:rgba(255,194,75,.13); color:var(--gold); border:1px solid rgba(255,194,75,.3); }
.svc-cat .ci.sec { background:rgba(247,242,234,.06); color:var(--bone); border:1px solid var(--hair-2); }
.svc-cat .cn { font-weight:700; font-size:11.5px; color:var(--bone); line-height:1.15; } .svc-cat .cc { font-size:9px; color:var(--bone-3); margin-top:3px; }

/* provider / service card */
.svccard { margin:0 20px 12px; border-radius:16px; background:var(--n2); border:1px solid var(--hair-2); overflow:hidden; }
.svccard .sh { display:flex; gap:12px; padding:13px 14px; }
.svccard .sic { width:50px; height:50px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:23px; background:rgba(52,211,153,.13); color:var(--go); border:1px solid rgba(52,211,153,.28); }
.svccard .sm { flex:1; min-width:0; }
.svccard .sm .nm { font-family:var(--disp); font-weight:700; font-size:15.5px; color:var(--bone); line-height:1.15; display:flex; align-items:center; gap:6px; } .svccard .sm .nm .vf { color:var(--go); font-size:13px; display:flex; }
.svccard .sm .rt { display:flex; align-items:center; gap:8px; margin-top:5px; font-size:11px; color:var(--bone-3); flex-wrap:wrap; } .svccard .sm .rt i { font-size:12px; } .svccard .sm .rt .star { color:var(--acid); } .svccard .sm .rt b { color:var(--bone-2); font-weight:600; }
.svccard .sp { text-align:right; flex-shrink:0; } .svccard .sp .l { font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-3); } .svccard .sp .v { font-family:var(--disp); font-weight:800; font-size:17px; color:var(--bone); }
.svccard .tags { display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 12px; } .svccard .tags .tg { font-size:10.5px; font-weight:500; color:var(--bone-2); background:rgba(247,242,234,.04); border:1px solid var(--hair); padding:4px 9px; border-radius:8px; }
.svccard .foot { display:flex; align-items:center; gap:10px; padding:11px 14px; border-top:1px solid var(--hair); }
.svccard .foot .avail { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--go); } .svccard .foot .avail .d { width:7px; height:7px; border-radius:50%; background:var(--go); } .svccard .foot .avail.soon { color:var(--warn); } .svccard .foot .avail.soon .d { background:var(--warn); }
.svccard .foot .bk { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:12.5px; color:#06281C; background:var(--go); padding:9px 16px; border-radius:999px; }

/* not-in-your-city request band */
.svc-city { margin:6px 20px 0; display:flex; align-items:center; gap:12px; padding:14px 15px; border-radius:15px; background:rgba(139,92,246,.08); border:1px dashed rgba(139,92,246,.34); }
.svc-city .ic { width:38px; height:38px; border-radius:11px; background:rgba(139,92,246,.14); color:var(--purple-hi); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.svc-city .t { flex:1; } .svc-city .t .h { font-family:var(--disp); font-weight:700; font-size:14px; color:var(--bone); } .svc-city .t .s { font-size:11.5px; color:var(--bone-2); margin-top:2px; }
.svc-city .req { font-weight:700; font-size:12px; color:var(--purple-hi); white-space:nowrap; }

/* ============================================================
   BUYER JOURNEY · item → who's selling it → seller shop
   (product-detail seller card + related rails + reviews, the
   seller-shop identity strip, exclusivity signal, reviews screen)
   ============================================================ */

/* shared star row (Lucide stars, gap-spaced — never letter-spacing on SVGs) */
.stars { display:inline-flex; gap:2px; align-items:center; color:var(--acid); line-height:1; }
.stars.dim i { color:var(--bone-4); }

/* product detail · the seller, made prominent + tappable → shop */
.pdseller { margin:20px 20px 0; border-radius:16px; background:var(--n2); border:1px solid var(--hair-2); overflow:hidden; }
.pdseller .ph2 { display:flex; align-items:center; gap:12px; padding:14px 15px; }
.pdseller .av { width:50px; height:50px; border-radius:50%; background-size:cover; background-position:center; border:2px solid var(--n0); box-shadow:0 0 0 1.5px var(--hair-2); flex-shrink:0; }
.pdseller .si { flex:1; min-width:0; }
.pdseller .si .nm { font-family:var(--disp); font-weight:800; font-size:16.5px; color:var(--bone); display:flex; align-items:center; gap:6px; line-height:1.1; } .pdseller .si .nm .vf { color:var(--purple-hi); font-size:14px; display:flex; }
.pdseller .si .rl { display:flex; align-items:center; gap:8px; margin-top:7px; flex-wrap:wrap; }
.pdseller .si .rt { font-size:11px; color:var(--bone-3); display:inline-flex; align-items:center; gap:5px; } .pdseller .si .rt .stars { font-size:11px; }
.pdseller .visit { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:12.5px; color:var(--bone); background:rgba(247,242,234,.06); border:1px solid var(--hair-2); padding:9px 14px; border-radius:999px; white-space:nowrap; flex-shrink:0; } .pdseller .visit i { font-size:13px; color:var(--bone-3); }
.pdseller .sold { border-top:1px solid var(--hair); padding:11px 15px; font-size:11.5px; color:var(--bone-2); display:flex; align-items:center; gap:8px; line-height:1.4; } .pdseller .sold i { color:var(--gold); font-size:14px; flex-shrink:0; } .pdseller .sold b { color:var(--bone); font-weight:600; }

/* product detail · related rails (more from seller / you may also like) */
.pdmore { padding-top:20px; }
.pdmore .mh2 { display:flex; align-items:baseline; justify-content:space-between; padding:0 20px 12px; } .pdmore .mh2 .h { font-family:var(--disp); font-weight:700; font-size:17px; color:var(--bone); } .pdmore .mh2 .all { font-weight:600; font-size:12px; color:var(--gold); }
.pdmore .row { display:flex; gap:12px; padding:0 20px; overflow-x:auto; scrollbar-width:none; } .pdmore .row::-webkit-scrollbar { display:none; }
.mpcard { width:130px; flex-shrink:0; }
.mpcard .ph { width:130px; height:130px; border-radius:13px; overflow:hidden; background:var(--n3); position:relative; } .mpcard .ph img { width:100%; height:100%; object-fit:cover; }
.mpcard .ph .by { position:absolute; left:6px; bottom:6px; right:6px; display:inline-flex; align-items:center; gap:4px; font-weight:700; font-size:8px; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:rgba(7,5,12,.55); backdrop-filter:blur(6px); padding:3px 7px; border-radius:999px; width:fit-content; max-width:100%; } .mpcard .ph .by i { font-size:9px; }
.mpcard .ph .by.artist { color:var(--pink-hi); } .mpcard .ph .by.venue { color:var(--purple-hi); }
.mpcard .ph .ltag { position:absolute; top:6px; left:6px; font-weight:700; font-size:8px; letter-spacing:.05em; text-transform:uppercase; padding:3px 7px; border-radius:999px; color:var(--acid-ink); background:var(--acid); }
.mpcard .nm { font-size:12px; color:var(--bone); font-weight:500; margin-top:8px; line-height:1.25; }
.mpcard .pr { font-family:var(--disp); font-weight:800; font-size:14px; color:var(--bone); margin-top:3px; }
.mpcard .pr .coll { font-family:var(--grot); font-weight:600; font-size:9.5px; color:var(--gold); margin-left:5px; }

/* product detail · reviews snapshot */
.pdrev { margin:22px 20px 0; border-radius:16px; background:var(--n2); border:1px solid var(--hair); padding:15px; }
.pdrev .rh { display:flex; align-items:center; gap:13px; padding-bottom:14px; border-bottom:1px solid var(--hair); }
.pdrev .rh .big { font-family:var(--disp); font-weight:800; font-size:32px; color:var(--bone); line-height:1; }
.pdrev .rh .rs .stars { font-size:13px; } .pdrev .rh .rs .ct { font-size:11px; color:var(--bone-3); margin-top:5px; }
.pdrev .rh .all2 { margin-left:auto; font-weight:600; font-size:12px; color:var(--gold); display:inline-flex; align-items:center; gap:4px; }
.pdrev .rv { display:flex; gap:11px; padding:14px 0 0; }
.pdrev .rv + .rv { border-top:1px solid var(--hair); }
.pdrev .rv .av { width:32px; height:32px; border-radius:50%; background-size:cover; background-position:center; flex-shrink:0; }
.pdrev .rv .rb { flex:1; min-width:0; } .pdrev .rv .rb .top { display:flex; align-items:center; gap:7px; } .pdrev .rv .rb .top .nm { font-weight:600; font-size:12.5px; color:var(--bone); } .pdrev .rv .rb .top .stars { font-size:10px; margin-left:auto; }
.pdrev .rv .rb .tx { font-size:12px; color:var(--bone-2); line-height:1.5; margin-top:6px; } .pdrev .rv .rb .vp { font-size:10px; color:var(--go); margin-top:7px; display:inline-flex; align-items:center; gap:4px; } .pdrev .rv .rb .vp i { font-size:11px; }

/* ---------- STOREFRONT · seller identity strip ---------- */
.shophead .si .follow { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:12.5px; color:#fff; background:var(--sunset); padding:9px 15px; border-radius:999px; box-shadow:0 5px 14px -6px var(--pink-glow); flex-shrink:0; } .shophead .si .follow i { font-size:13px; }
.shident { margin:14px 20px 0; padding:14px 16px; border-radius:16px; background:var(--n2); border:1px solid var(--hair); }
.shident .roles { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.shident .roles .seal { display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--go); background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.3); padding:5px 10px; border-radius:999px; } .shident .roles .seal i { font-size:12px; }
.shident .about { font-size:12.5px; color:var(--bone-2); line-height:1.55; margin-top:12px; }
.shident .stats { display:flex; margin-top:13px; border-top:1px solid var(--hair); padding-top:13px; }
.shident .st { flex:1; text-align:center; border-right:1px solid var(--hair); } .shident .st:last-child { border-right:0; }
.shident .st .v { font-family:var(--disp); font-weight:800; font-size:17px; color:var(--bone); } .shident .st .v i { font-size:12px; color:var(--acid); } .shident .st .l { font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-3); margin-top:3px; }

/* collect at upcoming shows band */
.shcollect { margin:14px 20px 0; border-radius:16px; overflow:hidden; background:linear-gradient(150deg, rgba(139,92,246,.1), var(--n2) 70%); border:1px solid rgba(139,92,246,.28); }
.shcollect .ch2 { display:flex; align-items:center; gap:10px; padding:13px 15px 0; } .shcollect .ch2 .ic { width:34px; height:34px; border-radius:10px; background:rgba(139,92,246,.14); color:var(--purple-hi); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; } .shcollect .ch2 .t .h { font-family:var(--disp); font-weight:700; font-size:15px; color:var(--bone); } .shcollect .ch2 .t .s { font-size:11px; color:var(--bone-3); margin-top:2px; }
.shcollect .crow { padding:12px 15px 14px; display:flex; flex-direction:column; gap:11px; }
.shcollect .cev { display:flex; align-items:center; gap:11px; }
.shcollect .cev img { width:42px; height:42px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.shcollect .cev .ci { flex:1; min-width:0; } .shcollect .cev .ci .nm { font-weight:600; font-size:13px; color:var(--bone); } .shcollect .cev .ci .mt { font-size:10.5px; color:var(--bone-3); margin-top:2px; }
.shcollect .cev .tag { font-weight:700; font-size:10px; color:var(--purple-hi); background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.3); padding:4px 10px; border-radius:999px; white-space:nowrap; }

/* exclusivity signal — only verified artists & venues sell on Klub */
.shexcl { margin:16px 20px 0; display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:14px; background:rgba(255,46,147,.06); border:1px solid rgba(255,46,147,.24); }
.shexcl .ic { width:36px; height:36px; border-radius:10px; background:rgba(255,46,147,.13); color:var(--pink-hi); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.shexcl .t { font-size:11.5px; color:var(--bone-2); line-height:1.45; } .shexcl .t b { color:var(--bone); font-weight:700; }

/* ---------- REVIEWS screen (product + seller) ---------- */
.revhead { margin:8px 20px 0; display:flex; gap:16px; align-items:center; }
.revhead .big { font-family:var(--disp); font-weight:800; font-size:48px; color:var(--bone); line-height:.9; }
.revhead .rs .stars { font-size:16px; } .revhead .rs .ct { font-size:12px; color:var(--bone-3); margin-top:7px; }
.revbars { margin:18px 20px 0; display:flex; flex-direction:column; gap:8px; }
.revbar { display:flex; align-items:center; gap:10px; } .revbar .n { font-size:11px; color:var(--bone-3); width:9px; text-align:right; } .revbar .n i { font-size:10px; color:var(--acid); } .revbar .track { flex:1; height:6px; border-radius:999px; background:rgba(7,5,12,.4); overflow:hidden; } .revbar .track i { display:block; height:100%; background:var(--acid); border-radius:999px; } .revbar .pc { font-size:10.5px; color:var(--bone-3); width:32px; text-align:right; }
.revfilter { display:flex; gap:8px; padding:18px 20px 4px; overflow-x:auto; scrollbar-width:none; } .revfilter::-webkit-scrollbar { display:none; }
.revchip { flex-shrink:0; font-weight:600; font-size:12px; color:var(--bone-2); padding:7px 13px; border-radius:999px; background:var(--n2); border:1px solid var(--hair-2); } .revchip.on { background:var(--bone); color:var(--n0); border-color:transparent; }
.revitem { margin:0 20px; padding:16px 0; border-bottom:1px solid var(--hair); display:flex; gap:12px; }
.revitem:last-of-type { border-bottom:0; }
.revitem .av { width:38px; height:38px; border-radius:50%; background-size:cover; background-position:center; flex-shrink:0; }
.revitem .rb { flex:1; min-width:0; } .revitem .rb .top { display:flex; align-items:center; gap:8px; } .revitem .rb .top .nm { font-weight:600; font-size:13px; color:var(--bone); } .revitem .rb .top .dt { font-size:10.5px; color:var(--bone-4); margin-left:auto; }
.revitem .rb .stars { font-size:11px; margin-top:7px; } .revitem .rb .tx { font-size:12.5px; color:var(--bone-2); line-height:1.55; margin-top:8px; } .revitem .rb .meta { margin-top:10px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .revitem .rb .vp { font-size:10px; color:var(--go); display:inline-flex; align-items:center; gap:4px; } .revitem .rb .vp i { font-size:11px; } .revitem .rb .var { font-size:10px; color:var(--bone-3); background:rgba(247,242,234,.05); border:1px solid var(--hair); padding:3px 8px; border-radius:7px; }

/* booking: drip/option selectable cards (reuse fulfc look, teal accent) */
.svcopt { display:flex; align-items:center; gap:12px; margin:0 0 10px; padding:13px 14px; border-radius:14px; background:var(--n2); border:1px solid var(--hair-2); }
.svcopt.on { border-color:transparent; box-shadow:0 0 0 1.5px var(--go); background:linear-gradient(150deg, rgba(52,211,153,.08), var(--n2) 60%); }
.svcopt .rad { width:22px; height:22px; border-radius:50%; border:2px solid var(--hair-2); flex-shrink:0; display:flex; align-items:center; justify-content:center; } .svcopt.on .rad { border-color:var(--go); } .svcopt.on .rad::after { content:''; width:11px; height:11px; border-radius:50%; background:var(--go); }
.svcopt .oi { flex:1; min-width:0; } .svcopt .oi .nm { font-family:var(--disp); font-weight:700; font-size:14.5px; color:var(--bone); } .svcopt .oi .ds { font-size:11px; color:var(--bone-3); margin-top:3px; line-height:1.35; }
.svcopt .spr { text-align:right; flex-shrink:0; } .svcopt .spr .v { font-family:var(--disp); font-weight:800; font-size:16px; color:var(--bone); } .svcopt .spr .pop { display:inline-block; font-weight:700; font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:#06281C; background:var(--go); padding:2px 6px; border-radius:999px; }


/* ---------- KLB-112 · bag flow live states ---------- */
.pdbar .addbag.added { background:rgba(52,211,153,.14); color:var(--go); box-shadow:none; border:1px solid rgba(52,211,153,.35); }
.mbz { padding:22px; background:var(--n0); display:flex; flex-direction:column; gap:24px; font-family:var(--grot); height:100%; box-sizing:border-box; }
.mbz .lb { font-weight:600; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-3); margin-bottom:10px; }
.mbz .pdbar { background:var(--n1); }
.mbz .chipnote { display:flex; align-items:center; gap:13px; margin-top:13px; }
.mbz .chipnote .s { font-size:11.5px; color:var(--bone-3); line-height:1.5; flex:1; }
.mbz .cir { width:38px; height:38px; border-radius:50%; background:rgba(247,242,234,.06); border:1px solid var(--hair); color:var(--bone); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.mbz .cir .nb { position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; border-radius:999px; background:var(--sunset); color:#fff; font-weight:700; font-size:9.5px; display:flex; align-items:center; justify-content:center; padding:0 4px; box-shadow:0 0 0 2px var(--n0); }
.bagitem .fultog { display:inline-flex; gap:3px; padding:3px; border-radius:999px; background:var(--n3); border:1px solid var(--hair); margin-top:8px; }
.bagitem .fultog .fo { display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:999px; font-weight:600; font-size:10px; color:var(--bone-3); }
.bagitem .fultog .fo i { font-size:11px; }
.bagitem .fultog .fo.on { background:rgba(255,194,75,.14); color:var(--gold); }
.bagitem .fultog .fo.ship.on { background:rgba(139,92,246,.16); color:var(--purple-hi); }
.bagitem .br .rm { font-weight:600; font-size:10.5px; color:var(--bone-4); margin-top:7px; }
.osum .fee-note { font-size:11px; color:var(--bone-3); padding:9px 0 2px; line-height:1.45; }
.bagempty-ic { width:56px; height:56px; border-radius:50%; background:rgba(247,242,234,.05); border:1px solid var(--hair); color:var(--bone-3); display:grid; place-items:center; font-size:23px; }
.bagempty-h { font-family:var(--disp); font-weight:800; font-size:20px; color:var(--bone); margin-top:6px; }
.bagempty-s { font-size:12.5px; color:var(--bone-3); line-height:1.5; max-width:230px; }
.bagempty-cta { margin-top:14px; height:48px; padding:0 22px; border-radius:13px; border:1px solid var(--hair-2); background:rgba(247,242,234,.06); color:var(--bone); font-family:var(--grot); font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; gap:8px; }
.bagsheet-scrim { position:absolute; inset:0; background:rgba(4,3,8,.66); backdrop-filter:blur(3px); z-index:20; border-radius:inherit; }
.bagsheet { position:absolute; left:0; right:0; bottom:0; z-index:21; background:var(--n2); border-top:1px solid var(--hair-2); border-radius:26px 26px 0 0; padding:10px 20px 26px; }
.bagsheet .grab { width:38px; height:4px; border-radius:999px; background:rgba(247,242,234,.16); margin:4px auto 16px; }
.bagsheet .ttl { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.bagsheet .ttl .ic { width:40px; height:40px; border-radius:12px; background:rgba(255,194,75,.12); color:var(--gold); display:grid; place-items:center; font-size:18px; flex-shrink:0; }
.bagsheet .ttl .h { font-family:var(--disp); font-weight:800; font-size:18px; color:var(--bone); }
.bagsheet .ttl .s { font-size:11px; color:var(--bone-3); margin-top:2px; }
.bagsheet .bd { font-size:12.5px; color:var(--bone-2); line-height:1.5; }
.bagsheet .bd b { color:var(--bone); }
.bagsheet .item { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:13px; background:var(--n1); border:1px solid var(--hair); margin:13px 0 16px; }
.bagsheet .item img { width:42px; height:42px; border-radius:9px; object-fit:cover; }
.bagsheet .item .nm { font-weight:600; font-size:13px; color:var(--bone); }
.bagsheet .item .s { font-size:11px; color:var(--bone-3); margin-top:2px; }
.bagsheet .pri { width:100%; height:50px; border-radius:14px; border:0; background:var(--sunset); color:#fff; font-family:var(--grot); font-weight:700; font-size:14.5px; box-shadow:0 8px 22px -6px var(--pink-glow); }
.bagsheet .sec { width:100%; height:46px; border-radius:14px; border:1px solid var(--hair-2); background:transparent; color:var(--bone-2); font-family:var(--grot); font-weight:700; font-size:13.5px; margin-top:9px; }
.payel { border-radius:14px; background:var(--n2); border:1px solid var(--hair-2); padding:15px; display:flex; flex-direction:column; gap:12px; }
.shipform { border-radius:14px; background:var(--n2); border:1px solid var(--hair-2); padding:15px; display:flex; flex-direction:column; gap:12px; }
.ckfld { display:flex; flex-direction:column; gap:6px; flex:1; }
.ckfld .flbl { font-weight:600; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-3); }
.ckinput { display:flex; align-items:center; gap:9px; padding:12px 13px; border-radius:11px; background:var(--n1); border:1px solid var(--hair-2); }
.ckinput.focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(139,92,246,.16); }
.ckinput i { font-size:16px; color:var(--bone-3); }
.ckinput .val { flex:1; color:var(--bone); font-size:13px; }
.ckinput .val.ph { color:var(--bone-4); }
.ckfldrow { display:flex; gap:10px; }
.cksecure { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--bone-3); }
.cksecure i { font-size:14px; color:var(--go); }