/* Shop layout (landing, 3-column desktop, phone strip + sheets).
   Loaded after styles.css, which still holds the base, cart and admin styles.
   The first block switches off old shop rules from styles.css. */
body,body.hasStrip{padding-bottom:0}
.binder{width:auto;max-width:none}
.top{flex-wrap:nowrap}
/* ---------- top bar ---------- */
:root{--topH:56px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--topH);
  padding:0 22px;background:var(--ink);border-bottom:1px solid rgba(var(--fgr),.07);position:sticky;top:0;z-index:30}
.brand{font-family:var(--util);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);text-decoration:none;display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--gold);flex:0 0 auto}
.brand em{font-style:normal;color:var(--goldT)}
.topR{display:flex;gap:8px;align-items:center;min-width:0;margin-left:auto}
.modes{display:flex;gap:2px;background:rgba(var(--fgr),.05);border-radius:7px;padding:3px}
.modes button{font-family:var(--util);font-size:15px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 13px;border-radius:5px;color:var(--muted)}
.modes button.on{background:var(--gold);color:#1A1206}
.cartBtn,.iconBtn{position:relative;display:flex;align-items:center;gap:7px;height:38px;padding:0 13px;border-radius:8px;
  background:rgba(var(--fgr),.06);color:var(--paper);font-family:var(--util);font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.cartBtn:hover,.iconBtn:hover{background:rgba(var(--fgr),.12)}
.cartBtn.has{background:rgba(232,184,75,.16);color:var(--goldT)}
.cartBtn.on{background:var(--gold);color:#1A1206}
.cartBtn b,.iconBtn b{min-width:19px;height:19px;border-radius:10px;background:var(--gold);color:#1A1206;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;padding:0 5px;letter-spacing:0}
.cartBtn.on b{background:#1A1206;color:var(--gold)}
.promo{margin:14px 22px 0;padding:8px 14px;border-radius:8px;text-align:center;font-family:var(--util);
  font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(232,184,75,.12);color:var(--goldT);border:1px solid rgba(232,184,75,.25)}

/* ---------- landing ---------- */
.home{max-width:1180px;margin:0 auto;padding:44px 22px 20px}
.homeHead{text-align:center;margin-bottom:28px}
.homeHead h1{margin:0 0 10px;font-size:clamp(28px,4.2vw,46px);font-weight:900;letter-spacing:-.03em;line-height:1.05}
.homeHead p{margin:0 auto;max-width:560px;color:var(--muted);font-size:16px;line-height:1.55}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:14px}
.tile{text-align:left;padding:22px 20px 18px;border-radius:14px;background:var(--vinyl);border:1px solid rgba(var(--fgr),.08);
  display:flex;flex-direction:column;gap:4px;min-height:230px;transition:transform .15s,border-color .15s,background .15s}
.tile:hover{transform:translateY(-3px);border-color:var(--gold);background:var(--raise)}
.tile.vault{background:linear-gradient(160deg,var(--vtint),var(--vinyl))}
.tile.vault:hover{border-color:#E0607E}
.tile h3{margin:0;font-size:24px;font-weight:900;letter-spacing:-.02em;line-height:1.1}
.tPrice{font-size:30px;font-weight:900;color:var(--goldT);letter-spacing:-.02em;margin-top:6px}
.tile.vault .tPrice{color:var(--pink)}
.tile .seven{font-family:var(--util);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tile .recipe{margin-top:10px}
.tile .go{margin-top:auto;padding-top:14px;font-family:var(--util);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.homeNote{margin:22px auto 0;text-align:center;font-family:var(--util);font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--goldT)}

/* ---------- shop: desktop 3 columns, no page scroll ---------- */
body.vShop{height:100vh;height:100dvh;overflow:hidden}
body.vShop .foot{display:none}
.shop{--sideW:clamp(210px,19vw,270px);display:grid;grid-template-columns:var(--sideW) minmax(0,1fr) var(--sideW);
  height:calc(100vh - var(--topH));height:calc(100dvh - var(--topH))}
.sideL,.sideR{min-height:0;overflow-y:auto;background:rgba(var(--bgr),.55);padding:16px 14px;scrollbar-width:thin}
.sideL{border-right:1px solid rgba(var(--fgr),.06);display:flex;flex-direction:column}
.sideR{border-left:1px solid rgba(var(--fgr),.06)}
.sideLbl{font-family:var(--util);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 9px}
.choices{display:flex;flex-direction:column;gap:7px}
.choice{text-align:left;padding:10px 11px;border-radius:9px;background:var(--vinyl);border:1px solid rgba(var(--fgr),.07);transition:border-color .15s,background .15s}
.choice:hover{border-color:rgba(var(--fgr),.25)}
.choice.on{border-color:var(--gold);background:var(--sel);box-shadow:inset 3px 0 0 var(--gold)}
.choice.vault{background:linear-gradient(160deg,var(--vtint),var(--vinyl))}
.choice.vault.on{border-color:#E0607E;box-shadow:inset 3px 0 0 #E0607E}
.cTop{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cTop b{font-size:14.5px;font-weight:900;letter-spacing:-.01em;line-height:1.2}
.cTop em{font-style:normal;font-family:var(--util);font-weight:700;font-size:16px;color:var(--goldT);white-space:nowrap}
.choice.vault .cTop em{color:var(--pink)}
.choice .recipe{margin-top:6px;gap:4px}
.choice .chipR{font-size:12px;padding:1px 6px}
.choice .lowFlag{margin-top:5px}
.sideFoot{margin-top:auto;padding-top:16px}
/* left panel: what you're browsing + printing/sort (moved out of the middle so only cards sit there) */
.browse{margin-top:18px;padding-top:14px;border-top:1px solid rgba(var(--fgr),.07)}
.bInfo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.bInfo i{width:14px;height:14px;border-radius:3px;background:var(--bc);flex:0 0 auto;box-shadow:0 0 0 2px rgba(var(--fgr),.14)}
.bInfo div{min-width:0;display:flex;flex-direction:column}
.bInfo b{font-family:var(--util);font-weight:700;font-size:17px;letter-spacing:.12em;text-transform:uppercase;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bInfo small{font-family:var(--util);font-size:13.5px;letter-spacing:.05em;color:var(--muted)}
.sideL .fStack{gap:8px}
.sideL .fStack .fsel{font-size:13px}
.sideL .fStack .fsel span{width:56px}
.sideL .fStack .fsel select{padding:7px 8px;font-size:13.5px;min-width:0}
.sideL .fHint{margin:10px 0 0;font-size:13px;flex-wrap:wrap}
.curRow{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;
  font-family:var(--util);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.curRow .modes button{padding:5px 11px;font-size:14px}
.hstNote{padding:9px 11px;border-radius:8px;text-align:center;font-family:var(--util);font-size:14px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:rgba(232,184,75,.1);color:var(--goldT);border:1px solid rgba(232,184,75,.25);margin-bottom:12px}
.miniLinks{display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--util);font-size:13px;letter-spacing:.06em}
.miniLinks a{color:var(--muted);text-decoration:none}
.miniLinks a:hover{color:var(--paper)}

.mid{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;padding:14px}
.fbar{display:flex;align-items:center;justify-content:center;gap:10px 14px;flex-wrap:wrap;min-height:40px;width:100%;margin-bottom:8px}
.fsel{display:flex;align-items:center;gap:7px;font-family:var(--util);font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.fsel select{background:var(--ink);border:1px solid rgba(var(--fgr),.16);border-radius:7px;color:var(--paper);
  padding:6px 9px;font-size:13.5px;text-transform:none;letter-spacing:0;max-width:220px}
.fHint{font-family:var(--util);font-size:13.5px;letter-spacing:.05em;color:var(--muted);display:flex;align-items:center;gap:4px}
.fHint svg{width:13px;height:13px}
.binderRow{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;gap:12px}

/* pocket width: whichever runs out first, screen height or screen width */
.binder{--pw:min(calc((100vh - 220px) / 3 * 5 / 7), calc((100vw - 2 * var(--sideW) - 222px) / 3));
  position:relative;border-radius:12px;padding:16px 16px 16px 42px;flex:0 0 auto;
  background:linear-gradient(160deg,color-mix(in srgb,var(--bc) 22%,var(--vinyl)),var(--vinyl));
  border:1px solid color-mix(in srgb,var(--bc) 34%,transparent);box-shadow:0 20px 50px rgba(0,0,0,.5);transition:background .3s,border-color .3s}
@supports (height:100dvh){ .binder{--pw:min(calc((100dvh - 220px) / 3 * 5 / 7), calc((100vw - 2 * var(--sideW) - 222px) / 3))} }
.spine{position:absolute;left:0;top:0;bottom:0;width:26px;border-radius:12px 0 0 12px;
  background:linear-gradient(180deg,var(--bc),color-mix(in srgb,var(--bc) 62%,#000));transition:background .3s}
.rings{position:absolute;left:8px;top:0;bottom:0;width:11px;display:flex;flex-direction:column;justify-content:space-evenly;padding:40px 0;z-index:2}
.ring{width:11px;height:11px;border-radius:50%;background:rgba(0,0,0,.5);box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(var(--fgr),.16)}
.binderHead{display:flex;align-items:center;justify-content:space-between;gap:10px;height:30px;margin-bottom:10px}
.bName{font-family:var(--util);font-weight:700;font-size:17px;letter-spacing:.13em;text-transform:uppercase;display:flex;align-items:center;gap:9px;min-width:0;white-space:nowrap}
.bName i{width:13px;height:13px;border-radius:3px;background:var(--bc);display:block;flex:0 0 auto;box-shadow:0 0 0 2px rgba(var(--fgr),.14)}
.bName small{font-size:13px;letter-spacing:.08em;color:var(--muted);font-weight:600}
.pager{display:flex;align-items:center;gap:8px;font-family:var(--util);font-size:14.5px;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.page{display:grid;grid-template-columns:repeat(var(--cols,3),var(--pw));gap:10px;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.page .emptyBinder{grid-column:1/-1;height:calc(var(--pw) * 7 / 5 * 3 + 20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.pgArrow{flex:0 0 auto;width:46px;height:96px;border-radius:12px;background:rgba(var(--bgr),.8);border:1px solid rgba(var(--fgr),.16);
  color:var(--paper);font-size:34px;line-height:1;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:background .15s,opacity .15s}
.pgArrow:not(:disabled):hover{background:var(--gold);color:#1A1206}
.pgArrow:disabled{opacity:.2;cursor:default}
.pgArrow.mini{width:30px;height:30px;border-radius:7px;font-size:20px;box-shadow:none;background:rgba(var(--fgr),.08);border:0}

/* marks on cards: printing + condition */
.marks{position:absolute;top:5px;right:5px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;z-index:2;pointer-events:none}
.marks .pmark{position:static}
.cmark{font-family:var(--util);font-weight:700;font-size:10.5px;letter-spacing:.06em;color:#fff;padding:1px 6px;border-radius:3px;
  background:#A44E1C;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.jmark{font-family:var(--util);font-weight:700;font-size:10.5px;letter-spacing:.06em;color:#BC002D;padding:1px 6px;border-radius:3px;
  background:#fff;box-shadow:0 0 0 1.5px #BC002D inset,0 1px 4px rgba(0,0,0,.5)}
.sThumb .marks,.sq .marks,.cartThumb .marks{top:2px;right:2px;gap:1px}
.sThumb .pmark,.sThumb .cmark,.sThumb .jmark,.sq .pmark,.sq .cmark,.sq .jmark,.cartThumb .cmark,.cartThumb .jmark{font-size:8px;padding:0 3px;border-radius:2px}
.cartThumb .pmark{display:none}
/* B19: badge colours on the binder marks, the same as the zoom badges (1st Edition gold, Holo lilac, Reverse Holo green) */
.pmark.p1st{background:#E8B84B;color:#1a1a1a}.pmark.pholo{background:#B39DDB;color:#1a1a1a}.pmark.prh{background:#7FC8A9;color:#1a1a1a}.pmark.pshadowless{background:#9FB3C8;color:#1a1a1a}
.zoomBtn{position:absolute;left:8px;top:8px;z-index:4;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--bgr),.8);color:var(--paper);border:1px solid rgba(var(--fgr),.22);box-shadow:0 2px 8px rgba(0,0,0,.5);opacity:0;transition:opacity .15s,background .15s}
.pocket:hover .zoomBtn,.zoomBtn:focus-visible{opacity:1}
.zoomBtn:hover{background:var(--gold);color:#1A1206}

/* right panel: the pack's 7 slots / Vault picks */
.panel{display:flex;flex-direction:column;gap:10px}
.pHead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pHead small{font-family:var(--util);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pHead h4{margin:1px 0 0;font-size:17px;font-weight:900;letter-spacing:-.01em;line-height:1.15}
.pHead em{font-style:normal;font-family:var(--util);font-weight:700;font-size:20px;color:var(--goldT);white-space:nowrap}
.pSub{display:flex;justify-content:space-between;align-items:center;font-family:var(--util);font-size:14.5px;letter-spacing:.05em;color:var(--muted)}
.pSub b{color:var(--paper);font-size:17px}
.pNote{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.slotList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.srow{position:relative;display:flex;align-items:center;border-radius:8px;background:rgba(var(--fgr),.035);border:1px solid rgba(var(--fgr),.06)}
.srow.on{border-color:var(--sc);background:color-mix(in srgb,var(--sc) 16%,transparent);box-shadow:inset 3px 0 0 var(--sc)}
.sBtn{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:5px 8px;text-align:left}
.sThumb{flex:0 0 auto;width:34px;aspect-ratio:5/7;border-radius:4px;overflow:hidden;position:relative;background:rgba(var(--fgr),.04);
  display:flex;align-items:center;justify-content:center}
.sSwatch{width:16px;height:16px;border-radius:4px;background:var(--sc);display:block;opacity:.85}
.srow:not(.filled) .sThumb{border:1px dashed color-mix(in srgb,var(--sc) 60%,transparent)}
.sTxt{min-width:0;display:flex;flex-direction:column}
.sTxt b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow:not(.filled) .sTxt b{color:color-mix(in srgb,var(--sc) 55%,var(--paper));font-family:var(--util);font-size:14.5px;letter-spacing:.06em;text-transform:uppercase}
.sTxt small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow.on:not(.filled) .sTxt small{color:var(--paper)}
.sX{flex:0 0 auto;width:26px;height:26px;margin-right:6px;border-radius:50%;background:rgba(var(--fgr),.07);color:var(--muted);font-size:16px;line-height:1}
.sX:hover{background:#B85C5C;color:#fff}
.trayGo.wide{width:100%;margin:2px 0 0;padding:12px 14px}
.trayGo.alt{background:rgba(232,184,75,.16);color:var(--goldT)}
.cartMini{margin-top:6px;padding-top:12px;border-top:1px solid rgba(var(--fgr),.08);display:flex;flex-direction:column;gap:6px}
.cmHead{display:flex;justify-content:space-between;align-items:center;font-family:var(--util);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cmHead .linkBtn{font-size:13px}
.cmRow{display:flex;align-items:center;gap:6px;padding:5px 6px 5px 10px;border-radius:7px;background:rgba(var(--fgr),.04);font-size:13px;font-weight:700}
.cmRow span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmRow.on{box-shadow:inset 0 0 0 1px var(--gold)}
.cmRow.warn{color:var(--warn)}
.cmX{width:24px;height:24px;border-radius:50%;color:var(--muted);font-size:15px}
.cmX:hover{background:#B85C5C;color:#fff}
.vEmpty{padding:18px 10px;text-align:center;color:var(--muted);font-size:13px;border:1px dashed rgba(var(--fgr),.1);border-radius:8px}
.vList{display:flex;flex-direction:column;gap:5px}
.vRow{display:flex;align-items:center;gap:9px;padding:5px 0 5px 6px;border-radius:8px;background:rgba(var(--fgr),.035)}
.vRow .sTxt{flex:1}
.vRow.warn .sTxt small{color:var(--warn)}
.vP{font-family:var(--util);font-weight:700;font-size:15px;white-space:nowrap}
.vTotal{display:flex;justify-content:space-between;align-items:baseline;padding:6px 2px 0;font-family:var(--util);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:14px}
.vTotal b{font-size:20px;color:var(--paper);letter-spacing:0}
/* Vault sale */
.saleTag{position:absolute;left:7px;top:7px;z-index:4;font-family:var(--util);font-weight:700;font-size:12.5px;letter-spacing:.04em;
  color:#fff;background:#C8354C;padding:1px 7px;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.5);pointer-events:none}
.vprice.sale b{color:var(--pink)}
.vprice s,.vP s,.zPrice s{color:var(--muted);font-weight:400}
.vP s{display:block;font-size:11.5px;text-align:right}
.zSale{margin:-6px 0 12px;font-family:var(--util);font-weight:700;font-size:14.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--pink)}
.saleTxt{color:var(--pink)}
.chipR.saleChip{background:rgba(200,53,76,.22);color:var(--pink)}

/* zoom */
.zoom{z-index:80}
.zoomBox{position:relative;background:var(--vinyl);border:1px solid rgba(var(--fgr),.12);border-radius:14px;padding:18px;
  width:100%;max-width:760px;max-height:92vh;overflow:auto;display:flex;gap:20px;align-items:flex-start;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.zoomBox:focus{outline:none}
.zoomImg{flex:0 0 auto;width:min(340px,42vw);aspect-ratio:5/7;border-radius:10px;overflow:hidden;background:var(--raise);position:relative}
.zoomImg img{width:100%;height:100%;object-fit:cover;display:block}
.zoomInfo{flex:1;min-width:0;padding-top:6px}
.zoomInfo h3{margin:0 30px 4px 0;font-size:24px;font-weight:900;letter-spacing:-.02em;line-height:1.15}
.zSet{margin:0 0 14px;color:var(--muted);font-size:14px}
.zCond{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:9px;background:rgba(78,158,122,.14);border:1px solid rgba(78,158,122,.3);margin-bottom:14px}
.zCond b{font-family:var(--util);font-size:20px;letter-spacing:.06em;min-width:40px;text-align:center;color:var(--ok)}
.zCond span{font-size:13px;color:var(--muted);line-height:1.45}
.zCond span strong{display:block;color:var(--paper);font-size:15px}
.zCond.worn{background:rgba(192,97,43,.14);border-color:rgba(192,97,43,.45)}
.zCond.worn b{color:var(--warn)}
.zPrice{margin:0 0 12px;font-family:var(--util);font-size:15px;color:var(--muted)}
.zPrice b{font-size:24px;color:var(--paper);margin-right:6px}
.zSlot{display:flex;align-items:center;gap:7px;margin:0 0 12px;font-family:var(--util);font-size:14.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.zSlot i{width:11px;height:11px;border-radius:3px;display:block}
.zoomInfo .trayGo{margin:0;width:100%;padding:13px 20px;font-size:15.5px}
.zNote{margin:14px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.zNote a{color:var(--goldT)}
.zoomX{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(var(--fgr),.08);font-size:22px;line-height:1;color:var(--paper);z-index:2}
.zoomX:hover{background:rgba(var(--fgr),.18)}
body.zoomOpen{overflow:hidden}

/* phone sheets + strip (hidden on desktop) */
#tray:empty{display:none}
.msheet{position:fixed;inset:0;z-index:60;background:rgba(6,12,15,.72);display:flex;align-items:flex-end;justify-content:center}
.msheet[hidden]{display:none}
.msBox{position:relative;width:100%;max-width:560px;max-height:86vh;max-height:86dvh;overflow-y:auto;background:var(--vinyl);
  border-radius:16px 16px 0 0;border:1px solid rgba(var(--fgr),.1);border-bottom:0;padding:18px 14px calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;animation:up .2s ease}
@keyframes up{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}
.msX{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(var(--fgr),.08);font-size:22px;line-height:1;z-index:2}
.msBox .sideLbl{margin:2px 0 0}
.msRow{display:flex;justify-content:space-between;align-items:center;font-family:var(--util);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.msBox .hstNote{margin:0}
.msBox .panel .pHead{padding-right:40px}
.fStack{display:flex;flex-direction:column;gap:12px}
.fStack .fsel{justify-content:space-between}
.fStack .fsel span{width:72px;flex:0 0 auto}
.fStack .fsel select{flex:1;max-width:none;padding:10px;font-size:15px}
.msActs{display:flex;gap:10px}
.msActs .btn{flex:1;padding:12px;font-size:15px}
.mstrip{display:flex;align-items:center;gap:8px;padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.msq{flex:1;min-width:0;display:grid;grid-template-columns:repeat(7,minmax(0,42px));justify-content:start;gap:4px}
.sq{aspect-ratio:5/7;border-radius:5px;position:relative;overflow:hidden;padding:0;border:1.5px dashed color-mix(in srgb,var(--sc) 70%,transparent);
  background:color-mix(in srgb,var(--sc) 14%,transparent)}
.sq.filled{border-style:solid;border-color:var(--sc)}
.sq:not(.filled)::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:3px;background:var(--sc)}
.sq.on{border:2px solid var(--gold);box-shadow:0 0 0 2px rgba(232,184,75,.3)}
.sq .face{border-radius:3px}
.mInfo{flex:0 0 auto;min-width:64px;height:44px;padding:0 10px;border-radius:9px;background:rgba(var(--fgr),.07);font-family:var(--util);
  font-size:15px;font-weight:600;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.mInfo b{font-size:18px}
.mInfo i{font-style:normal;color:var(--muted);font-size:12px}
.mInfo.grow{flex:1;justify-content:flex-start}
.mstrip .trayGo{margin:0;height:44px;padding:0 14px;font-size:14px}
.switchChip{flex:1;min-width:0;height:38px;display:flex;align-items:center;gap:6px;padding:0 12px;border-radius:8px;
  background:rgba(232,184,75,.14);border:1px solid rgba(232,184,75,.35);color:var(--goldT);font-family:var(--util);font-size:15.5px;font-weight:700;letter-spacing:.04em}
.switchChip span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.switchChip i{font-style:normal;font-size:12px}
.iconBtn{padding:0;width:40px;justify-content:center}
.iconBtn b{position:absolute;top:-4px;right:-4px}
.iconBtn.has{color:var(--goldT)}

/* filters (2.4): search box, "Set, type, rarity & more", match count */
.qWrap{position:relative;display:block}
.qIco{position:absolute;left:9px;top:50%;transform:translateY(-50%);display:flex;color:var(--muted);pointer-events:none}
.qIco svg{width:14px;height:14px}
.qWrap input{display:block;width:100%;box-sizing:border-box;margin:0;background:var(--ink);border:1px solid rgba(var(--fgr),.16);border-radius:7px;
  color:var(--paper);padding:7px 30px;font-family:inherit;font-size:13.5px}
.qWrap input::placeholder{color:var(--muted)}
.qWrap input:focus{outline:none;border-color:var(--gold)}
.qWrap input:not(:placeholder-shown){border-color:var(--gold)}
.qX{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:rgba(var(--fgr),.08);
  color:var(--muted);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center}
.qX:hover{background:rgba(var(--fgr),.18);color:var(--paper)}
.qWrap input:placeholder-shown~.qX{display:none}
.fsel select.on{border-color:var(--gold);color:var(--goldT)}
.moreBtn{width:100%;display:flex;align-items:center;gap:8px;margin-top:8px;padding:7px 9px;border-radius:7px;background:rgba(var(--fgr),.04);
  border:1px solid rgba(var(--fgr),.1);font-family:var(--util);font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left}
.moreBtn span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moreBtn:hover,.moreBtn.open{color:var(--paper);border-color:rgba(var(--fgr),.24)}
.moreBtn b{min-width:18px;height:18px;border-radius:9px;background:var(--gold);color:#1A1206;font-size:12px;display:flex;align-items:center;justify-content:center;padding:0 5px;letter-spacing:0}
.moreBtn i{font-style:normal;font-size:11px}
.sideL .fMore{margin-top:8px}
.sideL .fStack .fsel span{width:62px;flex:0 0 auto}
.sideL .fStack .fsel select{flex:1}
.fOn{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:10px;font-family:var(--util);font-size:14px;letter-spacing:.05em;color:var(--paper)}
.fOn .linkBtn{font-size:14px}
.msBox.still{animation:none}
.msActs.stick{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));z-index:3;background:var(--vinyl);
  margin:0 -14px calc(-18px - env(safe-area-inset-bottom));padding:10px 14px calc(18px + env(safe-area-inset-bottom));border-top:1px solid rgba(var(--fgr),.08)}
.msBox .qWrap input{font-size:16px;padding:10px 38px 10px 34px}
.msBox .fsel select{font-size:16px;min-width:0}   /* 16px: iPhones zoom the page into smaller form fields; min-width: long set names */
.msBox .qIco{left:11px}
.msBox .qX{width:30px;height:30px;right:5px}

.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--gold);
  color:#1A1206;padding:10px 18px;border-radius:8px;font-weight:700;font-size:13.5px;z-index:90;
  box-shadow:0 8px 24px rgba(0,0,0,.45);animation:toastIn .22s ease;max-width:calc(100% - 40px);text-align:center}
.toast[hidden]{display:none}
/* B7: its own drop-in that keeps translateX(-50%) (styles.css's "drop" ends at transform:none, so the toast started right of centre) */
@keyframes toastIn{from{transform:translate(-50%,-9px);opacity:.4}to{transform:translate(-50%,0);opacity:1}}

@media(min-width:900px){
  body.vShop{--topH:0px}
  /* B22: no top bar over the binder: only its corner, Home + Cart over the right panel (the panel gives up that room) */
  body.vShop .top{position:fixed;top:0;right:0;left:auto;width:clamp(210px,19vw,270px);height:56px;padding:0 14px;gap:8px;
    background:rgba(var(--bgr),.55);border-left:1px solid rgba(var(--fgr),.06);border-bottom:1px solid rgba(var(--fgr),.07)}
  body.vShop .sideR{margin-top:56px}
}

/* ---------- phone + tablet portrait ---------- */
@media(max-width:899px){
  :root{--topH:52px}
  .top{padding:0 8px;gap:8px}
  body.vShop .brand{display:none}
  body.vShop .topR{flex:1}
  .cartBtn{padding:0 10px}
  .cartBtn .cLbl{display:none}
  .cartBtn b{position:absolute;top:-4px;right:-4px}
  .shop{display:block;height:auto}
  .sideL,.sideR,.fbar{display:none}
  .mid{height:calc(100vh - var(--topH) - 72px - env(safe-area-inset-bottom));height:calc(100dvh - var(--topH) - 72px - env(safe-area-inset-bottom));
    padding:10px 8px 8px;justify-content:flex-start}
  .binder{--pw:min(calc((100vw - 56px) / 3), calc((100vh - 212px - env(safe-area-inset-bottom)) / 3 * 5 / 7));
    padding:8px 8px 8px 22px;border-radius:10px}
  @supports (height:100dvh){ .binder{--pw:min(calc((100vw - 56px) / 3), calc((100dvh - 212px - env(safe-area-inset-bottom)) / 3 * 5 / 7))} }
  .spine{width:12px;border-radius:10px 0 0 10px}
  .rings{display:none}
  .binderHead{height:30px;margin-bottom:6px}
  .bName{font-size:15px;letter-spacing:.1em;gap:7px}
  .bName small{font-size:12.5px}
  .page{gap:6px}
  .page .emptyBinder{height:calc(var(--pw) * 7 / 5 * 3 + 12px)}
  .pocket{padding:3px;border-radius:6px}
  .pocket.filled:hover{transform:none;box-shadow:none}
  .pmark,.cmark,.jmark{font-size:9.5px;padding:0 4px}
  .vprice{left:3px;right:3px;bottom:3px;padding:2px 3px}
  .vprice b{font-size:13px}
  .vprice span{display:none}
  #tray{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--ink);border-top:1px solid rgba(var(--fgr),.1);box-shadow:0 -12px 34px rgba(0,0,0,.55)}
  body.vShop .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .home{padding:26px 14px 10px}
  .homeHead{margin-bottom:20px}
  .homeHead p{font-size:15px}
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile{min-height:0;padding:15px 13px 13px}
  .tile h3{font-size:18px}
  .tPrice{font-size:23px;margin-top:4px}
  .tile .seven{font-size:12.5px}
  .tile .go{font-size:13px;padding-top:10px}
  .zoom{padding:10px;align-items:flex-end}
  .zoomBox{flex-direction:column;align-items:center;padding:14px;gap:12px;max-height:94vh;max-height:94dvh}
  .zoomImg{width:min(62vw,300px)}
  .zoomInfo{width:100%;padding-top:0}
  .zoomInfo h3{font-size:20px}
  .zSet{margin-bottom:10px}
  .modes button{padding:6px 10px}
}
@media(max-width:420px){ .tiles{grid-template-columns:1fr} .tile .recipe{margin-top:6px} }

/* ---------- home button (B22): in the top bar, just left of the Cart, on every view but the landing ----------
   (desktop binder views: the top bar's corner over the right panel, above; phone binder views: after the switch chip and Filters).
   The chat button and Sign up / Sign in keep the top bar's left side (chat.css). */
.iconBtn[data-a="home"]{flex:0 0 auto}
.topR{justify-content:flex-end}
@media(max-width:400px){   /* narrow phones: room for the home button without cutting the pack name and price */
  .topR{gap:6px}
  .iconBtn{width:36px}
  .cartBtn{padding:0 8px}
  .switchChip{padding:0 9px;gap:4px;font-size:14.5px}
}
/* B22: a picked card's details: the magnifier in the slot list and the Vault picks, the cart thumbnails, the zoom's Change / Remove */
.sZoom{flex:0 0 auto;width:26px;height:26px;margin-right:4px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(var(--fgr),.07);color:var(--muted)}
.sZoom svg{width:13px;height:13px}
.sZoom:hover{background:var(--gold);color:#1A1206}
.cartThumb.zThumb{display:block;padding:0;cursor:zoom-in}
.zSlot.zIn{color:var(--paper)}
.zActs{display:flex;gap:8px}
.zActs .trayGo{flex:1;width:auto;min-width:0}
.zActs .btn{flex:0 0 auto;padding:12px 14px;font-size:14.5px}

/* ---------- picks that sold (or changed binders) while the buyer was away ---------- */
.srow.sold:not(.on){border-color:rgba(224,153,92,.45)}
.srow.sold .sTxt b{color:var(--warn)}
.srow.sold .sThumb{border-color:#E0995C}
.sq.sold{background:rgba(224,153,92,.12)}
.sq.sold:not(.on){border-color:#E0995C}
.sq.sold::after{display:none}
.sqSold{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1px;text-align:center;font-family:var(--util);
  font-size:8.5px;font-weight:700;line-height:1.1;letter-spacing:.02em;text-transform:uppercase;color:var(--warn)}
.cartThumb.gone{opacity:1}
.cartThumb.gone .face{opacity:.3}
.goneLbl{position:absolute;left:0;right:0;bottom:3px;padding:1px 0;text-align:center;font-family:var(--util);font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(180,69,63,.92)}
.cmRow small{display:block;font-size:11.5px;font-weight:600;color:var(--warn)}

/* ---------- B2.1: cart codes, the free-order form, the spin link on thank-you views ---------- */
.codeBox{padding:2px 0 4px}
.codeLink{font-size:14px}
.codeIn{display:flex;gap:8px;margin:2px 0 0}
.codeIn input{flex:1;min-width:0;background:var(--ink);border:1px solid rgba(var(--fgr),.16);border-radius:7px;color:var(--paper);
  padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.codeIn input::placeholder{font-family:var(--disp);letter-spacing:0;text-transform:none;color:var(--muted)}
.codeIn input:focus{outline:none;border-color:var(--gold)}
.codeIn .btn{flex:0 0 auto;min-width:92px}
.codeIn .btn:disabled{background:rgba(var(--fgr),.09);color:var(--muted);cursor:default}
.codeErr{margin:6px 0 2px;color:var(--bad);font-size:13px;line-height:1.45}
.codeRow{align-items:flex-start}
.codeTxt{min-width:0;overflow-wrap:anywhere}
.codeTxt small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.codeAmt{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.codeRow b{color:var(--ok)}
.codeRow.off .codeTxt{color:var(--muted)}
.codeX{width:24px;height:24px;border-radius:50%;background:rgba(var(--fgr),.07);color:var(--muted);font-size:15px;line-height:1}
.codeX:hover{background:rgba(var(--fgr),.16);color:var(--paper)}
.freeForm{border-top:1px solid rgba(var(--fgr),.1);margin-top:4px;padding-top:12px}
.freeForm h3{margin:0 0 2px;font-size:17px;font-weight:900;letter-spacing:-.01em}
.freeForm .ffNote{margin:0 0 10px}
.freeForm .ffErr{margin:0 0 10px}
.bfGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bf{display:flex;flex-direction:column;gap:4px;min-width:0;font-family:var(--util);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bf.wide{grid-column:1/-1}
.bf input,.bf select{width:100%;min-width:0;background:var(--ink);border:1px solid rgba(var(--fgr),.16);border-radius:7px;color:var(--paper);
  padding:9px 10px;font-family:var(--disp);font-size:15px;letter-spacing:0;text-transform:none}
.bf input:focus,.bf select:focus{outline:none;border-color:var(--gold)}
.bf.bad input,.bf.bad select{border-color:#E08585}
.bfErr{font-family:var(--disp);font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--bad);line-height:1.35}
.bfCountry b{font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--paper);padding:9px 0}
a.trayGo{display:block;text-align:center;text-decoration:none}
.spinGo{max-width:360px;margin:18px 0 0;padding:15px 20px;font-size:17px;letter-spacing:.01em;box-shadow:0 8px 24px rgba(232,184,75,.25)}
.spinNote{margin:8px 0 0}
.preNote{margin:2px 0 0;color:var(--goldT)}
@media(max-width:899px){
  .codeIn input,.bf input,.bf select{font-size:16px}   /* iPhones zoom into smaller fields */
}
@media(max-width:420px){ .bfGrid{grid-template-columns:1fr} .bf{grid-column:1/-1} }

/* ---------- B6: Mike's own photos (a card's `ph`): the "Actual photo" tag on pockets, the zoom's Front | Back ---------- */
.phTag{position:absolute;left:9px;bottom:9px;z-index:3;pointer-events:none;font-family:var(--util);font-weight:700;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.35;color:#1A1206;background:var(--gold);padding:0 5px;border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.5);white-space:nowrap}
.pocket.vp .phTag{top:9px;bottom:auto}                              /* Vault pockets: the price sits at the bottom */
.pocket.vp .saleTag~.phTag{top:31px}
.zoomImg.own img{object-fit:contain;background:var(--raise)}             /* the whole photo, never cropped */
.zoomImg .zF1{display:none}
.zoomImg[data-face="1"] .zF0{display:none}
.zoomImg[data-face="1"] .zF1{display:block}
.zFaces{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3;display:flex;gap:2px;padding:3px;border-radius:8px;
  background:rgba(var(--bgr),.88);border:1px solid rgba(var(--fgr),.14);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.zFaces button{font-family:var(--util);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;border-radius:6px;color:var(--muted)}
.zFaces button:hover{color:var(--paper)}
.zFaces button.on{background:var(--gold);color:#1A1206}
.zPhotoNote{margin:-6px 0 12px;font-size:13.5px;font-weight:700;color:var(--goldT)}

/* ---------- B6: "Sell us your cards" and the music button (landing page under the account link; mini links) ---------- */
.homeMore{margin:12px 0 0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 12px;font-family:var(--util);font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.homeMore .sellLink{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--muted);padding-bottom:1px}
.homeMore .sellLink:hover{color:var(--paper);border-color:var(--paper)}
.hmDot{color:var(--muted)}
.musicBtn{font-family:var(--util);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--goldT);white-space:nowrap;
  padding:5px 12px;border-radius:7px;background:rgba(232,184,75,.12);border:1px solid rgba(232,184,75,.3);font-size:14px;line-height:1.2}
.musicBtn:hover{background:rgba(232,184,75,.22)}
.musicBtn.on{background:var(--gold);color:#1A1206;border-color:var(--gold)}
body.adminMode .musicBtn,body.adminMode .musicDock{display:none}
.miniX{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 9px}
.miniX .sellLink{font-family:var(--util);font-size:13.5px;letter-spacing:.06em;color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(228,232,231,.3)}
.miniX .sellLink:hover{border-color:var(--paper)}
.miniX .musicBtn{font-size:13px;padding:3px 10px}
.musicBtn .mbI{margin-right:.35em}
/* B16: in the top bar (landing, cart, account): left of CAD/USD, the same height as the cart button; just the note on phones */
.topR .musicBtn{flex:0 0 auto;height:38px;display:flex;align-items:center;justify-content:center;padding:0 13px;border-radius:8px;font-size:15px;font-weight:600}
.topR .musicBtn .mbI{font-size:17px;line-height:1}
@media(max-width:640px){ .topR .musicBtn{width:38px;padding:0} .topR .musicBtn .mbT{display:none} .topR .musicBtn .mbI{margin:0;font-size:19px} }
@media(max-width:400px){ .topR .musicBtn{width:34px} .topR .modes button{padding:6px 7px} }   /* room for chat + Sign up at the left (B22: + home beside the cart) */

/* ---------- B6: the substitute view (#subView, sub.js): top bar like the account view; the open link shows the binder ---------- */
body.vSubGrid{height:100vh;height:100dvh;overflow:hidden}
body.vSubGrid .foot{display:none}
.subThumb{position:relative;display:block;flex:0 0 auto;width:48px;aspect-ratio:5/7;border-radius:5px;overflow:hidden;background:var(--raise)}
.subThumb img{width:100%;height:100%;object-fit:cover;display:block}
.subThumb i{position:absolute;inset:30%;border-radius:4px;background:rgba(var(--fgr),.12)}
.subThumb .phTag{left:2px;right:2px;bottom:2px;font-size:8.5px;text-align:center;padding:0 2px}
.subIntro{display:flex;gap:10px;align-items:flex-start}
.subIntroTxt{min-width:0}
.subIntro h2{margin:0 0 5px;font-size:19px;font-weight:900;letter-spacing:-.02em;line-height:1.15}
.subIntro p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.subIntro p b{color:var(--paper)}
.sideL .subIntro{padding:2px 0 4px}
.sideL .subThumb.miss{display:none}                                  /* desktop: the missing card is in the right panel */
.subMissBig{display:flex;gap:11px;align-items:center;padding:10px;border-radius:9px;background:rgba(var(--fgr),.04);border:1px solid rgba(var(--fgr),.08)}
.subMissBig .subThumb.big{width:64px}
.subMissBig div{min-width:0;display:flex;flex-direction:column;gap:1px}
.subMissBig small{font-family:var(--util);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.subMissBig b{font-size:14.5px;line-height:1.25;overflow-wrap:anywhere}
.subMissBig span{font-size:12.5px;color:var(--muted)}
.subSteps{margin:2px 0 0;padding-left:18px;font-size:13px;line-height:1.55;color:var(--paper)}
.subConfirm p{margin:0 0 12px;font-size:15px;line-height:1.45}
.subErr{color:var(--bad);font-size:13.5px}
.subConfirm .subErr{margin:-4px 0 12px;font-size:13.5px}
.subYN{display:flex;gap:8px}
.subYN .btn{flex:0 0 auto;padding:12px 16px;font-size:15px}
.subYN .btn:disabled{opacity:.5;cursor:default}
.zoomInfo .subYN .trayGo{flex:1;width:auto}
.subMsg{padding:44px 16px 30px;display:flex;justify-content:center}
.subMsg .loading{padding:40px 0}
.subBox{width:100%;max-width:520px;background:var(--vinyl);border:1px solid rgba(var(--fgr),.08);border-radius:14px;padding:22px 22px 20px;text-align:center}
.subBox .sideLbl{margin:0 0 14px}
.subPic{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 14px}
.subThumb.pick{width:150px;border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.subThumb.pick .phTag{font-size:10.5px;left:6px;right:auto;bottom:6px;padding:0 5px}
.subPic small{font-size:13.5px;color:var(--muted)}
.subTxt{margin:0 0 18px;font-size:18px;line-height:1.5}
.subActs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.subActs .btn{display:inline-block;padding:11px 18px;font-size:15px;text-decoration:none}
@media(max-width:899px){
  body.vSubGrid .mid{height:calc(100vh - var(--topH) - env(safe-area-inset-bottom));height:calc(100dvh - var(--topH) - env(safe-area-inset-bottom))}
  /* no slot strip here; the intro (at most 96px + 8px) sits above the binder: shop.css's 212px - 72px + 104px */
  body.vSubGrid .binder{--pw:min(calc((100vw - 56px) / 3), calc((100vh - 244px - env(safe-area-inset-bottom)) / 3 * 5 / 7))}
  @supports (height:100dvh){ body.vSubGrid .binder{--pw:min(calc((100vw - 56px) / 3), calc((100dvh - 244px - env(safe-area-inset-bottom)) / 3 * 5 / 7))} }
  .mid .subIntro{width:100%;max-width:560px;max-height:96px;overflow:hidden;margin:0 0 8px;flex:0 0 auto}
  .mid .subIntro h2{font-size:16px;margin-bottom:3px}
  .mid .subIntro p{font-size:12.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .mid .subThumb.miss{width:44px}
  .subMsg{padding:24px 14px 20px}
  .subBox{padding:18px 16px 16px}
  .subTxt{font-size:16.5px}
  .subThumb.pick{width:130px}
}

/* ---------- B6: the music dock (#musicDock, music.js; appended to body, outside #main) ----------
   desktop, pack / Vault / reward / substitute views: the bottom of the left column, the left panel gives up that room (like
   the chat footer on the right); desktop, other views: bottom-left, the page gets room below it; phone: full width under
   the top bar and the page moves down, so it never covers the slot strip, the chat button or the top bar. --mdH = its height. */
.musicDock{position:fixed;z-index:35;left:16px;bottom:16px;width:320px;display:flex;flex-direction:column;background:var(--ink);
  border:1px solid rgba(var(--fgr),.14);border-radius:10px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.55)}
.mdBar{flex:0 0 auto;height:36px;display:flex;align-items:center;gap:6px;padding:0 4px 0 10px;background:rgba(232,184,75,.1);border-bottom:1px solid rgba(var(--fgr),.08)}
.mdIco{color:var(--goldT);font-size:15px;line-height:1}
.mdTitle{flex:1;min-width:0;font-family:var(--util);font-size:13.5px;letter-spacing:.04em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--paper)}
.mdMin,.mdX,.mdPlay,.mdNext{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:rgba(var(--fgr),.08);color:var(--paper);font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.mdX{font-size:19px}
.mdMin:hover,.mdX:hover,.mdNext:hover{background:rgba(var(--fgr),.18)}
/* B16: play/pause and next (the YouTube IFrame API answered); the play button takes the note's place */
.mdPlay{background:var(--gold);color:#1A1206}
.mdPlay:hover{background:#F0C766}
.mdPlay svg,.mdNext svg{width:16px;height:16px;display:block}
.musicDock [hidden]{display:none!important}
.musicDock.api .mdIco{display:none}
.musicDock.cmp .mdMin{display:none}                                  /* binder views: always the one-line bar */
.mdVid{position:relative;flex:0 0 auto;height:180px;background:#000}
.mdVid iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;display:block}
.musicDock.min .mdBar{border-bottom:0}
.musicDock.min .mdVid{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}   /* keeps playing */
body.mdOn{--mdH:218px}
body.mdOn.mdMini{--mdH:38px}
@media(min-width:900px){
  body.mdOn:not(.vShop):not(.vSubGrid){padding-bottom:calc(var(--mdH) + 32px)}
  body.vShop .musicDock,body.vSubGrid .musicDock{left:0;bottom:0;width:clamp(210px,19vw,270px);border-width:1px 1px 0 0;border-radius:0;box-shadow:none}
  body.vShop .mdVid,body.vSubGrid .mdVid{height:calc(clamp(210px,19vw,270px) * 9 / 16)}
  body.vShop.mdOn,body.vSubGrid.mdOn{--mdH:calc(clamp(210px,19vw,270px) * 9 / 16 + 37px)}
  body.vShop.mdOn.mdMini,body.vSubGrid.mdOn.mdMini{--mdH:37px}
  body.vShop.mdOn .sideL,body.vSubGrid.mdOn .sideL{margin-bottom:var(--mdH)}
}
/* B23 (replaces B7's dock under the footer): narrow desktop (900-1099px), landing, cart and account. A bottom-left dock sat
   over the tiles there, and B7's dock in the page flow under the footer was thousands of pixels down the landing (opening the
   music jumped the page there). Now these views get the phone's dock: a full-width strip under the top bar (thumbnail, song,
   buttons) and the page moves down by --mdH, so it never covers anything. :where() keeps each rule exactly as specific as
   its phone twin below (so .min, the one-line bar and the B17 page frame win the same way). The binder views keep their
   left-column dock. */
@media(min-width:900px) and (max-width:1099px){
  body.mdOn:not(.vShop):not(.vSubGrid){padding-bottom:0}
  :where(body:not(.vShop):not(.vSubGrid)) .musicDock{top:var(--topH);left:0;right:0;bottom:auto;width:auto;height:112px;flex-direction:row;align-items:flex-start;
    border-width:0 0 1px 0;border-radius:0;box-shadow:0 10px 24px rgba(0,0,0,.45)}
  :where(body:not(.vShop):not(.vSubGrid)) .mdVid{order:-1;width:176px;height:99px;margin:6px 0 0 8px;border-radius:6px;overflow:hidden}
  :where(body:not(.vShop):not(.vSubGrid)) .mdBar{flex:1;min-width:0;height:100%;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;grid-template-rows:1fr auto;
    grid-template-areas:"ico title title title title" ". . . min x";align-items:start;gap:6px;padding:9px 8px 9px 10px;background:none;border-bottom:0}
  :where(body:not(.vShop):not(.vSubGrid)) .musicDock.api .mdBar{grid-template-areas:"title title title title title" "play next . min x"}
  :where(body:not(.vShop):not(.vSubGrid)) .mdIco{grid-area:ico;padding-top:1px}
  :where(body:not(.vShop):not(.vSubGrid)) .mdTitle{grid-area:title;white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
  :where(body:not(.vShop):not(.vSubGrid)) .mdPlay{grid-area:play;width:36px;height:36px}
  :where(body:not(.vShop):not(.vSubGrid)) .mdNext{grid-area:next;width:36px;height:36px}
  :where(body:not(.vShop):not(.vSubGrid)) .mdMin{grid-area:min;width:36px;height:36px}
  :where(body:not(.vShop):not(.vSubGrid)) .mdX{grid-area:x;width:36px;height:36px}
  :where(body:not(.vShop):not(.vSubGrid)) .musicDock.min{height:40px;align-items:stretch}
  :where(body:not(.vShop):not(.vSubGrid)) .musicDock.min .mdBar,:where(body:not(.vShop):not(.vSubGrid)) .musicDock.api.min .mdBar{display:flex;align-items:center;gap:6px;padding:0 6px 0 8px;background:rgba(232,184,75,.1)}
  :where(body:not(.vShop):not(.vSubGrid)) .musicDock.min .mdIco{padding:0 2px}
  :where(body:not(.vShop):not(.vSubGrid)) .musicDock.min .mdTitle{display:block;white-space:nowrap}
  :where(body:not(.vShop):not(.vSubGrid)) .musicDock.min .mdMin,:where(body:not(.vShop):not(.vSubGrid)) .musicDock.min .mdX,
  :where(body:not(.vShop):not(.vSubGrid)) .musicDock.min .mdPlay,:where(body:not(.vShop):not(.vSubGrid)) .musicDock.min .mdNext{width:30px;height:30px}
  body.mdOn:where(:not(.vShop):not(.vSubGrid)){--mdH:112px}
  body.mdOn.mdMini:where(:not(.vShop):not(.vSubGrid)){--mdH:40px}
  body.mdOn:where(:not(.vShop):not(.vSubGrid)) main{padding-top:var(--mdH)}
}
@media(max-width:899px){
  .musicDock{top:var(--topH);left:0;right:0;bottom:auto;width:auto;height:112px;flex-direction:row;align-items:flex-start;border-width:0 0 1px 0;border-radius:0;
    box-shadow:0 10px 24px rgba(0,0,0,.45)}
  .mdVid{order:-1;width:176px;height:99px;margin:6px 0 0 8px;border-radius:6px;overflow:hidden}
  .mdBar{flex:1;min-width:0;height:100%;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;grid-template-rows:1fr auto;
    grid-template-areas:"ico title title title title" ". . . min x";align-items:start;gap:6px;padding:9px 8px 9px 10px;background:none;border-bottom:0}
  .musicDock.api .mdBar{grid-template-areas:"title title title title title" "play next . min x"}
  .mdIco{grid-area:ico;padding-top:1px}
  .mdTitle{grid-area:title;white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
  .mdPlay{grid-area:play;width:36px;height:36px}
  .mdNext{grid-area:next;width:36px;height:36px}
  .mdMin{grid-area:min;width:36px;height:36px}
  .mdX{grid-area:x;width:36px;height:36px}
  /* minimised, and B16's one-line bar in the binder views: note or play/pause, the song, next, (minimise,) close */
  .musicDock.min{height:40px;align-items:stretch}
  .musicDock.min .mdBar,.musicDock.api.min .mdBar{display:flex;align-items:center;gap:6px;padding:0 6px 0 8px;background:rgba(232,184,75,.1)}
  .musicDock.min .mdIco{padding:0 2px}
  .musicDock.min .mdTitle{display:block;white-space:nowrap}
  .musicDock.min .mdMin,.musicDock.min .mdX,.musicDock.min .mdPlay,.musicDock.min .mdNext{width:30px;height:30px}
  body.mdOn{--mdH:112px}
  body.mdOn.mdMini{--mdH:40px}
  body.mdOn main{padding-top:var(--mdH)}
  body.vShop.mdOn .mid{height:calc(100vh - var(--topH) - 72px - var(--mdH) - env(safe-area-inset-bottom));height:calc(100dvh - var(--topH) - 72px - var(--mdH) - env(safe-area-inset-bottom))}
  body.vShop.mdOn .binder{--pw:min(calc((100vw - 56px) / 3), calc((100vh - 212px - var(--mdH) - env(safe-area-inset-bottom)) / 3 * 5 / 7))}
  body.vSubGrid.mdOn .mid{height:calc(100vh - var(--topH) - var(--mdH) - env(safe-area-inset-bottom));height:calc(100dvh - var(--topH) - var(--mdH) - env(safe-area-inset-bottom))}
  body.vSubGrid.mdOn .binder{--pw:min(calc((100vw - 56px) / 3), calc((100vh - 244px - var(--mdH) - env(safe-area-inset-bottom)) / 3 * 5 / 7))}
  @supports (height:100dvh){
    body.vShop.mdOn .binder{--pw:min(calc((100vw - 56px) / 3), calc((100dvh - 212px - var(--mdH) - env(safe-area-inset-bottom)) / 3 * 5 / 7))}
    body.vSubGrid.mdOn .binder{--pw:min(calc((100vw - 56px) / 3), calc((100dvh - 244px - var(--mdH) - env(safe-area-inset-bottom)) / 3 * 5 / 7))}
  }
}
/* B16: small phones: a smaller thumbnail and buttons, so play, next, minimise and close fit beside it (320px included) */
@media(max-width:400px){
  .musicDock{height:96px}
  body.mdOn{--mdH:96px}
  .mdVid{width:144px;height:81px}
  .mdBar{gap:5px;padding:8px 6px 8px 8px}
  .mdTitle{-webkit-line-clamp:2}
  .mdPlay,.mdNext,.mdMin,.mdX{width:32px;height:32px}
}
/* B17: one of the shop's other pages open in the frame (music.js #mdPage): the one-line bar across the top, the page under it */
body.mdPaged{overflow:hidden}
.mdPage{position:fixed;z-index:95;left:0;top:40px;width:100%;height:calc(100vh - 40px);height:calc(100dvh - 40px);border:0;display:block;background:var(--ink)}
.mdPage[hidden]{display:none}                                       /* B33: kept for Forward after Back to the shop */
body.mdPaged .musicDock.musicDock{position:fixed;z-index:96;top:0;left:0;right:0;bottom:auto;width:auto;height:40px;margin:0;border-width:0 0 1px;border-radius:0;box-shadow:0 6px 18px rgba(0,0,0,.45)}
body.mdPaged .musicDock .mdBar{height:100%;max-width:1180px;margin:0 auto;width:100%;box-sizing:border-box}
/* chat on (chat.css keeps 54px more free for its button on upright phones): the same with the dock */
@media(max-width:899px) and (orientation:portrait){
  body.vShop.pcOn.mdOn .binder{--pw:min(calc((100vw - 56px) / 3), calc((100vh - 266px - var(--mdH) - env(safe-area-inset-bottom)) / 3 * 5 / 7))}
  @supports (height:100dvh){ body.vShop.pcOn.mdOn .binder{--pw:min(calc((100vw - 56px) / 3), calc((100dvh - 266px - var(--mdH) - env(safe-area-inset-bottom)) / 3 * 5 / 7))} }
}
@media(max-width:899px){ .phTag{left:6px;bottom:6px;font-size:9px;padding:0 4px} .pocket.vp .phTag{top:6px} .pocket.vp .saleTag~.phTag{top:28px} }

/* B9: printing badges in the zoom view */
.zBadges{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
.zBadge{font-family:var(--util);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:4px;background:rgba(var(--fgr),.1);color:var(--paper)}
.zBadge.ed1{background:#E8B84B;color:#1a1a1a}.zBadge.shl{background:#9FB3C8;color:#1a1a1a}.zBadge.unl{background:rgba(var(--fgr),.14)}.zBadge.rh{background:#7FC8A9;color:#1a1a1a}.zBadge.hl{background:#B39DDB;color:#1a1a1a}
.zStockNote{margin:-2px 0 10px;font-size:13.5px;color:var(--muted)}

/* B10: rewards / news box in the cart */
.optIn{margin:0 0 8px}.optIn.on{padding:10px 12px;border-radius:10px;background:rgba(232,184,75,.08);border:1px solid rgba(232,184,75,.25)}
.optRow{display:flex;gap:9px;align-items:center;font-size:13.5px;font-weight:700;cursor:pointer}
.optRow input{width:18px;height:18px;accent-color:#E8B84B;flex:0 0 auto}
.optEmail{display:block;width:100%;box-sizing:border-box;margin:8px 0 0;padding:9px 11px;border-radius:8px;border:1px solid rgba(var(--fgr),.18);background:var(--ink);color:var(--paper);font:inherit;font-size:15px}
.optFine{display:block;margin:7px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}

/* B10: the extras row under the tiles (pictures) and the picture tiles */
.homeLogo{display:block;margin:0 auto 4px;width:clamp(120px,15vw,190px);height:auto}
/* B14: the landing picture (Mike's NOMAX Pokemon art), full width of the landing column */
.homeHero{display:block;width:100%;height:auto;aspect-ratio:1600/689;margin:0 auto 22px;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.45);background:var(--raise)}
@media(max-width:899px){.homeHero{border-radius:12px;margin-bottom:16px}}
.tile.hasImg{padding:0;overflow:hidden;min-height:0}
.tile.hasImg .tImg{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.tile.hasImg .tBody{display:flex;flex-direction:column;gap:4px;padding:12px 16px 14px;flex:1;text-align:left}
.tile.hasImg .tPrice{margin-top:0;font-size:26px}
.tile.hasImg .go{padding-top:8px}
.tilesMore{margin-top:14px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.xtile{flex:0 0 calc((100% - 42px)/4);max-width:calc((100% - 42px)/4);display:flex;flex-direction:column;position:relative;text-decoration:none;color:inherit;border-radius:14px;border:1px solid rgba(var(--fgr),.08);transition:transform .15s,border-color .15s;overflow:hidden}
.xtile img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
a.xtile:hover{transform:translateY(-3px);border-color:var(--gold)}
.soonTile{cursor:default}.soonTile img{filter:saturate(.7) brightness(.92)}
.soonBadge{position:absolute;top:12px;right:12px;padding:5px 13px;border-radius:999px;background:rgba(var(--bgr),.88);color:var(--goldT);border:1px solid var(--gold);font-family:var(--util);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:14px}
.contestBadge{position:absolute;top:12px;right:12px;padding:5px 13px;border-radius:999px;background:var(--gold);color:#1A1206;border:1px solid #F3C756;font-family:var(--util);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.45)}   /* B15 */
@media(max-width:899px){.tilesMore{gap:10px}.xtile{flex-basis:calc((100% - 10px)/2);max-width:calc((100% - 10px)/2)}}
@media(max-width:420px){.xtile{flex-basis:100%;max-width:100%}}

/* B18: "For a limited time" beside the free shipping / no tax line (landing, cart, side panel, phone sheet) */
.ltBadge{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:999px;background:#C4362B;color:#fff;font-family:var(--util);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.5;vertical-align:1px;white-space:nowrap;box-shadow:0 2px 8px rgba(196,54,43,.4)}

/* ---------- B17: dealer slots on the landing (app.js dealersHTML): a bar (arrows, the shop's name, dots) over a
   horizontal scroll-snap track: NOMAX Pokemon (the landing), then NOMAX Yu-Gi-Oh! and NOMAX Magic (coming soon) ---------- */
.dealerBar{display:flex;align-items:center;justify-content:center;gap:14px;max-width:1180px;margin:0 auto;padding:14px 22px 0;box-sizing:border-box}
.dArr{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 0 3px;font-size:28px;line-height:1;color:var(--goldT);
  background:rgba(232,184,75,.1);border:1px solid rgba(232,184,75,.35)}
.dArr:hover:not(:disabled){background:rgba(232,184,75,.22)}
.dArr:disabled{opacity:.28;cursor:default}
.dName{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.dName b{font-family:var(--util);font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64vw}
.dDots{display:flex;gap:7px}
.dDots i{width:7px;height:7px;border-radius:50%;background:rgba(var(--fgr),.22)}
.dDots i.on{background:var(--gold)}
.dTrack{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.dTrack::-webkit-scrollbar{display:none}
.dSlide{flex:0 0 100%;min-width:0;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always;overflow-x:clip}
.dealers .home{padding-top:18px}
.dSoon{padding:18px 22px 28px;text-align:center}
.dSoon img{display:block;width:100%;max-width:1136px;height:auto;aspect-ratio:16/9;margin:0 auto;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.45);background:var(--raise)}
.dSoonTxt{margin:16px 0 10px;color:var(--muted);font-size:15px}
.dBack{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;padding:9px 16px;border-radius:8px;font-family:var(--util);font-size:14.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--goldT);background:rgba(232,184,75,.1);border:1px solid rgba(232,184,75,.35)}
.dBack:hover{background:rgba(232,184,75,.22)}
.dTm{margin:0 auto;max-width:640px;font-size:12px;line-height:1.5;color:var(--muted)}
/* the two pictures at the very bottom of the landing buttons */
.dSoonRow{margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dSoonTile{border-radius:14px;overflow:hidden;border:1px solid rgba(var(--fgr),.08);background:var(--raise)}
.dSoonTile img{display:block;width:100%;height:auto;aspect-ratio:16/9}
@media(max-width:899px){.dealerBar{padding:10px 14px 0;gap:10px}.dealers .home{padding-top:12px}.dSoon{padding:12px 14px 22px}.dSoon img{border-radius:12px}.dSoonRow{gap:10px}}
@media(max-width:560px){.dSoonRow{grid-template-columns:1fr}.dName b{font-size:14px;letter-spacing:.1em}}
/* B33: the Magic / Yu-Gi-Oh! tiles link to their game pages; a ribbon says what's there (Mike's pictures stay as they are) */
a.dHubTile{position:relative;display:block;text-decoration:none;color:inherit;transition:transform .15s,border-color .15s}
a.dHubTile:hover{transform:translateY(-3px);border-color:var(--gold)}
a.dHubTile:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.dHubRibbon{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);max-width:calc(100% - 20px);box-sizing:border-box;padding:6px 14px;border-radius:999px;
  background:rgba(10,18,22,.88);color:#F3C756;border:1px solid #E8B84B;font-family:var(--util);font-weight:700;font-size:14px;letter-spacing:.06em;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.45)}
@media(max-width:560px){.dHubRibbon{font-size:13px;padding:5px 10px;letter-spacing:.02em;white-space:normal;text-align:center;border-radius:14px;width:max-content;line-height:1.3}}
.dHubGo{margin:0 0 12px}
.dHubBtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:10px;background:var(--gold);color:#1A1206;font-weight:800;text-decoration:none}
.dHubBtn:hover{filter:brightness(1.08)}
.artTile{background:none!important}

/* B10: rewards / news box in the cart */
.optIn{margin:0 0 8px}.optIn.on{padding:10px 12px;border-radius:10px;background:rgba(232,184,75,.08);border:1px solid rgba(232,184,75,.25)}
.optRow{display:flex;gap:9px;align-items:center;font-size:13.5px;font-weight:700;cursor:pointer}
.optRow input{width:18px;height:18px;accent-color:#E8B84B;flex:0 0 auto}
.optEmail{display:block;width:100%;box-sizing:border-box;margin:8px 0 0;padding:9px 11px;border-radius:8px;border:1px solid rgba(var(--fgr),.18);background:var(--ink);color:var(--paper);font:inherit;font-size:15px}
.optFine{display:block;margin:7px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}

/* B12: mystery packs on the landing page (Mike's door pictures carry the name and price) and in the cart */
.mystHead{text-align:center;margin:30px 0 12px}
.mystHead h2{margin:0 0 6px;font-size:clamp(22px,3vw,30px);font-weight:900;letter-spacing:-.02em}
.mystHead p{margin:0 auto;max-width:560px;color:var(--muted);font-size:15px;line-height:1.5}
.mystTiles{grid-template-columns:repeat(3,1fr)}
.tile.mystTile{cursor:default}
.tile.mystTile .tBody{gap:8px}
.mystAdd{width:100%;margin:2px 0 0;padding:14px 12px;font-size:16px;white-space:normal;line-height:1.2}
.cartThumb.mystThumb{aspect-ratio:4/3;width:56px}
.cartThumb.mystThumb img{display:block;width:100%;height:100%;object-fit:cover}
.mystRow.gone .cartThumb{opacity:.3}
@media(max-width:899px){.mystTiles{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mystTiles{grid-template-columns:1fr}.mystAdd{font-size:15px}}
/* B12: binder pictures where a binder is chosen */
.bInfo i.bImg,.bName i.bImg{width:34px;height:26px;border-radius:4px;background-size:cover;background-position:center;background-color:var(--bc)}
.sSwatch.bImg{width:100%;height:100%;border-radius:4px;background-size:cover;background-position:center;opacity:1}
.chipR i.bImg{width:20px;height:15px;border-radius:3px;background-size:cover;background-position:center}
.homeBinders{margin:14px 0 0;text-align:center;font-size:16px}
.homeBinders a{color:var(--goldT);font-family:var(--util);font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.homeBinders a:hover{text-decoration:underline}

/* ---------- B21: "Hide" (app.js HIDES). Desktop: one row under Sort, the same height as the selects; it opens the list of
   toggles under it. Phone Filters sheet: chips after Sort. Each toggle: a tick box, the kind, how many cards it hides here. ---------- */
.hideBtn{flex:1;min-width:0;height:35px;display:flex;align-items:center;gap:6px;background:var(--ink);border:1px solid rgba(var(--fgr),.16);border-radius:7px;color:var(--paper);
  padding:0 8px;font-family:inherit;font-size:13.5px;line-height:1.2;text-transform:none;letter-spacing:0;text-align:left}   /* the selects' look and height */
.hideBtn b{flex:1;min-width:0;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hideBtn i{flex:0 0 auto;font-style:normal;font-size:10px;color:var(--muted)}
.hideBtn:hover,.hideBtn.open{border-color:rgba(var(--fgr),.3)}
.hideBtn.on{border-color:var(--gold);color:var(--goldT)}
.hideList{display:flex;flex-direction:column;gap:1px;margin-top:-3px;padding:3px;border-radius:8px;background:rgba(var(--fgr),.035);border:1px solid rgba(var(--fgr),.08)}
.hOpt{display:flex;align-items:center;gap:8px;width:100%;min-width:0;padding:4px 6px;border-radius:5px;text-align:left;color:var(--paper);font-size:13px;line-height:1.3}
.hOpt:hover{background:rgba(var(--fgr),.06)}
.hOpt i{flex:0 0 auto;position:relative;width:15px;height:15px;border-radius:4px;border:1.5px solid rgba(var(--fgr),.38)}
.hOpt.on i{background:var(--gold);border-color:var(--gold)}
.hOpt.on i::after{content:"";position:absolute;left:3.5px;top:.5px;width:4px;height:8px;border:solid #1A1206;border-width:0 2px 2px 0;transform:rotate(45deg)}
.hOpt b{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hOpt em{flex:0 0 auto;font-style:normal;font-family:var(--util);font-size:13.5px;letter-spacing:.03em;color:var(--muted)}
.hOpt.on b{color:var(--goldT)}
.hOpt.none{opacity:.5}
.hideLbl{font-family:var(--util);font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:2px 0 8px}
.hideChips{display:flex;flex-wrap:wrap;gap:8px}
.hideChips .hOpt{width:auto;padding:8px 12px;border-radius:20px;border:1px solid rgba(var(--fgr),.16);background:var(--ink);font-size:15px;gap:7px}
.hideChips .hOpt.on{border-color:var(--gold);background:rgba(232,184,75,.14)}
.hideChips .hOpt em{font-size:15px}
/* the Hide row costs the left panel ~42px: on desktop screens up to 960px tall the panel's spacing gives that back
   (1440x900: the panel is no taller than before B21) */
@media(min-width:900px) and (max-height:960px){
  .choices{gap:6px}
  .choice{padding:9px 11px}
  .browse{margin-top:12px;padding-top:11px}
  .bInfo{margin-bottom:9px}
  .sideL .fStack{gap:6px}
  .sideL .fHint{margin-top:8px}
  .sideFoot{padding-top:10px}
  .sideFoot .hstNote{padding:8px 11px;margin-bottom:9px}
}

/* ---------- B21: no picture (or it didn't load): the stand-in says "No image available" (set, number and name stay on it) ---------- */
.ph .phArt{position:relative}
.ph .phArt svg{opacity:.38}
.phNo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:4px;text-align:center;font-family:var(--util);font-weight:700;font-size:12px;
  line-height:1.15;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);text-shadow:0 1px 3px rgba(0,0,0,.65)}
.sThumb .ph,.sq .ph,.cartThumb .ph{padding:2px}
.sThumb .phTop,.sThumb .phName,.sq .phTop,.sq .phName,.cartThumb .phTop,.cartThumb .phName{display:none}
.sThumb .phArt,.sq .phArt,.cartThumb .phArt{margin:0}
.sThumb .phNo,.sq .phNo,.cartThumb .phNo{padding:1px;font-size:7.5px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.05}
.pocket.vp .ph{padding-bottom:44px}                                 /* Vault pockets: the name stays above the price bar */
@media(max-width:899px){ .pocket.vp .ph{padding-bottom:24px} .phNo{font-size:11px} }
.zoomImg .ph{padding:16px;border-radius:10px}
.zoomImg .phTop{font-size:15px}
.zoomImg .phArt{margin:12px 0}
.zoomImg .phName{font-size:21px;-webkit-line-clamp:3}
.zoomImg .phNo{font-size:22px;letter-spacing:.1em}
/* account / sub / reward thumbnails (window.__noImg, account.js, sub.js): <i class="noImg"> */
i.noImg,.acThumb i.noImg,.subThumb i.noImg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:2px;border-radius:0;text-align:center;
  font-style:normal;font-family:var(--util);font-size:7.5px;font-weight:600;line-height:1.05;letter-spacing:0;color:var(--muted);background:linear-gradient(165deg,#22323B,#16232A)}
.subMissBig .subThumb.big i.noImg{font-size:9px}
.subThumb.pick i.noImg{padding:10px;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}

/* ---------- B21: "Request photos of this card" in the zoom of a Vault card without both of our own photos ---------- */
.zReq{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:8px 0 0;padding:10px 14px;border-radius:9px;background:transparent;
  border:1px solid rgba(232,184,75,.45);color:var(--goldT);font-weight:700;font-size:14.5px}
.zReq:hover{background:rgba(232,184,75,.1)}
.zReq svg{flex:0 0 auto}

/* B21: pack wheel: the cart row's little wheel and the landing banner (only while the wheel is on) */
.cartThumb.pwThumb{width:56px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:transparent}
.pwIco{display:block;width:100%;height:100%}
.spinRow.gone .cartThumb{opacity:.3}
.spinRow .cartMeta small a{color:var(--goldT)}
/* B24: the landing's prize wheel tile, as lively as the picture tiles: a turning wheel of real prizes in gold light, a light
   sweep, twinkles; hover lifts it with a gold glow and tips the wheel. Reduced motion: all still. */
.pwBanner{position:relative;display:flex;align-items:stretch;margin:18px 0 0;border-radius:14px;overflow:hidden;color:var(--paper);text-decoration:none;
  background:radial-gradient(120% 140% at 0% 50%,#3A2A0C 0%,#1B2328 46%,#121D23 100%);border:1px solid rgba(232,184,75,.45);
  box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .15s,border-color .15s,box-shadow .2s}
.pwBanner::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,236,170,.13) 47%,rgba(255,236,170,.02) 55%,transparent 62%);
  transform:translateX(-100%);animation:pwSweep 5.5s ease-in-out 1.2s infinite}
.pwBanner:hover,.pwBanner:focus-visible{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 14px 34px rgba(0,0,0,.4),0 0 0 1px rgba(232,184,75,.35),0 0 32px rgba(232,184,75,.22)}
.pwArt{position:relative;flex:0 0 250px;display:flex;align-items:center;justify-content:center;padding:14px 0}
.pwRays{position:absolute;left:50%;top:50%;width:330px;height:330px;margin:-165px 0 0 -165px;border-radius:50%;opacity:.55;
  background:repeating-conic-gradient(from 0deg,rgba(255,215,120,.22) 0deg 7deg,transparent 7deg 22.5deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);animation:pwTurn 40s linear infinite reverse}
.pwSvg{position:relative;display:block;width:182px;height:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(232,184,75,.28));transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.pwWheel{transform-box:fill-box;transform-origin:center;animation:pwTurn 16s linear infinite}
.pwSvg .pwHub,.pwSvg .pwPtr{filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.pwSvg .pwPtr{transform-box:fill-box;transform-origin:50% 0;animation:pwTick 1.1s ease-in-out infinite}
.pwBanner:hover .pwSvg{transform:rotate(-8deg) scale(1.04)}
.pwSpark{position:absolute;width:8px;height:8px;border-radius:50%;background:#FFE7A0;box-shadow:0 0 10px 3px rgba(255,215,120,.75);opacity:0;animation:pwTwinkle 2.6s ease-in-out infinite}
.pwSpark:nth-of-type(1){left:30px;top:26px}
.pwSpark:nth-of-type(2){right:22px;top:46px;animation-delay:.9s;width:6px;height:6px}
.pwSpark:nth-of-type(3){left:44px;bottom:22px;animation-delay:1.7s;width:5px;height:5px}
.pwBanner .pwTxt{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:18px 26px 18px 6px}
.pwKick{padding:4px 12px;border-radius:999px;background:rgba(232,184,75,.14);border:1px solid rgba(232,184,75,.45);color:#F3D27A;font-family:var(--util);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.pwBanner .pwTxt b{font-family:var(--disp,inherit);font-weight:900;font-size:34px;line-height:1.05;letter-spacing:-.02em;color:#FFE7A0;
  background:linear-gradient(180deg,#FFF1C4 0%,#F2C95A 55%,#C98F22 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(60,36,6,.85)) drop-shadow(0 0 14px rgba(232,184,75,.25))}
.pwBanner .pwTxt small{font-size:15px;color:#C9D3D8;line-height:1.45;max-width:560px}
.pwGo{margin-top:6px;padding:11px 22px;border-radius:9px;background:var(--gold);color:#1A1206;font-weight:900;font-size:16px;letter-spacing:.01em;box-shadow:0 6px 18px rgba(232,184,75,.25);transition:background .15s,box-shadow .15s}
.pwBanner:hover .pwGo{background:#F3C756;box-shadow:0 8px 24px rgba(232,184,75,.4)}
.pwFan{position:relative;flex:0 0 330px;display:flex;align-items:center;justify-content:center;padding-right:24px}
.pwFan img{display:block;width:84px;height:auto;margin:0 -14px;border-radius:6px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.pwFan img:nth-child(1){transform:rotate(-14deg) translateY(10px)}
.pwFan img:nth-child(2){transform:rotate(-4deg) translateY(-6px);z-index:2;width:96px}
.pwFan img:nth-child(3){transform:rotate(6deg) translateY(-2px);z-index:1}
.pwFan img:nth-child(4){transform:rotate(15deg) translateY(12px)}
.pwBanner:hover .pwFan img:nth-child(1){transform:rotate(-20deg) translate(-12px,4px)}
.pwBanner:hover .pwFan img:nth-child(2){transform:rotate(-6deg) translate(-4px,-14px)}
.pwBanner:hover .pwFan img:nth-child(3){transform:rotate(9deg) translate(6px,-8px)}
.pwBanner:hover .pwFan img:nth-child(4){transform:rotate(22deg) translate(14px,8px)}
@media(max-width:1099px){ .pwFan{display:none} }
@keyframes pwTurn{to{transform:rotate(360deg)}}
@keyframes pwTick{0%,100%{transform:rotate(0)}8%{transform:rotate(-14deg)}16%{transform:rotate(0)}}
@keyframes pwTwinkle{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1)}}
@keyframes pwSweep{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}}
@media(max-width:700px){
  .pwBanner{flex-direction:column}
  .pwArt{flex:0 0 auto;padding:16px 0 4px}
  .pwSvg{width:168px}
  .pwBanner .pwTxt{align-items:center;text-align:center;padding:4px 18px 18px;gap:7px}
  .pwBanner .pwTxt b{font-size:29px}
  .pwBanner .pwTxt small{font-size:14.5px}
  .pwGo{align-self:stretch;text-align:center}
}
@media(prefers-reduced-motion:reduce){ .pwBanner,.pwSvg,.pwGo,.pwFan img{transition:none} .pwBanner::after,.pwRays,.pwWheel,.pwSvg .pwPtr,.pwSpark{animation:none} .pwSpark{opacity:.8} .pwBanner:hover .pwSvg{transform:none} }

/* ---------- B25: shop-wide search (app.js gs*). The landing box (.gsHome: a drop-down on desktop, a full-screen sheet on a phone
   while in use) and the top-bar magnifier's panel (#gsOv). Vault rows carry a price; binder rows never do (rule 4). ---------- */
.gsHome{position:relative;z-index:20;max-width:720px;margin:0 auto 22px}
.gsField{position:relative;display:flex;align-items:center;gap:8px}
.gsWrap{position:relative;flex:1;min-width:0;display:block}
.gsIco{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:flex;color:var(--goldT);pointer-events:none}
.gsIco svg{width:19px;height:19px}
.gsIn{display:block;width:100%;margin:0;padding:15px 46px 15px 46px;border-radius:12px;border:1px solid rgba(232,184,75,.4);background:var(--ink);color:var(--paper);
  font-size:17px;box-shadow:0 10px 30px rgba(0,0,0,.35);-webkit-appearance:none;appearance:none}
.gsIn::-webkit-search-cancel-button{display:none}
.gsIn::placeholder{color:var(--muted)}
.gsIn:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,184,75,.18),0 10px 30px rgba(0,0,0,.35)}
.gsX{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:rgba(var(--fgr),.09);color:var(--muted);font-size:18px;line-height:1}
.gsX:hover{background:rgba(var(--fgr),.18);color:var(--paper)}
.gsIn:placeholder-shown~.gsX{display:none}
.gsClose{display:none;flex:0 0 auto;height:44px;padding:0 12px;border-radius:9px;font-family:var(--util);font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--goldT);background:rgba(232,184,75,.1)}
.gsDrop{position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:min(70vh,640px);overflow:auto;overscroll-behavior:contain;padding:8px;border-radius:12px;
  background:var(--vinyl);border:1px solid rgba(var(--fgr),.12);box-shadow:0 22px 60px rgba(0,0,0,.6);text-align:left}
.gsDrop[hidden]{display:none}
.gsHint{margin:10px 10px;color:var(--muted);font-size:15px;line-height:1.5}
.gsHint b{color:var(--paper)}
.gsNote{margin:2px 8px 8px;font-family:var(--util);font-size:13.5px;letter-spacing:.04em;color:var(--muted)}
.gsList{display:flex;flex-direction:column;gap:2px}
.gsRow{display:flex;align-items:center;gap:12px;padding:7px 10px 7px 7px;border-radius:9px;color:var(--paper);text-decoration:none;border:1px solid transparent}
.gsRow:hover{background:rgba(var(--fgr),.05)}
.gsRow.on{background:rgba(232,184,75,.1);border-color:rgba(232,184,75,.55)}
.gsImg{position:relative;flex:0 0 auto;width:46px;height:64px;border-radius:4px;overflow:hidden;background:var(--raise)}
.gsImg img{display:block;width:100%;height:100%;object-fit:cover}
.gsImg i.noImg{font-size:8px}
.gsTxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gsName{display:flex;align-items:center;gap:8px;min-width:0}
.gsTxt b{min-width:0;font-size:15.5px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsTxt small{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsMarks{flex:0 0 auto;display:flex;gap:3px}
.gsMarks .pmark,.gsMarks .cmark,.gsMarks .jmark{position:static;font-size:10px;padding:0 5px;box-shadow:none}
.gsWhere{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;font-family:var(--util);font-size:14px;letter-spacing:.03em;color:var(--muted)}
.gsWhere em{font-style:normal;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.gsDot{flex:0 0 auto;width:14px;height:14px;border-radius:50%;margin-right:-2px;box-shadow:0 0 0 1px rgba(var(--fgr),.25)}
.gsDot.bImg{background-size:cover;background-position:center}
.gsPrice{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;font-family:var(--util)}
.gsPrice b{font-size:17px;font-weight:700;color:var(--goldT);white-space:nowrap}
.gsPrice s{font-size:13px;color:var(--muted)}
.gsVault .gsWhere em{color:var(--pink)}
.gsAll{display:block;margin:8px 4px 2px;padding:10px 12px;border-radius:9px;text-align:center;font-family:var(--util);font-size:15px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--goldT);text-decoration:none;background:rgba(232,184,75,.08);border:1px solid rgba(232,184,75,.25)}
.gsAll:hover{background:rgba(232,184,75,.18)}
/* the top-bar magnifier's panel */
.gsOv{position:fixed;inset:0;z-index:70;background:rgba(6,12,15,.72);display:flex;justify-content:center;align-items:flex-start;padding:64px 16px 16px}
.gsOv[hidden]{display:none}
.gsPanel{width:min(720px,100%);display:flex;flex-direction:column;gap:10px;max-height:100%}
.gsPanel .gsDrop{position:static;max-height:none;flex:0 1 auto;min-height:0}
.gsOv .gsClose{display:block}
body.gsLock{overflow:hidden}
/* phone: the landing box in use and the panel are full-screen sheets */
@media(max-width:899px){
  .gsHome{margin:0 0 16px}
  .gsIn{font-size:16px;padding:13px 42px 13px 42px}
  .gsIco{left:14px}
  .gsHome.gsFull{position:fixed;inset:0;z-index:70;margin:0;max-width:none;padding:10px 10px 0;background:var(--shell);display:flex;flex-direction:column;gap:10px}
  .gsHome.gsFull .gsClose{display:block}
  .gsHome.gsFull .gsIn{box-shadow:none}
  .gsHome.gsFull .gsDrop,.gsOv .gsDrop{position:static;flex:1 1 auto;max-height:none;min-height:0;border-radius:12px 12px 0 0;padding:6px;box-shadow:none;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .gsOv{padding:10px 10px 0;background:var(--shell)}
  .gsPanel{height:100%}
  .gsRow{gap:10px;padding:6px}
  .gsImg{width:42px;height:58px}
  .gsTxt b{font-size:15px}
  .gsWhere{font-size:13.5px}
}
/* desktop binder views: the magnifier joins Home + Cart in the corner over the right panel */
.gsBtn{flex:0 0 auto}
.gsBtn svg{width:18px;height:18px}
@media(min-width:900px){ body.vShop .top .gsBtn{padding:0 11px} }
@media(min-width:900px) and (max-width:1365px){ body.vShop .top .cLbl{display:none} }   /* the corner is narrower than three buttons and the word Cart */
@media(max-width:400px){ .gsBtn{width:36px;padding:0;justify-content:center} }

/* B25: the Music tile (no picture yet: a drawn one, the same size as the other extras) */
.musicTile{background:radial-gradient(120% 90% at 20% 10%,#2E5E86 0%,var(--vinyl) 55%,var(--shell) 100%)}
.musicTile .mtArt{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden}
.musicTile .mtArt::before{content:"";position:absolute;right:-14%;top:8%;width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#E8B84B 0 13%,var(--ink) 13.5% 15%,transparent 15.5%),repeating-radial-gradient(circle,#11191E 0 2px,#1B262C 2px 4px);
  box-shadow:0 14px 40px rgba(0,0,0,.6),inset 0 0 0 2px rgba(var(--fgr),.06);transition:transform .6s}
a.musicTile:hover .mtArt::before{transform:rotate(40deg)}
.musicTile .mtArt i{position:absolute;font-style:normal;color:var(--goldT);text-shadow:0 6px 24px rgba(0,0,0,.5);line-height:1}
.musicTile{container-type:inline-size}
.musicTile .mtN1{left:9%;top:5%;font-size:72px;font-size:30cqw}
.musicTile .mtN2{left:36%;top:22%;font-size:44px;font-size:18cqw;color:#B39DDB!important;transform:rotate(12deg)}
.musicTile .mtN3{left:52%;top:2%;font-size:32px;font-size:13cqw;color:var(--ok)!important;transform:rotate(-10deg)}
.musicTile .mtTxt{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:linear-gradient(transparent,rgba(var(--bgr),.92) 45%)}
.musicTile .mtTxt b{font-size:26px;font-weight:900;letter-spacing:-.02em;color:var(--paper)}
.musicTile .mtTxt small{font-size:14px;color:var(--muted)}
.musicTile .mtGo{margin-top:4px;font-family:var(--util);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--goldT)}
@media(min-width:1100px){ .tilesMore:has(> .xtile:nth-child(5):last-child) .xtile{flex-basis:calc((100% - 56px)/5);max-width:calc((100% - 56px)/5)} }
/* B25: narrow phones, cart and account views: the chat + Sign in buttons need the room (search stays in the binder views and the landing) */
@media(max-width:439px){ body:not(.vShop) #topR .gsBtn{display:none} }
/* B34 (Mike, 8 Oct): the footer's "This web app is 100% machine readable and completely AI friendly." line, on every page */
.foot .footAi{margin:0 auto 8px;max-width:760px;font-size:12.5px;line-height:1.45;letter-spacing:.04em;color:var(--muted)}
.foot .footAi a{color:var(--paper);text-decoration:underline;text-underline-offset:2px}
.foot .footAi a:hover{color:var(--goldT)}
/* ---- B46: the three doors on the landing, the door pages (Build your own pack, NOMAX Kismet packs), "Shape your Kismet" ---- */
.doorRow{margin-top:18px}
.doorRow .xtile{flex:0 0 calc((100% - 28px)/3);max-width:calc((100% - 28px)/3);cursor:pointer;padding:0;background:none;font:inherit;color:inherit}
.door .doorTag{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:rgba(10,18,22,.78);border:1px solid rgba(232,184,75,.55);color:#fff;font-family:var(--util);font-size:14px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
@media(max-width:899px){.doorRow .xtile{flex-basis:100%;max-width:520px}.door .doorTag{font-size:13px}}
.homeTools{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:18px 0 0;font-family:var(--util);font-size:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.homeTools a{color:var(--goldT);text-decoration:none}.homeTools a:hover{text-decoration:underline}
.doorBack{margin:0 0 12px}
.linkBtn{background:none;border:0;padding:0;color:var(--goldT);font:inherit;font-weight:700;cursor:pointer}.linkBtn:hover{text-decoration:underline}
.doorPage .eyebrow{margin:0 0 6px;font-family:var(--util);font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--goldT)}
.kHero{display:block;width:100%;height:auto;aspect-ratio:16/7;border-radius:14px;margin:0 0 20px;object-fit:cover}
.kPitch{max-width:900px;margin:0 auto 22px}
.kPitch h1{margin:0;font-size:clamp(26px,3.4vw,40px);line-height:1.12;letter-spacing:-.02em}
.kLede{margin:14px 0 0;font-size:17px;line-height:1.6;color:var(--muted)}
.kStuff{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.kStuff li{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;background:rgba(var(--fgr),.04);border:1px solid rgba(var(--fgr),.09)}
.kStuff b{font-size:15.5px}.kStuff span{font-size:14px;line-height:1.45;color:var(--muted)}
.kShape{margin-top:18px;padding:16px 18px;border-radius:14px;background:linear-gradient(160deg,rgba(138,42,216,.22),rgba(138,42,216,.06));border:1px solid rgba(190,140,255,.4)}
.kShape h2{margin:0 0 6px;font-size:21px}.kShape p{margin:0;font-size:15.5px;line-height:1.55;color:var(--paper)}
.kDoors .seven{font-weight:700}
.kFine{max-width:900px;margin:14px auto 0;text-align:center;font-size:14px;color:var(--muted)}
.kAsk{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(4,8,12,.72)}
.kAskIn{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:22px 20px 18px;border-radius:16px;background:var(--vinyl);border:1px solid rgba(190,140,255,.45);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.kAskIn h2{margin:2px 0 4px;font-size:24px}.kAskLede{margin:0 0 12px;color:var(--muted);font-size:15px}
.kX{position:absolute;right:10px;top:8px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(var(--fgr),.08);color:var(--paper);font-size:22px;cursor:pointer}
.kQ{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;padding:0;border:0;font-size:15px;font-weight:700}
.kQ legend{padding:0;margin:0 0 6px;font-weight:700}
.kQ input[type=text],.kQ input:not([type]){padding:11px 12px;border-radius:9px;border:1px solid rgba(var(--fgr),.18);background:var(--ink);color:var(--paper);font:inherit;font-weight:500;font-size:16px}
.kRps{display:flex;gap:8px}.kRps label{flex:1}
.kRps input{position:absolute;opacity:0;pointer-events:none}
.kRps span{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:10px;border:1px solid rgba(var(--fgr),.2);font-weight:700;cursor:pointer}
.kRps input:checked+span{background:var(--gold);color:#0A1216;border-color:var(--gold)}
/* B50e: the era / collecting chips wrap (6 choices); the type list looks like the text boxes */
.kChips{flex-wrap:wrap}.kChips label{flex:1 1 calc(50% - 8px)}.kChips span{padding:6px 8px;text-align:center;font-size:14.5px;line-height:1.25}
.kQ select{padding:11px 12px;border-radius:9px;border:1px solid rgba(var(--fgr),.18);background:var(--ink);color:var(--paper);font:inherit;font-weight:500;font-size:16px}
.kRps input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.kAskGo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:6px}.kAskGo .trayGo{flex:1 1 200px}
/* B48: our agents on their tiles: face + lead-in line over the top of the picture, running into the button's words */
.agentTile .agentBar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;padding:8px 12px 18px 8px;
  background:linear-gradient(180deg,rgba(6,10,16,.88) 0%,rgba(6,10,16,.72) 60%,rgba(6,10,16,0) 100%);color:#fff;font-size:15px;line-height:1.25;text-align:left;pointer-events:none}
.agentTile .agentBar b{color:var(--goldT,#f3c756)}
.agentTile img.agentFace{flex:0 0 auto;width:50px;height:50px;aspect-ratio:1;border-radius:50%;border:2px solid var(--gold,#e8b84b);box-shadow:0 3px 10px rgba(0,0,0,.5)}
@media(max-width:899px){.agentTile .agentBar{font-size:13.5px;padding:6px 10px 14px 6px}.agentTile img.agentFace{width:42px;height:42px}}
@media(max-width:420px){.agentTile .agentBar{font-size:15px}.agentTile img.agentFace{width:48px;height:48px}}
/* B49: the currency menu (display only; checkout charges CAD) */
.curSel{display:inline-flex;position:relative}
.curSel select{appearance:none;-webkit-appearance:none;height:38px;padding:0 28px 0 12px;border-radius:8px;border:1px solid rgba(232,184,75,.55);background:rgba(var(--fgr),.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E8B84B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center/10px 7px;color:var(--paper);font-family:var(--util);font-size:15px;font-weight:700;letter-spacing:.06em;cursor:pointer}
.curSel select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.curSel option{background:var(--ink);color:var(--paper)}
.curSel .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* B62: four doors (Build your own, Kismet, Singles & traders, Paisley) sit in one row on wide screens, two by two below */
.doorRow.four .xtile{flex:0 0 calc((100% - 42px)/4);max-width:calc((100% - 42px)/4)}
@media(max-width:1099px){.doorRow.four .xtile{flex-basis:calc((100% - 14px)/2);max-width:calc((100% - 14px)/2)}}
@media(max-width:899px){.doorRow.four .xtile{flex-basis:100%;max-width:520px}}
.door_paisley img{object-fit:cover;aspect-ratio:4/3;height:auto}