/* Average Sized Deck — "deep space" theme.

   Dark cosmic canvas (starfield + nebula glow baked into the body background),
   violet/indigo as the primary accent and cyan as the spark. Display type is
   Space Grotesk, body copy is Inter.

   Deliberately dark: the whole point is to not look like a bright white
   product-grid card shop. Transparent product PNGs sit on a faint translucent
   plate so both cut-outs and white-background photos read cleanly. */

:root {
    /* Backgrounds, darkest to lightest */
    --void: #07071a;
    --deep: #0d0d24;
    --surface: #15153a;
    --surface-2: #1d1d4d;
    --border: #2b2b60;
    --border-soft: #232352;

    /* Accents */
    --violet: #a78bfa;
    --violet-bright: #8b5cf6;
    --violet-deep: #6d28d9;
    --indigo: #4f46e5;
    --cyan: #22d3ee;
    --cyan-soft: #67e8f9;

    /* Text. Tuned so muted/dim still clear WCAG AA (>=4.5:1) on --surface;
       dark themes need brighter greys than light ones to stay readable. */
    --text: #eaeafa;
    --text-muted: #b4b4dc;
    --text-dim: #9090c0;

    /* Status */
    --danger: #fb7185;
    --success: #4ade80;
    --warning: #fbbf24;

    --radius: 14px;
    --radius-lg: 20px;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 10px 32px rgba(109, 40, 217, 0.30);
    --glow-violet: 0 0 24px rgba(139, 92, 246, 0.35);
    --glow-cyan: 0 0 20px rgba(34, 211, 238, 0.30);

    --font-display: "Space Grotesk", "Segoe UI", sans-serif;
    --font-body: "Inter", "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text);
    line-height: 1.6;
    background-color: var(--void);
    /* Starfield + nebula, fixed so the sky stays put while the page scrolls. */
    background-image:
        radial-gradient(1.4px 1.4px at 12% 18%, rgba(199, 210, 254, 0.55), transparent 100%),
        radial-gradient(1.4px 1.4px at 78% 11%, rgba(165, 243, 252, 0.45), transparent 100%),
        radial-gradient(1px 1px at 33% 42%, rgba(255, 255, 255, 0.35), transparent 100%),
        radial-gradient(1.6px 1.6px at 62% 33%, rgba(216, 180, 254, 0.45), transparent 100%),
        radial-gradient(1px 1px at 88% 52%, rgba(255, 255, 255, 0.30), transparent 100%),
        radial-gradient(1.2px 1.2px at 22% 68%, rgba(199, 210, 254, 0.35), transparent 100%),
        radial-gradient(1.4px 1.4px at 52% 78%, rgba(165, 243, 252, 0.30), transparent 100%),
        radial-gradient(1px 1px at 8% 88%, rgba(255, 255, 255, 0.25), transparent 100%),
        radial-gradient(1.2px 1.2px at 71% 91%, rgba(216, 180, 254, 0.30), transparent 100%),
        radial-gradient(ellipse 90% 60% at 50% -12%, rgba(109, 40, 217, 0.38), transparent 72%),
        radial-gradient(ellipse 60% 45% at 88% 18%, rgba(14, 165, 233, 0.13), transparent 72%),
        radial-gradient(ellipse 70% 50% at 8% 42%, rgba(79, 70, 229, 0.14), transparent 72%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

a {
    color: var(--cyan);
    text-decoration: none;
}

a:hover {
    color: var(--cyan-soft);
    text-decoration: underline;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

::selection {
    background: var(--violet-bright);
    color: #fff;
}

/* ---------- Top bar ---------- */

.top-bar {
    background: linear-gradient(90deg, var(--violet-deep), var(--indigo));
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    padding: 7px 12px;
}

.top-bar-link {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.top-bar-link:hover {
    color: var(--cyan-soft);
}

/* ---------- Header ---------- */

.site-header {
    background: rgba(13, 13, 36, 0.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.logo {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none !important;
}

/* Brand mark. Swap store/static/store/img/logo-mark.svg to change it —
   keep it square-ish and light-on-transparent (the header is near-black). */
.logo-mark {
    width: 38px;
    height: 36px;
    flex: 0 0 auto;
    object-fit: contain;
}

.logo-text {
    font-family: var(--font-display);
    font-size: 1.28rem;
    color: var(--text);
    font-weight: 400;
    white-space: nowrap;
    letter-spacing: -0.03em;
}

.logo-text strong {
    font-weight: 700;
    background: linear-gradient(100deg, var(--violet), var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.search-form {
    flex: 1 1 260px;
    display: flex;
    max-width: 520px;
    min-width: 200px;
}

.search-input {
    flex: 1;
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 999px 0 0 999px;
    padding: 10px 20px;
    font: inherit;
    font-size: 0.94rem;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input::placeholder {
    color: var(--text-dim);
}

.search-input:focus {
    border-color: var(--violet-bright);
    box-shadow: var(--glow-violet);
}

.search-button {
    border: none;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(135deg, var(--violet-bright), var(--indigo));
    color: #fff;
    padding: 0 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: filter 0.15s ease;
}

.search-button:hover {
    filter: brightness(1.15);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

.header-greeting {
    color: var(--text-muted);
    font-size: 0.88rem;
    white-space: nowrap;
}

.header-greeting strong {
    color: var(--violet);
}

.header-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    position: relative;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.header-icon:hover {
    color: var(--violet);
}

.cart-badge {
    position: absolute;
    top: -6px;
    right: 2px;
    background: linear-gradient(135deg, var(--cyan), #0891b2);
    color: #04121a;
    font-size: 0.66rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: var(--glow-cyan);
}

/* ---------- Game nav ---------- */

.category-nav {
    background: rgba(21, 21, 58, 0.55);
    border-bottom: 1px solid var(--border-soft);
}

.category-nav-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.category-nav-inner a {
    color: var(--text-muted);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.94rem;
    padding: 13px 18px;
    white-space: nowrap;
    text-decoration: none !important;
    position: relative;
    transition: color 0.15s ease;
}

.category-nav-inner a::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.category-nav-inner a:hover {
    color: var(--text);
}

.category-nav-inner a:hover::after,
.category-nav-inner a.active::after {
    transform: scaleX(1);
}

.category-nav-inner a.active {
    color: var(--text);
}

.category-nav-inner .nav-extra {
    margin-left: auto;
    color: var(--cyan);
}

/* ---------- Layout ---------- */

.page-content {
    max-width: 1240px;
    margin: 0 auto;
    padding: 32px 20px 72px;
    min-height: 55vh;
}

.page-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.page-header h1 {
    margin: 0;
    font-size: 1.85rem;
}

.page-header-count {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.92rem;
}

.section-title {
    font-size: 1.45rem;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Trailing hairline so section heads feel composed, not stacked. */
.section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

.home-section {
    margin-top: 52px;
}

/* ---------- Buttons ---------- */

.button {
    display: inline-block;
    border: none;
    border-radius: 999px;
    padding: 12px 30px;
    font: inherit;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.15s ease;
}

.button:active {
    transform: scale(0.97);
}

.button-primary {
    background: linear-gradient(135deg, var(--violet-bright), var(--indigo));
    color: #fff;
    box-shadow: 0 4px 18px rgba(109, 40, 217, 0.42);
}

.button-primary:hover {
    filter: brightness(1.12);
    box-shadow: 0 6px 26px rgba(139, 92, 246, 0.55);
}

.button-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    border: 1px solid var(--border);
}

.button-secondary:hover {
    border-color: var(--violet);
    background: rgba(139, 92, 246, 0.12);
}

.button-block {
    display: block;
    width: 100%;
}

.button-small {
    padding: 7px 18px;
    font-size: 0.84rem;
}

.link-button {
    background: none;
    border: none;
    color: var(--cyan);
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    padding: 0;
}

.link-button:hover {
    text-decoration: underline;
}

/* ---------- Hero ---------- */

.hero {
    background:
        radial-gradient(ellipse 70% 90% at 88% 50%, rgba(34, 211, 238, 0.16), transparent 70%),
        radial-gradient(ellipse 90% 120% at 10% 10%, rgba(167, 139, 250, 0.22), transparent 70%),
        linear-gradient(125deg, #1a1145 0%, #221a5c 45%, #10204d 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 68px 52px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* A fanned card stack drifting in from the right edge. */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 180px;
    height: 258px;
    border-radius: 18px;
    border: 1px solid rgba(167, 139, 250, 0.35);
    backdrop-filter: blur(2px);
}

.hero::before {
    right: 34px;
    transform: translateY(-46%) rotate(15deg);
    background: linear-gradient(160deg, rgba(34, 211, 238, 0.18), rgba(79, 70, 229, 0.10));
    box-shadow: 0 8px 40px rgba(34, 211, 238, 0.18);
}

.hero::after {
    right: 122px;
    transform: translateY(-53%) rotate(-5deg);
    background: linear-gradient(160deg, rgba(167, 139, 250, 0.22), rgba(109, 40, 217, 0.10));
    box-shadow: 0 8px 40px rgba(139, 92, 246, 0.20);
}

@media (max-width: 860px) {
    .hero {
        padding: 44px 26px;
    }

    .hero::before,
    .hero::after {
        display: none;
    }
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 620px;
}

.hero-kicker {
    display: inline-block;
    color: var(--cyan-soft);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.74rem;
    margin: 0 0 16px;
    padding: 5px 14px;
    border: 1px solid rgba(34, 211, 238, 0.35);
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.08);
}

.hero h1 {
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.035em;
    margin: 0 0 16px;
}

.hero-subtitle {
    font-size: 1.06rem;
    margin: 0 0 30px;
    color: rgba(234, 234, 250, 0.72);
    max-width: 30em;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 560px) {
    .hero h1 {
        font-size: 2.1rem;
    }
}

/* ---------- Category / game tiles ---------- */

.category-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}

.game-tiles {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.category-tile {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 26px 18px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text);
    text-decoration: none !important;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}

/* Accent bar lights up on hover. */
.category-tile::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.category-tile:hover {
    transform: translateY(-4px);
    border-color: var(--violet);
    box-shadow: var(--shadow-hover);
}

.category-tile:hover::before {
    opacity: 1;
}

.game-tiles .category-tile {
    padding: 40px 18px;
    font-size: 1.16rem;
    background:
        radial-gradient(ellipse 100% 80% at 50% 120%, rgba(139, 92, 246, 0.18), transparent 70%),
        var(--surface);
}

/* ---------- Filter chips (game page) ---------- */

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.filter-chip {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 7px 17px;
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.filter-chip:hover {
    border-color: var(--violet);
    color: var(--text);
    text-decoration: none;
}

.filter-chip.active {
    background: linear-gradient(135deg, var(--violet-bright), var(--indigo));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--glow-violet);
}

/* ---------- Product grid & cards ---------- */

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

.product-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 16px;
    position: relative;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: var(--violet);
    box-shadow: var(--shadow-hover);
}

.product-card-link {
    text-decoration: none !important;
    color: inherit;
    display: block;
}

/* Faint plate behind artwork so transparent cut-outs and white-background
   product photos both sit comfortably on the dark canvas. */
.product-card-image {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
    padding: 10px;
}

.product-card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Empty state: a face-down card back. */
.product-card-placeholder {
    width: 58%;
    aspect-ratio: 5 / 7;
    border-radius: 8px;
    background:
        repeating-linear-gradient(45deg,
            rgba(167, 139, 250, 0.16) 0 7px,
            rgba(34, 211, 238, 0.07) 7px 14px);
    border: 1px solid rgba(167, 139, 250, 0.28);
}

.product-card-name {
    font-weight: 500;
    color: var(--text);
    margin: 0 0 6px;
    min-height: 2.8em;
    font-size: 0.94rem;
    line-height: 1.4;
}

.product-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 6px;
    min-height: 22px;
}

/* Grid chips run smaller than the ones on the product page — three of them
   have to fit across a card that is only ~180px wide. */
.product-card-meta .condition-badge,
.product-card-meta .chip {
    font-size: 0.64rem;
    padding: 2px 8px;
}

.product-card-price {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--cyan);
    font-size: 1.15rem;
    margin: 0;
    letter-spacing: -0.01em;
}

.product-card-stock {
    color: var(--danger);
    font-weight: 600;
    font-size: 0.82rem;
    margin: 6px 0 0;
}

/* ---------- Condition badges ---------- */

.condition-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-radius: 999px;
    padding: 3px 11px;
    white-space: nowrap;
    border: 1px solid;
}

.condition-mint {
    background: rgba(34, 211, 238, 0.13);
    border-color: rgba(34, 211, 238, 0.45);
    color: var(--cyan-soft);
}

.condition-near_mint {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.40);
    color: #86efac;
}

.condition-played {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.40);
    color: #fcd34d;
}

.condition-heavily_played {
    background: rgba(251, 113, 133, 0.12);
    border-color: rgba(251, 113, 133, 0.40);
    color: #fda4af;
}

.condition-sealed {
    background: rgba(167, 139, 250, 0.13);
    border-color: rgba(167, 139, 250, 0.42);
    color: var(--violet);
}

.wishlist-toggle-form {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
}

.wishlist-toggle {
    background: rgba(13, 13, 36, 0.85);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: all 0.15s ease;
}

.wishlist-toggle:hover {
    color: var(--danger);
    border-color: var(--danger);
}

.wishlist-toggle.active {
    color: var(--danger);
    border-color: rgba(251, 113, 133, 0.5);
}

/* ---------- Breadcrumbs ---------- */

.breadcrumbs {
    display: flex;
    gap: 9px;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 22px;
    flex-wrap: wrap;
}

/* ---------- Product detail ---------- */

.product-detail {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.15fr);
    gap: 40px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 36px;
}

@media (max-width: 760px) {
    .product-detail {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 24px;
    }
}

/* A column, not a row: this panel holds the gallery and, on a card in your own
   collection, the "replace a photo" block under it. As a row those two sat
   side by side and the second one overflowed the panel entirely. With a single
   child — every other product page — a column centres it exactly as before. */
.product-detail-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.045);
    border-radius: var(--radius);
    padding: 24px;
}

.product-detail-image img {
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
}

.product-detail-info h1 {
    margin: 0 0 10px;
    font-size: 1.7rem;
}

.product-detail-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 14px;
}

.stars {
    color: var(--warning);
    letter-spacing: 2px;
}

.no-reviews {
    color: var(--text-dim);
}

.product-detail-condition {
    margin: 0 0 10px;
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.product-detail-price {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--cyan);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

/* Same SKU in other conditions */

.other-conditions {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.03);
    padding: 14px 16px;
    margin: 0 0 20px;
    max-width: 440px;
}

.other-conditions-title {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.other-condition-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    text-decoration: none !important;
    border-top: 1px solid var(--border-soft);
}

.other-condition-row:first-of-type {
    border-top: none;
}

.other-condition-row:hover .other-condition-price {
    color: var(--cyan-soft);
}

.other-condition-price {
    font-weight: 700;
    color: var(--text);
    font-family: var(--font-display);
    margin-left: auto;
}

.other-condition-out {
    color: var(--danger);
    font-size: 0.76rem;
    font-weight: 600;
    margin-left: 0;
}

.stock-status {
    font-weight: 600;
    margin: 0 0 20px;
    font-size: 0.92rem;
}

.in-stock {
    color: var(--success);
}

.out-of-stock {
    color: var(--danger);
}

.add-to-cart-form {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.add-to-cart-form label {
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 500;
}

.add-to-cart-form select {
    font: inherit;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
}

/* Top margin as well as bottom: the block above it (the seller card, or the
   stock notice when there is no seller) carries no bottom margin of its own,
   so without this the button sits flush against it. Matches the 22px the
   seller card uses to separate itself from what precedes it. */
.wishlist-detail-form {
    margin-top: 22px;
    margin-bottom: 26px;
}

/* Section heading inside the product/collection detail column. The top margin
   is what separates it from whatever block came before — the seller card, the
   wishlist button, the price hints — none of which carry a bottom margin of
   their own. Zeroed when it leads the column so it does not push off the top. */
.product-detail-subtitle {
    margin: 28px 0 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
}

.product-detail-subtitle:first-child { margin-top: 0; }

.product-detail-description {
    color: var(--text-muted);
    margin: 0;
    white-space: pre-line;
    line-height: 1.7;
}

/* ---------- Reviews ---------- */

.reviews-section {
    margin-top: 48px;
}

.review-form {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 24px;
    max-width: 640px;
}

.review-form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.review-form label {
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 500;
}

.review-form select,
.review-form textarea {
    font: inherit;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 13px;
    background: var(--surface-2);
    color: var(--text);
}

.review-form textarea {
    display: block;
    width: 100%;
    resize: vertical;
    margin-bottom: 14px;
}

.review-form textarea::placeholder {
    color: var(--text-dim);
}

.review-form select:focus,
.review-form textarea:focus {
    outline: none;
    border-color: var(--violet-bright);
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 640px;
}

.review-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 18px 22px;
}

.review-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 0.88rem;
}

.review-author {
    font-weight: 600;
    color: var(--violet);
}

.review-date {
    color: var(--text-dim);
    margin-left: auto;
    font-size: 0.82rem;
}

.review-text {
    margin: 0;
    color: var(--text-muted);
}

/* ---------- Cart ---------- */

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 860px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cart-item {
    display: flex;
    gap: 18px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 16px;
    align-items: center;
}

.cart-item-image {
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.045);
    border-radius: 10px;
    padding: 8px;
}

.cart-item-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cart-item-details {
    flex: 1;
}

.cart-item-name {
    font-weight: 600;
    color: var(--text);
    font-size: 1rem;
    margin-right: 8px;
}

.cart-item-name:hover {
    color: var(--violet);
    text-decoration: none;
}

.cart-item-unit {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin: 6px 0 12px;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.cart-quantity-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-quantity-form label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.cart-quantity-form input[type="number"] {
    width: 66px;
    font: inherit;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text);
}

.cart-item-subtotal {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--cyan);
    font-size: 1.15rem;
    margin: 0;
    white-space: nowrap;
}

.cart-summary {
    background:
        radial-gradient(ellipse 100% 60% at 50% 0%, rgba(139, 92, 246, 0.14), transparent 70%),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    position: sticky;
    top: 90px;
}

