/* =====================================================================
   CARDBOARD CONNOISSEUR — v3 DESIGN SYSTEM
   =====================================================================
   A token-first sheet. Every component below reads from the variables
   in :root and nothing else — no hardcoded hex outside the token block
   — so re-theming the whole app is editing twelve lines rather than
   hunting colours through a stylesheet.

   WHY THIS IS A SECOND FILE AND NOT A REPLACEMENT FOR style.css
   -------------------------------------------------------------
   style.css currently dresses about thirty working pages. Overwriting
   it restyles all of them at once, sight unseen, and the first thing
   you'd find out is which page broke. This sheet is additive: every
   class here is cc- prefixed, so it cannot collide with anything in
   style.css. The new pages use it exclusively; the old pages are
   untouched until you decide to move them across.

   The theming hook is the same one the existing chrome already uses —
   data-theme="light" on <html>, set before first paint by the inline
   script in _page_header.php — so the toggle in the rail works on
   these pages with no extra wiring.
   ===================================================================== */

/* "Graded" — the default look. Light by default: warm paper ground,
   white panels, deep navy brand, gold highlight. The dark theme below
   is a genuine alternative, not an inversion. Each shop's palette
   (Branding::cssVariables) overrides brand, highlight and ground on
   top of these, so these values are the fallback, not the rule.

   Green and red are reserved for money: in profit / at a loss, live /
   failed. They are never used for brand or decoration, so a green
   number on this app always means the same thing. */
:root {
    /* Dark theme (no data-theme attribute, or data-theme="dark") */
    --cc-bg:        #10141f;
    --cc-surface:   #171c29;
    --cc-surface-2: #1f2533;
    --cc-line:      #2c3447;

    --cc-text:      #e8ecf4;
    --cc-text-dim:  #a9b1c1;
    --cc-text-mute: #8e97a8;

    --cc-accent:      #9fb3e0;
    --cc-accent-soft: rgba(159, 179, 224, 0.14);
    --cc-accent-text: #0b1220;

    --cc-highlight:      #d9a441;
    --cc-highlight-soft: rgba(217, 164, 65, 0.18);
    --cc-highlight-text: #0b1220;

    --cc-good:  #4cc38a;
    --cc-warn:  #e3b75a;
    --cc-bad:   #f08a80;
    --cc-info:  #8fb0f0;
    --cc-good-soft: rgba(76, 195, 138, 0.15);
    --cc-warn-soft: rgba(227, 183, 90, 0.15);
    --cc-bad-soft:  rgba(240, 138, 128, 0.15);
    --cc-info-soft: rgba(143, 176, 240, 0.15);

    /* Admin sidebar. Overridden by the shop's brand when it is dark
       enough to carry white text; see Branding::cssVariables(). */
    --cc-rail:       #0c1019;
    --cc-rail-text:  #c8ced9;
    --cc-rail-mute:  #a7afbf;   /* 4.5:1 or better on any brand rail (rails are 7:1 against white) */

    --cc-r:    12px;
    --cc-r-sm: 8px;
    --cc-gap:  16px;
    --cc-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.2);

    --cc-font:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --cc-display: var(--cc-font);
    --cc-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

:root[data-theme="light"] {
    --cc-bg:        #f6f4ef;
    --cc-surface:   #ffffff;
    --cc-surface-2: #f1eee7;
    --cc-line:      #e3ded3;

    --cc-text:      #16181d;
    --cc-text-dim:  #545963;
    --cc-text-mute: #5f646c;

    --cc-accent:      #1c2a4a;
    --cc-accent-soft: rgba(28, 42, 74, 0.08);
    --cc-accent-text: #ffffff;

    --cc-highlight:      #d9a441;
    --cc-highlight-soft: rgba(217, 164, 65, 0.18);
    --cc-highlight-text: #0b1220;

    --cc-good:  #1e7a4c;
    --cc-warn:  #9a6a12;
    --cc-bad:   #b3261e;
    --cc-info:  #2f5aa8;
    --cc-good-soft: #e3f1e8;
    --cc-warn-soft: #f6ecd6;
    --cc-bad-soft:  #f8e3e1;
    --cc-info-soft: #e6ecf7;

    --cc-rail:       #1c2a4a;

    --cc-shadow: 0 1px 2px rgba(22,24,29,.05), 0 8px 24px rgba(22,24,29,.06);
}

