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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body.wizard-open { overflow: hidden; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.checkout-confirm { position: static; }

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.thread { margin-top: 14px; }

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

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

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

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

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

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

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

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

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

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

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

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


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

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

.bell { position: relative; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 900px) {
    .bo-dispute-layout { grid-template-columns: 1fr; }
    .bo-block { border-right: none; border-bottom: 1px solid var(--border-soft); }
}


/* A wishlisted listing the vendor has since archived. Dimmed rather than
   hidden: the ♥ has to stay reachable, or the row can never be removed. */
.wishlist-entry { position: relative; display: flex; flex-direction: column; }
.wishlist-entry.is-unavailable .product-card-link { opacity: 0.45; filter: grayscale(0.7); }
.wishlist-entry.is-unavailable .product-card { border-style: dashed; }

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


/* ---------- Toasts ----------
   Bottom-right, stacked, self-dismissing. Adding a card to the cart used to
   navigate to the cart and throw away whatever you were doing; this is what
   replaced that. Above every dialog, because it reports on actions taken
   inside them. */

.toast-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    /* The stack spans the corner but must never swallow clicks; each toast
       turns pointer events back on for itself. */
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    max-width: min(360px, calc(100vw - 36px));
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--violet);
    border-radius: 11px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.5;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
    /* Starts offset and transparent; .is-visible is added a frame later. */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.is-visible { opacity: 1; transform: translateY(0); }

.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
    .toast { transition: opacity 0.25s ease; transform: none; }
    .toast.is-visible { transform: none; }
}

@media (max-width: 560px) {
    .toast-stack { right: 12px; left: 12px; bottom: 12px; align-items: stretch; }
    .toast { max-width: none; }
}

/* ---------- Card filters ----------
   One form, two shapes. `.filter-bar` lays it across the top of the collection
   and binder pages; `.filter-panel` stands it up as the search page's left
   column. The fields themselves are identical in both, so the controls sit in
   the same order and mean the same thing wherever somebody meets them. */

.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.filter-field { min-width: 0; }

/* `:not(.filter-choice)` matters: the finish chips are <label>s too, and this
   rule was uppercasing and letter-spacing them into looking like three field
   headings instead of three options. */