.cart-summary h2 {
    margin: 0 0 16px;
    font-size: 1.12rem;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.cart-summary-total {
    color: var(--text);
    font-weight: 700;
    font-size: 1.18rem;
    font-family: var(--font-display);
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-bottom: 18px;
}

.cart-summary-note {
    color: var(--text-dim);
    font-size: 0.78rem;
    text-align: center;
    margin: 12px 0 0;
}

.cart-item-details .listing-chips { margin-bottom: 8px; }

.cart-summary-keep {
    text-align: center;
    margin: 12px 0 0;
    font-size: 0.88rem;
}

.cart-summary-keep a { color: var(--text-muted); }
.cart-summary-keep a:hover { color: var(--cyan); }

/* The two reassurances a buyer wants before paying: what happens if the card
   is not what was advertised, and whether their wallet is accepted. */
.cart-guarantee {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 14px;
    border: 1px solid rgba(74, 222, 128, 0.32);
    border-radius: 12px;
    background: rgba(74, 222, 128, 0.07);
    color: #86efac;
}

.cart-guarantee svg { flex-shrink: 0; }

.cart-guarantee p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text);
}

.cart-payments {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.cart-payments-title {
    margin: 0 0 10px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-dim);
}

.cart-payment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Height-locked with width free, so a square icon and a wide wordmark line up
   on the same baseline whatever the source file's aspect ratio is. */
.cart-payment-list img {
    display: block;
    height: 28px;
    width: auto;
    max-width: 100%;
    border-radius: 6px;
}

.cart-payment-name {
    display: block;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* ---------- Checkout form ---------- */

.checkout-form-panel {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 28px;
}

.checkout-form-panel h2 {
    margin: 0 0 8px;
    font-size: 1.2rem;
}

.checkout-form-note {
    color: var(--text-muted);
    font-size: 0.89rem;
    margin: 0 0 20px;
}

.checkout-form-panel label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.checkout-form-panel input {
    display: block;
    width: 100%;
    font: inherit;
    padding: 11px 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
    background: var(--surface-2);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout-form-panel input:focus {
    outline: none;
    border-color: var(--violet-bright);
    box-shadow: var(--glow-violet);
}

.checkout-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 560px) {
    .checkout-form-row {
        grid-template-columns: 1fr;
    }
}

/* ---------- Order tracking ---------- */

.tracking-code-card {
    background: rgba(139, 92, 246, 0.08);
    border: 1px dashed rgba(167, 139, 250, 0.5);
    border-radius: var(--radius);
    padding: 20px;
    margin: 24px 0;
}

.tracking-code-label {
    color: var(--text-dim);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 6px;
}

.tracking-code {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: 0.14em;
    margin: 0 0 10px;
}

.tracking-code-hint {
    color: var(--text-muted);
    font-size: 0.86rem;
    margin: 0;
}

.tracking-result {
    margin-top: 26px;
    border-top: 1px solid var(--border-soft);
    padding-top: 22px;
}

.tracking-status {
    display: inline-block;
    border-radius: 999px;
    padding: 7px 20px;
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 12px;
    border: 1px solid;
}

.status-placed {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fcd34d;
}

.status-shipped {
    background: rgba(34, 211, 238, 0.12);
    border-color: rgba(34, 211, 238, 0.4);
    color: var(--cyan-soft);
}

.status-delivered {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.4);
    color: #86efac;
}

.tracking-meta {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 16px;
}

/* ---------- Checkout success ---------- */

.checkout-success {
    max-width: 580px;
    margin: 40px auto;
    text-align: center;
}

.checkout-success-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cyan), var(--violet-bright));
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(34, 211, 238, 0.4);
}

.order-summary-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 24px;
    margin: 24px 0;
    text-align: left;
}

.order-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.order-summary-total {
    font-weight: 700;
    color: var(--text);
    font-family: var(--font-display);
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-bottom: 0;
    font-size: 1.1rem;
}

/* ---------- Auth ---------- */

.auth-card {
    max-width: 430px;
    margin: 40px auto;
    background:
        radial-gradient(ellipse 100% 50% at 50% 0%, rgba(139, 92, 246, 0.16), transparent 70%),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 34px;
}

.auth-card h1 {
    margin: 0 0 22px;
    font-size: 1.55rem;
    text-align: center;
}

.auth-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.auth-form input {
    display: block;
    width: 100%;
    font: inherit;
    padding: 11px 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
    background: var(--surface-2);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-form input:focus {
    outline: none;
    border-color: var(--violet-bright);
    box-shadow: var(--glow-violet);
}

.auth-switch {
    text-align: center;
    margin: 18px 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.form-error {
    background: rgba(251, 113, 133, 0.12);
    border: 1px solid rgba(251, 113, 133, 0.4);
    color: #fda4af;
    border-radius: 10px;
    padding: 11px 15px;
    font-weight: 500;
    font-size: 0.9rem;
}

.auth-note {
    color: var(--text-dim);
    font-size: 0.86rem;
    margin: 14px 0 0;
}

.notice {
    border-radius: 10px;
    padding: 12px 15px;
    font-size: 0.9rem;
    margin: 0 0 16px;
}

.notice-success {
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.35);
    color: #86efac;
}

.notice-info {
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: var(--violet);
}

.verify-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 14px;
    padding: 10px 20px;
    background: rgba(251, 191, 36, 0.12);
    border-bottom: 1px solid rgba(251, 191, 36, 0.35);
    color: #fcd34d;
    font-size: 0.86rem;
}

.verify-banner form {
    margin: 0;
}

/* ---------- Sign-up wizard ---------- */

.auth-card-wide {
    max-width: 640px;
}

.signup-steps {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

.signup-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 3px solid var(--border);
    color: var(--text-dim);
    font-size: 0.76rem;
    text-align: center;
}

.signup-step.is-current,
.signup-step.is-done {
    border-top-color: var(--violet-bright);
    color: var(--text);
}

.signup-step-number {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8rem;
}

.signup-step.is-current .signup-step-number {
    background: linear-gradient(135deg, var(--violet-bright), var(--indigo));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--glow-violet);
}

.signup-step.is-done .signup-step-number {
    background: rgba(139, 92, 246, 0.2);
    border-color: var(--violet-bright);
    color: var(--violet);
}

.signup-intro {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin: 0 0 22px;
}

.signup-fieldset {
    border: none;
    border-top: 1px solid var(--border-soft);
    margin: 0 0 8px;
    padding: 18px 0 0;
}

.signup-fieldset:first-of-type {
    border-top: none;
    padding-top: 0;
}

.signup-fieldset legend {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    padding: 0 0 10px;
}

.signup-form .field {
    margin-bottom: 2px;
}

.signup-form input,
.signup-form select {
    display: block;
    width: 100%;
    font: inherit;
    padding: 11px 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 14px;
    background: var(--surface-2);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.signup-form input:focus,
.signup-form select:focus {
    outline: none;
    border-color: var(--violet-bright);
    box-shadow: var(--glow-violet);
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

/* Document type and phone prefix are narrow pickers next to a wide value. */
.field-row-doc {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.field-row-phone {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
}

.field-help {
    margin: -8px 0 14px;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.field-help-block {
    margin: 4px 0 16px;
}

.field-optional {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-left: 6px;
}

.field-error {
    margin: -8px 0 14px;
    color: #fda4af;
    font-size: 0.82rem;
}

.signup-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.signup-actions .button {
    flex: 1;
}

/* ---------- Switch + reveal panels ---------- */

.switch-field {
    margin: 4px 0 18px;
}

.switch {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-track {
    flex: none;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 2px;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.switch-thumb {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-dim);
    transition: transform 0.18s ease, background 0.18s ease;
}

.switch input:checked + .switch-track {
    background: linear-gradient(135deg, var(--violet-bright), var(--indigo));
    border-color: transparent;
}

.switch input:checked + .switch-track .switch-thumb {
    transform: translateX(20px);
    background: #fff;
}

.switch input:focus-visible + .switch-track {
    box-shadow: var(--glow-violet);
}

.switch-label {
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 500;
}

.toggle-panel {
    border-left: 2px solid var(--violet-deep);
    padding-left: 16px;
    margin: 0 0 18px;
}

.toggle-panel[hidden] {
    display: none;
}

/* ---------- Checkbox lists ---------- */

.choice-list,
.store-list {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.choice label,
.store-option label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.choice label:hover,
.store-option label:hover {
    border-color: var(--violet);
}

.signup-form .choice input,
.signup-form .store-option input {
    width: auto;
    margin: 3px 0 0;
    accent-color: var(--violet-bright);
}

/* Courier: visible so vendors know it is coming, but not selectable yet. */
.choice.is-disabled label {
    cursor: not-allowed;
    opacity: 0.45;
}

.choice.is-disabled label:hover {
    border-color: var(--border);
}

.store-option-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.store-meta {
    color: var(--text-dim);
    font-size: 0.82rem;
}

.store-option-empty {
    color: var(--text-dim);
    font-size: 0.86rem;
    padding: 12px 0;
}

/* ---------- Password strength ---------- */

.password-wrap {
    position: relative;
}

.signup-form .password-wrap input {
    padding-right: 76px;
}

.password-reveal {
    position: absolute;
    top: 9px;
    right: 10px;
    background: none;
    border: none;
    color: var(--cyan);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px 6px;
}

.password-meter {
    margin: -6px 0 16px;
}

.password-meter[hidden] {
    display: none;
}

.password-meter-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    overflow: hidden;
}

.password-meter-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--danger);
    transition: width 0.2s ease, background 0.2s ease;
}

.password-meter.is-fair .password-meter-bar span { background: var(--warning); }
.password-meter.is-good .password-meter-bar span { background: var(--violet); }
.password-meter.is-strong .password-meter-bar span { background: var(--success); }

.password-meter-label {
    margin: 8px 0 6px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.password-rules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.password-rules li::before {
    content: "○";
    margin-right: 8px;
    color: var(--text-dim);
}

.password-rules li.is-met {
    color: var(--success);
}

.password-rules li.is-met::before {
    content: "✓";
    color: var(--success);
}

@media (max-width: 560px) {
    .field-row,
    .field-row-doc,
    .field-row-phone {
        grid-template-columns: 1fr;
    }

    .signup-step-label {
        display: none;
    }

    .signup-actions {
        flex-direction: column-reverse;
    }
}

/* ---------- Empty state ---------- */

.empty-state {
    text-align: center;
    padding: 72px 20px;
    color: var(--text-muted);
}

.empty-state .button {
    margin-top: 14px;
}

/* ---------- Deck builder ---------- */

.deck-builder {
    max-width: 780px;
    margin: 0 auto;
}

.deck-builder-intro {
    color: var(--text-muted);
    line-height: 1.7;
}

.deck-builder-intro code,
.stat-sub code {
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 6px;
    padding: 1px 7px;
    font-size: 0.88em;
    color: var(--violet);
}

.deck-builder-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.deck-builder-form textarea {
    width: 100%;
    font: inherit;
    font-family: "SF Mono", "Cascadia Mono", Consolas, monospace;
    font-size: 0.92rem;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    resize: vertical;
    line-height: 1.7;
}

.deck-builder-form textarea::placeholder {
    color: var(--text-dim);
}

.deck-builder-form textarea:focus {
    outline: none;
    border-color: var(--violet-bright);
    box-shadow: var(--glow-violet);
}

.deck-warning {
    margin-top: 22px;
    background: rgba(251, 191, 36, 0.09);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: var(--radius);
    padding: 14px 18px;
    color: #fcd34d;
}

.deck-warning ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

/* Results table mirrors the vendor portal's product list styling
   (vendors/static/vendors/portal.css: .portal-card / .portal-table). */

.deck-results {
    margin-top: 26px;
}

.deck-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 22px;
}

.deck-table-scroll {
    overflow-x: auto;
}

.deck-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.91rem;
    min-width: 560px;
}

.deck-table th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    padding: 9px 10px;
    white-space: nowrap;
    font-weight: 600;
}

.deck-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}

.deck-table .cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.deck-product-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
}

.deck-product-thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid var(--border-soft);
    padding: 3px;
}

.deck-product-name {
    font-weight: 600;
    color: var(--text);
    margin-right: 7px;
}

.deck-product-name:hover {
    color: var(--violet);
}

.deck-row-price,
.deck-row-subtotal {
    color: var(--text);
    font-weight: 500;
}

.deck-row-stock {
    color: var(--danger);
    font-size: 0.76rem;
    font-weight: 600;
    margin-top: 3px;
}

.deck-quantity {
    width: 72px;
    font: inherit;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text);
}

.deck-alternatives-row td {
    background: rgba(255, 255, 255, 0.025);
    padding: 10px 12px;
}

.deck-alternatives summary {
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-dim);
}

.deck-alternatives summary:hover {
    color: var(--violet);
}

.deck-alternatives[open] summary {
    padding-bottom: 8px;
}

.deck-alternative {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.89rem;
    padding: 5px 0 5px 18px;
    color: var(--text-muted);
}

.deck-alternative-link {
    font-size: 0.8rem;
    white-space: nowrap;
}

.deck-results-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 18px;
    margin-top: 4px;
    border-top: 1px solid var(--border-soft);
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.deck-results-total {
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-display);
}

.deck-results-total-amount {
    color: var(--cyan);
}

.deck-builder-empty {
    margin-top: 22px;
    color: var(--text-dim);
}

/* ---------- Footer ---------- */

.site-footer {
    background: rgba(7, 7, 26, 0.6);
    border-top: 1px solid var(--border-soft);
    color: var(--text-muted);
    margin-top: 72px;
}

/* Brand block first and wider, then three link columns. Explicit tracks
   rather than auto-fit: the brand needs room for a paragraph, the link
   columns only need room for a line. */
.footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 48px 20px;
    display: grid;
    grid-template-columns: minmax(240px, 1.7fr) repeat(3, minmax(150px, 1fr));
    gap: 32px 28px;
}