/* ---------------------------------------------------------------------
   LAYOUT
   --------------------------------------------------------------------- */

.cc-stack   { display: flex; flex-direction: column; gap: var(--cc-gap); }
.cc-row     { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-row-end { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cc-grow    { flex: 1 1 auto; }

.cc-panel {
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-r);
    padding: 18px;
    color: var(--cc-text);
}
.cc-panel + .cc-panel { margin-top: var(--cc-gap); }

.cc-panel-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.cc-panel-head h2 { margin: 0; font-family: var(--cc-display); font-size: 18px; font-weight: 600; letter-spacing: -.005em; }
.cc-panel-head p  { margin: 2px 0 0; font-size: 12px; color: var(--cc-text-dim); }

.cc-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--cc-gap);
}

/* ---------------------------------------------------------------------
   FIGURES
   --------------------------------------------------------------------- */

.cc-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
/* For figure strips inside a narrow column — the per-channel panels on
   the listings page are ~200px wide, so the 150px auto-fit collapsed
   Live/Pending/Failed into a vertical stack three rows tall. Three
   small numbers belong side by side. */
.cc-figs-sm { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cc-figs-sm .cc-fig { padding: 9px 10px; }
.cc-figs-sm .cc-fig b { font-size: 17px; }
.cc-fig {
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-r);
    padding: 16px 18px;
}
.cc-fig b {
    display: block; font-size: 22px; font-weight: 650;
    /* Tabular figures so a column of prices lines up on the decimal
       instead of jittering as digits change width. */
    font-variant-numeric: tabular-nums;
}
.cc-fig span {
    display: block; font-size: 11px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--cc-text-mute); margin-top: 3px;
}

/* ---------------------------------------------------------------------
   CONTROLS
   --------------------------------------------------------------------- */

.cc-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 14px; font-weight: 550;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: var(--cc-r-sm);
    border: 1px solid var(--cc-line);
    background: var(--cc-surface);
    color: var(--cc-text);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.cc-btn:hover:not(:disabled) { border-color: var(--cc-text-mute); }
.cc-btn:disabled { opacity: .45; cursor: not-allowed; }
.cc-btn-primary {
    background: var(--cc-accent);
    border-color: var(--cc-accent);
    color: var(--cc-accent-text);
}
.cc-btn-danger  { color: var(--cc-bad); border-color: var(--cc-bad-soft); }
.cc-btn-sm      { min-height: 32px; padding: 5px 11px; font-size: 12.5px; }
.cc-btn-primary:hover:not(:disabled) { filter: brightness(1.12); }

/* The focus ring is deliberately loud. These pages are operated at
   speed with a keyboard over a list of a few hundred rows, and losing
   your place is the actual failure mode. */
.cc-btn:focus-visible,
.cc-input:focus-visible,
.cc-select:focus-visible {
    outline: 2px solid var(--cc-accent);
    outline-offset: 2px;
}

.cc-input, .cc-select, .cc-textarea {
    font: inherit; font-size: 13px;
    padding: 8px 10px;
    border-radius: var(--cc-r-sm);
    border: 1px solid var(--cc-line);
    background: var(--cc-bg);
    color: var(--cc-text);
    width: 100%;
    box-sizing: border-box;
}
.cc-textarea { min-height: 70px; resize: vertical; }

.cc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* Long setting keys and URLs in help text wrap instead of pushing the
   page sideways on a phone. */
.cc-field small, .cc-field label { overflow-wrap: anywhere; }
.cc-field label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--cc-text-mute);
}
.cc-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 12px;
}

/* ---------------------------------------------------------------------
   TABLE
   --------------------------------------------------------------------- */

