/* ═══════════════════════════════════════════════════════════════════════
   card-descriptor.css — the card "descriptor" block used everywhere a card
   tile is shown outside /Products/Search (which carries its own copy inline):
   the shared CardSearchPanel, buy/sell list tiles, deck-builder pickers.

   Structure (inside any .card-desc container):
     .card-foil-badge (absolute, top-right)   .card-lang-badge (on art, top-left)
     .card-set-line   "Welcome to Rathe [JA]"
     .card-name       "Scar for a Scar"  + .card-native-name "傷には傷を"
     .card-meta-line  .card-code "JA_FAB443-RF · pitch 1"  .fab-rarity-wrap  (or .card-meta-num / .card-meta-rarity)
     .card-price-row  .card-price  .card-stock
   Colours follow the Obsidian tokens; rarity marks are SVGs in /images/fab-rarity.
   ═══════════════════════════════════════════════════════════════════════ */

/* Static layout: every tile in a row shares one height (grid stretch), the price row
   is pinned to the bottom, nothing is absolutely positioned over text. The name clamps
   to two lines, the native name to one, the meta row may wrap. */
.card-desc {
    position: relative;
    display: flex; flex-direction: column; gap: 0.15rem;
    min-height: 10.75rem;
    flex: 1 1 auto;
}
.cv-tile, .card-search-screen .product-card { align-self: stretch; }

/* Set row: set [JA] left, FAB rarity symbol right */
.card-desc .card-set-line {
    display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-muted, #9A8C74);
    min-height: 16px;
    white-space: nowrap;
    line-height: 1.3;
}
.card-desc .card-set-line__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-desc .fab-rarity-icon--set { margin-left: auto; }