@media (max-width: 860px) {
    .footer-inner {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    /* The brand paragraph reads badly in a half-width column. */
    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.footer-column h3 {
    color: var(--violet);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    margin: 0 0 14px;
    font-weight: 600;
}

.footer-column a {
    display: block;
    color: var(--text-muted);
    margin-bottom: 9px;
    font-size: 0.9rem;
}

.footer-column a:hover {
    color: var(--cyan);
}

.footer-note {
    color: var(--text-dim);
    font-size: 0.84rem;
    margin: 0;
    line-height: 1.7;
}

/* The brand block: logo, blurb, contact address, social row. */

.footer-brand {
    max-width: 380px;
}

.footer-logo {
    margin-bottom: 14px;
}

/* .footer-column a is display:block for the link lists; the logo and the
   contact line are inline rows, so they opt back out. */
.footer-column a.footer-logo,
.footer-column a.footer-contact {
    display: inline-flex;
    align-items: center;
}

.footer-contact {
    gap: 8px;
    margin-top: 16px !important;
    color: var(--text-muted);
    font-size: 0.88rem;
    word-break: break-all;
}

.footer-contact svg {
    flex: 0 0 auto;
    color: var(--violet);
}

.footer-contact:hover svg {
    color: inherit;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.footer-column .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(29, 29, 77, 0.5);
    color: var(--text-muted);
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.footer-column .footer-social a:hover {
    color: var(--cyan);
    border-color: var(--violet-bright);
    transform: translateY(-2px);
}

/* ---------- Catalog results (search page) ----------
   Reference cards imported from the external catalog. Styled deliberately
   flatter than .product-card: these are not things you can put in a cart. */

.catalog-results {
    margin-top: 48px;
    border-top: 1px solid var(--border);
    padding-top: 28px;
}

.catalog-results h2 {
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
}

.catalog-note {
    color: var(--text-dim);
    font-size: 0.84rem;
    margin: 0 0 18px;
}

.catalog-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.catalog-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.catalog-card-body {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.catalog-card-image {
    width: 48px;
    height: 66px;
    object-fit: cover;
    border-radius: 6px;
}

.catalog-card-name {
    margin: 0 0 4px;
    font-weight: 600;
}

.catalog-card-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.catalog-card-reference {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.catalog-card-hint {
    color: var(--text-dim);
    font-size: 0.78rem;
}

.catalog-card-availability {
    margin: 0;
    font-size: 0.86rem;
}

.catalog-card-unavailable {
    color: var(--text-dim);
}

.catalog-card-listing-link {
    display: inline-block;
    margin-top: 4px;
    color: var(--cyan);
    font-size: 0.88rem;
}

/* ---------- Catalog-backed product display ----------
   Shown only on listings linked to a catalog card. The reference price is
   styled quietly on purpose: it must never read as the sale price. */

.product-detail-card-meta {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: -6px 0 14px;
}

.product-detail-reference {
    margin: -8px 0 18px;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.product-detail-reference-hint {
    color: var(--text-dim);
    font-size: 0.8rem;
}

/* ---------- Card gallery (artwork first, then photos of the copy) ---------- */

.image-gallery {
    width: 100%;
}

.image-gallery-main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.image-gallery-caption {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

/* The arrows sit over the picture, so they need a background of their own to
   stay readable against dark artwork and pale photos alike. */
.image-gallery-nav {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(12, 12, 16, 0.72);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.image-gallery-nav:hover {
    background: rgba(12, 12, 16, 0.9);
}

.image-gallery-nav.is-prev { left: 0; }
.image-gallery-nav.is-next { right: 0; }

.image-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.image-gallery-thumb {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: none;
    cursor: pointer;
    line-height: 0;
    overflow: hidden;
}

.image-gallery-thumb.is-active {
    border-color: var(--violet);
}

/* Overrides `.product-detail-image img`, which sizes the main picture. */
.image-gallery-thumb img {
    width: 56px;
    height: 78px;
    max-height: none;
    object-fit: cover;
}

/* ---------- Replacing your own photos (a card in your collection) ---------- */

.photo-manager {
    width: 100%;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

.photo-manager-title {
    margin: 0 0 10px;
    color: var(--text-dim);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.photo-manager-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Same override as the thumbnails: the column sizes the main picture. */
.photo-manager-thumb {
    width: 48px;
    height: 66px;
    max-height: none;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* Stacked, because this lives in the narrow image column — roughly 230px once
   the panel's padding is taken out, which a thumbnail, a picker and a button
   cannot share on one line. */
.photo-manager-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.photo-manager-picker {
    position: relative;
    min-width: 0;
    padding: 8px 10px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
}

.photo-manager-picker:hover {
    border-color: var(--violet);
    background: var(--surface-2);
}

.photo-manager-picker.has-files {
    border-style: solid;
    border-color: rgba(74, 222, 128, 0.5);
}

/* The label is the button; the real input stays reachable but out of sight. */
.photo-manager-picker input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.photo-manager-cta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-manager-controls input[type="url"] {
    min-width: 0;
}

.photo-manager-hint {
    margin: 10px 0 0;
    color: var(--text-dim);
    font-size: 0.76rem;
    line-height: 1.4;
}

/* ---------- Account menu (header dropdown) ---------- */

.account-menu { position: relative; }

.account-menu-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
}

.account-menu-trigger:hover,
.account-menu.is-open .account-menu-trigger {
    border-color: var(--violet);
    background: var(--surface);
}

.account-menu-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu.is-open .account-menu-caret { transform: rotate(180deg); }

.account-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 60;
    min-width: 250px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.account-menu-header { padding: 8px 12px 12px; }

.account-menu-fullname { margin: 0; font-weight: 600; font-size: 0.92rem; }

.account-menu-email {
    margin: 2px 0 0;
    color: var(--text-dim);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-menu-section {
    margin: 6px 0 2px;
    padding: 0 12px;
    color: var(--text-dim);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.account-menu-panel a {
    display: block;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.account-menu-panel a:hover { background: var(--surface-2); color: var(--text); }

.account-menu-divider {
    height: 1px;
    margin: 8px 4px;
    background: var(--border);
}

.account-menu-danger { color: #f87171 !important; }

/* ---------- Account area ---------- */

.account-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.account-nav a {
    padding: 7px 13px;
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.account-nav a:hover { background: var(--surface); color: var(--text); }
.account-nav a.active { background: var(--violet); color: #fff; }

.account-panels { display: grid; gap: 20px; max-width: 720px; }

.account-panel {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.account-panel h2 { margin: 0 0 6px; font-size: 1rem; }

.account-panel-note {
    margin: 0 0 16px;
    color: var(--text-dim);
    font-size: 0.85rem;
}

.account-form-subtitle {
    margin: 20px 0 10px;
    color: var(--text-dim);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.account-form-row { margin-bottom: 13px; }

.account-form-row label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 0.83rem;
}

.account-form-row input,
.account-form-row select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--deep);
    color: var(--text);
    font: inherit;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.account-danger { border-color: rgba(248, 113, 113, 0.4); }
.account-danger h2 { color: #f87171; }

.button-danger {
    background: transparent;
    border: 1px solid rgba(248, 113, 113, 0.55);
    color: #f87171;
}

.button-danger:hover { background: rgba(248, 113, 113, 0.12); }

.button-small { padding: 6px 14px; font-size: 0.82rem; }

.form-success {
    margin-bottom: 18px;
    padding: 10px 14px;
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 9px;
    background: rgba(34, 197, 94, 0.08);
    color: #4ade80;
    font-size: 0.88rem;
}

.account-empty { color: var(--text-muted); }

/* ---------- Orders (compras / ventas) ---------- */

.order-card {
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
}

.order-card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--border-soft);
}

.order-card-code { margin: 0; font-weight: 600; font-family: monospace; }
.order-card-date { margin: 2px 0 0; color: var(--text-dim); font-size: 0.82rem; }
.order-card-right { text-align: right; }
.order-card-total { margin: 4px 0 0; font-weight: 600; }

.order-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.75rem;
}

.order-lines { list-style: none; margin: 0; padding: 12px 18px; }

.order-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 0.9rem;
}

.order-line-qty { color: var(--text-dim); }
.order-line-price { margin-left: auto; color: var(--text-muted); }

.order-card-foot {
    padding: 11px 18px;
    border-top: 1px solid var(--border-soft);
    color: var(--text-dim);
    font-size: 0.82rem;
}

/* ---------- Digital collection ---------- */

.collection-toolbar { margin-bottom: 22px; }

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

.collection-card {
    display: block;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    color: inherit;
}

.collection-card:hover { border-color: var(--violet); }

.collection-card-image { position: relative; margin-bottom: 10px; }

.collection-card-image img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 8px;
}

.collection-card-qty {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(7, 7, 26, 0.85);
    font-size: 0.76rem;
    font-weight: 600;
}

.collection-card-name {
    margin: 0 0 3px;
    font-size: 0.9rem;
    font-weight: 600;
}

.collection-card-meta {
    margin: 0 0 8px;
    color: var(--text-dim);
    font-size: 0.77rem;
}

/* Wraps, because a tile is about 150px wide and a label like "2 en proceso de
   venta" cannot share one line with the price. When it wraps the badge drops
   below rather than being squeezed out of the tile. */
.collection-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 0;
    font-size: 0.85rem;
}

.collection-card-nopriced { color: var(--text-dim); }

/* Shared by every state badge — see store/account/_sale_state.html. Centred and
   able to shrink: these labels are two or three words too long for one line at
   tile width, and left-aligned wrapped text inside a pill reads as broken. */
.collection-card-listed,
.collection-card-paying {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.35;
    text-align: center;
}

.collection-card-listed {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.collection-item-chips,
.listing-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}

.chip {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.collection-item-form { margin-top: 20px; }

.collection-listing-box {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.collection-listing-live { margin: 0 0 12px; color: #4ade80; font-size: 0.9rem; }

/* Some copies listed, some held back — the state a published binder leaves a
   card in. Amber rather than green: it is fine, but it is not "all of it". */
.collection-listing-partial {
    margin: -4px 0 12px;
    padding: 9px 12px;
    border-radius: 9px;
    background: rgba(251, 191, 36, 0.10);
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.collection-card-listed.is-partial {
    background: rgba(251, 191, 36, 0.16);
    color: var(--warning);
}

/* How many copies are on the market, on the card's own page. */
.collection-offer-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin: 14px 0 4px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}

.collection-offer-form .wizard-field { margin-bottom: 0; }
.collection-offer-form .wizard-hint { flex: 1 1 100%; margin: 0; }

/* Sold and waiting to be handed over. Cyan, not amber: nothing needs fixing,
   money has arrived and the cards are on their way out. */
.collection-card-listed.is-pending {
    background: rgba(34, 211, 238, 0.16);
    color: var(--cyan);
}

.collection-listing-pending {
    margin: -4px 0 12px;
    padding: 9px 12px;
    border-radius: 9px;
    background: rgba(34, 211, 238, 0.10);
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

/* Sold out but still owned — neither "publicada" nor "sin publicar". */
.collection-card-listed.is-soldout {
    background: rgba(148, 148, 192, 0.16);
    color: var(--text-dim);
}

/* Wishlisting a card from the catalog row — the point of keeping a sold-out
   card in the storefront at all. */
.catalog-card-wish { margin: 6px 0 0; }
.catalog-card-wish .link-button { font-size: 0.82rem; }

/* ---------- Other vendors, same card ---------- */

.other-vendors { margin-top: 44px; }

.other-vendors-title {
    margin: 0 0 14px;
    color: var(--text-dim);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.other-vendors-list { list-style: none; margin: 0; padding: 0; }

.other-vendor-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px;
    margin-bottom: 9px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.other-vendor-who { display: flex; align-items: center; gap: 11px; }

.other-vendor-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--violet);
    font-weight: 600;
}

.other-vendor-name { font-size: 0.92rem; }
.other-vendor-offer { display: flex; align-items: center; gap: 12px; }
.other-vendor-price { font-weight: 600; }
.other-vendor-out { color: var(--text-dim); font-size: 0.83rem; }

/* ---------- Add-card wizard (modal) ---------- */

body.wizard-open { overflow: hidden; }

.wizard-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(4, 4, 16, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.wizard {
    /* Wider than it needs to be at rest, on purpose. Step 3 is capped at 90vh
       and the artwork column is a fixed 150px, so every extra pixel goes to the
       fields — the condition and language chips wrap onto one row fewer, which
       buys back more height than the inline price error costs. Without that
       slack, a validation message was enough to push the form past the cap and
       introduce a scrollbar mid-edit. */
    width: min(860px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--deep);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.wizard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 14px;
}

.wizard-kicker {
    margin: 0 0 3px;
    color: var(--text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.wizard-head h2 { margin: 0; font-size: 1.1rem; }

.wizard-close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.wizard-steps {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0 22px 16px;
}

.wizard-steps li {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.wizard-steps li + li::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--border);
}

.wizard-steps span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 0.74rem;
}

.wizard-steps li.is-current { color: var(--text); }
.wizard-steps li.is-current span { border-color: var(--violet); color: var(--violet); }
.wizard-steps li.is-done span { background: var(--violet); border-color: var(--violet); color: #fff; }

.wizard-body { padding: 0 22px 22px; overflow-y: auto; }


.wizard-search input {
    flex: 1;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.wizard-hint { margin: 6px 0 0; color: var(--text-dim); font-size: 0.79rem; }
.wizard-loading, .wizard-empty { color: var(--text-muted); font-size: 0.88rem; }

.wizard-results { list-style: none; margin: 14px 0 0; padding: 0; }

.wizard-result {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 10px;
    margin-bottom: 7px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.wizard-result:hover { border-color: var(--violet); }


.wizard-result-body { display: block; min-width: 0; }
.wizard-result-name { display: block; font-weight: 600; font-size: 0.9rem; }

.wizard-result-meta {
    display: block;
    margin-top: 2px;
    color: var(--text-dim);
    font-size: 0.78rem;
}

.wizard-result-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}


.wizard-details-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.wizard-details-head h3 { margin: 0; font-size: 1rem; }

.wizard-set-code {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-dim);
    font-size: 0.72rem;
}

.wizard-details-body {
    display: grid;
    /* The artwork is the thing being described, so it gets room to be looked
       at. The extra 40px comes out of the fields, which have it to spare now
       the modal is wider. */
    grid-template-columns: 190px 1fr;
    gap: 20px;
}

/* The artwork is a button so it can open the lightbox; none of that should
   look like a button. */
.wizard-art-zoom {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: zoom-in;
    border-radius: 10px;
}

.wizard-art-zoom:disabled { cursor: default; }

/* `.card-art` has no border of its own, so the affordance is a ring around it
   rather than a border colour that would have nothing to change. */
.wizard-art-zoom:not(:disabled):hover .card-art {
    box-shadow: 0 0 0 2px var(--violet);
}

.wizard-art-zoom:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 3px;
}

@media (max-width: 560px) {
    .wizard-details-body { grid-template-columns: 1fr; }
}


.wizard-details-art input { width: 100%; font-size: 0.82rem; }

.wizard-field { margin-bottom: 13px; }
.wizard-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* In the add-card form the pair is price + quantity, and they do not deserve
   equal halves: the stepper is "− 1 +" and never needs more, while the price
   column also carries the validation message under it. An even split wrapped
   that message onto a second line, which is the height the modal could not
   spare. Scoped to this form because the pair on the card's own page runs the
   other way round — quantity first. */
.wizard-details .wizard-field-pair { grid-template-columns: 1.45fr 1fr; }

.wizard-field label:not(.wizard-choice),
.wizard-field-label {
    display: block;
    margin: 0 0 5px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.wizard-field input:not([type="radio"]),
.wizard-field select,
.wizard-field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.wizard-required { color: #f87171; }

/* A problem that belongs to one field: the box goes red and the reason sits
   directly under it. Used for the price, which is only required when the card
   is being published — a banner at the top of the form would be answering a
   question about one input somewhere else entirely.

   `!important` because the border above is set by a compound selector that
   would otherwise win on specificity. */
.wizard-field input.is-invalid {
    border-color: #fb7185 !important;
    background: rgba(251, 113, 133, 0.07);
}

.field-error {
    margin: 6px 0 0;
    color: #fda4af;
    font-size: 0.78rem;
    line-height: 1.4;
}


.wizard-price-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 14px;
}

.wizard-hint-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    /* Explicit: as a <button> this element otherwise picks up the browser's
       grey ButtonFace default, which is where the grey pills came from. */
    background: transparent;
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.wizard-hint-chip-ref { color: #4ade80; }
.wizard-hint-sub { color: var(--text-dim); }

/* Shown when the guidance on screen sits under the listing floor, so the
   number a hint fills in does not look like a bug. */
.wizard-hint-floor { color: #fcd34d; }


/* Reference price approximation next to a USD figure. */
.product-detail-reference-approx,
.catalog-card-approx { color: var(--text-muted); }

/* ---------- Collection header + empty state ---------- */

.collection-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.collection-blank {
    grid-column: 1 / -1;
    padding: 44px 24px;
    border: 1px dashed var(--border);
    border-radius: 16px;
    background: var(--surface);
    text-align: center;
}

.collection-blank-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 600;
}

.collection-blank-text {
    margin: 0 auto 20px;
    max-width: 420px;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.button-large {
    padding: 12px 22px;
    font-size: 0.95rem;
}


/* ---------- hidden ----------
   `[hidden]` is only a UA style (display:none), so ANY author rule that sets
   display beats it. `.wizard-backdrop { display: grid }` did exactly that: the
   modal ignored its own hidden attribute, opened on page load, and could not
   be closed. One global rule instead of chasing it per component. */

[hidden] { display: none !important; }

/* ---------- wizard step 2: card search ---------- */

.wizard-search {
    display: grid;
    grid-template-columns: 1.6fr 1fr auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 10px;
}

.wizard-search-fields { display: contents; }

.wizard-search .wizard-field { margin-bottom: 0; min-width: 0; }

/* The base .button is a 999px pill sized for page-level actions; inside the
   compact form it needs to match the inputs, not tower over them. */
.wizard-search .button {
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 0.9rem;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .wizard-search { grid-template-columns: 1fr; }
    .wizard-search .button { width: 100%; }
}

/* ---------- wizard results ---------- */

.wizard-results {
    max-height: 42vh;
    overflow-y: auto;
    margin: 16px 0 0;
    padding-right: 4px;
}

.wizard-results-count {
    margin: 16px 0 8px;
    color: var(--text-dim);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.wizard-result { align-items: center; }

.wizard-result-go {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--violet);
    font-size: 0.82rem;
    font-weight: 600;
}

/* ---------- wizard chrome ---------- */

.wizard-close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wizard-close:hover { background: var(--surface-2); color: var(--text); }

.wizard-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.84rem;
    cursor: pointer;
}

.wizard-back:hover { color: var(--text); }


/* ---------- Condition colours ----------
   The storefront already had a scale (cyan mint -> green NM -> amber played ->
   rose HP). It is kept exactly as-is; what is added here are the gradings the
   catalog introduced, in the same visual language, plus hyphenated aliases so
   JustTCG's wording ("Near Mint") lands on the same colour as the
   marketplace's own code (`near_mint`). One grading, one colour, everywhere. */

.condition-near-mint      { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.40); color: #86efac; }
.condition-lightly-played { background: rgba(163, 230, 53, 0.12); border-color: rgba(163, 230, 53, 0.40); color: #bef264; }
.condition-damaged        { background: rgba(248, 113, 113, 0.14);border-color: rgba(248, 113, 113, 0.45);color: #fca5a5; }
.condition-unknown        { background: var(--surface-2);         border-color: var(--border);            color: var(--text-muted); }

/* Chips are the badge, one size down, for dense rows. */
.wizard-variant-chip {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Card artwork ----------
   Cards are 5:7. Reserving the ratio stops the layout jumping as the CDN
   images arrive, which matters most in the wizard's result list. */


.catalog-card-image  { width: 52px; height: auto; border-radius: 6px; }

/* ---------- Step 1: game picker ---------- */

.wizard-step-lead {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 0.92rem;
}


/* ---------- Language chips ---------- */


.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Card artwork with a fallback ----------
   The TCGplayer CDN has no image for every product, so a card frame always
   reserves its 5:7 slot and shows a card-back placeholder when the image
   fails. Better an intentional blank than the browser's broken-image icon. */

.card-art {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 5 / 7;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-2);
}

.card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-art-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    background: linear-gradient(150deg, var(--surface-2), var(--surface));
    border: 1px dashed var(--border);
    border-radius: 10px;
}

.card-art-fallback[hidden] { display: none !important; }

/* A card-back mark, drawn rather than fetched. */
.card-art-fallback-mark {
    width: 34px;
    height: 46px;
    border-radius: 5px;
    border: 2px solid var(--border);
    background:
        repeating-linear-gradient(45deg,
            rgba(139, 92, 246, 0.20) 0 4px,
            transparent 4px 8px);
}

.card-art-fallback-text {
    color: var(--text-dim);
    font-size: 0.72rem;
}

.card-art-thumb {
    width: 44px;
    flex-shrink: 0;
    border-radius: 6px;
}

.card-art-thumb .card-art-fallback { gap: 0; border-radius: 6px; }
.card-art-thumb .card-art-fallback-mark { width: 20px; height: 28px; border-width: 1px; }

.wizard-details-art .card-art { margin-bottom: 12px; }

/* ---------- Condition tags ---------- */


/* Unselected sits quiet; the grading colour comes forward once chosen. */


/* ---------- Language chips ---------- */


/* ---------- Quantity stepper ---------- */

.stepper {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    overflow: hidden;
}

.stepper-button {
    border: none;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.stepper-button:hover { background: var(--violet); color: #fff; }
.stepper-button:active { transform: none; }

.stepper input {
    width: 100%;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: center;
    font-weight: 600;
    -moz-appearance: textfield;
    appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------- Clickable price hints ---------- */

.wizard-price-hints button.wizard-hint-chip {
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.wizard-price-hints button.wizard-hint-chip:hover {
    border-color: var(--violet);
    background: var(--surface-2);
}

.wizard-price-hints button.wizard-hint-chip::after {
    content: " ↵";
    color: var(--text-dim);
}

.wizard-hint-chip.is-used { border-color: var(--violet); }

/* "Buscar precio de referencia": the chip that stands where a reference price
   would be on a card the catalog has no price for yet — a deck import creates
   real cards from services that identify them but do not sell them.

   Dashed, because it marks an absence rather than reporting a number, and
   explicitly without the "↵" the sibling chips carry: that arrow means "click
   to put this figure in the price field", and this one fetches instead. */
.wizard-hint-sync {
    display: inline-flex;
    margin: 0;
}

/* Green, matching the "Ref. inter." chip it turns into: the eye is looking for
   the price in this row, and this is where the price will be. Dashed while it
   is still an absence rather than a number. */
.wizard-hint-chip-sync {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.45);
    border-style: dashed;
}

/* Scoped the same way as the generic chip hover above, which sets a violet
   border: at lower specificity that rule wins wherever they disagree, however
   far down the file this one sits. */
.wizard-price-hints button.wizard-hint-chip-sync:hover {
    border-style: solid;
    border-color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
}

.wizard-hint-chip-sync[disabled] { opacity: 0.6; cursor: progress; }

.wizard-price-hints button.wizard-hint-chip-sync::after { content: none; }

/* ---------- Details footer ---------- */

.wizard-details-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.wizard-foot-spacer { flex: 1 1 auto; }
.wizard-back-inline { margin-bottom: 0; }

@media (max-width: 560px) {
    .wizard-details-foot > .button { flex: 1 1 100%; }
    .wizard-foot-spacer { display: none; }
}

/* ---------- Seller card on a listing ---------- */

.seller-card {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 22px;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    color: inherit;
}

.seller-card:hover { border-color: var(--violet); background: var(--surface-2); }

.seller-avatar,
.vendor-avatar {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--violet);
    font-weight: 700;
    flex-shrink: 0;
}

.seller-avatar { width: 38px; height: 38px; font-size: 1rem; }
.vendor-avatar { width: 64px; height: 64px; font-size: 1.6rem; }

.seller-body { display: block; min-width: 0; }

.seller-label {
    display: block;
    color: var(--text-dim);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.seller-name { display: block; font-weight: 600; font-size: 0.95rem; }

.seller-meta {
    display: block;
    margin-top: 1px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.seller-rating, .vendor-rating { color: #fbbf24; font-weight: 600; }
.seller-dot, .vendor-dot { color: var(--text-dim); margin: 0 3px; }

.seller-go {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--violet);
    font-size: 0.83rem;
    font-weight: 600;
}

/* ---------- Own listing ---------- */

.own-listing {
    margin: 4px 0 6px;
    padding: 14px 16px;
    border: 1px solid rgba(139, 92, 246, 0.45);
    border-radius: 12px;
    background: rgba(139, 92, 246, 0.09);
}

.own-listing-note {
    margin: 0 0 6px;
    font-weight: 600;
    color: #c4b5fd;
}

.own-listing-link {
    color: var(--cyan);
    font-size: 0.88rem;
}

/* ---------- Vendor storefront ---------- */

.vendor-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 30px;
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.vendor-headline { flex: 1 1 auto; min-width: 0; }
.vendor-headline h1 { margin: 0 0 4px; font-size: 1.35rem; }

.vendor-stats { margin: 0 0 10px; color: var(--text-muted); font-size: 0.88rem; }
.vendor-norating { color: var(--text-dim); }
.vendor-verified { color: #4ade80; }

.vendor-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.vendor-tags .chip { text-decoration: none; }
.vendor-tags .chip:hover { border-color: var(--violet); color: var(--text); }

.vendor-delivery { margin: 0; color: var(--text-dim); font-size: 0.82rem; }

/* ---------- Collection listing actions ---------- */

.collection-listing-box.is-live { border-color: rgba(34, 197, 94, 0.35); }

.collection-listing-live {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    color: #4ade80;
    font-size: 0.9rem;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
    flex-shrink: 0;
}

.listing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.listing-actions-form { margin: 0; }

.button-compact {
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 0.86rem;
}

@media (max-width: 480px) {
    .listing-actions { flex-direction: column; align-items: stretch; }
    .listing-actions .button, .listing-actions-form { width: 100%; }
    .listing-actions .button { display: block; }
}

/* ---------- Game logo tile ----------
   Logos are supplied by hand and come in whatever shape the publisher uses:
   a square icon, or a wide wordmark like Riftbound's. The tile is landscape
   and the image is contained, so neither gets stretched or cropped. */


.wizard-game-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* No logo file for this game yet. */
.wizard-game-initial {
    color: var(--violet);
    font-weight: 700;
    font-size: 1.1rem;
}

/* ---------- Step 1: game picker ----------
   Three across rather than stacked: with only three games a vertical list
   wastes the modal's width and pushes the search step below the fold. The
   card count is gone too — it answered a question nobody asked. */

.wizard-games {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.wizard-game {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 12px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.wizard-game:hover,
.wizard-game.is-selected {
    border-color: var(--violet);
    background: var(--surface-2);
}

.wizard-game-mark {
    display: block;
    width: 100%;
    height: 38px;
    flex-shrink: 0;
    overflow: hidden;
}

.wizard-game-name {
    display: block;
    font-weight: 600;
    font-size: 0.84rem;
    line-height: 1.3;
}

@media (max-width: 520px) {
    .wizard-games { grid-template-columns: 1fr; }
    .wizard-game { flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left; }
    .wizard-game-mark { width: 52px; height: 30px; }
}

/* ---------- Choice chips: one behaviour for all three rows ----------
   Condición, Acabado and Idioma are the same control. The native radio is
   hidden in every one of them — leaving it visible in Acabado alone is what
   made those two boxes taller and pushed the label off-centre. */


/* Keyboard users still need to see where they are. */

/* ---------- Badge / chip alignment ----------
   The condition badge and the plain chips carry different font sizes, so in a
   flex row their text sat on different baselines. Centring the row and giving
   both a flex box with a fixed line-height lines them up. */

.collection-item-chips,
.listing-chips {
    align-items: center;
}

.condition-badge,
.chip {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    min-height: 24px;
    vertical-align: middle;
}

/* ---------- Drag-and-drop file picker ----------
   Wraps a real <input type="file">, which stays functional without JS. The
   input itself is hidden because its native rendering is a grey button with
   the filename truncated to nothing useful. */

.dropzone {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dropzone:hover { border-color: var(--violet); background: var(--surface-2); }

.dropzone.is-dragging {
    border-color: var(--violet-bright);
    border-style: solid;
    background: rgba(139, 92, 246, 0.12);
}

.dropzone.has-files { border-style: solid; border-color: rgba(74, 222, 128, 0.5); }

.dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dropzone-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--violet);
    flex-shrink: 0;
}

.dropzone-text { display: block; min-width: 0; line-height: 1.35; }
.dropzone-text strong { display: block; font-size: 0.82rem; color: var(--text); }
.dropzone-sub { display: block; font-size: 0.74rem; color: var(--text-dim); }

.dropzone-files {
    display: block;
    width: 100%;
    margin-top: 2px;
    color: #4ade80;
    font-size: 0.74rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropzone-files[hidden] { display: none !important; }

/* ---------- Choice chips (Condición · Acabado · Idioma) ----------
   ONE definition for all three rows. These had accumulated five overlapping
   rule blocks across successive edits, with the per-row variants declared
   *before* the generic rule — so which padding won depended on source order,
   and selected chips ended up a different size from their neighbours.

   The contract: every chip is the same height, whatever it contains and
   whatever state it is in. Only colour changes on selection — never the box
   model — because a chip that grows when picked shunts the row around. */

.wizard-choice-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.wizard-field .wizard-choice,
.wizard-choice {
    /* Height comes from min-height, not vertical padding, so a chip with a
       flag image is exactly as tall as one with only text. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.83rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

/* The native radio is hidden in every row. Leaving it visible in one of them
   is what made those chips taller than the rest. */
.wizard-choice input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.wizard-choice:hover { border-color: var(--violet-bright); color: var(--text); }

.wizard-choice:has(input:checked) {
    border-color: var(--violet);
    background: var(--surface-2);
    color: var(--text);
    font-weight: 600;
}

/* A halo rather than an outline: an outline draws a second rectangle outside
   the border and reads as a doubled box. */
.wizard-choice:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.35);
}

/* Language chips are denser — flag plus three letters needs less room — but
   they keep the shared height so the row still lines up. */
.wizard-choice-row-compact { gap: 6px; }

.wizard-choice-lang { padding: 0 10px; gap: 7px; font-size: 0.78rem; }

.lang-flag {
    display: block;
    width: 20px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.lang-code { letter-spacing: 0.03em; }

/* Condition chips carry their grading as a dot, not as a tinted chip.
   Tinting fought the cascade — `.wizard-choice` is declared after the
   `.condition-*` colours, so it won, and `currentColor` resolved to the chip's
   text colour rather than the grading. A dot states the grade without any of
   that, and keeps all three rows visually identical. */

.wizard-choice-condition::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-dim);
}

.wizard-choice-condition.condition-mint::before          { background: var(--cyan-soft); }
.wizard-choice-condition.condition-near-mint::before     { background: #4ade80; }
.wizard-choice-condition.condition-near_mint::before     { background: #4ade80; }
.wizard-choice-condition.condition-lightly-played::before{ background: #bef264; }
.wizard-choice-condition.condition-played::before        { background: #fcd34d; }
.wizard-choice-condition.condition-heavily-played::before{ background: #fdba74; }
.wizard-choice-condition.condition-heavily_played::before{ background: #fda4af; }
.wizard-choice-condition.condition-damaged::before       { background: #fca5a5; }

/* ==========================================================================
   Checkout — reservation hold, per-vendor delivery, wallet payment
   ========================================================================== */

.form-warning {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fcd34d;
    border-radius: 10px;
    padding: 11px 15px;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

/* ---------- The hold countdown ---------- */

.hold-bar {
    border: 1px solid rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.09);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 22px;
}

.hold-bar-live {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hold-bar-icon { color: var(--violet); flex-shrink: 0; }
.hold-bar-text { flex: 1; min-width: 0; }
.hold-bar-title { margin: 0; font-weight: 700; color: var(--text); }

.hold-bar-sub {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

/* Green while there is time, red inside the last two minutes. Tabular
   figures so the digits do not jitter as they count down. */
.hold-clock {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--success);
    flex-shrink: 0;
}

.hold-bar.is-urgent { border-color: rgba(251, 113, 133, 0.5); background: rgba(251, 113, 133, 0.09); }
.hold-bar.is-urgent .hold-clock { color: var(--danger); }
.hold-bar.is-urgent .hold-bar-icon { color: var(--danger); }
.hold-bar.is-expired { border-color: rgba(251, 113, 133, 0.5); background: rgba(251, 113, 133, 0.09); }
.hold-bar-dead .hold-bar-title { color: var(--danger); }
.hold-bar-dead .button { margin-top: 12px; }

/* ---------- Layout ---------- */

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    gap: 22px;
    align-items: start;
}

.checkout-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.checkout-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 90px; }

.checkout-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 22px;
}

.checkout-card h2 { margin: 0 0 4px; font-size: 1.05rem; }

.checkout-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}

.checkout-card-head h2 { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.vendor-city {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-dim);
}
.checkout-vendor-total { font-family: var(--font-display); font-weight: 700; color: var(--cyan); }

.checkout-card-sub {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.checkout-vendor-items {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.checkout-field-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

/* ---------- Delivery / wallet options ---------- */

.delivery-options { display: flex; flex-direction: column; gap: 10px; }

.delivery-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.delivery-option:hover { border-color: var(--violet); }
.delivery-option:has(input:checked) { border-color: var(--violet-bright); background: rgba(139, 92, 246, 0.10); }
.delivery-option input { accent-color: var(--violet-bright); flex-shrink: 0; }

.delivery-option-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.delivery-option-title { font-weight: 600; color: var(--text); }
.delivery-option-note { color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; }

.delivery-option-price {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--success);
    text-align: right;
}

.wallet-mark { flex-shrink: 0; display: flex; }
.wallet-mark img { height: 30px; width: auto; border-radius: 7px; display: block; }

.pickup-stores {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 2px 0 0 22px;
    padding-left: 14px;
    border-left: 2px solid var(--border);
}

.pickup-store {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.85rem;
}

.pickup-store:has(input:checked) { border-color: var(--violet-bright); background: rgba(139, 92, 246, 0.08); }
.pickup-store span { display: flex; flex-direction: column; gap: 2px; }
.pickup-store-address, .pickup-store-hours { color: var(--text-dim); font-size: 0.78rem; }

.checkout-soon {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.10);
    color: var(--text-muted);
    font-size: 0.82rem;
}

.checkout-soon strong { color: var(--violet); }

/* ---------- The payment panel ---------- */

.checkout-pay-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.checkout-pay-head h2 { margin: 0; }
.checkout-pay-head .checkout-card-sub { margin: 2px 0 0; }

.pay-facts {
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--deep);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pay-facts > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pay-facts dt { color: var(--text-muted); font-size: 0.86rem; }
.pay-facts dd { margin: 0; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.pay-amount { color: var(--success); font-size: 1.15rem; font-family: var(--font-display); }

/* The code the buyer retypes into the wallet description — spaced out so
   each character is unmistakable. */
.pay-code {
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: 0.22em;
    color: var(--cyan);
}

.checkout-note-accent {
    margin: 0 0 14px;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.08);
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.5;
}

.checkout-note-safety {
    margin: 14px 0 0;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.32);
    background: rgba(251, 191, 36, 0.07);
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.checkout-note-safety strong { color: var(--warning); }

.checkout-note-warn {
    margin: 0;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.32);
    background: rgba(251, 191, 36, 0.07);
    color: #fcd34d;
    font-size: 0.84rem;
}

/* The page-level version of the note above: buyer and seller in different
   cities, when every delivery method needs them in the same one. Deliberately
   loud — this is a decision to make before filling the form in, not a detail to
   notice on the way past. */

.checkout-alert {
    display: flex;
    gap: 15px;
    margin-bottom: 22px;
    padding: 18px 20px;
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-left: 5px solid var(--warning);
    border-radius: 14px;
    background: rgba(251, 191, 36, 0.10);
}

.checkout-alert-mark {
    flex: none;
    color: var(--warning);
    font-size: 1.5rem;
    line-height: 1.1;
}

.checkout-alert-title {
    margin: 0 0 5px;
    color: var(--warning);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
}

.checkout-alert-text {
    margin: 0;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.55;
}

.checkout-alert-note {
    margin: 9px 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.55;
}

@media (max-width: 560px) {
    .checkout-alert { padding: 15px 16px; gap: 12px; }
    .checkout-alert-title { font-size: 0.98rem; }
}

/* ---------- Summary + confirm ---------- */

.checkout-summary-item {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding-bottom: 13px;
    margin-bottom: 13px;
    border-bottom: 1px solid var(--border-soft);
}

.checkout-summary-item img,
.checkout-summary-item .product-card-placeholder {
    width: 46px;
    height: 64px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.checkout-summary-body { flex: 1; min-width: 0; }
.checkout-summary-name { margin: 0 0 3px; font-size: 0.88rem; font-weight: 500; color: var(--text); }
.checkout-summary-meta { margin: 0; color: var(--text-dim); font-size: 0.76rem; }

.checkout-summary-price {
    font-weight: 700;
    color: var(--success);
    font-size: 0.9rem;
    white-space: nowrap;
}

.checkout-confirm { position: static; }

/* Says why the button is disabled, so "nothing happens when I click" is
   never the experience. */
.checkout-gate {
    margin: 0 0 14px;
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--deep);
    color: var(--text-muted);
    font-size: 0.84rem;
    text-align: center;
}

.checkout-gate.is-ready { color: var(--success); background: rgba(74, 222, 128, 0.09); }
.checkout-confirm .button[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Cart availability ---------- */

.stock-alert {
    margin: 6px 0 0;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 0.8rem;
    line-height: 1.45;
}

.stock-alert-gone {
    border: 1px solid rgba(251, 113, 133, 0.4);
    background: rgba(251, 113, 133, 0.10);
    color: #fda4af;
}

.stock-alert-short {
    border: 1px solid rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.09);
    color: #fcd34d;
}

.cart-item.is-gone { border-color: rgba(251, 113, 133, 0.45); }
.cart-item.is-short { border-color: rgba(251, 191, 36, 0.45); }
.cart-hold-note { margin-top: 10px; }

/* A binder card whose copies are inside a live checkout hold. */
/* Shape comes from the shared rule beside .collection-card-listed. */
.collection-card-paying {
    background: rgba(251, 191, 36, 0.16);
    color: #fcd34d;
    font-weight: 600;
}

@media (max-width: 900px) {
    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-side { position: static; }
    .checkout-field-pair { grid-template-columns: 1fr; }
    .hold-bar-live { flex-wrap: wrap; }
}


/* ==========================================================================
   Checkout sign-up block, and the buyer↔seller handover thread
   ========================================================================== */

/* Same section as the guest contact fields, below a rule: an account is an
   add-on to what was already typed, not a second form. */
.checkout-signup {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--border);
}

.checkout-signup-head {
    margin: 0 0 4px;
    font-weight: 700;
    color: var(--text);
    font-size: 0.94rem;
}

.checkout-signup.is-required,
.checkout-signup.is-open {
    border-top-color: rgba(139, 92, 246, 0.55);
}

/* Prefix select and number share one row: they are one phone number. */
.phone-pair { display: flex; gap: 8px; }
.phone-pair select { flex: 0 0 42%; min-width: 0; }
.phone-pair input { flex: 1; min-width: 0; }

.checkout-signup select,
.checkout-signup input { width: 100%; }

/* Centred: it is the one action in this block, not a field sitting beside
   the inputs above it. */
.checkout-signup .button {
    display: block;
    margin: 6px auto 0;
}

.checkout-signup.is-required .checkout-signup-head { color: var(--violet); }

.checkout-signup-required {
    margin: 0 0 12px;
    padding: 10px 13px;
    border-radius: 10px;
    border: 1px solid rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.10);
    color: var(--text);
    font-size: 0.83rem;
    line-height: 1.45;
}

/* The "you need an account for this" line under contraentrega for guests. */
.delivery-option-lock {
    margin-top: 4px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--warning);
}

.delivery-option.needs-account:has(input:checked) {
    border-color: var(--violet-bright);
}

/* ---------- Handover panel ---------- */

.delivery-panel {
    margin: 14px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--deep);
}

.delivery-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.delivery-badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.delivery-badge-meetup {
    background: rgba(139, 92, 246, 0.16);
    color: var(--violet);
}

.delivery-badge-pickup {
    background: rgba(34, 211, 238, 0.14);
    color: var(--cyan-soft);
}

.delivery-panel-where { color: var(--text-muted); font-size: 0.82rem; }

.delivery-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 10px 13px;
    border-radius: 10px;
    background: var(--surface);
}

.delivery-contact-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}

.delivery-contact-name { font-weight: 600; color: var(--text); font-size: 0.88rem; }

.delivery-contact-phone {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--cyan);
    font-size: 0.9rem;
}

.delivery-contact-phone.is-missing { color: var(--text-dim); font-weight: 400; }

/* ---------- Thread ---------- */

.thread { margin-top: 14px; }

.thread-title {
    margin: 0 0 10px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}

.thread-messages {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

/* Mine on the right, theirs on the left — the shape every chat has, so no
   legend is needed to tell who said what. */
.thread-message {
    max-width: 78%;
    padding: 9px 13px;
    border-radius: 13px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
}

.thread-message.is-mine {
    align-self: flex-end;
    background: rgba(139, 92, 246, 0.14);
    border-color: rgba(139, 92, 246, 0.35);
}

.thread-body {
    margin: 0;
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.thread-meta { margin: 4px 0 0; color: var(--text-dim); font-size: 0.72rem; }

.thread-empty {
    color: var(--text-dim);
    font-size: 0.84rem;
    padding: 10px 0;
    align-self: stretch;
}

.thread-form { display: flex; gap: 8px; }

.thread-form input {
    flex: 1;
    min-width: 0;
    padding: 9px 13px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.88rem;
}

.thread-form input:focus { border-color: var(--violet); outline: none; }

.thread-safety {
    margin: 10px 0 0;
    color: var(--text-dim);
    font-size: 0.76rem;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .thread-message { max-width: 92%; }
    .delivery-contact-phone { margin-left: 0; }
}


/* ==========================================================================
   Notification centre, escrow actions, disputes, and the staff backoffice
   ========================================================================== */

/* ---------- The bell ---------- */

.bell { position: relative; }

/* Strip the button chrome only. NOT `font: inherit` — that shorthand also
   resets font-size and font-weight, which .header-icon sets (0.7rem / 600) and
   which this rule would then win on source order, rendering "Avisos" larger
   than "Deseos" and "Carrito". Buttons do not inherit the font family from
   the page, so that one is asked for explicitly. */
.bell-trigger {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    position: relative;
}

/* Geometry matched to .cart-badge — they sit next to each other, so any
   difference in size or offset reads as a mistake. Only the colour differs:
   cyan is "you put this here", red is "something needs you". */
.bell-badge {
    position: absolute;
    top: -6px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--danger), #e11d48);
    color: #2a0713;
    font-size: 0.66rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bell-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(360px, calc(100vw - 32px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    z-index: 60;
    overflow: hidden;
}

.bell-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 700;
    font-size: 0.88rem;
}

.bell-panel-head .link-button { font-size: 0.76rem; }

.bell-list { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; }

.bell-item a,
.notification a {
    display: flex;
    gap: 11px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
    text-decoration: none;
}

.bell-item a:hover, .notification a:hover { background: var(--surface-2); }

/* Unread carries a left bar in the kind's tone — colour alone is never the
   only signal, the bar is a shape too. */
.bell-item.is-unread a,
.notification.is-unread a { border-left: 3px solid var(--violet); background: rgba(139, 92, 246, 0.06); }
.tone-success.is-unread a { border-left-color: var(--success); }
.tone-warning.is-unread a { border-left-color: var(--warning); }
.tone-danger.is-unread a { border-left-color: var(--danger); }

.bell-item-icon, .notification-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--violet);
}

.tone-success .bell-item-icon, .tone-success .notification-icon { color: var(--success); }
.tone-warning .bell-item-icon, .tone-warning .notification-icon { color: var(--warning); }
.tone-danger .bell-item-icon, .tone-danger .notification-icon { color: var(--danger); }

.bell-item-body, .notification-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bell-item-title, .notification-title { font-weight: 600; font-size: 0.86rem; }
.bell-item-text, .notification-text { color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; }
.bell-item-time, .notification-time { color: var(--text-dim); font-size: 0.72rem; }
.bell-empty { padding: 22px 15px; color: var(--text-dim); font-size: 0.85rem; text-align: center; }

.bell-all {
    display: block;
    padding: 11px;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 600;
    border-top: 1px solid var(--border-soft);
}

.notification-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}

/* ---------- Escrow actions on a handover ---------- */

.delivery-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--border-soft);
}

.delivery-escrow-note { color: var(--text-dim); font-size: 0.78rem; }
.delivery-confirmed { color: var(--success); font-size: 0.8rem; font-weight: 600; }

.delivery-dispute {
    margin-left: auto;
    color: var(--text-dim);
    font-size: 0.78rem;
    text-decoration: underline;
}

.delivery-dispute:hover { color: var(--danger); }

.dispute-form-card { max-width: 720px; }

.dispute-quote {
    margin: 0 0 16px;
    padding: 12px 15px;
    border-left: 3px solid var(--border);
    background: var(--deep);
    border-radius: 0 10px 10px 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.order-status-open { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
.order-status-resolved { background: rgba(74, 222, 128, 0.16); color: #4ade80; }

/* ==========================================================================
   Backoffice
   ========================================================================== */

body.backoffice { background: var(--void); }

.bo-header {
    border-bottom: 1px solid var(--border);
    background: var(--deep);
    position: sticky;
    top: 0;
    z-index: 40;
}

.bo-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.bo-brand { font-family: var(--font-display); font-weight: 700; color: var(--text); }
.bo-brand span { color: var(--violet); font-weight: 500; }
.bo-nav { display: flex; gap: 16px; flex: 1; }
.bo-nav a { color: var(--text-muted); font-size: 0.88rem; padding: 5px 0; }
.bo-nav a:hover { color: var(--text); }
.bo-nav a.is-active { color: var(--violet); border-bottom: 2px solid var(--violet); }
.bo-user { color: var(--text-dim); font-size: 0.82rem; }

.bo-main { max-width: 1400px; margin: 0 auto; padding: 26px 24px 60px; }
.bo-title { font-size: 1.5rem; margin: 0 0 6px; }
.bo-lead { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 22px; max-width: 70ch; line-height: 1.55; }
.bo-back { margin: 0 0 14px; font-size: 0.85rem; }
.bo-empty { color: var(--text-dim); padding: 30px; text-align: center; }
.bo-muted { color: var(--text-dim); font-size: 0.82rem; }

.bo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 30px; }

.bo-tile {
    padding: 18px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bo-tile:hover { border-color: var(--violet); }
.bo-tile.is-urgent { border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.06); }
.bo-tile-value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--text); }
.bo-tile-label { font-weight: 600; font-size: 0.88rem; color: var(--text); }
.bo-tile-sub { color: var(--text-dim); font-size: 0.78rem; }

.bo-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.bo-filters input[type="search"] { flex: 1; min-width: 200px; padding: 8px 13px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }

.bo-tabs { display: flex; gap: 4px; }
.bo-tabs a { padding: 7px 14px; border-radius: 9px; font-size: 0.84rem; color: var(--text-muted); border: 1px solid transparent; }
.bo-tabs a.is-active { background: var(--surface); border-color: var(--border); color: var(--text); }

.bo-card {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    margin-bottom: 18px;
    overflow: hidden;
}

.bo-card.is-due { border-color: rgba(251, 191, 36, 0.5); }
.bo-card.is-blocked { border-color: rgba(251, 113, 133, 0.5); }

.bo-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--deep);
}

.bo-card-code { margin: 0; font-family: var(--font-display); font-weight: 700; }
.bo-card-date { margin: 2px 0 0; color: var(--text-dim); font-size: 0.78rem; }
.bo-card-flags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bo-card-amount { font-family: var(--font-display); font-weight: 700; color: var(--success); font-size: 1.1rem; }

.bo-flag { padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: var(--surface-2); color: var(--text-muted); }
.bo-flag-warning { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
.bo-flag-danger { background: rgba(251, 113, 133, 0.16); color: #fda4af; }
.bo-flag-success { background: rgba(74, 222, 128, 0.16); color: #4ade80; }

.bo-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; }
.bo-block { padding: 18px 20px; border-right: 1px solid var(--border-soft); }
.bo-block:last-child { border-right: none; }
.bo-block h3 { margin: 0 0 8px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.bo-block h3:not(:first-child) { margin-top: 18px; }

.bo-lines { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.bo-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; color: var(--text-muted); }
.bo-lines span { color: var(--text); font-weight: 600; }
.bo-party { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--text); }

.bo-proof { display: block; margin: 8px 0; }
.bo-proof img { width: 100%; max-height: 190px; object-fit: contain; border-radius: 10px; border: 1px solid var(--border); background: var(--deep); }
.bo-proof span { display: block; margin-top: 5px; font-size: 0.76rem; color: var(--violet); }

.bo-chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; max-height: 260px; overflow-y: auto; }
.bo-chat li { padding: 8px 11px; border-radius: 10px; background: var(--surface-2); font-size: 0.83rem; line-height: 1.45; color: var(--text); }
.bo-chat li.is-buyer { background: rgba(139, 92, 246, 0.12); }
.bo-chat-who { display: block; color: var(--text-dim); font-size: 0.7rem; margin-bottom: 3px; }

.bo-field { display: block; margin-bottom: 12px; }
.bo-field span { display: block; margin-bottom: 5px; font-size: 0.8rem; color: var(--text-muted); }
.bo-field input, .bo-field textarea, .bo-reply textarea, .bo-resolve textarea {
    width: 100%;
    padding: 8px 12px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--deep);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
}

/* The declaration is the audit record of who decided a handover happened, so
   it gets weight rather than sitting as fine print. */
.bo-check {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.06);
    font-size: 0.81rem;
    line-height: 1.45;
    color: var(--text);
    cursor: pointer;
}

.bo-check input { margin-top: 2px; flex-shrink: 0; accent-color: var(--violet-bright); }

.bo-quote { margin: 0 0 16px; padding: 12px 15px; background: var(--deep); border-radius: 10px; font-size: 0.88rem; line-height: 1.55; color: var(--text); }
.bo-reply { margin-bottom: 18px; }
.bo-reply button, .bo-resolve button { margin-top: 8px; }
.bo-resolve { padding-top: 16px; border-top: 1px solid var(--border-soft); }

.bo-dispute-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.bo-dispute-layout .bo-block { border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface); }

.bo-dispute-list { list-style: none; margin: 18px 0 0; padding: 0; }
.bo-dispute-list li a { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface); margin-bottom: 10px; }
.bo-dispute-list li a:hover { border-color: var(--violet); }
.bo-dispute-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text); }
.bo-dispute-reason { font-size: 0.88rem; }

.bo-faq { margin-top: 34px; padding: 22px; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface); max-width: 80ch; }
.bo-faq h2 { margin: 0 0 14px; font-size: 1.05rem; }
/* Undoing a sale sits behind one deliberate click, not beside "enviar fondos". */
.bo-refund {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}

.bo-refund summary {
    cursor: pointer;
    color: var(--danger);
    font-size: 0.86rem;
    font-weight: 600;
}

.bo-refund > p { margin: 10px 0 12px; }

.bo-faq details { border-bottom: 1px solid var(--border-soft); padding: 10px 0; }
.bo-faq details:last-child { border-bottom: none; }
.bo-faq summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text); }
.bo-faq p { margin: 9px 0 0; color: var(--text-muted); font-size: 0.86rem; line-height: 1.6; }

@media (max-width: 900px) {
    .bo-dispute-layout { grid-template-columns: 1fr; }
    .bo-block { border-right: none; border-bottom: 1px solid var(--border-soft); }
}


/* A wishlisted listing the vendor has since archived. Dimmed rather than
   hidden: the ♥ has to stay reachable, or the row can never be removed. */
.wishlist-entry { position: relative; display: flex; flex-direction: column; }
.wishlist-entry.is-unavailable .product-card-link { opacity: 0.45; filter: grayscale(0.7); }
.wishlist-entry.is-unavailable .product-card { border-style: dashed; }

/* Just unhearted, without a reload. Dimmed rather than removed from the grid:
   the empty ♥ is still there, so a mis-click is one press away from undone —
   which a card that vanished could not offer. It is gone on the next load. */
.wishlist-entry.is-removed .product-card-link { opacity: 0.35; filter: grayscale(1); }
.wishlist-entry.is-removed .wishlist-filed { opacity: 0.4; }

.wishlist-gone {
    margin: 0;
    padding: 6px 10px;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-dim);
}

/* "En 2 dream binders". Quiet on purpose — it is a note about where the card
   already lives, not a state of the listing, and it sits under a card that has
   already said everything important about itself. */
.wishlist-filed {
    margin: 0;
    padding: 0 10px 8px;
    text-align: center;
    font-size: 0.74rem;
    color: var(--violet-bright);
}


/* ---------- Toasts ----------
   Top-centre, stacked, self-dismissing. Adding a card to the cart — or pressing
   the ♥ — used to navigate and throw away whatever you were doing; this is what
   replaced that. Above every dialog, because it reports on actions taken
   inside them.

   Centred at the top rather than tucked into a corner: these confirm something
   the person just did, and the top-centre is where the eye already is after
   pressing a button anywhere on the page. */

.toast-stack {
    position: fixed;
    /* Clears the sticky .site-header (~73px: 14px padding, ~45px of content,
       14px padding, 1px border). Toasts outrank it on z-index, so without the
       offset they would sit on top of the search bar. */
    top: 86px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: max-content;
    max-width: calc(100vw - 32px);
    /* The stack is wider than any one toast but must never swallow clicks;
       each toast turns pointer events back on for itself. */
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(460px, calc(100vw - 32px));
    padding: 15px 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.45;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    /* Slides down out of the header it appeared from, so the motion points the
       same way the toast travelled. */
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.is-visible { opacity: 1; transform: translateY(0); }

.toast-text { min-width: 0; }

/* The tone lives in this badge rather than in a thin edge stripe: at the top of
   the screen the accent has to be legible at a glance, and a 3px border on the
   left of a centred box reads as a rendering artefact. */
.toast-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    /* Dark glyph on a bright badge — both status colours are light, and white
       on either of them fails contrast. */
    color: var(--deep);
    background: var(--violet);
}

.toast-success { border-color: rgba(74, 222, 128, 0.42); }
.toast-success .toast-icon { background: var(--success); }

.toast-error { border-color: rgba(251, 113, 133, 0.45); }
.toast-error .toast-icon { background: var(--danger); }

@media (prefers-reduced-motion: reduce) {
    .toast { transition: opacity 0.25s ease; transform: none; }
    .toast.is-visible { transform: none; }
}

@media (max-width: 560px) {
    .toast-stack {
        top: 82px;
        left: 12px;
        right: 12px;
        transform: none;
        width: auto;
        max-width: none;
        align-items: stretch;
    }
    .toast { max-width: none; padding: 13px 16px; }
}

/* ---------- Card filters ----------
   One form, two shapes. `.filter-bar` lays it across the top of the collection
   and binder pages; `.filter-panel` stands it up as the search page's left
   column. The fields themselves are identical in both, so the controls sit in
   the same order and mean the same thing wherever somebody meets them. */

.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.filter-field { min-width: 0; }

/* `:not(.filter-choice)` matters: the finish chips are <label>s too, and this
   rule was uppercasing and letter-spacing them into looking like three field
   headings instead of three options. */
.filter-field label:not(.filter-choice),
.filter-field-label {
    display: block;
    margin: 0 0 5px;
    color: var(--text-dim);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.filter-field input[type="search"],
.filter-field input[type="text"],
.filter-field select {
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 0.86rem;
}

.filter-field input[type="search"] { min-width: 190px; }
.filter-field select { min-width: 140px; }

.filter-field input:focus-visible,
.filter-field select:focus-visible {
    outline: none;
    border-color: var(--violet);
    box-shadow: var(--glow-violet);
}

/* Foil is three-state — cualquiera / foil / sin foil — so these are radios
   wearing chips, not a checkbox that could only ask two of the three. */
.filter-choices { display: flex; flex-wrap: wrap; gap: 6px; }

.filter-choice { cursor: pointer; }

.filter-choice input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Sized to sit with the selects and text inputs next to them (0.86rem), not to
   compete with them. */
.filter-choice span {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.8rem;
    letter-spacing: normal;
    text-transform: none;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.filter-choice:hover span { border-color: var(--violet); }

.filter-choice input:checked + span {
    border-color: transparent;
    background: linear-gradient(135deg, var(--violet-bright), var(--indigo));
    color: #fff;
}

.filter-choice input:focus-visible + span { box-shadow: var(--glow-violet); }

.filter-range { display: flex; align-items: center; gap: 7px; min-width: 0; }
.filter-range input { width: 82px; text-align: right; }
.filter-range span { color: var(--text-dim); }

.filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.filter-bar {
    margin-bottom: 20px;
    padding: 15px 18px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.filter-count {
    margin: -8px 0 16px;
    color: var(--text-dim);
    font-size: 0.84rem;
}

/* ---------- Search page: results with the filters down the left ---------- */

.search-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.search-layout.is-bare { grid-template-columns: minmax(0, 1fr); }

.filter-panel {
    position: sticky;
    top: 20px;
    padding: 16px 17px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.filter-panel-title {
    margin: 0 0 14px;
    font-size: 0.95rem;
}

/* Stacked, not wrapped: a 250px column has room for one control per row. */
.filter-panel .filter-form { flex-direction: column; align-items: stretch; }
.filter-panel .filter-field { width: 100%; }

.filter-panel .filter-field input[type="search"],
.filter-panel .filter-field select {
    width: 100%;
    min-width: 0;
}

/* `min-width: 0` is the whole fix. An <input> has an intrinsic minimum width
   from its `size` attribute, and flex items refuse to shrink below their
   intrinsic minimum — so `flex: 1 1 0` was not enough and the Mín/Máx pair
   pushed straight out of the sidebar. */
.filter-panel .filter-range input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

.filter-panel .filter-actions {
    flex-wrap: wrap;
    margin-left: 0;
    padding-top: 4px;
}

.filter-panel .filter-actions .button { flex: 1 1 auto; }

.search-results { min-width: 0; }

.search-empty { grid-column: 1 / -1; color: var(--text-muted); }

@media (max-width: 860px) {
    /* The sidebar becomes a band above the results rather than a squeezed
       column, and stops being sticky — a filter panel that follows you down a
       phone screen is a filter panel in the way. */
    .search-layout { grid-template-columns: minmax(0, 1fr); }
    .filter-panel { position: static; }
    .filter-panel .filter-form { flex-direction: row; flex-wrap: wrap; }
    .filter-panel .filter-field { width: auto; }
    .filter-panel .filter-field input[type="search"] { min-width: 180px; }
}

@media (max-width: 560px) {
    .filter-form { flex-direction: column; align-items: stretch; }
    .filter-field input[type="search"],
    .filter-field select { width: 100%; min-width: 0; }
    .filter-actions { margin-left: 0; }
    .filter-actions .button { flex: 1 1 auto; }
}

/* ---------- Reference value of a collection or a binder ----------
   Sits between the sub-nav and the card grid on both pages. A quiet plate
   rather than a hero number: it is JustTCG's international reference at a
   fixed display rate, not money anybody is being offered. */

.value-summary {
    margin: 0 0 22px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background:
        linear-gradient(135deg, rgba(139, 92, 246, 0.10), transparent 62%),
        var(--surface);
}

.value-summary-label {
    margin: 0 0 4px;
    color: var(--text-dim);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.value-summary-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* The soles conversion trails the dollar figure it comes from, in the same
   order every other reference in the app uses. */
.value-summary-pen {
    color: var(--cyan);
    font-size: 1.02rem;
    font-weight: 600;
}

.value-summary-note {
    margin: 5px 0 0;
    color: var(--text-dim);
    font-size: 0.78rem;
}

.value-summary.is-empty { background: var(--surface); }
.value-summary-none { color: var(--text-dim); font-size: 1.1rem; }

@media (max-width: 480px) {
    .value-summary-figure { font-size: 1.3rem; }
}

/* ---------- Mis binders ----------
   A binder is a named subset of the digital collection, so its card grid
   reuses .collection-grid / .collection-card wholesale. Everything below is
   only what a binder has that the collection does not: a cover, a share
   dialog, and per-slot quantity controls. */

.collection-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

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

.binder-card {
    display: block;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: inherit;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.12s ease;
}

.binder-card:hover {
    border-color: var(--violet);
    transform: translateY(-2px);
    text-decoration: none;
}

/* The cover is up to four card artworks in a 2x2 mosaic. One card fills the
   whole tile, two split it, three leave the last cell to the plate — the grid
   handles every case without a branch in the template. */
.binder-cover {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    aspect-ratio: 4 / 3;
    background: var(--surface-2);
}

.binder-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.binder-cover img:only-child { grid-column: 1 / -1; }

.binder-cover.is-empty {
    place-items: center;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.10) 0 10px,
            transparent 10px 20px
        ),
        var(--surface-2);
}

.binder-cover-blank {
    width: 46px;
    height: 62px;
    border: 1px dashed var(--border);
    border-radius: 6px;
}

.binder-card-body { padding: 12px 13px 14px; }

.binder-card-name {
    margin: 0 0 3px;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
}

.binder-card-meta { margin: 0; color: var(--text-dim); font-size: 0.78rem; }

.binder-public-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.14);
    color: var(--cyan);
    font-size: 0.7rem;
    font-weight: 600;
}

.binder-public-inline { color: var(--cyan); font-weight: 600; }

/* ---------- "We changed this binder" ----------
   Amber, not red: nothing went wrong, the owner just needs to know their cards
   moved without them. Shown once — opening the page dismisses it — so it
   carries the whole message rather than a summary with a link. */

.binder-notice {
    margin-bottom: 22px;
    padding: 15px 18px;
    border: 1px solid rgba(251, 191, 36, 0.38);
    border-left: 3px solid var(--warning);
    border-radius: 12px;
    background: rgba(251, 191, 36, 0.09);
}

.binder-notice-title {
    margin: 0 0 4px;
    color: var(--warning);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
}

.binder-notice-lead {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.binder-notice-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text);
    font-size: 0.87rem;
    line-height: 1.75;
}

.binder-notice-reason { color: var(--text-dim); font-size: 0.8rem; }

/* The same news on the shelf, so a binder nobody opens still announces it. */
.binder-card-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--warning);
    vertical-align: middle;
}

/* ---------- Binder page header ---------- */

.binder-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.binder-header-text { min-width: 0; }

.binder-header-note {
    margin: 8px 0 0;
    max-width: 56ch;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.binder-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.button-icon { padding: 9px 15px; font-size: 1rem; line-height: 1; }

/* ---------- Público / privado ----------
   A submit button wearing the sign-up form's switch, so the control that
   decides who can read a binder works with or without JavaScript. It reuses
   .switch-track / .switch-thumb; only the "on" state differs, because there is
   no checkbox here for `:checked` to hang off. */

.binder-visibility { display: flex; }

.switch-button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.18s ease;
}

/* The sign-up switch leaves its thumb top-aligned inside the track, which is
   invisible at that size but shows at this one. Grid centres it. */
.switch-button .switch-track {
    display: grid;
    align-content: center;
    width: 42px;
    height: 24px;
}

.switch-button .switch-thumb { width: 18px; height: 18px; }

.switch-button:hover { color: var(--text-muted); }

.switch-button.is-on { color: var(--cyan); }

.switch-button.is-on .switch-track {
    background: linear-gradient(135deg, var(--violet-bright), var(--indigo));
    border-color: transparent;
}

/* Track 42 minus 2px padding either side leaves 38; an 18px thumb travels 20. */
.switch-button.is-on .switch-thumb {
    transform: translateX(20px);
    background: #fff;
}

.switch-button:focus-visible { outline: none; }
.switch-button:focus-visible .switch-track { box-shadow: var(--glow-violet); }

.switch-button-label { white-space: nowrap; }

/* ---------- The QR share control ----------
   Not a share arrow: what somebody does with a public binder is point a phone
   at it, so the button is the sign for that. A shaded square tile that stays
   quiet until the binder is actually shareable, then lights up cyan. */

.qr-button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background:
        linear-gradient(150deg, rgba(139, 92, 246, 0.16), rgba(34, 211, 238, 0.06)),
        var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}

.qr-button:hover {
    color: var(--text);
    border-color: var(--violet);
    box-shadow: var(--glow-violet);
}

.qr-button.is-live {
    color: var(--cyan);
    border-color: rgba(34, 211, 238, 0.45);
}

.qr-button.is-live:hover {
    color: var(--cyan-soft);
    border-color: var(--cyan);
    box-shadow: var(--glow-cyan);
}

.qr-glyph { display: block; }

/* ---------- Binder slots (a card inside a binder) ---------- */

.binder-slot { position: relative; display: flex; flex-direction: column; }

.binder-slot-link { display: block; color: inherit; }
.binder-slot-link:hover { text-decoration: none; }

/* Two stacked rows. A tile is ~150px wide inside its padding, which a stepper,
   an "of N" count and a Guardar button cannot share — laid out in one row the
   count spilled out past the tile's border. */
.binder-slot-form {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}

.binder-slot-count {
    display: flex;
    align-items: center;
    gap: 8px;
}

.binder-slot-count .stepper { flex: 0 0 auto; }

.binder-slot-owned {
    margin-left: auto;
    color: var(--text-dim);
    font-size: 0.74rem;
    white-space: nowrap;
}

/* The base .button is a 999px pill sized for page-level actions; on a tile it
   has to match the stepper's width and weight, not tower over it. */
.binder-slot-save {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
}

.binder-slot-remove { position: absolute; top: 6px; left: 6px; }

.binder-slot-x {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(7, 7, 26, 0.85);
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.binder-slot:hover .binder-slot-x,
.binder-slot-x:focus-visible { opacity: 1; }
.binder-slot-x:hover { color: var(--danger); }

.stepper-compact { grid-template-columns: 28px 44px 28px; font-size: 0.85rem; }
.stepper-compact .stepper-button { font-size: 0.95rem; }

/* ---------- Picking cards out of the collection ---------- */

.wizard-narrow { width: min(440px, 100%); }

.wizard-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.binder-picker-list,
.binder-publish-list {
    max-height: 46vh;
    overflow-y: auto;
    margin-top: 6px;
    padding-right: 4px;
}

.binder-picker-row,
.binder-publish-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
}

.binder-picker-row:last-child,
.binder-publish-row:last-child { border-bottom: none; }

.binder-picker-art {
    flex: 0 0 auto;
    width: 34px;
    height: 46px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--surface-2);
}

.binder-picker-art img,
.binder-picker-art .product-card-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.binder-picker-text { flex: 1 1 auto; min-width: 0; }

.binder-picker-name {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.binder-picker-meta {
    display: block;
    color: var(--text-dim);
    font-size: 0.76rem;
}

.binder-picker-empty {
    margin: 14px 0 0;
    color: var(--text-dim);
    font-size: 0.85rem;
    text-align: center;
}

/* The way out of the picker when the card is not in the collection yet.
   Dashed, like the empty states elsewhere, so it reads as "add something new"
   rather than as another row of the list below it. */
.binder-new-card {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

/* A <button> in the binder picker (it opens the add-card wizard) and an <a> in
   the dream binder picker (there is no wizard for a card somebody else owns —
   it goes to the storefront, where the ♥ is). Both must look identical. */
.binder-new-card,
.binder-new-card:hover { text-decoration: none; }

.binder-new-card:hover {
    border-color: var(--violet);
    background: rgba(139, 92, 246, 0.10);
}

.binder-new-card-plus {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--violet-bright), var(--indigo));
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
}

.binder-new-card-text { display: block; min-width: 0; }
.binder-new-card-text strong { display: block; font-size: 0.9rem; }

.binder-new-card-text span {
    display: block;
    color: var(--text-dim);
    font-size: 0.78rem;
}

/* Shown in the add-card wizard when it was opened from a binder, so it is
   clear the card lands in two places. */
.wizard-binder-note {
    margin: 0 22px 14px;
    padding: 9px 13px;
    border-radius: 9px;
    background: rgba(34, 211, 238, 0.10);
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* ---------- Publish confirmation ---------- */

.binder-publish-row.is-listed { opacity: 0.6; }

.binder-publish-price { font-size: 0.9rem; font-weight: 600; white-space: nowrap; }

.binder-publish-field {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.binder-publish-field label { color: var(--text-dim); font-size: 0.82rem; }

.binder-publish-field input {
    width: 88px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.86rem;
    text-align: right;
}

.binder-publish-field input:invalid { border-color: rgba(251, 113, 133, 0.6); }

/* ---------- Share dialog ---------- */

.binder-share { text-align: center; }

/* Dark modules on a white plate, deliberately — an inverted QR scans on some
   phones and fails on others, and half a table failing is worse than no code
   at all. The shaded tile around it carries the site's own look instead. */
.qr-plate {
    display: inline-grid;
    place-items: center;
    margin: 4px auto 18px;
    padding: 14px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.qr-plate svg { display: block; }

.qr-plate.is-off {
    padding: 34px;
    background: var(--surface-2);
    color: var(--text-dim);
    box-shadow: none;
}

.binder-share-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: left;
}

.binder-share-row { display: flex; gap: 8px; align-items: stretch; }

.binder-share-url {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
}

.binder-share-row .button { white-space: nowrap; }

.binder-share-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.binder-share-off {
    margin: 0 0 16px;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.binder-delete {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ---------- "¿Estás seguro?" ----------
   Replaces window.confirm, which draws the browser's own box — a bare
   127.0.0.1:8000 header and system buttons, with none of the site around it.
   For "shall I break every QR you have handed out?" that reads as something
   going wrong rather than as the site asking. Built by store/binder.js and
   appended to <body>, so it stacks above whichever dialog raised it. */

.confirm-backdrop { z-index: 100; }

.confirm-box { width: min(400px, 100%); }

.confirm-box .wizard-head { padding-bottom: 10px; }

.confirm-text {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.confirm-box .wizard-foot { margin-top: 20px; }

/* ---------- Binders on a collection card's own page ---------- */

.collection-binder-box {
    margin-top: 22px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.collection-binder-box .product-detail-subtitle { margin-top: 0; }

.collection-binder-filed {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.collection-binder-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.collection-binder-form .wizard-field { margin-bottom: 0; }
.collection-binder-form .wizard-field:first-of-type { flex: 1 1 190px; min-width: 0; }

/* ---------- Public binder page ---------- */

.binder-public-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.binder-public-kicker {
    margin: 0 0 4px;
    color: var(--text-dim);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

@media (max-width: 560px) {
    .binder-actions { width: 100%; }
    .binder-actions .button { flex: 1 1 auto; }
    .binder-share-foot { justify-content: center; }
    .collection-binder-form .button { width: 100%; }
}

/* ---------- Legal pages ----------
   The five documents linked from the footer. A sticky index on the left, a
   single column of prose on the right, capped at a comfortable measure —
   nobody reads terms and conditions across a 1240px line. */

.legal-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    margin-top: 8px;
}

.legal-nav {
    position: sticky;
    top: 96px;
    border-right: 1px solid var(--border-soft);
    padding-right: 20px;
}

.legal-nav h2 {
    margin: 0 0 14px;
    color: var(--violet);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-weight: 600;
}

.legal-nav a {
    display: block;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.legal-nav a:hover {
    color: var(--cyan);
}

.legal-nav a.is-current {
    color: var(--text);
    font-weight: 600;
}

.legal-prose {
    max-width: 760px;
    color: var(--text-muted);
}

.legal-prose h1 {
    margin: 0 0 6px;
    font-size: 1.9rem;
}

.legal-prose h2 {
    margin: 34px 0 10px;
    font-size: 1.08rem;
    color: var(--text);
}

.legal-prose p,
.legal-prose li {
    line-height: 1.75;
}

.legal-prose ul,
.legal-prose ol {
    padding-left: 20px;
}

.legal-prose li {
    margin-bottom: 8px;
}

.legal-updated {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.82rem;
}

/* Says out loud that the copy is not final yet. Delete this block from
   store/legal/_base.html once the reviewed text lands. */
.legal-draft-note {
    margin-top: 22px;
    padding: 14px 16px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: rgba(29, 29, 77, 0.4);
    color: var(--text-dim);
    font-size: 0.86rem;
    line-height: 1.65;
}

/* For a statement the page is legally required to make, rather than an
   aside about it. */
.legal-callout {
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--violet-bright);
    border-radius: var(--radius);
    background: rgba(139, 92, 246, 0.10);
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.7;
}

@media (max-width: 860px) {
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Index becomes a wrapping row above the document. */
    .legal-nav {
        position: static;
        border-right: 0;
        border-bottom: 1px solid var(--border-soft);
        padding: 0 0 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 18px;
        align-items: baseline;
    }

    .legal-nav h2 {
        width: 100%;
        margin-bottom: 4px;
    }

    .legal-nav a {
        margin-bottom: 0;
    }
}

/* ---------- Libro de Reclamaciones ----------
   The one legal page that is also a form. Fields reuse .field / .field-row /
   .field-error from the sign-up wizard; what is local to this page is the
   provider card, the Reclamo/Queja segmented control and the constancia. */

.lr-provider {
    margin-top: 26px;
    padding: 18px 20px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: rgba(21, 21, 58, 0.55);
}

.lr-provider p {
    margin: 0 0 6px;
    font-size: 0.92rem;
}

.lr-provider p:last-child {
    margin-bottom: 0;
}

.lr-provider-note {
    margin-top: 12px !important;
    color: var(--text-dim);
    font-size: 0.84rem !important;
}

.lr-form {
    margin-top: 26px;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse 120% 60% at 50% 0%, rgba(139, 92, 246, 0.13), transparent 70%),
        var(--surface);
}

.lr-form h2 {
    margin: 0 0 20px;
    font-size: 1.15rem;
}

/* Uppercase micro-labels, the way the form was specced. inline-block, not
   block, so the "*" and the "opcional" tag stay on the label's own line.
   (Blockified anyway inside .lr-segment-buttons, which is a grid.) */
.lr-form label,
.lr-label {
    display: inline-block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lr-required {
    color: var(--violet);
}

.lr-form input[type="text"],
.lr-form input[type="email"],
.lr-form textarea {
    display: block;
    width: 100%;
    font: inherit;
    padding: 11px 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
    background: var(--surface-2);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lr-form textarea {
    resize: vertical;
    min-height: 96px;
    line-height: 1.6;
}

.lr-form input:focus,
.lr-form textarea:focus {
    outline: none;
    border-color: var(--violet-bright);
    box-shadow: var(--glow-violet);
}

.lr-form input::placeholder,
.lr-form textarea::placeholder {
    color: var(--text-dim);
}

.lr-form .button-block {
    margin-top: 8px;
}

.lr-consent {
    margin: 14px 0 0;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.8rem;
}

/* Reclamo / Queja. The radios stay in the DOM (and in the tab order, and in
   the POST) — they are just moved out of sight, so the labels can be the
   buttons and :checked can drive both the active state and the hint. */

.lr-segment {
    margin-bottom: 18px;
}

.lr-segment input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.lr-segment-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.lr-segment-buttons label {
    margin: 0;
    padding: 13px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lr-segment-buttons label:hover {
    border-color: var(--violet);
    color: var(--text);
}

.lr-segment input:checked + input + .lr-segment-buttons label:first-of-type,
.lr-segment input:not(:checked) + input:checked ~ .lr-segment-buttons label:last-of-type {
    background: var(--violet-bright);
    border-color: var(--violet-bright);
    color: #fff;
}

/* Keyboard users must still see where they are. */
.lr-segment input:focus-visible + input + .lr-segment-buttons label:first-of-type,
.lr-segment input:not(:checked) + input:focus-visible ~ .lr-segment-buttons label:last-of-type {
    box-shadow: var(--glow-violet);
}

.lr-hint {
    margin: 10px 0 0;
    color: var(--text-dim);
    font-size: 0.82rem;
}

/* Exactly one hint at a time, chosen by which radio is checked. */
.lr-hint { display: none; }
.lr-segment input:checked + input + .lr-segment-buttons ~ .lr-hint-reclamo { display: block; }
.lr-segment input:not(:checked) + input:checked ~ .lr-hint-queja { display: block; }

/* The constancia shown after a successful submission. */

.lr-filed {
    margin-top: 26px;
    padding: 28px 26px;
    border: 1px solid rgba(74, 222, 128, 0.4);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse 120% 60% at 50% 0%, rgba(74, 222, 128, 0.12), transparent 70%),
        var(--surface);
    text-align: center;
}

.lr-filed h2 {
    margin: 0 0 4px;
    font-size: 1.2rem;
    color: var(--success);
}

.lr-filed p {
    color: var(--text-muted);
}

.lr-filed-code {
    margin: 10px 0 14px;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--cyan) !important;
}

.lr-filed-mail {
    font-size: 0.86rem;
    color: var(--text-dim) !important;
}

.lr-filed-mail-warn {
    color: var(--warning) !important;
}

.lr-filed .button {
    margin-top: 18px;
}

@media (max-width: 560px) {
    .lr-form {
        padding: 20px 16px;
    }

    /* One field per row: two 150px columns in a 320px viewport is not a form. */
    .lr-form .field-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Decks ("Mis Decks", the deckbuilder and the import screens)
   ==========================================================================
   Deliberately built on the binder classes rather than beside them: a deck
   shelf and a binder shelf are the same object on screen, and the two drifting
   apart is how a site starts looking like two sites. Only what is genuinely
   new to decks gets rules here — zones, the legality verdict, the ownership
   tag and the builder layout. */

.deck-grid .binder-card-meta + .binder-card-meta { margin-top: 2px; }

/* ---------- The legality verdict ----------
   Three states, never two. "unverified" gets its own colour because it is not
   a softer "illegal": it means we could not check, which is a different thing
   to tell somebody than "this is wrong". */

.deck-legality {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 16px 18px;
    margin: 18px 0;
}

.deck-legality-legal { border-color: rgba(74, 222, 128, 0.45); }
.deck-legality-illegal { border-color: rgba(251, 113, 133, 0.5); }
.deck-legality-unverified { border-color: rgba(251, 191, 36, 0.45); }

.deck-legality-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.deck-legality-badge {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1rem;
}

.deck-legality-legal .deck-legality-badge {
    background: rgba(74, 222, 128, 0.15);
    color: var(--success);
}
.deck-legality-illegal .deck-legality-badge {
    background: rgba(251, 113, 133, 0.15);
    color: var(--danger);
}
.deck-legality-unverified .deck-legality-badge {
    background: rgba(251, 191, 36, 0.15);
    color: var(--warning);
}

.deck-legality-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
}

.deck-legality-counts {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.deck-legality-list {
    margin: 14px 0 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
    font-size: 0.9rem;
}

.deck-legality-list li { color: var(--text-muted); }

.deck-finding-message { display: block; }

.deck-finding-cards {
    display: block;
    margin-top: 2px;
    font-size: 0.83rem;
    color: var(--text-dim);
}

/* Said more quietly than the problems above it. */
.deck-legality-list.deck-legality-unverified {
    border-top: 1px solid var(--border-soft);
    margin-top: 12px;
    padding-top: 12px;
}

/* ---------- Ownership ("1 de 3") ---------- */

.deck-ownership-summary { margin: 0 0 20px; }

.deck-ownership-line {
    margin: 0 0 8px;
    font-size: 0.92rem;
    color: var(--text-muted);
}

.deck-ownership-bar,
.deck-progress-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.deck-ownership-fill,
.deck-progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--violet-bright), var(--cyan));
    transition: width 0.3s ease;
}

.deck-owned {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.deck-owned-owned {
    background: rgba(74, 222, 128, 0.14);
    color: var(--success);
}
.deck-owned-partial {
    background: rgba(251, 191, 36, 0.14);
    color: var(--warning);
}
.deck-owned-missing {
    background: var(--surface-2);
    color: var(--text-dim);
}

.deck-owned-note {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
}

/* ---------- Zones ---------- */

.deck-zones { display: grid; gap: 22px; }

.deck-zone {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 16px 18px;
}

.deck-zone-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.deck-zone-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}

.deck-zone-count {
    margin: 0;
    font-size: 0.84rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.deck-zone-expected { opacity: 0.7; }

.deck-zone-blank {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-dim);
}

.deck-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.deck-card-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 10px;
    background: var(--deep);
}

/* An import named a card we could not find. Marked, never hidden. */
.deck-card-row.is-unresolved {
    border: 1px dashed rgba(251, 191, 36, 0.4);
    background: transparent;
}

.deck-card-qty {
    flex: 0 0 auto;
    min-width: 30px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.deck-card-thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 56px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--surface-2);
}

.deck-card-thumb.is-blank { display: block; }

.deck-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.deck-card-name {
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deck-card-meta {
    font-size: 0.78rem;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deck-card-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.deck-card-actions form { margin: 0; display: flex; align-items: center; gap: 4px; }

/* These two set only their size for a long time, so everything else came from
   the browser: a white number box and a native dropdown sitting in a dark
   panel. Same problem, and the same fix, as `.deck-filter-bar` further down. */
.deck-qty-input,
.deck-move-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--surface);
    color: var(--text);
    font-family: inherit;
    line-height: 1.4;
}

.deck-qty-input:focus-visible,
.deck-move-select:focus-visible {
    outline: none;
    border-color: var(--violet);
}

.deck-qty-input {
    width: 58px;
    padding: 5px 7px;
    font-size: 0.85rem;
    text-align: center;
}

/* The spin buttons are most of the width in a box this size, and the number is
   typed or left at 1 either way — the same call `.stepper` makes. */
.deck-qty-input::-webkit-outer-spin-button,
.deck-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.deck-qty-input { -moz-appearance: textfield; }

.deck-move-select {
    /* `appearance: none` takes the native arrow with it, so it is drawn back
       on. Inline SVG rather than a file: one small mark, no extra request. */
    padding: 5px 26px 5px 9px;
    font-size: 0.82rem;
    max-width: 130px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23b4b4dc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 10px 7px;
}

/* The dropdown list itself is drawn by the OS, which does not inherit any of
   the above — naming the colours is what stops white-on-white options. */
.deck-move-select option {
    background-color: var(--surface);
    color: var(--text);
}

.deck-remove {
    padding: 4px 10px;
    line-height: 1;
    font-size: 1rem;
}

/* ---------- The two ways in ---------- */

.deck-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.deck-choice {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.deck-choice-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
}

.deck-choice-text {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.deck-source-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.deck-source {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 0.78rem;
    color: var(--text-muted);
}

.deck-choice .button { align-self: flex-start; margin-top: auto; }

.deck-format-tagline {
    margin: 8px 0 0;
    font-size: 0.84rem;
    color: var(--text-dim);
    line-height: 1.45;
}

.deck-rules-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.84rem;
    color: var(--text-dim);
}

/* ---------- Import ---------- */

.deck-import-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.deck-import-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.deck-preview { margin-top: 28px; }

.deck-preview-head { margin-bottom: 12px; }

.deck-preview-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.deck-preview-source {
    margin: 4px 0 0;
    font-size: 0.86rem;
    color: var(--text-dim);
}

.deck-preview-table-scroll { overflow-x: auto; }

.deck-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.deck-preview-table th,
.deck-preview-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
}

.deck-preview-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
}

.deck-preview-table tr.is-unresolved { background: rgba(251, 191, 36, 0.06); }

.deck-preview-name { display: block; }

.deck-preview-print {
    display: block;
    font-size: 0.78rem;
    color: var(--text-dim);
}

.deck-preview-ok { color: var(--success); }
.deck-preview-missing { color: var(--warning); }

/* ---------- Import progress ---------- */

.deck-progress {
    max-width: 520px;
    margin: 60px auto;
    text-align: center;
}

.deck-progress-title {
    font-family: var(--font-display);
    margin: 0 0 8px;
}

.deck-progress-lead {
    margin: 0 0 24px;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.deck-progress-count {
    margin: 0 0 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.deck-progress-error {
    margin: 16px 0 0;
    color: var(--danger);
    font-size: 0.9rem;
}

/* ---------- The deckbuilder ---------- */

.deck-workshop {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 24px;
    align-items: start;
}

.deck-workshop-picker {
    position: sticky;
    top: 20px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 18px;
}

.deck-workshop-title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 1rem;
}

.deck-search-panel {
    margin-top: 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.deck-search-panel[aria-busy="true"] { opacity: 0.55; }

.deck-search-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.deck-search-result {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    background: var(--deep);
}

/* Banned or rotated. Dimmed rather than removed: the deck may be for a format
   we read wrong, and silently hiding a card the user asked for is worse than
   showing it with a warning. */
.deck-search-result.is-illegal { opacity: 0.72; }

.deck-search-thumb {
    width: 44px;
    height: 61px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--surface-2);
}

.deck-search-thumb.is-blank { display: block; }

.deck-search-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.deck-search-name { font-size: 0.9rem; }

.deck-search-meta {
    font-size: 0.76rem;
    color: var(--text-dim);
}

.deck-search-note {
    font-size: 0.76rem;
    color: var(--warning);
}

.deck-search-add {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.deck-search-blank {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.deck-description {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.deck-public-signin {
    margin: 0 0 20px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.wizard-body-divided {
    border-top: 1px solid var(--border-soft);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.wizard-body-divided form { margin: 0; }

@media (max-width: 900px) {
    /* The picker stops being a sidebar and becomes the first thing on the
       page — the right order on a phone, where you arrive to add a card rather
       than to admire the list. */
    .deck-workshop { grid-template-columns: 1fr; }
    .deck-workshop-picker { position: static; }
    .deck-search-panel { max-height: none; }
}

@media (max-width: 620px) {
    /* Actions drop below the card rather than squeezing the name to nothing. */
    .deck-card-row { flex-wrap: wrap; }
    .deck-card-actions { width: 100%; justify-content: flex-end; }
    .deck-import-fields { grid-template-columns: 1fr; }
}

/* ---------- Legality, as a tag ----------
   The deck page never blocks or corrects anything, so legality is a label
   rather than a verdict panel: one line under the deck's name, with the
   reasons on its tooltip. The full panel still exists for the builder, where
   knowing *why* is something you act on. */

.deck-legal-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 4px 12px 4px 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.83rem;
    line-height: 1.3;
}

.deck-legal-tag-mark {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
}

.deck-legal-tag-legal {
    border-color: rgba(74, 222, 128, 0.45);
    color: var(--success);
}
.deck-legal-tag-legal .deck-legal-tag-mark {
    background: rgba(74, 222, 128, 0.16);
}

.deck-legal-tag-illegal {
    border-color: rgba(251, 113, 133, 0.5);
    color: var(--danger);
}
.deck-legal-tag-illegal .deck-legal-tag-mark {
    background: rgba(251, 113, 133, 0.16);
}

.deck-legal-tag-unverified {
    border-color: rgba(251, 191, 36, 0.45);
    color: var(--warning);
}
.deck-legal-tag-unverified .deck-legal-tag-mark {
    background: rgba(251, 191, 36, 0.16);
}

/* Only when there are reasons to read. */
.deck-legal-tag[title] { cursor: help; }

/* ---------- Legality reasons, folded behind the tag ----------
   "Parece legal" without a reason is the worst of the three states to read: it
   says something is uncertain and then refuses to say what. So the tag opens. */

.deck-legal-tag-wrap {
    display: block;
    margin-top: 8px;
    max-width: 720px;
}

.deck-legal-tag-wrap > summary {
    list-style: none;
    cursor: pointer;
}

.deck-legal-tag-wrap > summary::-webkit-details-marker { display: none; }

.deck-legal-tag-more {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.75;
    padding-left: 7px;
    border-left: 1px solid currentColor;
    margin-left: 2px;
}

.deck-legal-tag-wrap[open] .deck-legal-tag-more { opacity: 1; }

.deck-legal-reasons {
    margin-top: 10px;
    padding: 12px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface);
}

.deck-legal-reason-lead {
    margin: 0 0 8px;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.deck-legal-reason-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 7px;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.deck-legal-reason-list + .deck-legal-reason-lead {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.deck-legal-reason-soft { color: var(--text-dim); }

/* ---------- Section index ----------
   Six sections in a Riftbound deck is enough that scrolling to find the runes
   is work. */

.deck-zone-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
}

.deck-zone-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.83rem;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.deck-zone-chip:hover,
.deck-zone-chip:focus-visible {
    border-color: var(--violet);
    color: var(--text);
}

.deck-zone-chip-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.78rem;
}

/* Sections are scroll targets now, so keep the heading clear of the header. */
.deck-zone { scroll-margin-top: 20px; }

/* ---------- Sections, told apart at a glance ---------- */

.deck-zone-head {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}

.deck-zone-title {
    position: relative;
    padding-left: 12px;
}

/* A small accent bar so a heading reads as the start of a section rather than
   as another line of text. */
.deck-zone-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1em;
    border-radius: 2px;
    background: var(--violet-bright);
}

.deck-zone-hero {
    border-color: rgba(167, 139, 250, 0.4);
    background: linear-gradient(180deg, rgba(109, 40, 217, 0.10), var(--surface) 60%);
}

.deck-zone-hero .deck-zone-title::before { background: var(--cyan); }

/* ---------- The headline card, shown properly ----------
   A commander or a legend at 40px is a thumbnail of something the whole deck
   is named after. */

.deck-card-list-hero .deck-card-row {
    align-items: center;
    gap: 14px;
    padding: 10px;
}

.deck-card-list-hero .deck-card-thumb {
    width: 96px;
    height: 134px;
    border-radius: 8px;
}

.deck-card-list-hero .deck-card-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    white-space: normal;
}

.deck-card-list-hero .deck-card-meta { white-space: normal; }

/* Full-bleed portrait on the deck shelf, for formats that have a headline card. */
.deck-cover-hero {
    display: block;
    padding: 0;
    overflow: hidden;
}

.deck-cover-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
}

/* ---------- Long sections read better in two columns ---------- */

@media (min-width: 900px) {
    /* A 40-card main deck as one column is a lot of scrolling; the short
       sections stay single-column so they do not look broken up. */
    .deck-card-list:not(.deck-card-list-hero) {
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
    }
}

/* ==========================================================================
   Deck page, second pass: two columns, a card grid and a lightbox
   ========================================================================== */

/* ---------- Deck shelf filters ---------- */

.deck-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
}

.deck-filter-field { flex: 0 1 auto; }

.deck-filter-search { flex: 1 1 240px; min-width: 200px; }

.deck-filter-bar input[type="search"],
.deck-filter-bar select {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.88rem;
}

.deck-filter-clear {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.deck-filter-clear:hover { color: var(--text); }

/* ---------- Deck shelf covers ----------
   The whole card, not a crop of it: a Riftbound legend cut to a square loses
   the frame and the art both, and these are the pictures people recognise
   their own decks by. */

.deck-grid .binder-cover,
.deck-grid .deck-cover-hero {
    aspect-ratio: 5 / 7;
    height: auto;
    min-height: 0;
    padding: 10px;
    display: grid;
    place-items: center;
    background: var(--deep);
}

.deck-cover-hero img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}

.deck-grid .binder-card { overflow: hidden; }

/* ---------- Two-column reading layout ---------- */

.deck-layout {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 20px;
}

/* Formats with no headline card give the grid the whole width. */
.deck-layout.is-wide { grid-template-columns: 1fr; }

.deck-heroes {
    display: grid;
    gap: 16px;
    position: sticky;
    top: 20px;
}

.deck-hero-card {
    margin: 0;
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(167, 139, 250, 0.35);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(109, 40, 217, 0.12), var(--surface) 65%);
}

.deck-hero-art {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 7;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: 10px;
    overflow: hidden;
}

.deck-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.18s ease;
}