.cc-tablewrap { position: relative; overflow-x: auto; border-radius: var(--cc-r-sm); border: 1px solid var(--cc-line); }
.cc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cc-table th {
    text-align: left; padding: 9px 12px;
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--cc-text-mute);
    background: var(--cc-surface-2);
    border-bottom: 1px solid var(--cc-line);
    white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
}
.cc-table td { padding: 10px 12px; border-bottom: 1px solid var(--cc-line); vertical-align: middle; }
.cc-table tbody tr:last-child td { border-bottom: 0; }
.cc-table tbody tr:hover { background: var(--cc-surface-2); }
.cc-table tbody tr.is-selected { background: var(--cc-accent-soft); }
.cc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* nowrap because a SKU is an identifier: the hyphen is a legal break
   point, so "CC-000001" was wrapping to "CC-0000" / "01" — unreadable
   and impossible to copy by eye. */
.cc-sku {
    font-family: var(--cc-mono);
    font-size: 11px;
    color: var(--cc-text-mute);
    white-space: nowrap;
}

.cc-cardcell b { display: block; font-weight: 600; }
.cc-cardcell small { color: var(--cc-text-dim); font-size: 11.5px; }

/* ---------------------------------------------------------------------
   PILLS + CHANNEL BADGES
   --------------------------------------------------------------------- */

.cc-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    background: var(--cc-surface-2); color: var(--cc-text-dim);
    border: 1px solid var(--cc-line);
}
.cc-pill-good { background: var(--cc-good-soft); color: var(--cc-good); border-color: transparent; }
.cc-pill-warn { background: var(--cc-warn-soft); color: var(--cc-warn); border-color: transparent; }
.cc-pill-bad  { background: var(--cc-bad-soft);  color: var(--cc-bad);  border-color: transparent; }
.cc-pill-info { background: var(--cc-info-soft); color: var(--cc-info); border-color: transparent; }

/* A failed listing gets a cursor and a tooltip — the error message is
   the most useful thing on the row and it does not fit in the cell. */
.cc-pill[title] { cursor: help; }

.cc-channels { display: flex; gap: 5px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   BULK BAR — appears only when rows are selected
   --------------------------------------------------------------------- */

.cc-bulkbar {
    position: sticky; bottom: 0; z-index: 5;
    display: none;
    align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 12px; padding: 12px 14px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-accent);
    border-radius: var(--cc-r);
    box-shadow: var(--cc-shadow);
}
.cc-bulkbar.is-open { display: flex; }
.cc-bulkbar b { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   TOASTS
   --------------------------------------------------------------------- */

.cc-toasts {
    position: fixed; right: 16px; bottom: 16px; z-index: 50;
    display: flex; flex-direction: column; gap: 8px;
    max-width: min(380px, calc(100vw - 32px));
}
.cc-toast {
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-left: 3px solid var(--cc-info);
    border-radius: var(--cc-r-sm);
    padding: 11px 13px; font-size: 13px; color: var(--cc-text);
    box-shadow: var(--cc-shadow);
}
.cc-toast-good { border-left-color: var(--cc-good); }
.cc-toast-bad  { border-left-color: var(--cc-bad); }

/* ---------------------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------------------- */

.cc-empty {
    text-align: center; padding: 42px 20px;
    color: var(--cc-text-dim); font-size: 13.5px;
}
.cc-empty b { display: block; color: var(--cc-text); font-size: 15px; margin-bottom: 5px; }

/* ---------------------------------------------------------------------
   PUBLIC SHOP
   --------------------------------------------------------------------- */
/* The shop does not use the admin chrome at all — it is a different
   audience and a different page shell, so it gets its own layout
   classes rather than inheriting a sidebar meant for an operator. */

.cc-shop { max-width: 1180px; margin: 0 auto; padding: 0 20px 64px; }

.cc-shop-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 18px 0; flex-wrap: wrap;
}
.cc-shop-nav a.cc-brand { text-decoration: none; color: var(--cc-text); }
.cc-brand b  { display: block; font-size: 17px; letter-spacing: -.01em; }
.cc-brand em { color: var(--cc-accent); font-style: normal; }
.cc-brand small { color: var(--cc-text-mute); font-size: 11.5px; }

