/* 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 */
        .cover-wrap.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: 1.05em; }
            .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: 1.05em; }
            .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; }
        /* 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 */
}