/* Graded-slab styling — extracted verbatim from collect.html so /sales and the collection
   share ONE source. Markup: .covers-grid > .cover-tile > .cover-wrap.slab.g-<grader>
   [.has-logo][.logo-right][.slab-gold]. Per-grader colors via --label-border/--label-bg. */
        /* grid container (base; column count is set per-context in the SLAB SIZING media blocks) */
        .covers-grid { display: grid; margin-bottom: 8px; }
        .cover-tile { position: relative; }
        .cover-wrap { position: relative; }
        .cover-wrap .slab-label { display: none; }            /* hidden until a grader is chosen */
        /* SEALED (ungraded) covers in the grid get the same acrylic case, just no label. The case
           is the packaging, not the grading, so an ungraded sealed game still lives in one. Listed
           as a second selector rather than copied so there is exactly one definition of the look —
           the ungraded rule used to be a TRANSPARENT border in collect.html, present only to
           reserve the frame's width so art stayed aligned across a row. */
        .cover-wrap.slab,
        .cover-tile .cover-wrap:not(.slab) {
            /* acrylic-case look: rounded corners, plastic gradient, beveled edge + drop shadow */
            border: 1px solid #c6c6c6; border-radius: 5px;
            background: linear-gradient(160deg, #ffffff 0%, #f3f3f3 55%, #e6e6e6 100%);
            box-shadow: 0 3px 7px rgba(0,0,0,0.45),
                        inset 0 1px 1px rgba(255,255,255,0.95),
                        inset 0 -2px 3px rgba(0,0,0,0.12);
            /* white border (case padding) set per-context in SLAB SIZING */
        }
        .cover-wrap.slab img { border: none; display: block; }
        .cover-wrap.slab .slab-label {
            display: flex; align-items: center; justify-content: space-between;
            height: 40px; padding: 0 6px; margin: 0 0 8px 0;  /* 8px gap below label, matching the 8px case padding */
            border: 3px solid var(--label-border, #e11d1d);
            background: var(--label-bg, #fff);
            color: #000;
            font-family: 'Rajdhani', sans-serif; font-weight: 700;  /* tech/gaming UI, clean unslashed 0 */
            font-size: 1.38rem; letter-spacing: 0.5px; line-height: 1;
        }
        /* Details (list) view: label 4px shorter than the covers-grid label (40 -> 36 desktop). */
        .collect-card .cover-wrap.slab .slab-label { height: 36px; }
        .cover-wrap.slab .slab-brand { color: var(--brand-color, #000); }  /* score stays black */
        /* score stacks over a tiny seal-grade badge (A+/A++) — black pill, white text.
           STRUCTURAL only here (colors, centering, radius). The per-context SIZES — number
           font/line-height, seal font/padding, gap — live in the single block below. */
        .cover-wrap.slab .slab-grade { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
        /* num + seal centered on each other, whatever the grade box's own alignment is */
        .cover-wrap.slab .slab-score { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; gap: 0.5px; flex: 0 0 auto; }
        .cover-wrap.slab .slab-score .slab-seal { flex: 0 0 auto; }   /* don't let the seal pill get shrunk to a sliver */
        .cover-wrap.slab .slab-seal {
            background: #000; color: #fff;
            display: inline-flex; align-items: center; justify-content: center; text-align: center;
            font-weight: 500; letter-spacing: 0; border-radius: 4px; line-height: 1.1;
        }

        /* ========================================================================
           SLAB SIZING — the ONE place to tune everything about a cover, in four
           self-contained contexts (desktop/mobile × details/covers). Each context
           sets BOTH the cover (art width, slab width or grid columns, white border)
           AND the grade (number font, seal font, gap). To change a context, edit
           only its block — nothing stacks or fights across contexts.
           DETAILS cards use a fixed art width (slab width = art + 2·padding + 2·border
           so a wide logo can't stretch it). COVERS tiles are fluid (art = 100% of the
           grid cell), so their size is the grid column count.
           ======================================================================== */
        @media (min-width: 769px) {
            /* DESKTOP · DETAILS (36px label) */
            .collect-card .cover-wrap img  { width: 123px; }
            .collect-card .cover-wrap.slab { width: 141px; padding: 8px; }   /* 123 art + 16 white + 2 border */
            .collect-card .cover-wrap.slab .slab-grade { gap: 0.5px; }
            .collect-card .cover-wrap.slab .slab-num   { line-height: 0.8; font-size: 0.9em; }
            .collect-card .cover-wrap.slab .slab-seal  { font-size: 0.55rem; padding: 1px 5px; }
            /* DESKTOP · COVERS (40px label) */
            .covers-grid                   { grid-template-columns: repeat(4, 1fr); gap: 16px; }
            .cover-tile   .cover-wrap.slab { padding: 8px; }
            .cover-tile   .cover-wrap.slab .slab-grade { gap: 0.5px; }
            .cover-tile   .cover-wrap.slab .slab-num   { line-height: 0.8; font-size: 1em; }
            .cover-tile   .cover-wrap.slab .slab-seal  { font-size: 0.7rem;  padding: 2px 5px 0; margin-top: -1px; }   /* 2/0 = optical-center caps; -1px pulls the seal into the number's empty descent */
            .collect-card .cover-wrap.slab.logo-right .slab-logo { height: 31px; }   /* CGC chip — details */
            .cover-tile   .cover-wrap.slab.logo-right .slab-logo { height: 34px; }   /* CGC chip — covers, ~10% bigger */
        }
        @media (max-width: 768px) {
            /* MOBILE · DETAILS (28px label; art 10% smaller, 1px skinnier white) */
            .collect-card .cover-wrap img  { width: 81px; }
            .collect-card .cover-wrap.slab { width: 97px; padding: 7px; }    /* 81 art + 14 white + 2 border */
            .collect-card .cover-wrap.slab .slab-grade { gap: 0.5px; }
            .collect-card .cover-wrap.slab .slab-num   { line-height: 0.8; font-size: 0.9em; }
            .collect-card .cover-wrap.slab .slab-seal  { font-size: 0.42rem; padding: 0.5px 5px; }
            /* MOBILE · COVERS (32px label) */
            .covers-grid                   { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .cover-tile   .cover-wrap.slab { padding: 8px; }
            .cover-tile   .cover-wrap.slab .slab-grade { gap: 0.5px; }
            .cover-tile   .cover-wrap.slab .slab-num   { line-height: 0.8; font-size: 1em; }
            .cover-tile   .cover-wrap.slab .slab-seal  { font-size: 0.44rem; padding: 1px 5px; }
        }
        /* Per-grader palettes — structure is shared; only these colors differ. */
        .cover-wrap.slab.g-psa   { --label-border: #e11d1d; --label-bg: #ffffff; --brand-color: #000000; }
        .cover-wrap.slab.g-cgc   { --label-border: #93b3dd; --label-bg: #93b3dd; --brand-color: #000000; }
        .cover-wrap.slab.g-vga   { --label-border: #000000; --label-bg: #ffffff; --brand-color: #000000; }
        .cover-wrap.slab.g-wata  { --label-border: #000000; --label-bg: #ffffff; --brand-color: #000000; }
        .cover-wrap.slab.g-pixel { --label-border: #000000; --label-bg: #ffffff; --brand-color: #ffd400; }
        .cover-wrap.slab.g-forsale { --label-border: #666666; --label-bg: #ffffff; --brand-color: #000000; }
        .cover-wrap.slab.g-intransit { --label-border: #ff6600; --label-bg: #ffffff; --brand-color: #ff6600; }
        /* GOLD GRAIL: PSA + grade 10 + A++ only — red border (and logo backing) go gold. */
        .cover-wrap.slab.g-psa.slab-gold { --label-border: #d4af37; }

        /* LOGO-LEFT graders (PSA/WATA/VGA): the score box fills the whole label (its border
           frames the score); the logo is OVERLAID flush-left, absolutely positioned, full
           height. Overlaying (rather than making the logo a flex sibling) is the key: Safari
           sizes a flex item containing an <img> to the image's FILE width (~300px), which
           shoved the score out of the cover or left a gap. With an overlay there is no flex
           item to mis-size, so it renders byte-identical in WebKit and Chromium. CGC is the
           exception below (logo on the right, solid blue box). */
        .cover-wrap.slab.has-logo:not(.logo-right) .slab-label { border: none; background: transparent; padding: 0; position: relative; display: block; }
        .cover-wrap.slab.has-logo:not(.logo-right) .slab-grade {
            position: absolute; inset: 0; box-sizing: border-box;
            border: 3px solid var(--label-border); background: var(--label-bg);
            display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 0 7px;
        }
        .cover-wrap.slab.has-logo:not(.logo-right) .slab-brand {
            position: absolute; left: 0; top: 0; bottom: 0; z-index: 1;
            display: flex; align-items: center; background: var(--label-border);   /* fills behind a transparent logo so the hidden left border never peeks */
        }
        .cover-wrap.slab.has-logo .slab-brand .slab-logo { width: auto; display: block; }
        .cover-wrap.slab.has-logo:not(.logo-right) .slab-brand .slab-logo { height: 100%; }
        /* Game title printed in the white strip (like a real slab: title up top). Left-logo
           graders only — CGC's blue box has no strip. Hidden by default; JS opts a grader in
           and sets left/right inline (= measured logo width / score width) so it tracks the
           dynamic logo + grade sizes across every breakpoint. Never touches the label layout. */
        .cover-wrap.slab .slab-title {
            display: none;   /* JS opts a grader in (block for left-logo, flex for CGC) */
            font-family: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 400;   /* condensed -> more of the title fits */
            font-size: 0.625rem; line-height: 1; letter-spacing: 0;   /* 10px desktop; mobile pinned to 8px below */
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
        }
        /* Left-logo graders (PSA/VGA/PIXEL/WATA): title top-left in the white strip, black. */
        .cover-wrap.slab.has-logo:not(.logo-right) .slab-title { position: absolute; top: 5px; z-index: 2; color: #000; }
        /* CGC: solid blue box, no strip — center the title in the whole box, black text. */
        .cover-wrap.slab.logo-right .slab-label { position: relative; }   /* confine the absolute title to the label */
        .cover-wrap.slab.logo-right .slab-brand { margin-right: -2px; }   /* CGC logo 2px closer to the right edge (isolated; no shared padding change) */
        .cover-wrap.slab.logo-right .slab-title {
            position: absolute; inset: 0; z-index: 2; color: #000;
            align-items: center; justify-content: center; text-align: center; padding: 0 4px;
        }
        /* CGC: the one special case — a SOLID blue box, logo on the RIGHT, score on the left. */
        .cover-wrap.slab.logo-right .slab-label { flex-direction: row-reverse; }
        .cover-wrap.slab.logo-right .slab-brand { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; }

        /* Covers grid: reserve the slab frame on EVERY cover (even ungraded) so the
           cover art stays aligned across a row — the colored border just appears on grade. */
        .cover-tile .cover-wrap:not(.slab) { border: 1px solid transparent; padding: 6px; }
        .cover-tile .cover-wrap:not(.slab) .slab-label {
            display: flex; height: 36px; margin-bottom: 6px;
            border: 3px solid transparent; background: transparent;
        }

@media (max-width: 768px) {
            /* mobile keeps a slightly smaller slab label than desktop */
            .cover-wrap.slab .slab-label { height: 32px; font-size: 0.95rem; padding: 0 5px; }
            .cover-wrap.slab .slab-title { font-size: 0.5rem; }   /* keep mobile title at 8px (desktop is 9px) */
            .cover-tile .cover-wrap:not(.slab) .slab-label { height: 32px; }
            /* mobile DETAILS mode only: label 4px shorter than covers (32 -> 28) + text a touch smaller */
            .collect-card .cover-wrap.slab .slab-label { height: 28px; font-size: 0.9rem; margin-bottom: 7px; }  /* match the 7px case padding */
            .collect-card .cover-wrap.slab.logo-right .slab-logo { height: 22px; }   /* CGC chip — details */
            .cover-tile   .cover-wrap.slab.logo-right .slab-logo { height: 24px; }   /* CGC chip — covers, ~10% bigger */
}