.deck-hero-art:hover img { transform: scale(1.03); }

.deck-hero-art.is-blank {
    background: var(--surface-2);
    border-radius: 10px;
}

.deck-hero-body {
    display: grid;
    gap: 3px;
    justify-items: start;
}

.deck-hero-role {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cyan);
}

.deck-hero-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    line-height: 1.25;
}

.deck-hero-meta {
    font-size: 0.76rem;
    color: var(--text-dim);
}

.deck-hero-body .deck-owned { margin-top: 4px; }

/* ---------- Section tabs ---------- */

.deck-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.deck-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.deck-tab:hover { color: var(--text); border-color: var(--violet); }

.deck-tab.is-active {
    background: var(--violet-deep);
    border-color: var(--violet-bright);
    color: #fff;
}

.deck-tab-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 1px 8px;
}

.deck-tab.is-active .deck-tab-count { background: rgba(255, 255, 255, 0.22); }

.deck-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.deck-panel-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
}

.deck-panel-count {
    margin: 0;
    font-size: 0.84rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

/* With the tabs live, the heading repeats the active tab — kept for no-JS,
   where the panels stack and each one needs naming. */
.deck-browser:has(.deck-tab.is-active) .deck-panel-title { display: none; }

/* ---------- The card grid ----------
   A deck is a visual object; a list of names is not how anybody pictures
   theirs. */

.deck-card-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 14px;
}