.cc-hero {
    padding: 46px 0 30px;
    border-bottom: 1px solid var(--cc-line);
    margin-bottom: 26px;
}
.cc-hero h1 { margin: 0 0 8px; font-size: clamp(26px, 5vw, 40px); letter-spacing: -.02em; }
.cc-hero p  { margin: 0; color: var(--cc-text-dim); font-size: 15px; max-width: 58ch; }

.cc-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 18px;
}

.cc-tile {
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-r);
    overflow: hidden;
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    transition: transform .12s ease, border-color .12s ease;
}
.cc-tile:hover { transform: translateY(-2px); border-color: var(--cc-accent); }

/* Fixed aspect box. Card scans arrive at wildly different sizes, and
   letting each tile size to its own image is what makes a grid look
   broken on the one row with a tall scan in it. */
.cc-tile-img {
    aspect-ratio: 5 / 7;
    background: var(--cc-surface-2);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.cc-tile-img img { width: 100%; height: 100%; object-fit: contain; }
.cc-tile-img span { color: var(--cc-text-mute); font-size: 12px; }

.cc-tile-body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cc-tile-body b     { font-size: 13.5px; line-height: 1.3; }
.cc-tile-body small { color: var(--cc-text-dim); font-size: 11.5px; }
.cc-tile-price {
    margin-top: auto; padding-top: 8px;
    font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums;
    color: var(--cc-accent);
}

.cc-detail { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px; padding-top: 28px; }
@media (max-width: 720px) { .cc-detail { grid-template-columns: 1fr; } }

.cc-shop-foot {
    margin-top: 54px; padding-top: 22px;
    border-top: 1px solid var(--cc-line);
    color: var(--cc-text-mute); font-size: 12.5px;
    display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between;
}
.cc-shop-foot a { color: var(--cc-text-dim); }

/* ---------------------------------------------------------------------
   SHOP PAGE SHELL — only applied on pages that opt in with .cc-page,
   so this sheet can be loaded alongside style.css without touching the
   admin pages' own body styling.
   --------------------------------------------------------------------- */
body.cc-page {
    margin: 0;
    background: var(--cc-bg);
    color: var(--cc-text);
    font-family: var(--cc-font);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
body.cc-page a { color: var(--cc-accent); }

/* `body.cc-page a` has higher specificity than `.cc-btn` (two elements
   plus a class beats one class), so on the shop it was repainting
   every anchor-based button teal — including .cc-btn-primary, whose
   BACKGROUND is teal. The result was teal-on-teal: the shop's main
   call to action rendered as a blank pill. Caught by screenshotting
   the page rather than reading the CSS.
   These four rules restore the intended colours at matching
   specificity. */
body.cc-page a.cc-btn          { color: var(--cc-text); }
body.cc-page a.cc-btn-primary  { color: var(--cc-accent-text); }
body.cc-page a.cc-btn-danger   { color: var(--cc-bad); }
/* Tiles are anchors too — their titles were teal for the same reason,
   when the tile is meant to read as ordinary text with the price as
   the only accent. */
body.cc-page a.cc-tile         { color: var(--cc-text); }

@media (max-width: 640px) {
    .cc-panel { padding: 14px; }
    .cc-table th, .cc-table td { padding: 8px 9px; }

    /* Tables become labelled cards (labels set by _page_footer.php). */
    .cc-tablewrap:has(> .cc-tstack) { overflow-x: visible; border: 0; }
    .cc-table.cc-tstack thead { display: none; }
    .cc-table.cc-tstack, .cc-table.cc-tstack tbody { display: block; }
    .cc-table.cc-tstack tbody tr {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px;
        margin-bottom: 10px; padding: 12px 14px;
        background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-r-sm);
    }
    .cc-table.cc-tstack tbody tr:hover { background: var(--cc-surface); }
    .cc-table.cc-tstack td {
        display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
        padding: 0; border: 0; text-align: left; min-width: 0; overflow-wrap: anywhere;
    }
    .cc-table.cc-tstack td::before {
        content: attr(data-label); font-family: var(--cc-font); font-size: 10.5px;
        text-transform: uppercase; letter-spacing: .05em; color: var(--cc-text-mute);
    }
    .cc-table.cc-tstack td[data-label=""]::before,
    .cc-table.cc-tstack td.cc-cardcell::before,
    .cc-table.cc-tstack td.cc-stack-thumb::before { content: none; }
    /* The card name heads the card; a thumbnail, if any, sits beside it. */
    .cc-table.cc-tstack td.cc-cardcell { grid-column: 1 / -1; order: -1; font-size: 15px; }
    .cc-table.cc-tstack td.cc-stack-thumb { grid-column: 1 / -1; order: -2; flex-direction: row; }
    .cc-table.cc-tstack td.cc-stack-thumb + td + td.cc-cardcell,
    .cc-table.cc-tstack td.cc-stack-thumb ~ td.cc-cardcell { grid-column: 2 / -1; order: -2; justify-content: center; }
    .cc-table.cc-tstack td.cc-stack-thumb:has(~ td.cc-cardcell) { grid-column: 1 / 2; }
    .cc-table.cc-tstack td[data-label=""] { grid-column: 1 / -1; }
    .cc-table.cc-tstack td:last-child[data-label=""] {
        flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center;
        padding-top: 8px; border-top: 1px solid var(--cc-line);
    }
    .cc-table.cc-tstack td:last-child[data-label=""] > * { flex-wrap: wrap; justify-content: flex-end; }
    .cc-table.cc-tstack td.cc-num { font-size: 14px; }
    .cc-table.cc-tstack td:not(.cc-sku) { white-space: normal !important; }
    .cc-table.cc-tstack td:empty { display: none; }

    /* Two columns, not one. At 215px minimum the grid dropped to a
       single column on a phone, and with the 5:7 card aspect that made
       every tile most of a screen tall — seven cards became a ten-
       screen scroll. Two up is how every card marketplace shows them. */
    .cc-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .cc-tile-body { padding: 9px 10px 11px; }
    .cc-tile-body b { font-size: 12.5px; }
    .cc-tile-price { font-size: 14px; }
    .cc-shop { padding: 0 12px 40px; }
    .cc-hero { padding: 28px 0 20px; }
}

/* Print: an inventory list is a pull sheet you take to the boxes. */
@media print {
    .cc-btn, .cc-bulkbar, .cc-toasts, .cc-shop-nav { display: none !important; }
    .cc-panel { border: 0; padding: 0; }
    .cc-table th { position: static; }
}


/* The per-row channel buttons on the inventory table. Without an
   explicit nowrap the fourth button ("Shopify") wrapped to a second
   line on every row, adding ~25px per row for no information. The cell
   is sized to its content instead, so the card column keeps the rest. */
.cc-actions-cell { width: 1%; white-space: nowrap; }
.cc-actions-cell .cc-row-end { flex-wrap: nowrap; }


/* =====================================================================
   SHOP RESULTS — marketplace-style rows
   =====================================================================
   Fixed three-column shape: thumbnail, details, price + action. The
   price column is right-aligned and the same width on every row, so a
   buyer scanning eight cards reads one column of aligned numbers
   instead of eight scattered ones. That alignment is the entire reason
   marketplaces use rows rather than tiles for search results.
   ===================================================================== */

.cc-results { display: flex; flex-direction: column; gap: 10px; }

.cc-result {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 12px 14px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-r);
    transition: border-color .12s ease;
}
.cc-result:hover { border-color: var(--cc-accent); }