.card-desc .card-name {
    display: block;
    font-family: 'Cinzel', serif;
    font-weight: 500;
    font-size: 0.92rem;
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--color-text, #F0E8D5);
    white-space: normal;
    margin: 0.1rem 0 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-desc .card-native-name {
    display: block;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 400;
    font-size: 0.8rem;
    color: #C9BCA3;
    margin-top: 0.1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.card-desc .card-meta-line {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.4rem;
    margin-top: 0.2rem;
}
.card-desc .card-code {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    color: #E4B04C;
    letter-spacing: 0.02em;
}
.card-desc .card-code b { font-weight: 600; }
.card-desc .card-code .card-code__lang,
.card-desc .card-code .card-code__ed,
.card-desc .card-code .card-code__foil { color: var(--color-muted, #9A8C74); }
.card-desc .card-code .card-code__pitch { color: var(--color-muted, #9A8C74); margin-left: 0.35rem; }
.card-desc .card-meta-num { font-family: var(--font-body, 'Inter', sans-serif); font-size: 0.68rem; color: rgba(168,152,128,0.6); }
.card-desc .card-meta-rarity { font-family: var(--font-body, 'Inter', sans-serif); font-size: 0.68rem; color: rgba(200,135,42,0.7); font-style: italic; }

/* FAB rarity mark (official shapes/colours, SVG) */
.card-desc .fab-rarity-wrap { display: inline-flex; align-items: center; gap: 0.3rem; }
.card-desc .fab-rarity-icon { width: 16px; height: 16px; display: inline-block; flex-shrink: 0; }
.card-desc .fab-rarity-name {
    font-family: 'Cinzel', serif; font-size: 0.58rem; letter-spacing: 1px; text-transform: uppercase;
    color: var(--color-muted, #9A8C74);
}

/* Foil chip — inline in the meta row beside the code and rarity (never over text) */
.card-desc .card-foil-badge {
    /* card-search.css pins the legacy badge absolutely; reset it into normal flow */
    position: static; top: auto; right: auto; left: auto; bottom: auto; width: auto; height: auto;
    display: inline-block; vertical-align: middle;
    font-family: 'Cinzel', serif; font-size: 0.55rem; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 0.15rem 0.45rem; border-radius: 4px; pointer-events: none; line-height: 1.3;
    background: rgba(60,60,60,0.9); color: #cfcfcf; border: 1px solid rgba(255,255,255,0.18);
}
.card-desc .card-foil-badge--rainbow {
    background: linear-gradient(90deg, #ff6b6b, #ffd166, #7ee787, #6ec6ff, #c58cff);
    color: #0E0C0A; border-color: transparent;
}
.card-desc .card-foil-badge--cold { background: linear-gradient(135deg, #e8f1ff, #9fb8d8 60%, #d7e6ff); color: #0E1A2A; border-color: transparent; }
.card-desc .card-foil-badge--gold { background: linear-gradient(135deg, #FFD770, #C8872A); color: #0E0C0A; border-color: transparent; }

/* Language badge — on the art, top-left */
.card-lang-badge {
    position: absolute; top: 6px; left: 6px;
    background: var(--color-accent, #C8872A); color: #0E0C0A;
    font-family: 'Cinzel', serif; font-size: 0.55rem; font-weight: 700; letter-spacing: 1.5px;
    padding: 0.15rem 0.45rem; border-radius: 4px; pointer-events: none;
}

.card-desc .card-price-right { display: inline-flex; align-items: baseline; gap: 0.5rem; margin-left: auto; }
/* List pricing block: "×3 · $150.00 ea" over the line total, a little taller than the plain row */
.card-desc .card-price-row--list { padding-top: 0.6rem; min-height: 3.2rem; align-items: flex-end; }
.card-desc .card-price-stack { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; }
.card-desc .card-price-each {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.68rem; color: var(--color-muted, #9A8C74); white-space: nowrap;
}
.card-desc .card-price-row--list .card-price { font-size: 1.5rem; }
/* List tiles: foil pill (left) and line total (right) on one line, "×1 · $9.79 ea · Low"
   right-aligned underneath. Flex-wrap rather than a fixed grid: when a total is too wide to
   share the line with the pill it drops below it instead of painting over it. Selectors
   carry both row classes so they beat the base .card-price-row flex rule further down. */
.card-desc .card-price-row.card-price-row--list {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    column-gap: 0.5rem; row-gap: 0.15rem; min-height: 0;
}
.card-desc .card-price-row.card-price-row--list .card-foil-group { order: 1; flex: 0 0 auto; min-width: auto; margin-right: auto; }
.card-desc .card-price-row.card-price-row--list .card-foil-group:empty { display: none; }
.card-desc .card-price-row.card-price-row--list .card-foil-group .card-foil-pill { flex: 0 0 auto; overflow: visible; }
.card-desc .card-price-row.card-price-row--list .card-price-stack { display: contents; }
.card-desc .card-price-row.card-price-row--list .card-price { order: 2; flex: 0 0 auto; margin-left: auto; font-size: 1.35rem; white-space: nowrap; }
.card-desc .card-price-row.card-price-row--list .card-price-each { order: 3; flex: 1 0 100%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Bottom row — foil chip left, price right, pinned to the bottom of the tile */
.card-desc .card-price-row {
    display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
    margin-top: auto; padding-top: 0.45rem;
    border-top: 1px solid rgba(200,135,42,0.14);
}
.card-desc .card-price-row .card-price {
    margin: 0; font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.35rem; letter-spacing: 0.04em; line-height: 1; color: #E4B04C;
}
.card-desc .card-price-row .card-price--tbd { font-family: var(--font-body, 'Inter', sans-serif); font-size: 0.8rem; letter-spacing: 0; color: var(--color-muted, #9A8C74); }
.card-desc .card-stock { font-family: var(--font-body, 'Inter', sans-serif); font-size: 0.66rem; color: var(--color-muted, #9A8C74); white-space: nowrap; }
.card-desc .card-stock--in { color: #4caf50; }

/* ── Tile sizing + art inset (list grids and the search panel) ──
   Cards are larger and the art sits 5% in from every edge of its frame. */
/* Doubled class selectors out-rank the per-page card-views.css rules regardless of load order. */
.cv-grid.cv-grid { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
/* 5% breathing room above the art, 3% at the sides; the description block uses the
   same 3% side padding so the art and the text share one left/right edge. The tile
   gets a solid surface so the inset reads as a frame rather than empty space. */
/* Glass tile: faintly see-through surface over the brick, blurred */
.cv-tile.cv-tile,
.card-search-screen .product-card {
    background: rgba(26,22,18,0.80);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.card-search-screen .product-card__info { background: transparent; }
.cv-tile.cv-tile > .cv-tile__img,
.cv-tile.cv-tile > .cv-tile__img--placeholder {
    width: 94%;
    margin: 5% 3% 0;
    border-radius: 6px;
    box-sizing: border-box;
}
.cv-tile.cv-tile > .cv-tile__info { margin-top: 4%; padding: 0 3% 3%; flex: 1 1 auto; background: transparent; }
.cv-tile.cv-tile > .cv-tile__info .card-price-row { padding-top: 0.35rem; }
.cv-tile.cv-tile > .cv-tile__info .card-foil-badge { right: auto; }
.cv-tile.cv-tile > .cv-tile__info .card-foil-badge { right: 3%; }
/* Hover lifts the whole tile; the art never zooms inside its frame (picker, lists, search). */
.cv-tile.cv-tile:hover .cv-tile__img,
.product-card:hover .product-card__image img,
.card-search-screen .product-card:hover .product-card__image img { transform: none; }
.cv-tile.cv-tile:hover,
.card-search-screen .product-card:hover { transform: translateY(-4px) scale(1.03); z-index: 1; }

/* Picker tiles match /Products/Search exactly: art edge to edge, same column width. */
.card-search-screen .card-grid { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
/* id selector: site.css styles every text input with an attribute chain that outranks class selectors */
.card-search-screen .rail-search input#csp-input,
.card-search-screen .rail-search input#csp-input:focus {
    border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0; border-radius: 0; outline: 0;
}
@media (max-width: 600px) {
    .cv-grid, .cv-grid.cv-grid { grid-template-columns: repeat(2, 1fr); }
    .card-search-screen .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Language facet rows inside the search panel rail */
.filter-toggle .ft-sub { font-size: 0.68rem; color: var(--color-muted, #9A8C74); margin-left: 0.3rem; }

/* Picker: the floating "+" add button lives on the art (top-right), never over the price row,
   so the price hugs the right edge and the foil pill keeps its full width. */
.card-search-screen .product-card { position: relative; }
.card-search-screen .product-card .product-card__info { position: static; }
.card-search-screen .product-card .pc-add-btn { top: 0.6rem; right: 0.6rem; bottom: auto; }
.card-search-screen .card-desc .card-price-right { padding-right: 0; }

/* ── Cleaner descriptor (one fact once): name · code line · set · price · rarity + foil pill ── */
.card-desc .card-code__sep { color: var(--color-muted, #9A8C74); }
.card-desc .card-price-row--simple { justify-content: flex-end; }
.card-desc .card-foil-row {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 0.5rem;
}
.card-desc .card-foil-row .fab-rarity-icon { width: 18px; height: 18px; flex-shrink: 0; }
.card-desc .card-foil-pill {
    flex: 1; text-align: center;
    font-family: 'Cinzel', serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 0.32rem 0.6rem; border-radius: 999px; line-height: 1.2;
    background: rgba(60,60,60,0.9); color: #cfcfcf; border: 1px solid rgba(255,255,255,0.14);
}
.card-desc .card-foil-pill--rainbow {
    background: linear-gradient(90deg, #ff6b6b, #ffd166, #7ee787, #6ec6ff, #c58cff);
    color: #0E0C0A; border-color: transparent;
}
.card-desc .card-foil-pill--cold { background: linear-gradient(135deg, #e8f1ff, #9fb8d8 60%, #d7e6ff); color: #0E1A2A; border-color: transparent; }
.card-desc .card-foil-pill--gold { background: linear-gradient(135deg, #FFD770, #C8872A); color: #0E0C0A; border-color: transparent; }
/* Quantity badge on list tiles */
.cv-tile .card-qty-badge {
    position: absolute; top: calc(5% + 6px); left: calc(3% + 6px); z-index: 2;
    background: rgba(14,12,10,0.88); color: #F0E8D5; border: 1px solid rgba(200,135,42,0.45);
    font-family: var(--font-body, 'Inter', sans-serif); font-size: 0.72rem; font-weight: 700;
    padding: 0.12rem 0.5rem; border-radius: 999px; pointer-events: none;
}

/* Foil pill + rarity symbol live INSIDE the price row, on the left; the price stays right */
.card-desc .card-price-row--simple { justify-content: space-between; align-items: center; }
.card-desc .card-foil-group { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 auto; min-width: 0; }
.card-desc .card-foil-group .fab-rarity-icon { width: 18px; height: 18px; flex-shrink: 0; }
.card-desc .card-foil-group .card-foil-pill { flex: 0 1 auto; max-width: 9.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-desc .card-price-right { flex-shrink: 0; }

/* Tighter block now that the descriptor has fewer rows; rarity sits inline at the start of the code line */
.card-desc { min-height: 7.75rem; }
.card-desc .card-code { display: inline-flex; align-items: center; gap: 0.3rem; }
.card-desc .fab-rarity-icon--inline { width: 16px; height: 16px; flex-shrink: 0; margin-right: 0.1rem; }
.card-desc .card-foil-group .card-foil-pill { max-width: none; }
/* Compact pill so "Rainbow" + "$208.86 Mkt" fit one 212px column without truncating */
.card-desc .card-foil-group .card-foil-pill { padding: 0.28rem 0.5rem; letter-spacing: 1.1px; }
.card-desc .card-price-row--simple { gap: 0.4rem; }
.card-desc .card-price-each { font-size: 0.62rem; }

/* ── Public list tiles (.cs-tile) and editor highlight rows (.cv-spot) share the descriptor ── */
.cs-tile.bl-pub-tile { position: relative; }
.cs-tile .card-qty-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: rgba(14,12,10,0.88); color: #F0E8D5; border: 1px solid rgba(200,135,42,0.45);
    font-family: var(--font-body, 'Inter', sans-serif); font-size: 0.72rem; font-weight: 700;
    padding: 0.12rem 0.5rem; border-radius: 999px; pointer-events: none;
}
.cs-tile-body.card-desc { min-height: 0; }
.cs-tile-body.card-desc .card-name { font-size: 0.88rem; }
.cs-tile-body.card-desc .bl-pub-tile-market { margin-top: 0.4rem; }
.cv-spot__body.card-desc { min-height: 0; flex: 1 1 auto; }
.cv-spot__body.card-desc .card-price-row { margin-top: 0.4rem; }

/* Phones: two 165px columns. Tighter pill + price so "Regular" and "$31.73 Mkt" share the row. */
@media (max-width: 768px) {
    .card-desc .card-foil-group .card-foil-pill { font-size: 0.55rem; letter-spacing: 0.8px; padding: 0.22rem 0.4rem; }
    .card-desc .card-price-row .card-price { font-size: 1.15rem; }
    .card-desc .card-price-right { gap: 0.3rem; }
    .card-desc .card-price-row--simple { gap: 0.3rem; }
}