.deck-tile { display: grid; gap: 6px; }

.deck-tile-art {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 5 / 7;
    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-2);
    cursor: zoom-in;
}

.deck-tile-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.18s ease;
}

.deck-tile-art:hover img { transform: scale(1.06); }

.deck-tile-art.is-blank {
    display: grid;
    place-items: center;
    padding: 8px;
    border: 1px dashed rgba(251, 191, 36, 0.45);
    cursor: default;
}

.deck-tile-blank-name {
    font-size: 0.72rem;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.25;
}

.deck-tile-qty {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(7, 7, 26, 0.86);
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.deck-tile-owned {
    position: absolute;
    right: 6px;
    top: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(2px);
}

.deck-tile-name {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.deck-tile.is-unresolved .deck-tile-name { color: var(--warning); }

/* ---------- Lightbox ---------- */

body.card-zoom-open { overflow: hidden; }

.card-zoom {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    background: rgba(7, 7, 26, 0.86);
    backdrop-filter: blur(4px);
}

.card-zoom-figure {
    margin: 0;
    display: grid;
    gap: 12px;
    justify-items: center;
    max-height: 100%;
}

.card-zoom-figure img {
    max-width: min(460px, 92vw);
    max-height: 78vh;
    width: auto;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

.card-zoom-figure figcaption {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text);
    text-align: center;
}

/* Only on two-faced cards, and only in here: the grid shows one face, so this
   is the only place the back of a transforming Saga can be read. */
.card-zoom-flip {
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.card-zoom-flip:hover {
    border-color: var(--violet);
    background: var(--surface-2);
}

.card-zoom-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.card-zoom-close:hover { border-color: var(--violet); }

@media (max-width: 860px) {
    /* The headline cards stop being a column and become the top of the page,
       side by side, so the grid keeps the full width beneath them. */
    .deck-layout { grid-template-columns: 1fr; }
    .deck-heroes {
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .deck-card-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* The frame the overlays anchor to. Split out from the artwork itself so a
   card with no picture keeps its quantity and its ownership tag — which is
   exactly when "do I own this?" is worth answering. */
.deck-tile-frame {
    position: relative;
    display: block;
    width: 100%;
}

/* ==========================================================================
   Deck sections: CSS-only tabs, and the builder's controls
   ========================================================================== */

/* ---------- Radio-driven tabs ----------
   No JavaScript anywhere in this interaction. The radios are visually hidden
   and the labels are the tabs; a checked radio reveals its panel through a
   sibling selector. The browser handles arrow-key navigation itself. */

.deck-section-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Every panel hidden, then exactly one revealed. Enumerated because CSS has no
   way to pair an input with a panel by a shared value — the zone keys are a
   closed set, so this is the whole list. */
.deck-browser .deck-panel { display: none; }

/* While a name filter is active the tabs step aside: a match in the sideboard
   is still a match, and hiding it because a different tab is checked would
   make the filter lie. Sections with nothing left are dropped entirely. */
.deck-browser.is-filtering .deck-panel { display: block; }
.deck-browser.is-filtering .deck-panel.is-empty { display: none; }
.deck-browser.is-filtering .deck-tabs { opacity: 0.45; }

.deck-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}

.deck-filter-input {
    flex: 1 1 260px;
    max-width: 340px;
    padding: 8px 13px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
}

.deck-filter-input:focus {
    outline: none;
    border-color: var(--violet);
}

.deck-filter-count {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

#sec-main:checked    ~ .deck-panel-main,
#sec-sideboard:checked ~ .deck-panel-sideboard,
#sec-rune:checked    ~ .deck-panel-rune,
#sec-battlefield:checked ~ .deck-panel-battlefield,
#sec-commander:checked ~ .deck-panel-commander,
#sec-legend:checked  ~ .deck-panel-legend,
#sec-champion:checked ~ .deck-panel-champion,
#sec-stray:checked   ~ .deck-panel-stray { display: block; }

/* The active tab. Same enumeration, matching the label by its `for`. */
#sec-main:checked    ~ .deck-tabs label[for="sec-main"],
#sec-sideboard:checked ~ .deck-tabs label[for="sec-sideboard"],
#sec-rune:checked    ~ .deck-tabs label[for="sec-rune"],
#sec-battlefield:checked ~ .deck-tabs label[for="sec-battlefield"],
#sec-commander:checked ~ .deck-tabs label[for="sec-commander"],
#sec-legend:checked  ~ .deck-tabs label[for="sec-legend"],
#sec-champion:checked ~ .deck-tabs label[for="sec-champion"],
#sec-stray:checked   ~ .deck-tabs label[for="sec-stray"] {
    background: var(--violet-deep);
    border-color: var(--violet-bright);
    color: #fff;
}

/* Keyboard focus has to be visible on the label, since the radio itself is
   not. */
.deck-section-input:focus-visible ~ .deck-tabs label[for] { outline: none; }
#sec-main:focus-visible    ~ .deck-tabs label[for="sec-main"],
#sec-sideboard:focus-visible ~ .deck-tabs label[for="sec-sideboard"],
#sec-rune:focus-visible    ~ .deck-tabs label[for="sec-rune"],
#sec-battlefield:focus-visible ~ .deck-tabs label[for="sec-battlefield"],
#sec-commander:focus-visible ~ .deck-tabs label[for="sec-commander"],
#sec-legend:focus-visible  ~ .deck-tabs label[for="sec-legend"],
#sec-champion:focus-visible ~ .deck-tabs label[for="sec-champion"],
#sec-stray:focus-visible   ~ .deck-tabs label[for="sec-stray"] {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

/* Only one section shows at a time, so its heading would repeat the tab. */
.deck-tabs ~ .deck-panel .deck-panel-title { display: none; }

.deck-tab { user-select: none; }

/* ---------- Headline cards, smaller ----------
   They were competing with the deck for attention. Big enough to read at a
   glance, small enough that the grid is still the page. */

.deck-layout { grid-template-columns: minmax(160px, 200px) 1fr; }

.deck-hero-card { padding: 10px; gap: 8px; }

.deck-hero-name { font-size: 0.86rem; }

.deck-hero-role { font-size: 0.64rem; }

.deck-hero-meta { font-size: 0.72rem; }

/* ---------- The builder's controls ----------
   A quantity box, a Guardar, a Mover a… and an × on every one of forty rows
   ran off the side of the screen. A stepper on the tile is one click and fits. */

.deck-card-grid.is-editable {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

.deck-tile-controls {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.deck-step {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.deck-step:hover {
    border-color: var(--violet);
    background: var(--surface);
}

.deck-step-remove { color: var(--danger); }
.deck-step-remove:hover { border-color: var(--danger); }

.deck-step-count {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.85rem;
}

/* The controls were rendering with the browser's own widget colours, which
   are white-on-white against this palette. */
.deck-filter-bar select,
.deck-filter-bar input[type="search"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
}

.deck-filter-bar select:focus-visible,
.deck-filter-bar input[type="search"]:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 1px;
}

/* Dropdown options are painted by the OS, which defaults to a light list. */
.deck-filter-bar select option {
    background: var(--surface);
    color: var(--text);
}

/* ---------- The builder's own columns ----------
   The picker was a fixed sidebar next to a full-width list, which is what put
   the controls off the screen. */

.deck-workshop { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }

.deck-workshop-deck { min-width: 0; }

.deck-workshop-deck .deck-layout {
    grid-template-columns: minmax(140px, 170px) minmax(0, 1fr);
    margin-top: 16px;
}

.deck-workshop-deck .deck-heroes { position: static; }

@media (max-width: 1100px) {
    .deck-workshop-deck .deck-layout { grid-template-columns: 1fr; }
}

/* A card frame is `width: 100%` of its column, which is fine inside
   `.deck-layout` and enormous without it. The cap means a missing wrapper is a
   layout slip, not a full-page portrait. */
.deck-hero-card { max-width: 240px; }
.deck-heroes { max-width: 100%; }

/* ---------- Batched editing ----------
   Every + and − used to be a page load. They edit a hidden field now and the
   whole session saves in one request, so the page has to show what is pending
   and refuse to lose it. */

/* ---------- Flashed messages ---------- */

/* `.form-error` / `.form-success` still carry the colour; this only adds room
   for the close button and keeps the text off it. */
.page-message {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.page-message-text { flex: 1 1 auto; }

.page-message-close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin: -2px -4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    font-size: 1.15rem;
    line-height: 1;
    opacity: 0.6;
    cursor: pointer;
}

.page-message-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}

/* The save button sits in the page header with the other actions; the panel
   it used to live in is gone. What is left is the unsaved-changes count, which
   trails the button and only exists while there is a number to report. */
.deck-save-note {
    margin: 0;
    font-size: 0.86rem;
    color: var(--cyan);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.deck-workshop-header-side .button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

/* A card whose count differs from the deck as loaded. */
.deck-tile.is-dirty .deck-step-count { color: var(--cyan); }

.deck-tile.is-dirty .deck-tile-frame {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-radius: 10px;
}

/* Stepped down to zero: still on screen, so it can be stepped back up before
   saving. Removing it from view would make an undo impossible. */
.deck-tile.is-removed .deck-tile-frame {
    opacity: 0.4;
    outline-color: var(--danger);
}

.deck-tile.is-removed .deck-tile-name { text-decoration: line-through; }

.deck-tile-pending {
    margin: 0;
    font-size: 0.68rem;
    color: var(--danger);
    text-align: center;
}

/* ==========================================================================
   The deckbuilder as a workbench
   ==========================================================================
   Everything here trades reading comfort for density, and only on this page.
   A 40-card deck that needs three screens of scrolling to see is a deck you
   cannot judge, so the goal is the whole thing at once — without shrinking the
   cards past the point where you can tell them apart. */

/* Out of the 1240px reading column. Capped rather than uncapped: a card grid
   stretched across a 34" monitor puts the picker and the deck a head-turn
   apart, which is its own kind of unusable. */
.page-content-wide {
    max-width: 1760px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 20px;
}

/* ---------- A shallower header ----------
   Every row above the cards is a row to scroll past. */

.deck-workshop-header {
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.deck-workshop-header h1 { font-size: 1.5rem; }

.deck-workshop-header-side {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* The tag sits inline in the header here, so it loses its own top margin. */
.deck-workshop-header-side .deck-legal-tag-wrap { margin-top: 0; }

.deck-workshop-header .deck-rules-hint {
    display: inline;
    margin-top: 0;
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

/* ---------- Tighter columns ---------- */

.deck-workshop {
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    gap: 18px;
}

.deck-workshop-picker { padding: 14px; }

.deck-workshop-picker .wizard-field { margin-bottom: 8px; }

.deck-workshop-title { font-size: 0.92rem; margin-bottom: 8px; }

.deck-workshop-deck .deck-layout {
    grid-template-columns: minmax(110px, 132px) minmax(0, 1fr);
    gap: 16px;
    margin-top: 0;
}

/* The headline cards are reference, not the subject, on this page. */
.deck-workshop-deck .deck-hero-card {
    max-width: 132px;
    padding: 7px;
    gap: 6px;
}

.deck-workshop-deck .deck-hero-name { font-size: 0.76rem; }
.deck-workshop-deck .deck-hero-role { font-size: 0.6rem; }
.deck-workshop-deck .deck-hero-meta { display: none; }
.deck-workshop-deck .deck-heroes { gap: 10px; }

/* ---------- Denser card grid ----------
   ~96px is about a card's readable floor: the art still identifies it and the
   name is under it either way. */

.deck-workshop-deck .deck-card-grid.is-editable {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}

.deck-workshop-deck .deck-tile { gap: 3px; }

.deck-workshop-deck .deck-tile-name {
    font-size: 0.7rem;
    -webkit-line-clamp: 1;
    line-height: 1.25;
}

.deck-workshop-deck .deck-tile-owned {
    font-size: 0.62rem;
    padding: 1px 5px;
    right: 3px;
    top: 3px;
}

.deck-workshop-deck .deck-tile-controls { gap: 2px; }

.deck-workshop-deck .deck-step {
    width: 22px;
    height: 22px;
    font-size: 0.85rem;
    border-radius: 6px;
}

.deck-workshop-deck .deck-step-count { font-size: 0.78rem; }

.deck-workshop-deck .deck-tabs { margin-bottom: 10px; gap: 6px; }

.deck-workshop-deck .deck-tab { padding: 5px 11px; font-size: 0.8rem; }

.deck-workshop-deck .deck-panel-head { margin-bottom: 8px; }

.deck-workshop-deck .deck-tile-pending { font-size: 0.62rem; }

/* ---------- A save bar that costs one row ---------- */

.deck-workshop-deck .deck-save-bar {
    margin-top: 12px;
    padding: 8px 14px;
}

.deck-workshop-deck .deck-save-note { font-size: 0.8rem; }

@media (min-width: 1500px) {
    /* Room for a wider picker before the grid needs the space back. */
    .deck-workshop { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }
}

@media (max-width: 900px) {
    /* Density stops helping once the columns stack. */
    .page-content-wide { padding-left: 16px; padding-right: 16px; }
    .deck-workshop-deck .deck-card-grid.is-editable {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    }
}

/* ==========================================================================
   The stats panel, and the fixed-width grid that makes room for it
   ========================================================================== */

/* Eight cards a row, always. Fixing the count rather than the tile width is
   what frees a predictable column on the right for the stats — an auto-fill
   grid would eat every pixel the panel needs. */
.deck-layout.has-stats {
    grid-template-columns:
        minmax(110px, 150px)          /* heroes   */
        minmax(0, 1fr)                /* the grid */
        minmax(240px, 300px);         /* stats    */
}

.deck-layout.has-stats.is-wide {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
}

.deck-layout.has-stats .deck-card-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

/* ---------- The panel ---------- */

.deck-stats {
    position: sticky;
    top: 16px;
    align-self: start;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface);
}

.deck-stats-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

.deck-stats-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 12px;
}

.deck-stats-tab {
    text-align: center;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-soft);
    color: var(--text-dim);
    font-size: 0.82rem;
    cursor: pointer;
    user-select: none;
}

.deck-stats-tab:hover { color: var(--text); }

/* Same radio-and-sibling mechanism as the deck sections: nothing on this page
   should stop working because a script did not load. */
.deck-stats-panel { display: none; }
#stats-numbers:checked ~ .deck-stats-panel-numbers,
#stats-hands:checked ~ .deck-stats-panel-hands { display: block; }

#stats-numbers:checked ~ .deck-stats-tabs label[for="stats-numbers"],
#stats-hands:checked ~ .deck-stats-tabs label[for="stats-hands"] {
    background: var(--surface-2);
    border-color: var(--violet);
    color: var(--text);
}

#stats-numbers:focus-visible ~ .deck-stats-tabs label[for="stats-numbers"],
#stats-hands:focus-visible ~ .deck-stats-tabs label[for="stats-hands"] {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

/* ---------- Headline numbers ---------- */

.deck-stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 6px;
    margin-bottom: 12px;
}

.deck-stat-tile {
    display: grid;
    gap: 1px;
    justify-items: center;
    padding: 8px 4px;
    border-radius: 10px;
    background: var(--deep);
}

.deck-stat-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.deck-stat-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    text-align: center;
}

.deck-stats-note,
.deck-stats-blank {
    margin: 0 0 12px;
    font-size: 0.76rem;
    color: var(--text-dim);
    line-height: 1.45;
}

/* ---------- Charts ----------
   CSS bars rather than a chart library: these are histograms of at most ten
   columns, and a dependency to draw ten rectangles is a dependency to keep
   working forever. */

.deck-chart {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: var(--deep);
}

.deck-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.deck-chart-title {
    margin: 0;
    font-size: 0.82rem;
    font-family: var(--font-display);
}

.deck-chart-average {
    font-size: 0.68rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.deck-chart-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 3px;
    height: 96px;
    align-items: end;
}

.deck-chart-bar {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: end;
    justify-items: center;
    gap: 2px;
    height: 100%;
}

.deck-chart-count {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.deck-chart-column {
    width: 100%;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--violet), var(--violet-deep));
    align-self: end;
}

.deck-chart-tick {
    font-size: 0.62rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.deck-chart-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.deck-chart-row {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
}

.deck-chart-row-label {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deck-chart-track {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.deck-chart-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--cyan);
}

.deck-chart-row-count {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Domains and Magic colours read wrong in a single accent, so each gets its
   own — the palette people already associate with them. */
[data-tone="body"], [data-tone="r"] { background: #f97316; }
[data-tone="mind"], [data-tone="u"] { background: #38bdf8; }
[data-tone="calm"], [data-tone="w"] { background: #e2e8f0; }
[data-tone="chaos"], [data-tone="b"] { background: #a855f7; }
[data-tone="fury"] { background: #ef4444; }
[data-tone="order"], [data-tone="g"] { background: #22c55e; }
[data-tone="colorless"] { background: #94a3b8; }

.deck-chart-note {
    margin: 8px 0 0;
    font-size: 0.66rem;
    color: var(--text-dim);
}

/* ---------- Sample hands ---------- */

.deck-hand-lead {
    margin: 0 0 8px;
    font-size: 0.74rem;
    color: var(--text-dim);
}

.deck-hand {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 6px;
}

.deck-hand-card {
    aspect-ratio: 5 / 7;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-2);
}

.deck-hand-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.deck-hand-blank {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 4px;
    font-size: 0.6rem;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.2;
}

@media (max-width: 1200px) {
    /* The panel drops under the deck rather than squeezing the grid to four
       cards a row. */
    .deck-layout.has-stats,
    .deck-layout.has-stats.is-wide {
        grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
    }
    .deck-layout.has-stats.is-wide { grid-template-columns: minmax(0, 1fr); }
    .deck-stats {
        grid-column: 1 / -1;
        position: static;
        max-height: none;
    }
    .deck-layout.has-stats .deck-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }
}

@media (max-width: 860px) {
    .deck-layout.has-stats { grid-template-columns: 1fr; }
}

/* ---------- Stacked curve columns ----------
   The colours are the point: "six two-drops" and "six two-drops, five of them
   Body" are different decks. */

.deck-chart-column {
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden;
    background: none;
}

.deck-chart-slice { display: block; width: 100%; }

.deck-chart-slice.is-plain {
    background: linear-gradient(180deg, var(--violet), var(--violet-deep));
}

.deck-chart-legend {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.deck-chart-key {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.66rem;
    color: var(--text-dim);
}

.deck-chart-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* A tally that is zero still shows — a deck with no Basic Pokémon is the one
   that most needs telling — but it should not read as a headline. */
.deck-stat-tile.is-zero { opacity: 0.55; }
.deck-stat-tile.is-zero .deck-stat-value { color: var(--danger); }

/* Magic type colours, so the type split is not one flat accent. */
[data-tone="tierras"] { background: #a16207; }
[data-tone="criaturas"] { background: #22c55e; }
[data-tone="instant-neos"], [data-tone="instantaneos"] { background: #38bdf8; }
[data-tone="conjuros"] { background: #ef4444; }
[data-tone="artefactos"] { background: #94a3b8; }
[data-tone="encantamientos"] { background: #a855f7; }
[data-tone="planeswalkers"] { background: #f97316; }

/* Pokémon's three, plus the Trainer split. */
[data-tone="pok-mon"], [data-tone="pokemon"] { background: #facc15; }
[data-tone="entrenador"], [data-tone="item"] { background: #38bdf8; }
[data-tone="supporter"] { background: #f97316; }
[data-tone="stadium"] { background: #a855f7; }
[data-tone="herramienta"] { background: #94a3b8; }
[data-tone="energ-a"], [data-tone="energ-a-b-sica"] { background: #22c55e; }
[data-tone="energ-a-especial"] { background: #14b8a6; }

/* Riftbound card types. */
[data-tone="unidades"] { background: #38bdf8; }
[data-tone="hechizos"] { background: #a855f7; }
[data-tone="equipo"] { background: #94a3b8; }
[data-tone="runas"] { background: #f97316; }
[data-tone="campos"] { background: #22c55e; }
[data-tone="leyendas"] { background: #facc15; }

/* ---------- Stat tiles: no ragged last row ----------
   As a fixed grid the last row left a hole to the right — six tiles across
   four columns reads as two missing ones rather than as six. Flex with grow
   lets whatever is on the last row expand to fill it, so any number of tiles
   looks deliberate. Smaller, too: these are a summary, not the content. */

.deck-stat-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}

.deck-stat-tile {
    flex: 1 1 62px;
    min-width: 62px;
    padding: 6px 6px 5px;
    border-radius: 8px;
}

.deck-stat-value { font-size: 1.02rem; line-height: 1.15; }

.deck-stat-label {
    font-size: 0.56rem;
    letter-spacing: 0.05em;
    line-height: 1.15;
}

/* ---------- A hand you can actually read ----------
   At 62px these were thumbnails of a thumbnail. Two to a row in the panel puts
   them at roughly card-in-hand size. */

.deck-hand {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.deck-hand-card {
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.deck-hand-blank { font-size: 0.68rem; padding: 6px; }

/* Below the panel's breakpoint it is full width, so the hand can spread out
   rather than staying in a two-card column. */
@media (max-width: 1200px) {
    .deck-hand { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* The hand cards are zoom triggers, like the ones in the deck grid. */
.deck-hand-art {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: inherit;
    overflow: hidden;
}

.deck-hand-art img { transition: transform 0.18s ease; }
.deck-hand-art:hover img { transform: scale(1.05); }

.deck-hand-art:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}