.filter-field label:not(.filter-choice),
.filter-field-label {
    display: block;
    margin: 0 0 5px;
    color: var(--text-dim);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.filter-field input[type="search"],
.filter-field input[type="text"],
.filter-field select {
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 0.86rem;
}

.filter-field input[type="search"] { min-width: 190px; }
.filter-field select { min-width: 140px; }

.filter-field input:focus-visible,
.filter-field select:focus-visible {
    outline: none;
    border-color: var(--violet);
    box-shadow: var(--glow-violet);
}

/* Foil is three-state — cualquiera / foil / sin foil — so these are radios
   wearing chips, not a checkbox that could only ask two of the three. */
.filter-choices { display: flex; flex-wrap: wrap; gap: 6px; }

.filter-choice { cursor: pointer; }

.filter-choice input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Sized to sit with the selects and text inputs next to them (0.86rem), not to
   compete with them. */
.filter-choice span {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.8rem;
    letter-spacing: normal;
    text-transform: none;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.filter-choice:hover span { border-color: var(--violet); }

.filter-choice input:checked + span {
    border-color: transparent;
    background: linear-gradient(135deg, var(--violet-bright), var(--indigo));
    color: #fff;
}

.filter-choice input:focus-visible + span { box-shadow: var(--glow-violet); }

.filter-range { display: flex; align-items: center; gap: 7px; min-width: 0; }
.filter-range input { width: 82px; text-align: right; }
.filter-range span { color: var(--text-dim); }

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

.filter-bar {
    margin-bottom: 20px;
    padding: 15px 18px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.filter-count {
    margin: -8px 0 16px;
    color: var(--text-dim);
    font-size: 0.84rem;
}

/* ---------- Search page: results with the filters down the left ---------- */

.search-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.search-layout.is-bare { grid-template-columns: minmax(0, 1fr); }

.filter-panel {
    position: sticky;
    top: 20px;
    padding: 16px 17px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.filter-panel-title {
    margin: 0 0 14px;
    font-size: 0.95rem;
}

/* Stacked, not wrapped: a 250px column has room for one control per row. */
.filter-panel .filter-form { flex-direction: column; align-items: stretch; }
.filter-panel .filter-field { width: 100%; }

.filter-panel .filter-field input[type="search"],
.filter-panel .filter-field select {
    width: 100%;
    min-width: 0;
}

/* `min-width: 0` is the whole fix. An <input> has an intrinsic minimum width
   from its `size` attribute, and flex items refuse to shrink below their
   intrinsic minimum — so `flex: 1 1 0` was not enough and the Mín/Máx pair
   pushed straight out of the sidebar. */
.filter-panel .filter-range input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

.filter-panel .filter-actions {
    flex-wrap: wrap;
    margin-left: 0;
    padding-top: 4px;
}

.filter-panel .filter-actions .button { flex: 1 1 auto; }

.search-results { min-width: 0; }

.search-empty { grid-column: 1 / -1; color: var(--text-muted); }

@media (max-width: 860px) {
    /* The sidebar becomes a band above the results rather than a squeezed
       column, and stops being sticky — a filter panel that follows you down a
       phone screen is a filter panel in the way. */
    .search-layout { grid-template-columns: minmax(0, 1fr); }
    .filter-panel { position: static; }
    .filter-panel .filter-form { flex-direction: row; flex-wrap: wrap; }
    .filter-panel .filter-field { width: auto; }
    .filter-panel .filter-field input[type="search"] { min-width: 180px; }
}

@media (max-width: 560px) {
    .filter-form { flex-direction: column; align-items: stretch; }
    .filter-field input[type="search"],
    .filter-field select { width: 100%; min-width: 0; }
    .filter-actions { margin-left: 0; }
    .filter-actions .button { flex: 1 1 auto; }
}

/* ---------- Reference value of a collection or a binder ----------
   Sits between the sub-nav and the card grid on both pages. A quiet plate
   rather than a hero number: it is JustTCG's international reference at a
   fixed display rate, not money anybody is being offered. */

.value-summary {
    margin: 0 0 22px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background:
        linear-gradient(135deg, rgba(139, 92, 246, 0.10), transparent 62%),
        var(--surface);
}

.value-summary-label {
    margin: 0 0 4px;
    color: var(--text-dim);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.value-summary-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* The soles conversion trails the dollar figure it comes from, in the same
   order every other reference in the app uses. */
.value-summary-pen {
    color: var(--cyan);
    font-size: 1.02rem;
    font-weight: 600;
}

.value-summary-note {
    margin: 5px 0 0;
    color: var(--text-dim);
    font-size: 0.78rem;
}

.value-summary.is-empty { background: var(--surface); }
.value-summary-none { color: var(--text-dim); font-size: 1.1rem; }

@media (max-width: 480px) {
    .value-summary-figure { font-size: 1.3rem; }
}

/* ---------- Mis binders ----------
   A binder is a named subset of the digital collection, so its card grid
   reuses .collection-grid / .collection-card wholesale. Everything below is
   only what a binder has that the collection does not: a cover, a share
   dialog, and per-slot quantity controls. */

.collection-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

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

.binder-card {
    display: block;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: inherit;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.12s ease;
}

.binder-card:hover {
    border-color: var(--violet);
    transform: translateY(-2px);
    text-decoration: none;
}

/* The cover is up to four card artworks in a 2x2 mosaic. One card fills the
   whole tile, two split it, three leave the last cell to the plate — the grid
   handles every case without a branch in the template. */
.binder-cover {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    aspect-ratio: 4 / 3;
    background: var(--surface-2);
}

.binder-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.binder-cover img:only-child { grid-column: 1 / -1; }

.binder-cover.is-empty {
    place-items: center;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.10) 0 10px,
            transparent 10px 20px
        ),
        var(--surface-2);
}

.binder-cover-blank {
    width: 46px;
    height: 62px;
    border: 1px dashed var(--border);
    border-radius: 6px;
}

.binder-card-body { padding: 12px 13px 14px; }

.binder-card-name {
    margin: 0 0 3px;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
}

.binder-card-meta { margin: 0; color: var(--text-dim); font-size: 0.78rem; }

.binder-public-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.14);
    color: var(--cyan);
    font-size: 0.7rem;
    font-weight: 600;
}

.binder-public-inline { color: var(--cyan); font-weight: 600; }

/* ---------- "We changed this binder" ----------
   Amber, not red: nothing went wrong, the owner just needs to know their cards
   moved without them. Shown once — opening the page dismisses it — so it
   carries the whole message rather than a summary with a link. */

.binder-notice {
    margin-bottom: 22px;
    padding: 15px 18px;
    border: 1px solid rgba(251, 191, 36, 0.38);
    border-left: 3px solid var(--warning);
    border-radius: 12px;
    background: rgba(251, 191, 36, 0.09);
}

.binder-notice-title {
    margin: 0 0 4px;
    color: var(--warning);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
}

.binder-notice-lead {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.binder-notice-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text);
    font-size: 0.87rem;
    line-height: 1.75;
}

