/* 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;
    }
}

.product-detail-image {
    display: flex;
    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;
}

.footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 48px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
}

.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;
}

/* ---------- 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;
}

.vendor-photo-strip {
    margin-top: 14px;
}

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

.vendor-photo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vendor-photo-row img {
    width: 72px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* ---------- 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;
}

.collection-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 0;
    font-size: 0.85rem;
}

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

.collection-card-listed {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    font-size: 0.72rem;
}

.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; }

/* ---------- 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 {
    width: min(680px, 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;
    grid-template-columns: 150px 1fr;
    gap: 20px;
}

@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; }

.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; }


.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); }

/* ---------- 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;
}

/* ---------- 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. */
.collection-card-paying {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.16);
    color: #fcd34d;
    font-size: 0.72rem;
    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; }
.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; }

.wishlist-gone {
    margin: 0;
    padding: 6px 10px;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-dim);
}