.cc-result-img {
    aspect-ratio: 5 / 7;
    background: var(--cc-surface-2);
    border-radius: var(--cc-r-sm);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    text-decoration: none;
}
.cc-result-img img { width: 100%; height: 100%; object-fit: contain; }
.cc-result-img span { color: var(--cc-text-mute); font-size: 11px; }

.cc-result-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cc-result-title {
    font-size: 15px; font-weight: 600; line-height: 1.3;
    color: var(--cc-text); text-decoration: none;
}
.cc-result-title:hover { color: var(--cc-accent); text-decoration: underline; }
.cc-result-sub { color: var(--cc-text-dim); font-size: 12.5px; }

.cc-result-buy {
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    /* Wide enough that "Buy on eBay" and a four-figure price never
       reflow the row. */
    min-width: 140px;
}
.cc-from {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--cc-text-mute);
}
.cc-result-price {
    font-size: 19px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cc-accent);
    white-space: nowrap;
}

/* --- the buy chooser -------------------------------------------------- */
.cc-buy { position: relative; }
.cc-buy-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
    min-width: 180px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-r-sm);
    box-shadow: var(--cc-shadow);
    overflow: hidden;
}
.cc-buy-menu a {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 9px 12px;
    color: var(--cc-text);
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px solid var(--cc-line);
}
.cc-buy-menu a:last-child { border-bottom: 0; }
.cc-buy-menu a:hover { background: var(--cc-accent-soft); color: var(--cc-accent); }
.cc-buy-menu b { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    /* Thumbnail left, everything else stacked beside it — the price and
       button drop under the details rather than squeezing a third
       column onto a phone. */
    .cc-result { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; }
    .cc-result-buy {
        grid-column: 2;
        flex-direction: row; align-items: center; justify-content: space-between;
        min-width: 0; width: 100%;
    }
    .cc-result-title { font-size: 14px; }
    .cc-buy-menu { right: auto; left: 0; }
}


