/* Storefront styles 3/4: compare, checkout, packing model, header/filter-box refinements, mobile cart. */
  /* ---------- Compare (up to 3 cards side by side) ----------
     Buyers compare cards by reading the card text on the picture itself, so the view is just big pictures + add to cart. */
  .cmp-wrap{z-index:72}
  .modal.cmp-modal{width:min(1400px,100%);max-height:calc(100% - 12px);display:flex;flex-direction:column;overflow:hidden}
  .cmp-head{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border);flex:none}
  .cmp-head h2{font-size:1.15rem;margin:0}
  .cmp-head .cmp-n{font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
  .cmp-head .sp{flex:1}
  .cmp-nat{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;padding:3px 10px;border-radius:999px;border:1.5px solid var(--nc);color:var(--ink)}
  .cmp-nat i{width:11px;height:11px;border-radius:50%;background:var(--nc);display:inline-block}
  .cmp-x{width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;font-size:1.1rem;line-height:1;display:grid;place-items:center;padding:0}
  #cmpClose{background:#e03131;border-color:#e03131;color:#fff}
  #cmpClose:hover{background:#c92a2a}
  .cmp-back svg{width:19px;height:19px}
  .cmp-reset{flex:none;font:inherit;font-size:.84rem;font-weight:600;padding:8px 12px;border-radius:10px;border:1.5px solid var(--border-strong,#ccc);background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap}
  .cmp-reset:hover:not([disabled]){border-color:var(--accent);color:var(--accent)}
  .cmp-reset[disabled]{opacity:.45;cursor:default}
  .cmp-body{overflow:auto;flex:1;position:relative}
  .cmp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:16px 18px 18px}
  .cmp-slot{display:flex;flex-direction:column;gap:10px;min-width:0}
  .cmp-pic{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--surface-2);display:grid;place-items:center;cursor:zoom-in}
  .cmp-pic img{width:100%;height:100%;object-fit:contain}
  .cmp-rm{position:absolute;top:8px;right:8px;z-index:2;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--ink);cursor:pointer;font-size:.95rem}
  .cmp-cart{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 14px;border-radius:12px;border:0;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:700;font-size:.95rem;cursor:pointer}
  .cmp-cart svg{width:19px;height:19px}
  .cmp-cart.added{background:var(--good)}
  .cmp-cart[disabled]{background:var(--surface-2);color:var(--muted);cursor:default}
  .cmp-empty{aspect-ratio:1/1;width:100%;border:2px dashed var(--border-strong,#ccc);border-radius:14px;background:var(--surface-2);color:var(--muted);font:inherit;font-weight:700;font-size:1rem;cursor:pointer;display:grid;place-items:center}
  .cmp-empty:hover{border-color:var(--accent);color:var(--accent)}
  .cmp-empty b{font-size:2.4rem;line-height:1}
  /* picker */
  .cmp-pick{position:absolute;inset:0;z-index:5;background:var(--surface);display:flex;flex-direction:column}
  .cmp-pick[hidden]{display:none}
  .modal.cmp-modal.picking{height:calc(100% - 12px)}   /* the picker gets the full height, not just the pictures' */
  .cmp-ptools{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);align-items:center}
  .cmp-search{flex:1 1 260px;display:flex;align-items:center;gap:8px;border:1.5px solid var(--border-strong,#ccc);border-radius:999px;padding:0 12px;background:var(--bg)}
  .cmp-search svg{width:17px;height:17px;flex:none;color:var(--muted)}
  .cmp-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;padding:9px 0;outline:none}
  .cmp-ptools select{font:inherit;font-size:.86rem;padding:8px 10px;border-radius:10px;border:1.5px solid var(--border-strong,#ccc);background:var(--surface);color:var(--ink);max-width:180px}
  .cmp-ptools select.on{border-color:var(--accent);background:var(--accent-soft);font-weight:600}
  .cmp-ptools select:disabled{opacity:1;color:var(--ink);font-weight:600;border-style:dashed;cursor:not-allowed}
  .cmp-pinfo{padding:8px 16px 0;font-size:.8rem;color:var(--muted)}
  .cmp-res{flex:1;min-height:0;overflow:auto;padding:10px 16px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:max-content;gap:10px;align-content:start}   /* max-content rows: a scrolling grid must never squeeze its rows to fit */
  .cmp-tile{position:relative;display:block;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface-2);cursor:pointer;padding:0}
  .cmp-tile:hover{border-color:var(--accent);box-shadow:var(--shadow)}
  .cmp-tile[disabled]{opacity:.45;cursor:default}
  .cmp-tile img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}   /* the picture sizes the tile (a % height would collapse the grid rows) */
  .cmp-tile .tin{position:absolute;top:6px;left:6px;font-size:.66rem;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
  /* product popup button + floating tray */
  .pd-cmp-row{margin:10px 0 4px}
  .pd-cmp-btn.on{border-color:var(--accent);background:var(--accent-soft)}
  .cmp-tray{position:fixed;right:16px;bottom:16px;z-index:60;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
    border:0;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;box-shadow:0 10px 24px -8px rgba(0,0,0,.45)}
  .cmp-tray[hidden]{display:none}
  .cmp-tray .ct-faces{display:inline-flex}
  .cmp-tray .ct-faces img{width:24px;height:24px;border-radius:50%;object-fit:cover;border:2px solid var(--accent);margin-left:-8px;background:var(--surface)}
  .cmp-tray .ct-faces img:first-child{margin-left:0}
  @media (max-width:640px){
    .modal.cmp-modal{max-height:100%;border-radius:14px}
    .cmp-wrap{padding:6px}
    .cmp-head{padding:10px 12px;flex-wrap:wrap;gap:8px}
    .cmp-head h2{font-size:1rem}
    /* phones: each picture nearly full width; swipe sideways between the cards */
    .cmp-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:12px}
    .cmp-slot{scroll-snap-align:center}
    .cmp-res{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 10px 14px}
    .modal.cmp-modal.picking{height:100%}
    .cmp-ptools{padding:10px;gap:6px}
    .cmp-search{flex:1 1 calc(100% - 50px)}
    .cmp-reset{padding:7px 8px;font-size:.78rem}
    .cmp-ptools select{flex:1 1 0;min-width:0;max-width:none;font-size:.8rem;padding:7px 4px}
    .cmp-tray{right:10px;bottom:10px;padding:9px 13px}
  }

  /* ---------- Checkout modal ---------- */
  .modal-wrap{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;
    opacity:0;pointer-events:none;transition:opacity .2s ease}
  .modal-wrap.show{opacity:1;pointer-events:auto}
  .modal-wrap .backdrop{position:absolute;inset:0;background:rgba(8,10,14,.55)}
  .modal{position:relative;background:var(--surface);border:1px solid var(--border);
    border-radius:18px;width:min(560px,100%);max-height:calc(100% - 24px);overflow-y:auto;
    box-shadow:var(--shadow-lift)}
  .modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 6px}
  .modal-head h2{font-size:1.25rem}
  .modal-body{padding:8px 22px 22px}

  /* ---------- How we pack: the cart's own cards, packed — opaque mailer first, then see-through ---------- */
  .pack-cart-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:10px;padding:9px 12px;
    background:none;border:1px dashed var(--border-strong,var(--border));border-radius:10px;color:var(--muted);font:inherit;font-size:.84rem;font-weight:600;cursor:pointer}
  .pack-cart-btn:hover{color:var(--ink);border-color:var(--accent);background:var(--accent-soft)}
  #packWrap{z-index:80}
  .pack-modal{width:min(640px,100%)}
  @media (max-width:520px){ .pack-modal .modal-body{padding:6px 12px 16px} }
  .pk-stage{position:relative;height:440px;border-radius:14px;overflow:hidden;perspective:1100px;touch-action:none;user-select:none;cursor:pointer;
    background:radial-gradient(ellipse at 50% 32%,#303b5c 0%,#171c2b 60%,#0c0f18 100%)}
  .pk-stage.open{cursor:grab}
  .pk-stage.dragging{cursor:grabbing}
  .pk-fit{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
  .pk-rig{position:absolute;left:0;top:0;transform-style:preserve-3d}
  .pk-part{position:absolute;left:0;top:0;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.8,.2,1)}
  .pk-leaf{position:absolute;box-sizing:border-box;transition:opacity .35s,transform .65s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
  .pk-floor{position:absolute;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 66%)}
  .pk-anchor{position:absolute;width:1px;height:1px;pointer-events:none}
  .pk-shade{position:absolute;inset:0;pointer-events:none}
  /* bags are built from horizontal strips that follow a thickness profile: flat at the sealed top, swelling where the cards sit */
  .pk-mail{background:radial-gradient(circle at 42% 38%,rgba(255,255,255,.38) 0 1.4px,rgba(255,255,255,.12) 3px,rgba(255,255,255,.04) 5px,transparent 6px) var(--bx,0px) var(--by,0px)/13px 13px,
      radial-gradient(circle at 42% 38%,rgba(255,255,255,.38) 0 1.4px,rgba(255,255,255,.12) 3px,rgba(255,255,255,.04) 5px,transparent 6px) calc(6.5px + var(--bx,0px)) calc(6.5px + var(--by,0px))/13px 13px,
      rgba(255,255,255,.1)}
  .pk-skin{position:absolute;inset:0;transition:opacity .8s ease;
    background:radial-gradient(circle at 40% 36%,#fff 0 1.6px,rgba(255,255,255,.75) 3px,rgba(110,120,145,.15) 5.4px,transparent 6.4px) var(--bx,0px) var(--by,0px)/13px 13px,
      radial-gradient(circle at 40% 36%,#fff 0 1.6px,rgba(255,255,255,.75) 3px,rgba(110,120,145,.15) 5.4px,transparent 6.4px) calc(6.5px + var(--bx,0px)) calc(6.5px + var(--by,0px))/13px 13px,#eceff4}
  .pk-rig.open .pk-skin{opacity:0}
  /* the folded-over flap: a smooth band across the top with a shadowed fold edge */
  .pk-mail.f.top .pk-skin{background:linear-gradient(180deg,#f6f7fa,#e9ecf2);box-shadow:inset 0 -2px 0 rgba(120,130,150,.4),inset 0 -7px 7px -5px rgba(0,0,0,.18)}
  .pk-mail.f.top{box-shadow:inset 0 -1px 0 rgba(255,255,255,.55)}
  .pk-crimp{position:absolute;top:0;bottom:0;width:8px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.75) 0 1px,rgba(140,150,170,.22) 1px 3px)}
  .pk-crimp.l{left:0}.pk-crimp.r{right:0}
  .pk-crimp.b{top:auto;left:0;right:0;width:auto;height:6px;bottom:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 1px,rgba(140,150,170,.22) 1px 3px)}
  /* zip-lock bag: clear film wrapped around the stack, zipper track across the flat top, folded bottom */
  .pk-zip{background:rgba(255,255,255,.05)}
  .pk-zip.l,.pk-zip.r{background:rgba(215,232,255,.2)}
  .pk-zip.f.top::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.3) 40%,transparent 52%)}
  .pk-zipper{position:absolute;left:0;right:0;top:7px;height:6px;border-top:2px solid rgba(90,150,255,.95);border-bottom:2px solid rgba(255,255,255,.8);
    background:rgba(255,255,255,.16);transition:box-shadow .35s}
  .pk-zip.on .pk-zipper{box-shadow:0 0 10px rgba(90,150,255,.9)}
  .pk-seal{position:absolute;top:0;bottom:0;width:4px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.45) 0 1px,transparent 1px 3px)}
  .pk-seal.l{left:0}.pk-seal.r{right:0}
  .pk-seal.b{top:auto;bottom:0;left:0;right:0;width:auto;height:2px;background:rgba(255,255,255,.55)}
  /* chipboard (กระดาษแข็ง): grey with speckles, 3 mm edge; the front one is only slightly see-through */
  .pk-board-face{border-radius:1px;
    background:radial-gradient(rgba(70,60,45,.4) .7px,transparent 1.2px) 0 0/6px 6px,
      radial-gradient(rgba(255,255,255,.35) .6px,transparent 1.1px) 3px 2px/7px 7px,linear-gradient(150deg,#cdc3ad,#afa48b)}
  .pk-board-edge{background:repeating-linear-gradient(90deg,#958a73 0 1px,#b3a88f 1px 2px)}
  .pk-leaf.xray{opacity:.8}
  /* a card already in its clear sleeve: the sleeve's clear frame shows around the card */
  .pk-scard{border:1px solid rgba(255,255,255,.78);border-top-color:#fff;border-radius:3px;background:rgba(255,255,255,.1)}
  .pk-scard::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.03) 30%,transparent 62%,rgba(255,255,255,.14))}
  .pk-scard-in{position:absolute;left:2.5px;right:2.5px;top:5px;bottom:1.5px;border-radius:3px;overflow:hidden;background:linear-gradient(135deg,#2438b8,#0e1450)}
  .pk-scard-in img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .3s}
  .pk-scard-in img.on{opacity:1}
  .pk-scard-in::after{content:'';position:absolute;inset:0;pointer-events:none;background-size:260% 260%;background-position:calc(50% + var(--sheen,0%)) 50%;
    background-image:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.36) 44%,rgba(140,210,255,.24) 50%,rgba(255,140,225,.18) 56%,transparent 70%)}
  .pk-stage.fan .pk-scard{border:1.5px solid #fff;background:rgba(255,255,255,.16)}
  .pk-cardback{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.7);font-weight:800;font-size:.8rem;letter-spacing:1px}
  /* focus: the chosen layer glows, everything else fades back */
  .pk-rig.has-sel .pk-leaf:not(.on){opacity:.1}
  .pk-rig.has-sel .pk-leaf.on{opacity:1}
  .pk-rig.has-sel .pk-leaf.on:not(.pk-strip):not([class*="-side"]){box-shadow:0 0 0 1.5px var(--accent),0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}
  .pk-rig.has-sel .pk-strip.on{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 70%,transparent))}
  /* callouts — only once the mailer is opened */
  .pk-lines,#pkLabels{transition:opacity .5s}
  .pk-stage:not(.open) .pk-lines,.pk-stage:not(.open) #pkLabels{opacity:0;pointer-events:none}
  .pk-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
  .pk-lines path{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1}
  .pk-lines circle{fill:#fff}
  .pk-lines g.on path{stroke:var(--accent);stroke-width:1.6}
  .pk-lines g.on circle{fill:var(--accent)}
  .pk-lbl{position:absolute;top:0;max-width:124px;padding:6px 9px;border-radius:9px;background:rgba(10,13,22,.74);border:1px solid rgba(255,255,255,.2);
    color:#fff;font:inherit;font-size:.72rem;line-height:1.3;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
  .pk-lbl b{display:block;font-weight:700}
  .pk-no{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;margin-right:5px;border-radius:999px;background:var(--accent);color:#fff;font-size:.62rem;font-weight:800;vertical-align:1px}
  .pk-lbl small{display:block;color:#aeb8d6;font-size:.66rem;margin-top:1px}
  .pk-lbl.L{left:8px}.pk-lbl.R{right:8px;text-align:right}
  .pk-lbl.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 40%,rgba(10,13,22,.85))}
  @media (max-width:520px){ .pk-lbl{max-width:94px;font-size:.64rem;padding:5px 7px} .pk-lbl small{font-size:.58rem} }
  .pk-hint{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font-size:.68rem;color:rgba(255,255,255,.55);pointer-events:none;white-space:nowrap}
  .pk-stage:not(.open) .pk-hint{bottom:14px;padding:7px 15px;border-radius:999px;background:var(--accent);color:#fff;font-size:.82rem;font-weight:700;
    box-shadow:0 6px 18px -4px color-mix(in srgb,var(--accent) 80%,transparent);animation:pkHintPulse 1.5s ease-in-out infinite}
  @keyframes pkHintPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.07)}}
  /* detail panel under the model */
  .pk-info{margin-top:14px;min-height:128px}
  .pk-intro b{display:block;font-size:1rem;margin-bottom:4px}
  .pk-intro p{color:var(--muted);font-size:.85rem;line-height:1.55;margin:0 0 12px}
  .pk-ihead{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
  .pk-ihead b{font-size:1.02rem}
  .pk-step{font-size:.72rem;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:2px 9px;border-radius:999px;white-space:nowrap}
  .pk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
  .pk-chips span{font-size:.74rem;font-weight:600;background:var(--surface-2);border:1px solid var(--border);padding:3px 9px;border-radius:999px}
  .pk-chips span:nth-child(2){background:color-mix(in srgb,#1f9d55 14%,var(--surface));border-color:color-mix(in srgb,#1f9d55 45%,transparent);color:#1f9d55}
  .pk-info p{font-size:.86rem;line-height:1.6;color:var(--ink);margin:0 0 12px}
  .pk-nav{display:flex;gap:8px;justify-content:space-between}
  .pk-nav .btn[disabled]{opacity:.4;cursor:not-allowed}

  /* ---------- header: account at the right end of the logo line; theme / notifications / cart float as their own island below it ---------- */
  .head-in>.acct-btn{margin-left:auto;flex:none}
  .top-island{position:fixed;top:80px;transition:top .18s ease;right:max(12px,calc((100vw - var(--maxw))/2 + 16px));z-index:45;display:flex;align-items:center;gap:4px;padding:4px;
    border-radius:999px;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:saturate(150%) blur(12px);
    border:1px solid var(--border);box-shadow:0 8px 24px -10px rgba(0,0,0,.35)}
  .top-island .icon-btn{border-radius:50%}
  @media (max-width:560px){ .top-island{right:8px;padding:3px;gap:2px} }
  /* ---------- filter boxes: fewer, tighter boxes ---------- */
  /* nation + grade share one minimal box: colour dots | T 4 3 2 1 0 | O */
  .fb-combo{flex:1 1 100%;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:8px 18px;background:var(--surface);
    border:1px solid var(--border);border-radius:14px;padding:8px 12px;box-shadow:var(--shadow)}
  .fb-slot.stuck .fb-combo,.fb-slot.stuck .fb-right,.fb-slot.stuck .fb-left{display:contents}
  .fb-left{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
  .fb-slot.stuck .fb-reset{display:none}
  .fb-combo{position:relative}
  .fb-right{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--border-strong,#ccc);padding:0 76px 0 18px;align-self:stretch;justify-content:center}
  .fb-right>.nation-row,.fb-left>.nation-row{background:none;border:0;box-shadow:none;padding:0!important;min-height:0!important;border-radius:0}
  .fb-right>#setRow select{padding:6px 10px;font-size:.84rem}
  .fb-reset{position:absolute;right:12px;bottom:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;padding:3px 10px;font:inherit;font-size:.76rem;font-weight:600;cursor:pointer;z-index:2;box-shadow:var(--shadow);transition:all .15s}
  .fb-reset:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
  .nr-wheel-lbl{font-weight:700;font-size:.76rem;letter-spacing:.02em;color:var(--muted);text-align:center;line-height:1;margin-top:2px}
  .fb-slip{position:absolute;top:0;right:16px;transform:translateY(-50%);background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:2px 10px 3px;border-radius:999px;line-height:1.25;box-shadow:0 1px 3px rgba(0,0,0,.06);z-index:2;pointer-events:none;white-space:nowrap}
  .fb-slot.stuck .nr-wheel-lbl,.fb-slot.stuck .fb-slip{display:none}
  #nationRow{display:grid;grid-template-columns:repeat(3,32px);gap:8px;justify-content:center;align-items:center}
  .n-circle{width:32px;height:32px;border-radius:50%;padding:0;border:2px solid var(--surface);background:var(--nc);box-shadow:0 0 0 1.5px var(--border-strong,#ccc),0 2px 4px rgba(0,0,0,.12);cursor:pointer;display:inline-grid;place-items:center;color:#fff;font-size:.8rem;line-height:1;filter:saturate(1.18);transition:transform .15s cubic-bezier(.2,1.3,.4,1),box-shadow .15s,filter .15s,opacity .15s;position:relative;outline:none}
  .n-circle:hover,.n-circle:focus-visible{transform:scale(1.14);filter:brightness(1.08) saturate(1.25);box-shadow:0 0 0 2.5px var(--nc),0 3px 8px rgba(0,0,0,.2);z-index:1}
  .n-circle.on,.n-circle[aria-pressed="true"]{transform:scale(1.15);box-shadow:0 0 0 3.5px var(--nc),0 0 0 5.5px var(--surface),0 3px 10px rgba(0,0,0,.25);filter:brightness(1.05) saturate(1.22);z-index:2}
  #nationRow:has(.n-circle.on) .n-circle:not(.on):not(:hover){opacity:.85;transform:scale(0.96)}
  .n-circle .n-star{font-size:13px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none;line-height:1}
  .fb-combo>.nation-row{background:none;border:0;box-shadow:none;padding:0!important;flex:none;min-height:0!important}
  .fb-right>#gradeRow{flex-wrap:wrap}

  .fb-combo .nr-l{flex:none;margin:0 2px 0 0;font-size:.72rem}
  .fb-combo .nbtn i{flex:none}
  .fb-combo .nbtn{width:32px;height:32px;padding:0;gap:0;justify-content:center;border-radius:999px;font-size:.84rem}
  .fb-combo .nbtn i{width:18px;height:18px}
  .fb-combo .nbtn span,.fb-combo .nbtn.pref::after{display:none}
  .fb-combo .nbtn[aria-current="true"]{width:auto;padding:0 12px 0 7px;gap:6px}
  .fb-combo .nbtn[aria-current="true"] span{display:inline}
  .gbtn.g-dot{width:32px;height:32px;padding:0;display:inline-grid;place-items:center;border-radius:50%;font-weight:700;font-size:.8rem;line-height:1}
  .gbtn.g-dot[style*="--nc"]{background:var(--nc);border-color:var(--nc);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}
  .gbtn.g-dot.on,.gbtn.g-dot[aria-pressed="true"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--nc,var(--accent)) 40%,transparent)}
  .gbtn.g-dot.gx{color:var(--muted);font-size:.9rem}
  #gradeRow > button[data-grade="Trigger"],
  #orderSlot > button{width:auto!important;min-width:32px;padding:0 10px;border-radius:999px;font-size:.78rem;font-weight:700;text-shadow:none}
  #gradeRow > button[data-grade="Trigger"]{background:color-mix(in srgb,#f2b705 18%,var(--surface));border:1.5px solid color-mix(in srgb,#f2b705 45%,var(--border));color:#8c6000}
  #orderSlot > button{background:color-mix(in srgb,#2f5bff 14%,var(--surface));border:1.5px solid color-mix(in srgb,#2f5bff 38%,var(--border));color:var(--accent)}
  #gradeRow > button[data-grade="Trigger"].on,#gradeRow > button[data-grade="Trigger"][aria-pressed="true"]{background:#f2b705;border-color:#f2b705;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 0 0 3px color-mix(in srgb,#f2b705 40%,transparent)}
  #orderSlot > button.on,#orderSlot > button[aria-pressed="true"]{background:#2f5bff;border-color:#2f5bff;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 0 0 3px color-mix(in srgb,#2f5bff 40%,transparent)}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) #gradeRow > button[data-grade="Trigger"]{background:color-mix(in srgb,#f2b705 22%,var(--surface));border-color:color-mix(in srgb,#f2b705 50%,var(--border));color:#f6d155}
    :root:not([data-theme="light"]) #orderSlot > button{background:color-mix(in srgb,#2f5bff 20%,var(--surface));border-color:color-mix(in srgb,#2f5bff 45%,var(--border));color:#8da9ff}
  }
  [data-theme="dark"] #gradeRow > button[data-grade="Trigger"]{background:color-mix(in srgb,#f2b705 22%,var(--surface));border-color:color-mix(in srgb,#f2b705 50%,var(--border));color:#f6d155}
  [data-theme="dark"] #orderSlot > button{background:color-mix(in srgb,#2f5bff 20%,var(--surface));border-color:color-mix(in srgb,#2f5bff 45%,var(--border));color:#8da9ff}
  @media (max-width:640px){
    .fb-combo{gap:12px;padding:10px 10px 38px!important}
    #nationRow{grid-template-columns:repeat(3,30px);gap:6px}
    .n-circle{width:30px;height:30px}
    .fb-combo{flex-wrap:wrap;row-gap:12px}
    .fb-right{display:contents}
    .fb-right>#gradeRow{flex:1 1 0;min-width:0;align-self:center;border-left:1px solid var(--border-strong,#ccc)!important;padding-left:12px!important;padding-right:0!important;gap:6px}
    .fb-right>#setRow{flex:1 1 100%;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:10px!important}
    .fb-combo .nbtn,.gbtn.g-dot{width:30px;height:30px}
  }
  #gradeRow,#setRow{flex:1 1 auto}
  .filter-boxes>.nation-row{padding:8px 12px}
  .filter-boxes>.nation-row>.nr-l{flex:none;margin:0 4px 0 0}
  @media (max-width:640px){ .filter-boxes .nbtn{padding:6px 11px;font-size:.84rem;gap:6px} .filter-boxes .nbtn i{width:11px;height:11px} .filter-boxes .nation-row{gap:6px}
    .fb-sep{display:none} #setRow select{flex:1 1 0;min-width:0;max-width:none} #setRow #rarSlot,#setRow .fb-sep{display:none} #setRow .fb-inline{flex:1 1 100%} }   /* label sits inline with its chips: each box is one line tall */
  .fb-sep{width:1px;align-self:stretch;min-height:26px;background:var(--border-strong,#ccc);margin:0 4px}
  .fb-inline{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
  .fb-inline:empty{display:none}
  .fb-sep:has(+.fb-inline:empty){display:none}
  .fb-sub{font-size:.72rem;font-weight:700;color:var(--muted);white-space:nowrap}
  .fb-slot.stuck .fb-sub{display:none}
  .catmenu{display:none}
  .fb-tgs{display:none}
  .nation-float .fb-tgs{display:flex;flex-direction:column;align-items:center;gap:8px}
  .nation-float .fb-tg{width:30px;height:30px;padding:0;justify-content:center;border-radius:50%;gap:0}
  .nation-float .fb-tg span{display:none}
  @media (max-width:640px){ .nation-float .fb-tg{width:24px;height:24px} .nation-float .fb-tg svg{width:13px;height:13px} }
  /* admin-only out-of-stock filter button — hidden unless body.admin-mode */
  .fb-tg{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;border:1.5px solid var(--border-strong,#ccc);background:var(--surface);
    color:var(--ink);font:inherit;font-size:.78rem;font-weight:600;white-space:nowrap;cursor:pointer}
  .fb-tg[hidden]{display:none}
  .fb-tg svg{width:15px;height:15px;flex:none}
  .fb-tg[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
  @media (max-width:640px){ .fb-tg{padding:6px 8px} .fb-tg span{display:none} }
  /* ---------- mobile cart: a full page that scrolls as one, the page behind stays put ---------- */
  body.cart-open{overflow:hidden}
  @media (max-width:640px){
    .drawer{width:100%;height:100dvh;border-left:0;display:block;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
    .drawer-head{position:sticky;top:0;z-index:2;background:var(--surface)}
    .drawer-body{overflow:visible}
  }

  /* every search field gets the magnifying lens (the main toolbar search already draws its own) */
  #fbSearchInput,#cmpQ,#heQ,#avpQ,#dk-q,#cpQ{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:12px 50%;background-size:16px 16px;padding-left:36px!important}

  .demo-callout{display:flex;gap:10px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
    border-radius:11px;padding:11px 13px;font-size:.82rem;color:var(--ink);margin-bottom:18px}
  .demo-callout svg{width:18px;height:18px;flex:none;color:var(--accent);margin-top:1px}
  .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
  .field.full{grid-column:1/-1}
  .field label{font-size:.78rem;font-weight:600;color:var(--muted)}
  .field input,.field select{background:var(--bg);border:1px solid var(--border);color:var(--ink);
    padding:10px 12px;border-radius:10px;width:100%}
  .field input:focus{border-color:var(--accent);outline:none}
  .order-summary{background:var(--surface-2);border-radius:12px;padding:14px 16px;margin-bottom:18px;
    font-size:.86rem}
  .order-summary .row{display:flex;justify-content:space-between;padding:3px 0;color:var(--muted)}
  .order-summary .row.g{color:var(--ink);font-weight:700;border-top:1px solid var(--border);
    margin-top:6px;padding-top:8px}
  /* Confirmation */
  .confirm{padding:34px 26px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
  .confirm .tick{width:64px;height:64px;border-radius:50%;background:var(--good-soft);color:var(--good);
    display:grid;place-items:center}
  .confirm .tick svg{width:32px;height:32px}
  .confirm h2{font-size:1.5rem}
  .order-pill,
  .ord-pill,
  .confirm .ordernum{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-family:'Consolas','Courier New',monospace;
    font-size:.84rem;
    font-weight:700;
    letter-spacing:.02em;
    padding:2px 10px;
    border-radius:999px;
    background:color-mix(in srgb,#2f5bff 12%,var(--surface));
    border:1px solid color-mix(in srgb,#2f5bff 35%,var(--border));
    color:var(--accent,#2f5bff);
    box-shadow:0 1px 2px rgba(47,91,255,.06);
    white-space:nowrap;
    vertical-align:middle;
  }
  h2 .order-pill{font-size:1.02rem;padding:3px 12px;margin-left:4px}
  .stg-o .top .mono,
  .dk-lab .mono{
    font-family:'Consolas','Courier New',monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .order-pill,
    :root:not([data-theme="light"]) .ord-pill,
    :root:not([data-theme="light"]) .confirm .ordernum{
      background:color-mix(in srgb,#2f5bff 22%,var(--surface));
      border-color:color-mix(in srgb,#2f5bff 45%,var(--border));
      color:#8da9ff;
    }
  }
  [data-theme="dark"] .order-pill,
  [data-theme="dark"] .ord-pill,
  [data-theme="dark"] .confirm .ordernum{
    background:color-mix(in srgb,#2f5bff 22%,var(--surface));
    border-color:color-mix(in srgb,#2f5bff 45%,var(--border));
    color:#8da9ff;
  }

  /* Order status pill colors (user requested: topay #cf4b23, toship blue, toreceive #0e8f00, done soft mint green, cancelled #b3b3b3) */
  .order-pill.st-topay{background:color-mix(in srgb,#cf4b23 15%,var(--surface))!important;border-color:color-mix(in srgb,#cf4b23 50%,var(--border))!important;color:#cf4b23!important}
  .order-pill.st-toship{background:color-mix(in srgb,#2f5bff 14%,var(--surface))!important;border-color:color-mix(in srgb,#2f5bff 45%,var(--border))!important;color:var(--accent,#2f5bff)!important}
  .order-pill.st-toreceive{background:color-mix(in srgb,#0e8f00 15%,var(--surface))!important;border-color:color-mix(in srgb,#0e8f00 50%,var(--border))!important;color:#0e8f00!important}
  .order-pill.st-done{background:#e6f9f0!important;border-color:#a7f3d0!important;color:#065f46!important}
  .order-pill.st-cancelled{background:color-mix(in srgb,#b3b3b3 16%,var(--surface))!important;border-color:color-mix(in srgb,#b3b3b3 48%,var(--border))!important;color:#6b6b6b!important}

  :root[data-theme="dark"] .order-pill.st-topay{color:#ff815e!important;background:color-mix(in srgb,#cf4b23 24%,var(--surface))!important;border-color:color-mix(in srgb,#cf4b23 55%,var(--border))!important}
  :root[data-theme="dark"] .order-pill.st-toship{color:#8da9ff!important;background:color-mix(in srgb,#2f5bff 22%,var(--surface))!important;border-color:color-mix(in srgb,#2f5bff 45%,var(--border))!important}
  :root[data-theme="dark"] .order-pill.st-toreceive{color:#3ce72c!important;background:color-mix(in srgb,#0e8f00 24%,var(--surface))!important;border-color:color-mix(in srgb,#0e8f00 55%,var(--border))!important}
  :root[data-theme="dark"] .order-pill.st-done{color:#a7f3d0!important;background:color-mix(in srgb,#34d399 20%,var(--surface))!important;border-color:color-mix(in srgb,#34d399 45%,var(--border))!important}
  :root[data-theme="dark"] .order-pill.st-cancelled{color:#b3b3b3!important;background:color-mix(in srgb,#b3b3b3 18%,var(--surface))!important;border-color:color-mix(in srgb,#b3b3b3 42%,var(--border))!important}

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .order-pill.st-topay{color:#ff815e!important;background:color-mix(in srgb,#cf4b23 24%,var(--surface))!important;border-color:color-mix(in srgb,#cf4b23 55%,var(--border))!important}
    :root:not([data-theme="light"]) .order-pill.st-toship{color:#8da9ff!important;background:color-mix(in srgb,#2f5bff 22%,var(--surface))!important;border-color:color-mix(in srgb,#2f5bff 45%,var(--border))!important}
    :root:not([data-theme="light"]) .order-pill.st-toreceive{color:#3ce72c!important;background:color-mix(in srgb,#0e8f00 24%,var(--surface))!important;border-color:color-mix(in srgb,#0e8f00 55%,var(--border))!important}
    :root:not([data-theme="light"]) .order-pill.st-done{color:#a7f3d0!important;background:color-mix(in srgb,#34d399 20%,var(--surface))!important;border-color:color-mix(in srgb,#34d399 45%,var(--border))!important}
    :root:not([data-theme="light"]) .order-pill.st-cancelled{color:#b3b3b3!important;background:color-mix(in srgb,#b3b3b3 18%,var(--surface))!important;border-color:color-mix(in srgb,#b3b3b3 42%,var(--border))!important}
  }

  footer.site{border-top:1px solid var(--border);background:var(--surface)}
  .foot-in{max-width:var(--maxw);margin:0 auto;padding:26px 20px;display:flex;justify-content:space-between;
    gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.84rem;align-items:center}
  .foot-in .brand{font-size:1rem}

  @media (max-width:720px){
    .hero-grid{grid-template-columns:1fr}
    .hero-panel{order:1;min-height:190px}   /* on phones the title, status and clock come first, the featured card after them */
    nav.cats-top{display:none}
    .field-grid{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none!important}
  }

/* Perfect Guard slide switch: stretches the selected Grade 1 button; also under the 1 in the floating side bar */
.g1-wrap{display:inline-flex;align-items:center;gap:6px;padding:2px 4px 2px 2px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.pg-sw{position:relative;display:inline-flex;align-items:center;width:62px;height:28px;padding:0;border:0;border-radius:999px;background:var(--border-strong,#c3c8d0);cursor:pointer;transition:background .2s}
.pg-sw i{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .22s}
.pg-sw b{margin-left:auto;margin-right:9px;font-size:.74rem;color:#fff;letter-spacing:.03em;transition:margin .22s}
.pg-sw.on{background:#0a7ea4}.pg-sw.on i{transform:translateX(34px)}.pg-sw.on b{margin-left:9px;margin-right:auto}
.pg-sw:disabled{opacity:.45;cursor:default}
.nf-pgsw{position:relative;display:block;width:26px;height:50px;padding:0;border:0;border-radius:999px;background:var(--border-strong,#c3c8d0);cursor:pointer;transition:background .2s}
.nf-pgsw i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .22s}
.nf-pgsw b{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:.6rem;color:#fff;transition:all .22s}
.nf-pgsw.on{background:#0a7ea4}.nf-pgsw.on i{transform:translateY(24px)}.nf-pgsw.on b{bottom:auto;top:6px}
.nf-pgsw:disabled{opacity:.45}
/* 2026-10-25 rarity row now lives inside #fbCombo (.fb-right): same row look as grade / set, not the old full-width toolbar row */
.fb-combo .rar-under{order:0;flex:none;margin:0;gap:6px;align-items:center;flex-wrap:wrap;min-height:0}
.fb-combo .rar-under .fb-sub{font-size:.72rem;font-weight:700;color:var(--muted);margin:0 2px 0 0;white-space:nowrap}
.fb-combo .rar-under .gbtn{flex:none}
.fb-slot.stuck .fb-combo .rar-under{display:none}   /* the frozen strip uses its own dropdowns (fbMini) */

/* 2026-10-25 desktop: rarity sits beside the set row (phones keep it below) */
@media (min-width:641px){
  .fb-combo .fb-right{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;align-items:center}
  .fb-combo .fb-right>#gradeRow{grid-column:1/-1}
  .fb-combo .fb-right>#setRow{grid-column:1}
  .fb-combo .fb-right>#rarSlot{grid-column:2}
}