.binder-notice-reason { color: var(--text-dim); font-size: 0.8rem; }

/* The same news on the shelf, so a binder nobody opens still announces it. */
.binder-card-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--warning);
    vertical-align: middle;
}

/* ---------- Binder page header ---------- */

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

.binder-header-text { min-width: 0; }

.binder-header-note {
    margin: 8px 0 0;
    max-width: 56ch;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.binder-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.button-icon { padding: 9px 15px; font-size: 1rem; line-height: 1; }

/* ---------- Público / privado ----------
   A submit button wearing the sign-up form's switch, so the control that
   decides who can read a binder works with or without JavaScript. It reuses
   .switch-track / .switch-thumb; only the "on" state differs, because there is
   no checkbox here for `:checked` to hang off. */

.binder-visibility { display: flex; }

.switch-button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.18s ease;
}

/* The sign-up switch leaves its thumb top-aligned inside the track, which is
   invisible at that size but shows at this one. Grid centres it. */
.switch-button .switch-track {
    display: grid;
    align-content: center;
    width: 42px;
    height: 24px;
}

.switch-button .switch-thumb { width: 18px; height: 18px; }

.switch-button:hover { color: var(--text-muted); }

.switch-button.is-on { color: var(--cyan); }

.switch-button.is-on .switch-track {
    background: linear-gradient(135deg, var(--violet-bright), var(--indigo));
    border-color: transparent;
}

/* Track 42 minus 2px padding either side leaves 38; an 18px thumb travels 20. */
.switch-button.is-on .switch-thumb {
    transform: translateX(20px);
    background: #fff;
}

.switch-button:focus-visible { outline: none; }
.switch-button:focus-visible .switch-track { box-shadow: var(--glow-violet); }

.switch-button-label { white-space: nowrap; }

/* ---------- The QR share control ----------
   Not a share arrow: what somebody does with a public binder is point a phone
   at it, so the button is the sign for that. A shaded square tile that stays
   quiet until the binder is actually shareable, then lights up cyan. */

.qr-button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background:
        linear-gradient(150deg, rgba(139, 92, 246, 0.16), rgba(34, 211, 238, 0.06)),
        var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}

.qr-button:hover {
    color: var(--text);
    border-color: var(--violet);
    box-shadow: var(--glow-violet);
}

.qr-button.is-live {
    color: var(--cyan);
    border-color: rgba(34, 211, 238, 0.45);
}

.qr-button.is-live:hover {
    color: var(--cyan-soft);
    border-color: var(--cyan);
    box-shadow: var(--glow-cyan);
}

.qr-glyph { display: block; }

/* ---------- Binder slots (a card inside a binder) ---------- */

.binder-slot { position: relative; display: flex; flex-direction: column; }

.binder-slot-link { display: block; color: inherit; }
.binder-slot-link:hover { text-decoration: none; }

/* Two stacked rows. A tile is ~150px wide inside its padding, which a stepper,
   an "of N" count and a Guardar button cannot share — laid out in one row the
   count spilled out past the tile's border. */
.binder-slot-form {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}

.binder-slot-count {
    display: flex;
    align-items: center;
    gap: 8px;
}

.binder-slot-count .stepper { flex: 0 0 auto; }

.binder-slot-owned {
    margin-left: auto;
    color: var(--text-dim);
    font-size: 0.74rem;
    white-space: nowrap;
}

/* The base .button is a 999px pill sized for page-level actions; on a tile it
   has to match the stepper's width and weight, not tower over it. */
.binder-slot-save {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
}

.binder-slot-remove { position: absolute; top: 6px; left: 6px; }

.binder-slot-x {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(7, 7, 26, 0.85);
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.binder-slot:hover .binder-slot-x,
.binder-slot-x:focus-visible { opacity: 1; }
.binder-slot-x:hover { color: var(--danger); }

.stepper-compact { grid-template-columns: 28px 44px 28px; font-size: 0.85rem; }
.stepper-compact .stepper-button { font-size: 0.95rem; }

/* ---------- Picking cards out of the collection ---------- */

.wizard-narrow { width: min(440px, 100%); }

.wizard-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.binder-picker-list,
.binder-publish-list {
    max-height: 46vh;
    overflow-y: auto;
    margin-top: 6px;
    padding-right: 4px;
}

.binder-picker-row,
.binder-publish-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
}

.binder-picker-row:last-child,
.binder-publish-row:last-child { border-bottom: none; }

.binder-picker-art {
    flex: 0 0 auto;
    width: 34px;
    height: 46px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--surface-2);
}

.binder-picker-art img,
.binder-picker-art .product-card-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.binder-picker-text { flex: 1 1 auto; min-width: 0; }

.binder-picker-name {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.binder-picker-meta {
    display: block;
    color: var(--text-dim);
    font-size: 0.76rem;
}

.binder-picker-empty {
    margin: 14px 0 0;
    color: var(--text-dim);
    font-size: 0.85rem;
    text-align: center;
}

/* The way out of the picker when the card is not in the collection yet.
   Dashed, like the empty states elsewhere, so it reads as "add something new"
   rather than as another row of the list below it. */
.binder-new-card {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.binder-new-card:hover {
    border-color: var(--violet);
    background: rgba(139, 92, 246, 0.10);
}

.binder-new-card-plus {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--violet-bright), var(--indigo));
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
}

.binder-new-card-text { display: block; min-width: 0; }
.binder-new-card-text strong { display: block; font-size: 0.9rem; }

.binder-new-card-text span {
    display: block;
    color: var(--text-dim);
    font-size: 0.78rem;
}

/* Shown in the add-card wizard when it was opened from a binder, so it is
   clear the card lands in two places. */
.wizard-binder-note {
    margin: 0 22px 14px;
    padding: 9px 13px;
    border-radius: 9px;
    background: rgba(34, 211, 238, 0.10);
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* ---------- Publish confirmation ---------- */

.binder-publish-row.is-listed { opacity: 0.6; }

.binder-publish-price { font-size: 0.9rem; font-weight: 600; white-space: nowrap; }

.binder-publish-field {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.binder-publish-field label { color: var(--text-dim); font-size: 0.82rem; }

.binder-publish-field input {
    width: 88px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.86rem;
    text-align: right;
}

.binder-publish-field input:invalid { border-color: rgba(251, 113, 133, 0.6); }

/* ---------- Share dialog ---------- */

.binder-share { text-align: center; }

/* Dark modules on a white plate, deliberately — an inverted QR scans on some
   phones and fails on others, and half a table failing is worse than no code
   at all. The shaded tile around it carries the site's own look instead. */
.qr-plate {
    display: inline-grid;
    place-items: center;
    margin: 4px auto 18px;
    padding: 14px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.qr-plate svg { display: block; }

.qr-plate.is-off {
    padding: 34px;
    background: var(--surface-2);
    color: var(--text-dim);
    box-shadow: none;
}

.binder-share-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: left;
}

.binder-share-row { display: flex; gap: 8px; align-items: stretch; }

.binder-share-url {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
}

.binder-share-row .button { white-space: nowrap; }

.binder-share-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.binder-share-off {
    margin: 0 0 16px;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.binder-delete {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ---------- "¿Estás seguro?" ----------
   Replaces window.confirm, which draws the browser's own box — a bare
   127.0.0.1:8000 header and system buttons, with none of the site around it.
   For "shall I break every QR you have handed out?" that reads as something
   going wrong rather than as the site asking. Built by store/binder.js and
   appended to <body>, so it stacks above whichever dialog raised it. */

.confirm-backdrop { z-index: 100; }

.confirm-box { width: min(400px, 100%); }

.confirm-box .wizard-head { padding-bottom: 10px; }

.confirm-text {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.confirm-box .wizard-foot { margin-top: 20px; }

/* ---------- Binders on a collection card's own page ---------- */

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

.collection-binder-box .product-detail-subtitle { margin-top: 0; }

.collection-binder-filed {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.collection-binder-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.collection-binder-form .wizard-field { margin-bottom: 0; }
.collection-binder-form .wizard-field:first-of-type { flex: 1 1 190px; min-width: 0; }

/* ---------- Public binder page ---------- */

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

.binder-public-kicker {
    margin: 0 0 4px;
    color: var(--text-dim);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

@media (max-width: 560px) {
    .binder-actions { width: 100%; }
    .binder-actions .button { flex: 1 1 auto; }
    .binder-share-foot { justify-content: center; }
    .collection-binder-form .button { width: 100%; }
}