/* ---------------------------------------------------------------------
   GRADED ADDITIONS
   --------------------------------------------------------------------- */
.cc-pill-graded { background: var(--cc-highlight-soft); color: var(--cc-text); border-color: transparent; }
.cc-num, .cc-mono, .cc-table td.cc-num { font-family: var(--cc-mono); font-variant-numeric: tabular-nums; }
.cc-fig b { font-family: var(--cc-display); }
.cc-num .cc-btn, .cc-num a.cc-btn { font-family: var(--cc-font); }
/* A checkbox row inside a field is a sentence, not a field label: don't
   inherit the small uppercase label style (it made settings help text
   read as shouting). */
.cc-field label.cc-row, .cc-field label.cc-row span {
    text-transform: none; letter-spacing: normal; font-size: 13px; font-weight: 400; color: var(--cc-text-dim);
}

/* Anything marked hidden stays hidden, whatever display a class gives it. */
[hidden] { display: none !important; }

/* Demo site */
.cc-demo-bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 14px; border-radius: var(--cc-r-sm, 8px); font-size: 13.5px;
  background: var(--cc-highlight-soft, #fdf3dc); border: 1px solid var(--cc-highlight, #d9a441); color: var(--cc-text); }
.cc-demo-ribbon { background: #1c2a4a; color: #fff; text-align: center; font-size: 13px; padding: 7px 12px; }
.cc-demo-ribbon a { color: #f3c969; }
.cc-tour { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.cc-tour-step { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-r, 12px); padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 8px; }
.cc-tour-step h3 { margin: 0; font-size: 15.5px; display: flex; gap: 8px; align-items: baseline; }
.cc-tour-step h3 .n { font-family: var(--cc-mono); font-size: 12px; color: var(--cc-text-mute); }
.cc-tour-step p { margin: 0; color: var(--cc-text-dim); font-size: 13.5px; line-height: 1.5; }
.cc-tour-step .say { border-left: 3px solid var(--cc-accent); padding: 2px 0 2px 10px; color: var(--cc-text); font-style: italic; }
.cc-tour-step .links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.cc-tour-step .who { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--cc-text-mute); }
.cc-outbox details { border-top: 1px solid var(--cc-line); padding: 10px 0; }
.cc-outbox summary { cursor: pointer; display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.cc-outbox pre { white-space: pre-wrap; font-family: var(--cc-font); font-size: 13px; background: var(--cc-bg); padding: 12px; border-radius: 8px; margin: 8px 0 0; }

/* Long pills (a card name + tracking number) shorten instead of pushing the page sideways on a phone. */
.cc-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }