/* ═══════════════════════════════════════════════════════════════════════
   card-prices-redesign.css — additive override layer (loaded LAST).
   Ports the approved "partners-grade" skin onto the live page without
   rewriting the 1,889-line card-prices-theme.css. Surgical by design.

   DELIBERATELY UNTOUCHED (do not regress):
   - --cp-void  — used as a readable TEXT color in the results panel
                  (.mps-val.mps-mkt), so it is never globally darkened here.
   - card-rich-panel.css results geometry (frozen, md5-gated).
   - .cp-nav-badge gem badges in the nav.
   - .lp-printer-select / .lp-printer-status — the reachable-printer selector.
   - select{} styling — left to comp-styles/theme so the printer <select> keeps working.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 ── 4-stop "partners" holo (was the 7-stop full rainbow) + mockup tokens ── */
:root{
  --holo: linear-gradient(100deg,#9333ea,#ff3cac 35%,#ff6a00 65%,#ffd700) !important;
  /* mockup palette (comp/_redesign-mockup.html :root) — used by the foil skin */
  --rx-panel:#1c0b2b; --rx-panel2:#160821;
  --rx-tcg:#ee7a4a; --rx-ebay:#fbcb1c; --rx-gain:#3ddc8e;
  --rx-muted:#e9e0f9; --rx-dim:#cdbfec; --rx-line:rgba(168,85,247,.28);
  --rx-inset:rgba(12,6,22,.5);
}

/* 2 ── near-black cinematic field (was washed lifted-purple) ─────────── */
body::before{
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(147,51,234,.20), transparent 55%),
    radial-gradient(90% 80% at 0% 110%, rgba(255,106,0,.12), transparent 55%),
    radial-gradient(ellipse 72% 56% at 50% 30%, rgba(248,244,255,0.10), transparent 62%),
    linear-gradient(180deg,#1a0826,#0f0518) !important;
  background-size:100% 100% !important;
}

/* 3 ── search panel → light purple (was white frosted glass) ─────────── */
.panel{ background: linear-gradient(180deg,#ece6f8,#e4dcf3) !important; }

/* 4 ── tone the ambient aurora so the near-black field stays cinematic ── */
.cp-aurora{ opacity:.5 !important; }
.cp-vig{ background: radial-gradient(ellipse 82% 74% at 50% 40%, transparent 48%, rgba(6,4,12,.72) 100%) !important; }

/* 5 ── real CTA buttons keep purple fill + the 4-stop rainbow border ───── */
.btn-primary, .btn-ghost{
  border-image: var(--holo) 1 !important;
}
/* nav + footer text links must NOT be boxed — they read as ugly bordered
   tiles on the dark bar. Strip border/box, leave clean holo-tinted text. */
.cp-nav-links a, .cp-footer-links a, .comp-footer .support-link{
  border: 0 !important; border-image: none !important;
  background: transparent !important; box-shadow: none !important;
}

/* 6 ── global filter dropdowns → clean light pills (scoped to the top row;
        the frozen per-card .cp-dd dropdowns inside results are NOT touched) ── */
.global-selectors .cp-dd-trigger{
  background:#f3eefb !important; color:#46226f !important;
  text-shadow:none !important; border-color:rgba(124,58,180,.32) !important;
}
.global-selectors .cp-dd-trigger::after{ text-shadow:none !important; opacity:.55 !important; }

/* 7 ── search bar → light lavender to match the panel (was dark glass) ── */
.search-wrap{
  background:#f4f0fb !important;
  box-shadow: inset 0 0 0 1px rgba(124,58,180,.22), 0 2px 10px rgba(36,12,64,.12) !important;
}
.search-prompt{ color:#7a3ac2 !important; text-shadow:none !important; }

/* 8 ── compact hero (ported from approved mockup) ─────────────────────────
        Sized deliberately small so it never pushes the search panel
        below the fold (Eric: "I don't like that search gets moved off
        the page"). Centered, holo accent on the closing line only. */
.cp-hero{
  max-width:760px; margin:4px auto 18px; padding:0 16px;
  text-align:center;
}
.cp-hero-kick{
  display:inline-flex; align-items:center; gap:9px;
  font-family:"JetBrains Mono","IBM Plex Mono",monospace;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:#c8b6e8; opacity:.92; margin-bottom:14px;
}
.cp-hero-bar{
  width:26px; height:2px; border-radius:2px;
  background:var(--holo); display:inline-block;
}
.cp-hero-title{
  font-family:"Cinzel",serif; font-weight:700;
  font-size:clamp(1.6rem,3.6vw,2.5rem); line-height:1.12;
  letter-spacing:.01em; margin:0 auto;
  color:#f4eeff; text-shadow:0 2px 28px rgba(120,40,200,.28);
}
.cp-hero-em{
  background:var(--holo); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  display:inline-block;
}
.cp-hero-lead{
  margin:13px auto 0; max-width:560px;
  font-family:"Exo 2","Inter",system-ui,sans-serif;
  font-size:clamp(.92rem,1.4vw,1.04rem); line-height:1.55;
  color:#b9a9d6;
}
@media (max-width:640px){
  .cp-hero{ margin:2px auto 12px; }
  .cp-hero-title{ font-size:clamp(1.35rem,7vw,1.8rem); }
  .cp-hero-kick{ font-size:.62rem; letter-spacing:.12em; }
  .cp-hero-lead{ font-size:.9rem; }
}

/* 9 ── THE MOCKUP CARD — ported verbatim from comp/_redesign-mockup.html and
        wired to real data by CardPanel.renderMockup(). The search grid now
        renders this clean card (class .cp-rich-panel.rxcard) instead of the
        legacy scanner panel, so the live page IS the approved mockup. */
.cp-rich-panel.rxcard{
  width:100%; position:relative; overflow:visible; border-radius:14px; padding:11px 15px 14px;
  display:grid; grid-template-columns:clamp(92px,28%,120px) minmax(0,1fr);
  grid-template-rows:auto auto auto auto auto; column-gap:13px; row-gap:6px; align-items:start;
  background:linear-gradient(180deg,var(--rx-panel),var(--rx-panel2)) !important;
  border:1px solid var(--rx-line) !important; box-shadow:0 12px 30px rgba(0,0,0,.5) !important;
}
.cp-rich-panel.rxcard::before{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:.5; z-index:0; border-radius:14px;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),
            linear-gradient(135deg,rgba(147,51,234,.26),rgba(255,60,172,.1) 42%,rgba(255,106,0,.07) 66%,rgba(255,215,0,.16));
}
.cp-rich-panel.rxcard::after{ content:""; position:absolute; left:0; top:0; height:100%; width:4px; background:var(--holo); opacity:.9; z-index:1; border-radius:14px 0 0 14px; }
.cp-rich-panel.rxcard > *{ position:relative; z-index:1; }
/* a card with an open dropdown sits above its neighbours so the menu shows on top */
.cp-rich-panel.rxcard:has(.cp-dd.open){ z-index:30; }
/* the pill row owns the open menu — lift it above the other card children
   (which are all z-index:1 stacking contexts) so the menu isn't covered. */
.cp-rich-panel.rxcard .rxc-dd-row:has(.cp-dd.open){ z-index:50 !important; }
/* dropdown menus inside the card escape it (overflow:visible) and render on top */
.rxc-dd-row .cp-dd-list, .rxc-dd-row .scan-add-dd .cp-dd-list{ z-index:10005 !important; }

/* pill row — the real functional cp-dd dropdowns, styled as the mockup .dd.
   Single line: the selector pills shrink to fit (ellipsis on extreme labels);
   the qty+add group stays fixed so it's never squeezed. */
.rxc-dd-row{ grid-column:1 / -1; grid-row:1; display:flex; gap:3px 4px; flex-wrap:wrap; align-items:center; margin-bottom:2px; min-width:0; }
.rxc-dd-row .cp-dd, .rxc-dd-row .cp-dd-static, .rxc-dd-row .graded-toggle{ flex:0 1 auto; min-width:0; }
.rxc-dd-row .rxc-qa{ flex:0 0 auto; }
.rxc-dd-row .cp-dd-trigger, .rxc-dd-row .cp-dd-static{
  display:inline-flex !important; align-items:center; gap:4px; max-width:none; overflow:visible;
  font-family:"Cinzel",serif !important; font-weight:700 !important; font-size:.5rem !important;
  letter-spacing:.03em !important; text-transform:uppercase !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
  border:1px solid transparent !important; border-radius:999px !important; padding:3px 6px !important; cursor:pointer; white-space:nowrap;
  background:linear-gradient(var(--rx-panel),var(--rx-panel)) padding-box, var(--holo) border-box !important; text-shadow:none !important;
}
.rxc-dd-row .cp-dd-rainbow{ overflow:visible; white-space:nowrap; min-width:0; }
/* inline caret after the label — reset the theme's absolute/translateY(-50%) leak
   (which raised it into a messy superscript) so it sits centered on the baseline. */
.rxc-dd-row .cp-dd-trigger::after{ content:"▾" !important; font-size:.82em !important; opacity:.7 !important; margin-left:3px !important; position:static !important; transform:none !important; top:auto !important; right:auto !important; line-height:1 !important; color:#fff !important; flex:0 0 auto; }
.rxc-dd-row .cp-dd-trigger::before{ display:none !important; }
.rxc-dd-row .cp-dd-trigger:hover{ filter:brightness(1.35); }
/* uniform pill height so the whole row aligns cleanly (was jagged: dropdowns 21px,
   statics 19px, qty/add group 26px). Force one height + vertical-center the content. */
.rxc-dd-row .graded-toggle,
.rxc-dd-row .cp-dd-trigger,
.rxc-dd-row .cp-dd-static,
.rxc-dd-row .rxc-qa,
.rxc-dd-row .scan-qty-stepper,
.rxc-dd-row .scan-add-dd,
.rxc-dd-row .scan-add-dd .cp-dd-trigger{
  height:22px !important; box-sizing:border-box !important;
  padding-top:0 !important; padding-bottom:0 !important; align-items:center !important;
}
.rxc-dd-row .rxc-qa, .rxc-dd-row .scan-add-dd{ display:inline-flex !important; }

/* image */
/* size the box to the card's own aspect (≈2.5:3.5) and top-align it, so it hugs
   the image instead of stretching across rows 2–4 and letterboxing (dead space). */
.rxc-thumb{ grid-column:1; grid-row:2 / 4; align-self:start; aspect-ratio:25 / 35; min-height:0; border-radius:8px; overflow:hidden; background:#0d0617;
  box-shadow:0 6px 18px rgba(0,0,0,.55),0 0 0 1px rgba(168,85,247,.25); }
.rxc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* identity */
.rxc-ident{ grid-column:2; grid-row:2; min-width:0; }
.rxc-name{ font-family:"Cinzel",serif; font-weight:800; font-size:1rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; }
.rxc-set{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; margin-top:4px; font-family:"Cinzel",serif; font-size:.72rem; color:var(--rx-muted); min-width:0; }
.rxc-set .nm{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rxc-setdot{ width:10px; height:10px; border-radius:3px; background:var(--holo); transform:rotate(45deg); box-shadow:0 0 6px rgba(168,85,247,.5); flex:0 0 auto; }
/* real set symbol PNG with rainbow outer-edge (gradient masked by the glyph,
   sat behind the real image so only the rim shows) */
.rxc-set-icon-wrap{ position:relative; display:inline-flex; align-items:center; flex:0 0 auto; }
.rxc-set-icon{ position:relative; z-index:1; height:1.45em; width:auto; display:block; }
.rxc-set-icon-rb{ position:absolute; inset:-0.8px; z-index:0; pointer-events:none; background:var(--holo);
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
.rxc-pills{ grid-column:2; display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; align-items:center; }
/* collector number — a prominent rainbow-ring chip (was a dim grey label) */
.rxc-num{ font-family:"JetBrains Mono",monospace; font-weight:800; font-size:.6rem; letter-spacing:.04em; color:#fff;
  padding:3px 8px; border-radius:999px; align-self:center; white-space:nowrap;
  background:linear-gradient(var(--rx-panel),var(--rx-panel)) padding-box, var(--holo) border-box; border:1px solid transparent;
  text-shadow:0 0 8px rgba(168,85,247,.45); }
.rxc-tag{ font-family:"Cinzel",serif; font-weight:700; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.rxc-tag.holo{ color:#fff; border:1px solid transparent; background:linear-gradient(var(--rx-panel),var(--rx-panel)) padding-box,var(--holo) border-box; }
.rxc-tag.cond{ color:var(--rx-gain); background:rgba(61,220,142,.1); border:1px solid rgba(61,220,142,.35); }
/* rarity sits on the number line; foil/cond/print drop to their own line below. */
.rxc-tag.rarity{ color:var(--rx-muted); background:rgba(168,85,247,.08); border:1px solid rgba(168,85,247,.28); }
.rxc-tag.print{ color:#fff; background:rgba(255,170,40,.10); border:1px solid rgba(255,170,40,.40); }
.rxc-pills-cf{ margin-top:4px !important; }

/* price + admin-print row — print stays to the RIGHT of the price box (never
   wraps to its own line); the price box shrinks to share the width. */
.rxc-pricerow{ grid-column:2; grid-row:3; display:flex; align-items:stretch; gap:8px; flex-wrap:nowrap; margin-top:8px; min-width:0; }
.rxc-price{ flex:1 1 0; min-width:0; display:flex; flex-direction:row; align-items:center; justify-content:space-around; gap:10px;
  background:var(--rx-inset); border:1px solid rgba(168,85,247,.3); border-radius:10px; padding:8px 12px; box-sizing:border-box; }
.rxc-prow{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; }
.rxc-pl{ font-family:"Cinzel",serif; font-weight:700; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:#dccff7; }
.rxc-pv{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:1.36rem; line-height:1.05; letter-spacing:-.02em; white-space:nowrap; }
.rxc-pv.low{ color:var(--rx-tcg); }
.rxc-pv.mkt{ background:var(--holo); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* recent sales — 2 columns. Sits in col2/row4, beside the label sticker (which now
   lives in col1/row4, under the image). When there's no admin sticker the sales box
   spans the full width (see :not(:has(.rxc-admin)) below). */
.rxc-sales{ grid-column:2; grid-row:4; border:1px solid rgba(168,85,247,.22); border-radius:10px; overflow:hidden; background:rgba(12,6,22,.4); margin-top:2px; display:flex; flex-direction:column; min-height:0; }
.cp-rich-panel.rxcard:not(:has(.rxc-admin)) .rxc-sales{ grid-column:1 / -1; }
.rxc-sales-h{ font-family:"Cinzel",serif; font-weight:700; font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; color:var(--rx-muted);
  text-align:center; padding:5px; background:linear-gradient(180deg,rgba(94,37,150,.5),rgba(46,16,66,.4)); border-bottom:1px solid var(--rx-line); }
.rxc-sales-cols{ display:flex; gap:8px; padding:7px 9px; min-height:0; overflow:hidden; }
/* each source column scrolls independently so TCGplayer's longer sold-list fills the
   space beside the sticker without pushing the card taller. */
.rxc-sales-col{ flex:1 1 0; min-width:0; max-height:clamp(104px,22vh,168px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.rxc-sales-col::-webkit-scrollbar{ width:4px; }
.rxc-sales-col::-webkit-scrollbar-thumb{ background:rgba(168,85,247,.4); border-radius:2px; }
.rxc-src{ font-family:"Cinzel",serif; font-weight:700; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:#dccff7; text-align:center; margin-bottom:4px; }
.rxc-sale{ display:flex; align-items:center; gap:5px; padding:3px 0; border-bottom:1px solid rgba(168,85,247,.1); }
.rxc-sale:last-child{ border-bottom:none; }
.rxc-sale--empty{ justify-content:center; color:var(--rx-dim); opacity:.55; font-family:"JetBrains Mono",monospace; font-size:.5rem; text-transform:uppercase; letter-spacing:.04em; padding:6px 0; }
.rxc-stag{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:.48rem; padding:1px 4px; border-radius:4px; flex:0 0 auto; }
.rxc-stag.ebay{ color:var(--rx-ebay); background:rgba(251,203,28,.12); }
.rxc-stag.tcg{ color:var(--rx-tcg); background:rgba(238,122,74,.14); }
.rxc-amt{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:.75rem; color:#fff; }
.rxc-date{ font-family:"JetBrains Mono",monospace; font-size:.56rem; color:var(--rx-dim); margin-left:auto; white-space:nowrap; }

/* admin label-print section (logged-in admins only) — small, sits to the RIGHT
   of the price box in the price row. Compact: tiny steppers + input + print. */
/* WAY small — a narrow ~62px block so the price box barely condenses. The 6
   steppers tuck into a 3-col grid (−10 −5 −1 / input / +1 +5 +10). */
/* sits in col1/row4 — directly UNDER the card image — as its own grid cell (moved out
   of the price row so the price box gets the full width of col2). Fills the image column. */
.rxc-admin{ grid-column:1; grid-row:4; align-self:start; margin-top:2px;
  display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:3px; width:100%; min-width:0;
  padding:5px 6px; border:1px solid rgba(168,85,247,.22); border-radius:8px; background:rgba(12,6,22,.4); box-sizing:border-box; }
.rxc-admin-label{ font-family:"Cinzel",serif; font-weight:700; font-size:.44rem; letter-spacing:.06em; text-transform:uppercase; color:#dccff7; text-align:center; }
/* Steppers FLANK the number: minus column (−10/−5/−1) | number (center, auto-sized to
   its digits, no surrounding box) | plus column (+1/+5/+10). Print spans the bottom. The
   number cell stretches the 3 stepper rows so the box fills the price-panel height. */
.rxc-admin .sticker-box{ display:grid !important; grid-template-columns:auto 1fr auto; grid-template-rows:1fr 1fr 1fr auto; align-items:stretch; justify-items:stretch; gap:2px 5px; flex:1 1 auto; }
.rxc-admin .sticker-box .stk-step{ display:flex !important; align-items:center; justify-content:center; grid-column:auto !important; grid-row:auto !important;
  width:auto !important; min-width:0 !important; height:auto !important; min-height:0 !important; max-height:none !important; align-self:stretch !important;
  font-family:"JetBrains Mono",monospace !important; font-weight:700; font-size:.4rem !important; color:#e7dcff; cursor:pointer; text-align:center;
  background:rgba(168,85,247,.14); border:1px solid rgba(168,85,247,.3); border-radius:3px; padding:0 3px !important; line-height:1; box-sizing:border-box; }
.rxc-admin .sticker-box .stk-step:nth-child(1){ grid-area:1/1; }   /* -10 */
.rxc-admin .sticker-box .stk-step:nth-child(2){ grid-area:2/1; }   /* -5 */
.rxc-admin .sticker-box .stk-step:nth-child(3){ grid-area:3/1; }   /* -1 */
.rxc-admin .sticker-box .stk-step:nth-child(5){ grid-area:1/3; }   /* +1 */
.rxc-admin .sticker-box .stk-step:nth-child(6){ grid-area:2/3; }   /* +5 */
.rxc-admin .sticker-box .stk-step:nth-child(7){ grid-area:3/3; }   /* +10 */
.rxc-admin .stk-step:hover{ background:rgba(168,85,247,.28) !important; }
/* the number: centered between the columns, sized to its digits (no dead space) */
.rxc-admin .sticker-box .sticker-input{ grid-column:2 !important; grid-row:1 / 4 !important; align-self:center !important; justify-self:center !important;
  width:auto !important; min-width:1.4ch; max-width:6ch; field-sizing:content;
  height:auto !important; min-height:0 !important; box-sizing:border-box; font-family:"JetBrains Mono",monospace !important; font-weight:700; font-size:1.25rem !important; line-height:1; text-align:center; color:#fff;
  background:transparent; border:none; border-radius:0; padding:0 1px !important; margin:0 !important; -moz-appearance:textfield; }
.rxc-admin .sticker-input::-webkit-outer-spin-button,
.rxc-admin .sticker-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.rxc-admin .sticker-input.overridden{ color:var(--rx-gain); }
.rxc-admin .print-btn{ grid-column:1 / -1 !important; grid-row:4 !important; width:100% !important; box-sizing:border-box; margin-top:2px; font-family:"Cinzel",serif; font-weight:700; font-size:.52rem; letter-spacing:.04em; text-transform:uppercase; color:#fff; cursor:pointer;
  background:linear-gradient(180deg,#5e2596,#3a1654) padding-box, var(--holo) border-box; border:1.5px solid transparent; border-radius:7px; padding:3px 6px; text-align:center; }
/* ── Sticker-under-image (col1/row4): the label sits below the card image now, so its
   column is narrow (~110px). card-rich-panel.css forces a 2×3 grid with PRINT in the
   MIDDLE cell — too narrow there, so "⎙ Print" overlaps the +5 stepper. Override (higher
   #result specificity) to a 2×2 stepper block (±1/±5, with ±10 kept hidden) + a centered
   number + a full-width PRINT on its own bottom row. Fits the narrow column cleanly. */
body.live-scan #result .rxc-admin .sticker-box,
.cp-rich-panel .rxc-admin .sticker-box{
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr) !important;
  grid-template-rows:auto auto auto !important; }
body.live-scan #result .rxc-admin .sticker-input,
.cp-rich-panel .rxc-admin .sticker-input{ grid-column:2 !important; grid-row:1 / 3 !important; align-self:center !important; }
body.live-scan #result .rxc-admin .print-btn,
.cp-rich-panel .rxc-admin .print-btn{ grid-column:1 / -1 !important; grid-row:3 !important; align-self:stretch !important; margin-top:3px !important; }
.rxc-admin .print-btn:hover{ filter:brightness(1.12); }

/* graded toggle pill (Raw ↔ Graded) in the pill row */
.rxc-dd-row .graded-toggle{ display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  font-family:"Cinzel",serif; font-weight:700; font-size:.5rem; letter-spacing:.03em; text-transform:uppercase; color:#fff;
  border:1px solid transparent; border-radius:999px; padding:3px 6px; white-space:nowrap;
  background:linear-gradient(var(--rx-panel),var(--rx-panel)) padding-box, var(--holo) border-box; }
.rxc-dd-row .graded-toggle .gt-switch{ width:6px !important; height:6px !important; border-radius:50% !important; background:var(--rx-dim) !important; flex:0 0 auto; position:static !important; border:none !important; }
/* kill the legacy sliding-toggle knob/track that leaks onto .gt-switch */
.rxc-dd-row .graded-toggle .gt-switch::after, .rxc-dd-row .graded-toggle .gt-switch::before{ content:none !important; display:none !important; }
.rxc-dd-row .graded-toggle.active .gt-switch{ background:var(--rx-gain) !important; box-shadow:0 0 6px var(--rx-gain) !important; }

/* qty + Add-to stay together as a unit so they wrap as a pair (never split) */
.rxc-dd-row .rxc-qa{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; }
/* qty stepper + Add-to live in the pill bar (.rxc-dd-row), styled as pills.
   Qty kept narrow so Add-to fits on the same line. */
.rxc-dd-row .scan-qty-stepper{ display:inline-flex !important; align-items:center; gap:3px !important; padding:3px 6px !important; margin:0 !important; border-radius:999px; flex:0 0 auto; position:relative;
  background:linear-gradient(var(--rx-panel),var(--rx-panel)) padding-box, var(--holo) border-box !important; border:1px solid transparent; font-family:"Cinzel",serif; }
/* card-rich-panel.css adds a SECOND mask ring via ::before — kill it (our
   border-box gradient already draws the rainbow ring) so the pill isn't fat */
.rxc-dd-row .scan-qty-stepper::before{ display:none !important; content:none !important; }
.rxc-dd-row .scan-qty-label{ font-size:.46rem !important; font-weight:600; text-transform:uppercase; letter-spacing:.04em !important; color:#fff !important; margin:0 1px 0 0 !important;
  background:none !important; -webkit-text-fill-color:#fff !important; }
/* steppers are plain glyphs (no boxes) so the qty reads like the other pills */
.rxc-dd-row .scan-qty-stepper button{ font-weight:700; font-size:.66rem !important; color:var(--rx-dim) !important; cursor:pointer; width:auto !important; height:auto !important; min-height:0 !important; line-height:1;
  background:none !important; border:none !important; border-radius:0 !important; padding:0 !important; -webkit-text-fill-color:currentColor !important; }
.rxc-dd-row .scan-qty-stepper button:hover{ color:#fff !important; background:none !important; }
.rxc-dd-row .scan-qty-val{ min-width:8px !important; text-align:center; font-weight:700; color:#fff !important; font-size:.52rem !important; background:none !important; -webkit-text-fill-color:#fff !important; }
.rxc-dd-row .scan-add-dd{ position:relative; display:inline-block; flex:0 0 auto; }
.rxc-dd-row .scan-add-dd .cp-dd-trigger{ display:inline-flex !important; width:auto !important; align-items:center; cursor:pointer; white-space:nowrap;
  font-family:"Cinzel",serif !important; font-weight:700 !important; font-size:.52rem !important; letter-spacing:.03em; text-transform:uppercase; color:#fff !important;
  background:linear-gradient(var(--rx-panel),var(--rx-panel)) padding-box, var(--holo) border-box !important; border:1px solid transparent !important; border-radius:999px !important; padding:3px 6px !important; }
/* the Add button is an action button, not a selector — no dropdown caret */
.rxc-dd-row .scan-add-dd .cp-dd-trigger::after{ display:none !important; content:none !important; }
.rxc-dd-row .scan-add-dd .cp-dd-list{ position:absolute; top:calc(100% + 4px); left:0; right:auto; z-index:50; min-width:max-content; display:none;
  background:var(--rx-panel2); border:1px solid var(--rx-line); border-radius:8px; padding:4px; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.rxc-dd-row .scan-add-dd.open .cp-dd-list{ display:block; }
.rxc-dd-row .scan-add-dd .cp-dd-item{ font-family:"Exo 2",sans-serif; font-size:.7rem; color:var(--rx-muted); padding:5px 10px; border-radius:5px; cursor:pointer; white-space:nowrap; }
.rxc-dd-row .scan-add-dd .cp-dd-item:hover{ background:rgba(168,85,247,.18); color:#fff; }

/* graded price view (empty until graded sales are served) */
.rxc-price--graded{ flex-direction:column; align-items:flex-start; gap:3px; }
.rxc-graded-empty{ font-family:"JetBrains Mono",monospace; font-size:.55rem; text-transform:uppercase; letter-spacing:.04em; color:var(--rx-dim); }

/* 10 ── responsive results grid (column count follows viewport width) ──────
         Live grid was gated at min-width:920px with a wide minmax(420px),
         so tablets collapsed to ONE column. Flow smoothly at every width
         like the approved mockup: 1 col on phones, 2 on tablets, 3+ on wide
         desktops — auto-fill decides from the cell floor. */
.results-wrap#search-results,
#view-search .results-wrap{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 470px), 1fr)) !important;
  gap:14px !important;
  align-items:stretch !important;
  overflow:visible !important;
  /* drop the theme's semi-transparent purple wash so the cards sit on the
     clean light-lavender panel like the mockup (was rgba(58,28,96,.6)). */
  background:transparent !important; border:none !important; box-shadow:none !important;
}
/* a per-card load-more / full-width child should span all columns */
#view-search .results-wrap > .load-more-bar,
#view-search .results-wrap > .state{ grid-column:1 / -1 !important; }