/* ── CardForge browse page — Direction D marketplace ─────────────
   Loads AFTER shared.css: overrides chrome typography, supplies the
   marketplace shell, and must NOT touch the real #card rules.       */

*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
::selection{background:var(--c-accent);color:#fff}
html{background:var(--c-bg)}
button,input,select{font-family:var(--font-ui)}
:focus{outline:none}
:focus-visible{box-shadow:inset 0 0 0 2px var(--c-accent)!important}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

#awrap{max-width:1440px;margin:0 auto;padding:calc(var(--tbh) + 24px) 20px 76px;display:grid;grid-template-columns:260px 1fr;gap:20px}
#main{min-width:0}

.pulse{display:flex;gap:10px;margin:0 0 16px}
.pcell{flex:1;min-width:0;background:var(--c-surface);border:1px solid var(--c-line);clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch));padding:13px 16px}
.pcell b{display:block;font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--c-ink)}
.pcell label{display:block;margin-top:3px;font-weight:600;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-mut)}

.ahead{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.ahead h1{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-.01em;color:var(--c-ink)}
#count{font-size:12px;font-weight:500;color:var(--c-mut);text-transform:uppercase;letter-spacing:.08em}

.atools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}
#sort{background:var(--c-surface2);border:1px solid var(--c-line);color:var(--c-ink);font-size:12px;font-weight:600;padding:9px 12px;appearance:none;-webkit-appearance:none;background-image:none;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
.viewtog{display:flex}
.cardtog{display:flex;align-items:center;gap:6px}
.ct-label{font:600 10px var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--c-mut)}
.viewtog button,.cardtog button{border:1px solid var(--c-line);background:transparent;color:var(--c-mut);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;cursor:pointer;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
.viewtog button:hover,.cardtog button:hover{color:var(--c-ink)}
.viewtog button[aria-pressed=true],.cardtog button[aria-pressed=true]{background:var(--c-accent-btn);border-color:var(--c-accent-btn);color:#fff}
#filtersBtn{border:1px solid var(--c-line);background:transparent;color:var(--c-mut);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;cursor:pointer;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch));display:none}
#filtersBtn:hover{color:var(--c-ink)}

#aside{background:var(--c-surface);border:1px solid var(--c-line);clip-path:polygon(var(--notch-lg) 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%,0 var(--notch-lg));padding:16px 14px;position:sticky;top:calc(var(--tbh) + 16px);align-self:start;max-height:calc(100vh - var(--tbh) - 90px);overflow:auto}
#q{width:100%;background:var(--c-surface2);border:1px solid var(--c-line);color:var(--c-ink);font-size:13px;font-weight:500;padding:9px 12px;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
#q::placeholder{color:var(--c-mut)}
#q:focus{border-color:var(--c-accent)}

.facet{border:0;border-top:1px solid var(--c-line);padding:0;min-width:0;display:block;margin-top:18px}
.facet:first-of-type{border-top:0}
/* section heads stay uppercase micro-labels; everything a buyer actually
   reads is sentence case at a legible size */
.facet legend{font-family:var(--font-display);font-weight:800;font-size:10px;letter-spacing:.18em;color:color-mix(in srgb,var(--c-ink) 45%,var(--c-mut));margin:0 0 8px;padding:0;text-transform:uppercase}
.facet label{display:flex;align-items:center;gap:10px;padding:8px;font-size:13px;font-weight:500;cursor:pointer;color:var(--c-ink)}
.facet label:hover{background:var(--c-surface2)}
.facet label:has(input:checked){background:color-mix(in srgb,var(--c-accent) 7%,transparent)}
/* custom 16px controls in accent when on — the native ~13px grey ones were
   impossible to read state from at a glance */
.facet input{appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:none;margin:0;border:1px solid var(--c-mut);background:var(--c-bg);cursor:pointer;position:relative}
.facet input[type=radio]{border-radius:50%}
.facet input:checked{background:var(--c-accent-btn);border-color:var(--c-accent-btn)}
.facet input[type=checkbox]:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.facet input[type=radio]:checked::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.ftxt{flex:1;min-width:0;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--c-ink)}
/* one count column everywhere: right-aligned tabular figures, zeros dimmed */
.facet .fn{width:26px;flex:none;margin-left:auto;text-align:right;font:600 11px var(--font-ui);color:var(--c-ink);font-variant-numeric:tabular-nums}
.facet .fn.zero{color:var(--c-mut);opacity:.5}
.sw{display:inline-block;width:10px;height:10px;transform:rotate(45deg);flex:none}
.sw-protocol{background:#FF4655}
.sw-holo{background:#46F6FF}
.sw-reaver{background:#B44BFF}
.sw-oni{background:#FF5540}
.sw-arctic{background:#C22E3C}
.sw-standard{background:#AFC2CE}
.frow .fl{width:88px;flex:none;font-size:13px;font-weight:500;letter-spacing:0;color:var(--c-ink)}
/* honest bars: no track at zero, so empty ranks stop showing phantom data */
.frow .fbar{flex:1;height:6px;background:transparent;min-width:0;overflow:hidden}
.frow .fbar i{display:block;height:100%;width:var(--w,0%);background:linear-gradient(90deg,var(--c-accent-btn),var(--c-accent))}
/* active-filter chips — what's applied, removable in one click */
.fchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
.fchips[hidden]{display:none}
.fchip{background:color-mix(in srgb,var(--c-accent) 12%,var(--c-surface2));border:1px solid color-mix(in srgb,var(--c-accent) 45%,var(--c-line));color:var(--c-ink);font:600 10px var(--font-ui);letter-spacing:.04em;padding:5px 8px;cursor:pointer;
clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
.fchip:hover{border-color:var(--c-accent);color:#fff}
#clearAll{width:100%;margin-top:16px;background:transparent;border:1px solid var(--c-line);color:var(--c-mut);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:9px;cursor:pointer;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
#clearAll:hover{color:var(--c-accent);border-color:var(--c-accent)}
#clearAll[hidden]{display:none}

#feature{margin:0 0 16px}
.gfeat{display:grid;grid-template-columns:1.4fr 1fr;background:var(--c-surface);border:1px solid var(--c-line);overflow:hidden;clip-path:polygon(var(--notch-lg) 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%,0 var(--notch-lg));cursor:pointer}
.gf-preview{position:relative;min-width:0;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(160deg,var(--th-bg),var(--th-panel));
  background:
    radial-gradient(420px 240px at 30% 20%,color-mix(in srgb,var(--th-accent) 16%,transparent),transparent 70%),
    linear-gradient(160deg,var(--th-bg),var(--th-panel))}
.gf-preview::before,.gf-preview::after{content:"";position:absolute;width:22px;height:22px;border-style:solid;border-width:0;border-color:var(--th-accent)}
.gf-preview::before{top:10px;left:10px;border-top-width:2px;border-left-width:2px}
.gf-preview::after{bottom:10px;right:10px;border-bottom-width:2px;border-right-width:2px}
.gf-ribbon{position:absolute;top:0;left:0;background:var(--c-accent);color:#fff;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%)}
.gf-skins{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;padding:0 26px}
.gf-skins img{height:72px;width:auto;min-width:0;flex:0 1 auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.gf-strip{position:absolute;bottom:12px;left:16px;display:flex;gap:8px;white-space:nowrap;font-size:10px;font-weight:600;letter-spacing:.22em;color:var(--th-mut);text-transform:uppercase}
.gf-strip span+span::before{content:"· "}
.gf-ranks{position:absolute;bottom:12px;right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;color:var(--th-ink)}
.gf-ranks .gfr{display:flex;align-items:center;gap:6px}
.gf-ranks img{width:30px;height:30px;object-fit:contain}
.gf-ranks b{font-size:10px;font-weight:600;letter-spacing:.08em}
.gf-info{display:flex;flex-direction:column;gap:14px;min-width:0;padding:30px 30px 26px}
.gf-theme{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--th-accent);border:1px solid currentColor;padding:4px 9px}
.gf-info h2{font-family:var(--font-display);font-weight:800;font-size:28px;letter-spacing:-.01em;color:var(--c-ink);line-height:1.05}
.gf-seller{display:flex;align-items:center;gap:10px;min-width:0}
.gf-seller img{width:40px;height:40px;flex:none;object-fit:cover;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
.gf-seller b{display:block;font-size:13px;font-weight:600;color:var(--c-ink)}
.gf-seller span{display:block;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--c-mut)}
.gf-rankrow{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.1em}
.gf-rankrow img{width:22px;height:22px;object-fit:contain}
.gf-rankrow i{font-style:normal;color:var(--c-mut)}
.gf-rankrow .m{color:var(--c-mut)}
.gf-price b{display:block;font-family:var(--font-display);font-weight:800;font-size:38px;letter-spacing:-.01em;color:var(--c-ink);font-variant-numeric:tabular-nums}
.gf-price b.offer{font-size:24px;color:#FF7A85}
.gf-price span{display:block;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--c-mut)}
.gf-meta{font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--c-mut);text-transform:uppercase}
.gf-cta{display:block;margin-top:auto;background:var(--c-accent-btn);color:#fff;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:14px;text-decoration:none;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
.gf-cta:hover{filter:brightness(1.12)}

.gcard,.arow{font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;background:none}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
/* min-width:0 drops the grid item's automatic minimum so the 1fr track can
   shrink below the nowrap ranks row; overflow:hidden clips outlier strings */
.gcard{background:var(--c-surface);border:1px solid var(--c-line);display:flex;flex-direction:column;min-width:0;overflow:hidden;text-decoration:none;color:inherit;clip-path:polygon(var(--notch-lg) 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%,0 var(--notch-lg))}
/* The strip is the THEME accent, not a content tier. tierFor() read the
   variant level while the class names meant content tier, and .tt-exclusive
   was unreachable dead CSS. --th-accent is already set per card by
   setThemeVars(). Weapon previews get the shared 175px box; artwork keeps
   its own 16:9 so a designed banner is never cropped. */
.gc-preview{position:relative;height:175px;overflow:hidden;border-top:2px solid var(--th-accent);
  background:
    radial-gradient(300px 180px at 50% 0%,color-mix(in srgb,var(--th-accent) 12%,transparent),transparent 70%),
    repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.015) 22px 24px),
    linear-gradient(165deg,var(--th-bg),var(--th-panel))}
.gc-preview[data-thumb]{height:auto;aspect-ratio:16/9}
.gc-badges{position:absolute;top:10px;right:10px;display:flex;gap:6px}
.b-new{background:var(--c-accent);color:#fff;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px}
.b-hot{background:#E8A33D;color:#0B0F14;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px}
.b-feat{background:var(--c-accent-btn);color:#fff;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px}

/* Mosaic drops its head rank and foot stat strip — both repeated rows
   already rendered below the preview. Panels only. */
.mc{position:absolute;inset:0;display:grid;grid-template-rows:1fr;padding:11px 9px;gap:3px}
.mc-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:3px;min-height:0}
.mc-panel{border:1px solid var(--mc-line);background:rgba(0,0,0,.16);padding:2px 3px 3px;display:flex;flex-direction:column;gap:1px;min-width:0;min-height:0;overflow:hidden;--mc-line:rgba(255,255,255,.13)}
.mc-panel label{font:700 7.5px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--th-mut);line-height:1.2;white-space:nowrap;overflow:hidden}
.mc-icons{flex:1;display:flex;align-items:center;justify-content:center;gap:2px;min-height:0}
.mc-iw{flex:0 1 auto;min-width:0;height:100%;display:flex;align-items:center;justify-content:center}
.mc-iw img{height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.mc-empty{flex:1;border:1px dashed var(--mc-line);min-height:6px}

.rl{position:absolute;inset:0;padding:12px 10px;display:flex;flex-direction:column;justify-content:center;gap:5px;--mc-line:rgba(255,255,255,.13)}
.rl-row{display:flex;align-items:center;gap:5px;flex:1;min-height:0}
.rl-l{flex:none;width:46px;font:600 6px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--th-mut);white-space:nowrap;overflow:hidden}
.rl-icons{flex:1;display:flex;align-items:center;justify-content:flex-start;gap:3px;min-width:0;height:100%}
.rl-icons .mc-empty{height:8px;min-height:0}

/* ── card anatomy ────────────────────────────────────────────────
   Design reference: prototypes/fixes/marketplace-card.html (kept out of
   the repo by choice; it is the approved artifact this block ports).
   THE LISTING ID IS THE PRIMARY IDENTIFIER. Rank, skins, stats and
   trust are per-offering detail below it on a 4-step scale:
     1 30px/800 mono · 2 15px/700 · 3 11px/600 muted · 4 9.5px/700 caps
   Seller avatar and the redundant name line are gone; the theme label
   moved from a preview overlay into the head so it sits with the ID. */
.gc-head{display:flex;align-items:flex-start;gap:10px;padding:13px 15px 12px;border-bottom:1px solid var(--c-line)}
.gc-id{min-width:0;flex:1}
.gc-idcode{display:block;font:800 30px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.02em;color:var(--c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-sub{display:block;margin-top:8px;font:600 11px var(--font-ui);color:var(--c-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-flags{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none;padding-top:3px}
.gc-themechip{font:700 9px var(--font-ui);letter-spacing:.13em;text-transform:uppercase;color:var(--th-mut);border:1px solid var(--c-line);padding:3px 6px;white-space:nowrap}
.gc-ranks{display:flex;align-items:center;gap:6px;padding:12px 15px 0;font-size:11px;min-width:0}
.gc-ranks img{width:17px;height:17px;object-fit:contain;flex:none}
.gc-ranks b{font-weight:600;color:var(--c-mut);white-space:nowrap}
/* peak as an icon: prank_icon already ships in browse_listings_v3 and
   normalize() parses it; only the grid card wasted it. Peak >= current
   by definition so the up-arrow is never wrong. Listings with no icon
   (the artwork path) fall back to the name in JS. */
.gc-ranks .up{font-style:normal;color:var(--c-mut);opacity:.65;font-weight:700;font-size:11px;flex:none}
.gc-ranks .pk-badge{width:15px;height:15px;object-fit:contain;flex:none;opacity:.9}
.gc-ranks .pk{font-weight:600;color:var(--c-mut);opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gc-chips{display:flex;flex-wrap:wrap;gap:5px;margin:8px 15px 0}
.gc-chips span{background:var(--c-surface2);border:1px solid var(--c-line-soft);color:var(--c-mut);font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:4px 7px;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);display:inline-block;white-space:nowrap}
.gc-chips span b{color:var(--c-ink);font-weight:700;font-variant-numeric:tabular-nums}
/* inline-block dot, NOT a flex item: a bare text node inside an
   inline-flex chip collapsed to zero width and the label vanished.
   Class is "hasdot", not "dot" — a global .dot (9px rotated diamond for
   facet dots) already exists and would squash the chip to 9px. */
.gc-chips span.hasdot::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:1px}
/* trust colours are semantic, not themed: green = WTR and receipts present,
   red = no WTR / no receipts, amber = Premier Unlinked, red = Premier Linked.
   Literals on purpose — shared.css has no ok/bad token and these must not
   shift with theme. Premier Linked gets its own .prem class rather than
   reusing .bad, so its colour can move without touching the trust chips. */
.gc-chips span.ok{color:#59E3B8;border-color:rgba(89,227,184,.4);background:rgba(89,227,184,.08)}
.gc-chips span.bad{color:#FF7A85;border-color:rgba(255,122,133,.48);background:rgba(255,122,133,.1)}
.gc-chips span.warn{color:#E8A33D;border-color:rgba(232,163,61,.4);background:rgba(232,163,61,.08)}
.gc-chips span.prem{color:#FF7A85;border-color:rgba(255,122,133,.48);background:rgba(255,122,133,.1)}
.gc-chips span.na{color:var(--c-mut);border-color:var(--c-line);background:transparent}
.gc-chips span.na b{color:var(--c-mut)}
.gc-foot{margin-top:auto;border-top:1px solid var(--c-line);padding:12px 15px;display:flex;align-items:center;gap:11px}
.gc-amt{flex:1;min-width:0}
.gc-amt .big{display:block;font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1;color:var(--c-ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.gc-amt .big.offer{font-size:17px}
.gc-amt .sub{display:block;margin-top:4px;font:600 9px var(--font-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--c-mut)}
.gc-cta{flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--c-accent-btn);color:#fff;border:0;font:700 10px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;padding:12px 13px;cursor:pointer;white-space:nowrap;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
.gc-cta:hover{background:var(--c-accent)}

.cta-tile{border:1px dashed var(--c-line);background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:30px;min-height:220px;text-decoration:none;text-align:center;clip-path:polygon(var(--notch-lg) 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%,0 var(--notch-lg))}
.cta-tile b{font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:0;color:var(--c-ink)}
.cta-tile>span{font-size:12px;color:var(--c-mut);max-width:240px}
.cta-tile .ct-link{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#FF7A85}

.alist{display:flex;flex-direction:column;gap:8px}
.arow{display:grid;grid-template-columns:76px minmax(160px,1.4fr) 150px 1fr 110px 84px;gap:12px;align-items:center;padding:10px 12px;background:var(--c-surface);border:1px solid var(--c-line);clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch));text-decoration:none;color:inherit}
.lr-thumb{width:76px;height:52px;position:relative;overflow:hidden;background:linear-gradient(150deg,var(--th-bg),var(--th-panel))}
.lc-icons{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 12px}
.lc-icons span[data-imgwrap]{flex:1 1 0;min-width:0;height:62px;display:flex;align-items:center;justify-content:center}
.lc-icons img{height:100%;width:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.lr-thumb .lc-icons span[data-imgwrap]{height:100%}
.lr-thumb .lc-icons img{width:100%;height:100%;max-width:100%;object-fit:contain}
.lr-main{min-width:0}
.lr-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.lr-title h2{font-size:14px;font-weight:600;flex:1 1 120px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-badges{display:flex;gap:5px;flex:none}
.lr-ranks{display:flex;flex-direction:column;gap:4px}
.lr-ranks .r{display:flex;align-items:center;gap:5px}
.lr-ranks img{width:16px;height:16px;object-fit:contain}
.lr-ranks span{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--c-ink);white-space:nowrap}
.lr-ranks .pk{color:var(--c-mut)}
.lr-chips{display:flex;flex-wrap:wrap;gap:5px}
.lr-price{display:flex;flex-direction:column;gap:4px}
.lr-go{text-align:right}
.chip{background:var(--c-surface2);border:1px solid var(--c-line-soft);color:var(--c-mut);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
.lc-price{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:0;color:var(--c-ink);font-variant-numeric:tabular-nums}
.lc-offer{background:var(--c-accent-btn);color:#fff;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
.lc-meta{font-size:10px;font-weight:500;letter-spacing:.06em;color:var(--c-mut);text-transform:uppercase}
.lc-go{font-size:11px;font-weight:700;letter-spacing:.12em;color:#FF7A85;text-transform:uppercase}

.aempty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:60px 20px;text-align:center;background:var(--c-surface);border:1px solid var(--c-line);clip-path:polygon(var(--notch-lg) 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%,0 var(--notch-lg))}
#statebox code{font:600 11px/1.6 ui-monospace,Menlo,Consolas,monospace;background:var(--c-bg);border:1px solid var(--c-line-soft);padding:4px 9px;color:var(--c-accent);max-width:100%;overflow-wrap:anywhere}
#statebox .sb-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
#statebox .sbtn{border:1px solid var(--c-line);background:transparent;color:var(--c-ink);font:700 11px var(--font-display);letter-spacing:.14em;text-transform:uppercase;padding:12px 22px;cursor:pointer;text-decoration:none;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
#statebox .sbtn.primary{background:var(--c-accent-btn);border-color:var(--c-accent-btn);color:#fff}
#statebox .sbtn:hover{filter:brightness(1.12)}
.morebar{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:18px 10px;font:600 11px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--c-mut)}
.sbtn2{background:transparent;border:1px solid var(--c-line);color:var(--c-ink);
  font:700 11px var(--font-display);letter-spacing:.12em;text-transform:uppercase;padding:10px 18px;cursor:pointer;
  clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
.sbtn2:hover{border-color:var(--c-accent);color:#fff;background:var(--c-accent-btn)}
.sbtn2[disabled]{opacity:.5;cursor:default}
.lc-neg,.gc-neg{display:block;font:700 9px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--c-accent)}
.gc-code{font:600 10px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--c-mut);margin-top:-2px}
.gf-price b i{display:block;font:600 10px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--c-accent);font-style:normal;margin-top:2px}
.aempty b{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:0;color:var(--c-ink)}
.aempty span{font-size:13px;color:var(--c-mut)}
#clearBtn{background:var(--c-accent-btn);border:1px solid var(--c-accent-btn);color:#fff;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:9px 16px;cursor:pointer;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}

body.modal-open{overflow:hidden}

.qv-backdrop{position:fixed;inset:0;background:rgba(4,7,11,.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
@media(prefers-reduced-motion:no-preference){.qv-backdrop{transition:opacity .2s ease}}
.qv-modal{width:min(1600px,94vw);max-height:calc(100vh - 24px);overflow-y:auto;overflow-x:hidden;background:var(--c-surface);border:1px solid var(--c-line);position:relative;clip-path:polygon(var(--notch-lg) 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%,0 var(--notch-lg))}
.qv-close{position:absolute;top:10px;right:10px;z-index:3;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:rgba(4,7,11,.65);border:1px solid var(--c-line);color:var(--c-ink);font:700 16px var(--font-ui);cursor:pointer;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
.qv-close:hover{border-color:var(--c-accent);color:var(--c-accent)}
.qv-stage{width:100%;position:relative;background:var(--c-bg)}
.qv-sizer{position:relative;overflow:hidden;margin:0 auto}

.qv-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--c-line)}
#qvTitle{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:0;color:var(--c-ink)}
.qv-code{font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:.14em;color:var(--c-mut);border:1px solid var(--c-line);padding:2px 7px}
.qv-meta{font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-mut)}
.qv-price{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--c-ink);font-variant-numeric:tabular-nums}
.qv-offer{font-family:var(--font-display);font-weight:800;font-size:16px;color:#FF7A85}
.qv-cta{display:inline-block;margin-left:auto;background:var(--c-accent-btn);color:#fff;text-decoration:none;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:12px 18px;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
.qv-cta:hover{filter:brightness(1.12)}
.qv-ghost{background:transparent;border:1px solid var(--c-line);color:var(--c-ink);font:600 12px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;padding:12px 18px;cursor:pointer;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
.qv-ghost:hover{border-color:var(--c-accent);color:var(--c-accent)}
@media(max-width:767px){
  .qv-backdrop{padding:10px}
  .qv-modal{width:96vw}
  .qv-bar #qvTitle{flex:1 1 100%}
  .qv-cta{margin-left:0}
  .qv-cta,.qv-ghost{flex:1 1 auto;text-align:center}
}

/* QV-T: ≤700px the 0.19× scaled card is unreadable — show a hero-skin
   thumb strip (tier-prioritized, links to the full listing) instead. */
@media(max-width:700px){
  .qv-stage[hidden]{display:none}
  .qv-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;padding:0 0 10px}
  .qv-thumb{display:flex;flex-direction:column;text-decoration:none;background:radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,.09),transparent 60%),linear-gradient(180deg,var(--c-surface2),var(--c-surface2));border:1px solid var(--c-line);border-left:3px solid var(--tier-color,var(--c-line));clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
  .qv-thumb img{width:100%;height:56px;object-fit:contain;padding:5px 6px 2px}
  .qv-thumb span{font:500 10.5px/1.25 'Chakra Petch',sans-serif;color:var(--c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1px 6px 5px}
  .qv-thumb[data-tier=select]{--tier-color:var(--tier-select)}
  .qv-thumb[data-tier=deluxe]{--tier-color:var(--tier-deluxe)}
  .qv-thumb[data-tier=premium]{--tier-color:var(--tier-premium)}
  .qv-thumb[data-tier=ultra]{--tier-color:var(--tier-ultra)}
  .qv-thumb[data-tier=exclusive]{--tier-color:var(--tier-exclusive)}
  .qv-thumb:active{border-color:var(--c-accent)}
  .qv-thumbs[hidden]{display:none}
}

#scrim{position:fixed;inset:0;background:rgba(4,7,11,.6);z-index:24}

.sk{background:var(--c-surface);border:1px solid var(--c-line);clip-path:polygon(var(--notch-lg) 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%,0 var(--notch-lg));height:300px}
.sk-feat{height:auto;aspect-ratio:16/9}
@keyframes sh{to{background-position:-200% 0}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* CF-31: broken art degrades honestly — a dashed slot, not a silent gap */
[data-imgfail] img[data-imgfail]{visibility:hidden}
[data-imgfail]{background:linear-gradient(135deg,var(--c-surface2),var(--c-line))}
img[data-imgfail]{border:1px dashed var(--c-line);box-sizing:border-box}
[data-imgfail] .mc-icons img[data-imgfail]{opacity:.35;filter:grayscale(1)}

@media(prefers-reduced-motion:no-preference){
  .gfeat,.gf-skins img{transition:border-color .2s ease,transform .2s ease}
  .gfeat:hover{border-color:var(--th-accent)}
  .gfeat:hover .gf-skins img{transform:translateY(-4px)}
  .gf-skins img:nth-child(1){transition-delay:0s}
  .gf-skins img:nth-child(2){transition-delay:.04s}
  .gf-skins img:nth-child(3){transition-delay:.08s}
  .gf-skins img:nth-child(4){transition-delay:.12s}
  .gf-skins img:nth-child(5){transition-delay:.16s}
  .gcard{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;animation:rise .45s ease both;animation-delay:calc(var(--i)*45ms)}
  .gcard:hover{transform:translateY(-3px);border-color:var(--th-accent);box-shadow:0 14px 44px -14px var(--th-accent);box-shadow:0 14px 44px -14px color-mix(in srgb,var(--th-accent) 40%,transparent)}
  .cta-tile{transition:border-color .2s ease}
  .cta-tile:hover{border-color:var(--c-accent)}
  .arow{transition:border-color .15s ease,transform .15s ease}
  .arow:hover{transform:translateY(-2px)}
  .gf-cta{transition:filter .15s ease}
  .sk{background:linear-gradient(90deg,#151C24 25%,#1C2530 50%,#151C24 75%);background-size:200% 100%;animation:sh 1.4s infinite}
}

@media(max-width:1023px){
  #awrap{display:block}
  #filtersBtn{display:inline-block}
  .agrid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  #main{display:flex;flex-direction:column}
  .pulse{order:1}
  .ahead{order:2}
  .atools{order:3;margin:12px 0}
  #feature{order:4;margin:0 0 16px}
  #results{order:5}
  #aside{position:fixed;left:0;top:var(--tbh);bottom:0;width:280px;z-index:25;transform:translateX(-105%);max-height:none;align-self:stretch;padding-bottom:88px}
  body.drawer #aside{transform:none}
  .arow{grid-template-columns:64px 1fr;gap:6px 12px}
  .arow .lr-thumb{grid-row:1 / span 5;align-self:start}
  .arow > *:not(.lr-thumb){grid-column:2}
  .lr-go{text-align:left}
}
@media(max-width:1023px) and (prefers-reduced-motion:no-preference){
  #aside{transition:transform .25s ease}
}
@media(max-width:899px){
  .gfeat{grid-template-columns:1fr}
  .gf-skins img{height:60px}
  .gf-info{padding:20px}
}
@media(max-width:767px){
  .cardtog button{padding:8px 10px;font-size:10px;letter-spacing:.08em}
  #sort{flex:1 1 auto;min-width:0}
  .viewtog{margin-left:auto}
  .ct-label{display:none}
  .pulse{flex-wrap:wrap}
  .pcell{flex:1 1 40%}
  .gf-strip{font-size:8px;letter-spacing:.1em;gap:6px}
  .gf-ranks img{width:24px;height:24px}
  .gf-ranks b{font-size:9px}
}
@media(max-width:479px){
  .agrid{grid-template-columns:1fr}
  .ahead h1{font-size:24px}
  .gf-price b{font-size:32px}
}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--c-line)}
::-webkit-scrollbar-thumb:hover{background:var(--c-accent)}
html{scrollbar-width:thin;scrollbar-color:var(--c-line) transparent}

/* ── owner-set card thumbnail (optional cover over the mini-mosaic) ── */
.gc-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gf-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lr-cover{width:100%;height:100%;object-fit:cover;display:block}
.qv-art{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;margin:0 auto}
.qv-art[hidden]{display:none}

/* ── v1.5: seller sign-in modal (top-right "Log in" on the marketplace) ── */
.lg-backdrop{position:fixed;inset:0;background:rgba(4,7,11,.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.lg-modal{width:min(400px,94vw);max-height:calc(100vh - 32px);overflow-y:auto;background:var(--c-surface2);border:1px solid var(--c-line);position:relative;padding:24px 22px 20px;display:flex;flex-direction:column;gap:10px;clip-path:polygon(var(--notch-lg) 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%,0 var(--notch-lg))}
.lg-close{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--c-mut);font:700 22px/1 var(--font-ui);cursor:pointer;padding:6px 8px}
.lg-close:hover{color:var(--c-ink)}
.lg-logo{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:.10125em;color:var(--c-ink)}
.lg-title{margin:0;font:800 19px/1.2 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink)}
.lg-sub{margin:0;font:400 12.5px/1.55 var(--font-ui);color:var(--c-mut)}
.lg-label{font:700 10px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--c-mut)}
.lg-modal input{width:100%;box-sizing:border-box;background:var(--c-bg);border:1px solid var(--c-line);color:var(--c-ink);font:500 13px/1 var(--font-ui);padding:10px;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
.lg-modal input:focus{outline:1px solid var(--c-accent);outline-offset:1px}
.lg-modal button:not(.lg-close):not(.lg-alt){background:var(--c-accent-btn);border:0;color:#fff;font:700 12px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;padding:12px 14px;cursor:pointer;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
.lg-modal button:not(.lg-close):not(.lg-alt):hover{filter:brightness(1.12)}
.lg-modal button:not(.lg-close):not(.lg-alt):disabled{opacity:.6;cursor:default;filter:none}
.lg-alt{background:none;border:0;color:var(--c-mut);font:600 11.5px/1.4 var(--font-ui);text-decoration:underline;cursor:pointer;padding:2px 0;text-align:left}
.lg-alt:hover{color:var(--c-ink)}
.lg-alt:disabled{opacity:.6;cursor:default}
.lg-msg{margin:0;min-height:1.2em;font:600 11.5px/1.4 var(--font-ui);color:var(--c-mut)}
.lg-msg.err{color:#FF6B77}
#lgForm,#lgSent,#lgSigned{display:flex;flex-direction:column;gap:10px}

/* ── v1.5.3: mobile commerce chrome — one row, secondary actions in More ▾ ── */
#navMoreM{display:none}
#navMoreMenuM{position:absolute;top:calc(100% + 6px);right:10px;z-index:80;min-width:170px;background:var(--c-surface2);border:1px solid var(--c-line);display:flex;flex-direction:column;padding:6px;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
#navMoreMenuM[hidden]{display:none}
#navMoreMenuM .nm-item,#topbar #navMoreMenuM .nm-item{display:flex;align-items:center;justify-content:flex-start;min-height:40px;padding:0 10px;background:none;border:0;clip-path:none;color:var(--c-ink);font:600 12px var(--font-ui);letter-spacing:.06em;text-transform:none;text-decoration:none;text-align:left;cursor:pointer}
#navMoreMenuM .nm-item:hover{background:color-mix(in srgb,#fff 5%,transparent)}
@media (max-width:700px){
  /* beat shared.css's full-width mobile topbar rows: keep one compact row */
  #topbar .tb-left,#topbar .tb-right{width:auto}
  #topbar .tb-right{margin-left:auto;justify-content:flex-end;flex-wrap:nowrap;gap:6px}
  /* ids alone lose to shared's `#topbar button/a.tb-link` display rules — qualify */
  #topbar a#navDashboard,#topbar button#navSignOut{display:none}
  #topbar button#navMoreM[hidden]{display:none}
  #topbar button#navMoreM:not([hidden]){display:inline-flex}
  /* stats are desktop merchandising — mobile opens straight into the goods */
  #pulse{display:none}
}

/* ── mobile ───────────────────────────────────────────────────────
   v1.5.4's separate mobile commerce card (icon strip + price slot +
   4-chip cap) is RETIRED for the grid: the card is now one anatomy at
   every width and phones inherit the desktop format, re-proportioned
   below. List rows and the featured tile keep their own phone rules. */
.gf-trow{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.gf-trow h2{min-width:0}
/* The price slot survives only on the featured tile; the grid card dropped
   it in favour of the foot price. Hidden everywhere by default. */
.gc-pslot{display:none}
.gp-val{font:800 16px/1 var(--font-display);color:var(--c-ink);white-space:nowrap}
.gp-offer{font:700 10px/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--c-mut);text-align:right}
.gp-obo{font:700 9px/1 var(--font-ui);letter-spacing:.1em;color:var(--c-mut);border:1px solid var(--c-line);padding:3px 5px}
@media (max-width:700px){
  .gf-trow .gc-pslot{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
  .gc-idcode{font-size:26px}
  .gc-head{padding:12px 13px 11px}
  .gc-ranks{padding:11px 13px 0}
  .gc-chips{margin:8px 13px 0}
  .gc-foot{padding:11px 13px;gap:9px}
  .gc-amt .big{font-size:18px}
  .gc-amt .big.offer{font-size:15px}
  .gc-cta{padding:12px 11px;font-size:9.5px}
  .rl-l{width:42px;font-size:6.5px}
  .lr-chips > :nth-child(n+4){display:none}
  .lr-go{display:none}
  /* featured tile keeps its commerce treatment on phones */
  .gf-price{display:none}
}