/* ── Descuentos VR — Catalog Styles v1.4 ─────────────────────────────────── */

:root {
    /* ── Gray palette — base #3d3d3d ──────────────────────── */
    --mc-bg:             #2e2e2e;   /* catalog wrapper            */
    --mc-surface:        #3d3d3d;   /* card background            */
    --mc-surface-2:      #474747;   /* inputs, filter panel       */
    --mc-border:         rgba(255,255,255,.09);
    --mc-border-hover:   rgba(255,255,255,.2);
    --mc-text:           #f0f0f0;
    --mc-text-muted:     #a0a0a0;

    /* ── Accent colors ─────────────────────────────────────── */
    --mc-primary:        #4f8ef7;   /* blue — store / no offer    */
    --mc-primary-dark:   #3b7de8;
    --mc-primary-light:  rgba(79,142,247,.18);
    --mc-primary-tint:   rgba(79,142,247,.08);

    /* Sale (left badge stays bright red) */
    --mc-sale:           #e5383b;
    --mc-sale-dark:      #c1121f;
    --mc-sale-bg:        rgba(229,56,59,.12);

    /* Free (left badge stays bright green) */
    --mc-free:           #2a9d5c;
    --mc-free-bg:        rgba(42,157,92,.12);

    --mc-control-h:      40px;
    --mc-radius:         10px;
}

*, *::before, *::after { box-sizing: border-box; }

.mc-catalog {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--mc-text);
    background: transparent;
    padding: 20px;
    border-radius: 14px;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.mc-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
}
/* spacer removed — search-wrap with flex:1 handles the distribution */

/* ── Search wrap ─────────────────────────────────────────────────────────── */
.mc-search-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}
.mc-search-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--mc-text-muted);
    pointer-events: none;
    flex-shrink: 0;
    display: block !important;   /* prevent theme from hiding it */
    line-height: 0;
}

/* Sort + Filters: uniform height, dark theme */
.mc-sort-select,
.mc-filters-toggle {
    height: var(--mc-control-h);
    padding: 0 14px;
    border-radius: var(--mc-radius);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid var(--mc-border);
    background: var(--mc-surface-2);
    color: var(--mc-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background .15s, color .15s, border-color .15s;
}
.mc-sort-select:hover,
.mc-filters-toggle:hover {
    border-color: var(--mc-border-hover);
    background: rgba(255,255,255,.06);
}
.mc-filters-toggle[aria-expanded="true"] {
    background: linear-gradient(90deg, var(--mc-primary) 0%, var(--mc-primary) 50%, #6366f1 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(79,142,247,.35);
}

.mc-sort-select {
    padding-right: 30px;
    /* Fixed width keeps it compact */
    width: 160px;
    flex-shrink: 0;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%238b8b9e' d='M0 0l5 6 5-6z'/></svg>");
    color-scheme: dark;
    background-repeat: no-repeat;
    background-position: right 12px center;
}
@media (max-width: 600px) {
    .mc-sort-select { width: 130px; }
}
/* Inside the filters panel the select isn't competing for topbar space,
 * so it can take the group's full width like the other filter controls. */
.mc-sort-select.mc-sort-select--inline { width: 100%; }

.mc-filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mc-primary); color: #fff;
    border-radius: 999px;
    min-width: 18px; height: 18px; padding: 0 5px;
    font-size: 10px; font-weight: 500;
}

/* ── Search input (always visible, fills the wrap) ───────────────────────── */

.mc-search-input {
    width: 100%;
    height: var(--mc-control-h);
    padding: 0 14px 0 38px;
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
    background: var(--mc-surface-2);
    font-family: inherit;
    font-size: 13px;
    color: var(--mc-text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.mc-search-input:focus {
    border-color: var(--mc-primary);
    box-shadow: 0 0 0 3px var(--mc-primary-light);
}
.mc-search-input::placeholder { color: var(--mc-text-muted); }

/* ── Filter panel ────────────────────────────────────────────────────────── */

.mc-filters-panel {
    position: relative;   /* anchor for the floating close button on mobile */
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease, margin .3s ease, border-color .15s ease, background-color .15s ease;
    border-radius: var(--mc-radius);
    /* Both background and border are OFF (not just transparent — zero
     * border-width, not just border-color) while collapsed. With
     * max-height:0 a 1px border or a filled background can still leak
     * through as a thin horizontal line/sliver in some browsers. */
    background: transparent;
    border-style: solid;
    border-width: 0;
    border-color: var(--mc-border);
}
/* On desktop the header (title + ✕) and the floating ✕ are both hidden —
 * the user closes the panel via the "Filtros" toggle in the topbar */
.mc-filters-header,
.mc-filters-close-btn {
    display: none;
}
.mc-filters-panel--open {
    max-height: 600px;
    padding: 14px 16px;
    margin-bottom: 12px !important;
    /* Unlike the transparent .mc-catalog wrapper, this panel holds dense
     * text/chips that need contrast against the animated background — a
     * translucent dark layer (not the old solid --mc-surface-2) keeps that
     * readability while still letting the gradient show through. */
    background: rgba(20,20,20,.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-width: 1px;
    /* overflow stays hidden here (inherited from the base rule) — it's
     * needed for the collapse animation. Making this overflow:visible for
     * EVERY panel (an earlier fix, scoped too broadly) let the catalog's
     * own Filtros panel — which can have far more chips than fits in
     * 600px — spill its bottom rows over the results bar below instead of
     * being safely clipped. Only the compare panel's dropdown actually
     * needs to escape its box; see the scoped override below. */
}
#mc-library-compare-panel.mc-filters-panel--open { overflow: visible; }
/* The catalog's own filter panel (Tipo/Plataforma/Géneros/Clasificación/
 * Jugadores/Comodidad — up to 6 groups) is the one most likely to need
 * more than 600px when a category has lots of chips; give it more room
 * specifically instead of raising the shared default for every panel. */
#mc-filters-panel.mc-filters-panel--open { max-height: 1400px; }
.mc-filters-inner { display: flex; flex-direction: column; gap: 6px; }
/* Salient applies its own p/span/div margins with enough specificity to
 * leak through plain resets (same issue we hit with .mc-account-box's
 * font-family). Spacing inside the panels must come ONLY from the flex
 * `gap` above — never from a child's own margin. */
.mc-filters-panel p,
.mc-filters-panel span,
.mc-filters-panel div,
.mc-filters-panel input {
    margin: 0 !important;
}
/* An empty status/error message div still counts as a flex item and adds
 * its own gap even with nothing inside it — collapse it out entirely. */
.mc-account-msg:empty { display: none; }
/* Same Salient margin-leak defense for the plain wrapper divs right after
 * the panels — only the panel's own margin-bottom should create the gap
 * before the grid starts. */
#mc-library-compare-msg,
#mc-library-own-view {
    margin: 0 !important;
}
.mc-filter-group  { display: flex; flex-direction: column; gap: 5px; }
.mc-filter-label  { font-size: 10px; font-weight: 700; color: var(--mc-primary); letter-spacing: .07em; text-transform: uppercase; }
.mc-filter-chips  { display: flex; flex-wrap: wrap; gap: 5px; }

.mc-chip {
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--mc-border);
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    color: var(--mc-text-muted);
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
    display: inline-flex; align-items: center;
}
.mc-chip:hover      { border-color: var(--mc-border-hover); color: var(--mc-text); background: rgba(255,255,255,.09); }
.mc-chip--active,
.mc-chip--active:hover {
    background: linear-gradient(90deg, var(--mc-primary) 0%, var(--mc-primary) 45%, #7a7a7a 100%);
    color: #fff; border-color: transparent;
    box-shadow: 0 2px 8px rgba(79,142,247,.35);
}
/* Chips that would yield 0 results given current filters — hidden by default.
 * If the user wants to keep them visible (e.g. for browsing) they can
 * remove this rule. */
.mc-chip--unavailable { display: none; }

.mc-filters-clear {
    align-self: flex-start;
    padding: 0 12px; height: 28px;
    border: 1px solid var(--mc-border);
    border-radius: 6px;
    background: transparent; font-family: inherit; font-size: 12px;
    cursor: pointer; color: var(--mc-text-muted);
}
.mc-filters-clear:hover { border-color: var(--mc-sale); color: var(--mc-sale); }

/* Visual separator before "Limpiar filtros" — own margin (on top of the
 * panel's flex gap) so the button doesn't sit flush against the last
 * filter group. */
.mc-filters-divider {
    width: 100%;
    height: 0;
    border: none;
    border-top: 1px solid var(--mc-border);
    margin: 6px 0;
}

.mc-filter-toggle-row { display: flex; align-items: center; gap: 10px; }
.mc-filter-toggle-row .mc-chip { margin: 0; }

/* ── Results bar ─────────────────────────────────────────────────────────── */

.mc-results-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px; color: var(--mc-text-muted); font-size: 12px;
}
/* Legend for the 3 corner icons on every card (ficha/biblioteca/favoritos) —
 * placed next to the results count so first-time visitors know what they do. */
.mc-icon-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mc-icon-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--mc-text-muted); }
.mc-icon-legend-label { font-size: 12px; color: var(--mc-text-muted); }
.mc-legend-sep, .mc-icon-legend-sep { color: var(--mc-border-hover); font-size: 12px; }
.mc-icon-legend-icon { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; }
#mc-loading-indicator { font-style: italic; color: var(--mc-primary); }

/* ── Grid ────────────────────────────────────────────────────────────────── */

.mc-catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    transition: opacity .2s;
}
@media (max-width: 1200px) { .mc-catalog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .mc-catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
/* Single column below phone width — 2-up was cramming each card's title/
 * genres/price text too tight to read comfortably. */
@media (max-width: 480px)  { .mc-catalog-grid { grid-template-columns: 1fr; gap: 8px; } }

.mc-no-results { grid-column: 1/-1; text-align: center; padding: 32px; color: var(--mc-text-muted); font-size: 14px; }
.mc-no-results a { color: var(--mc-primary); text-decoration: underline; }

/* ── Card ────────────────────────────────────────────────────────────────── */

.mc-card {
    display: flex; flex-direction: column;
    text-decoration: none; color: var(--mc-text); cursor: pointer;
    background: var(--mc-surface);
    border-radius: var(--mc-radius);
    overflow: hidden;
    border: 1px solid var(--mc-border);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.mc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,.45);
    border-color: var(--mc-border-hover);
    color: var(--mc-text); text-decoration: none;
}
.mc-card--on-sale {
    border-color: rgba(229,56,59,.25);
}
.mc-card--on-sale:hover {
    box-shadow: 0 8px 28px rgba(229,56,59,.2);
    border-color: rgba(229,56,59,.5);
}

/* ── Cover image ─────────────────────────────────────────────────────────── */

.mc-card__image-wrap {
    position: relative;
    padding-top: 62%;   /* taller ratio — gives gradient room for title + genres */
    overflow: hidden;
    background: #0d0d0d;
    flex-shrink: 0;
}
.mc-card__image-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    /* Fallback only — usually completely hidden behind the cover image
     * (which uses object-fit:cover and always fills the box). NO filter
     * here on purpose: this div exists once per card, and with infinite
     * scroll appending cards without limit, a blur() on every single one
     * is exactly the kind of GPU-layer pileup that crashes iOS Safari
     * ("se ha recargado porque ha habido un problema" after enough
     * scrolling) — not worth it for a layer that's essentially never seen. */
}
.mc-card__image-main {
    position: absolute; inset: 0;
    /* !important: Salient/WPBakery's generic ".row .col img" reset
     * (height:auto, max-width:100%) outranks a single-class selector and
     * was shrinking the image to its intrinsic size instead of filling
     * the box — the gap left at the bottom exposed the blurred bg layer
     * right where the title overlay sits ("franja difuminada" bug). */
    width: 100% !important; height: 100% !important; max-width: none !important;
    /*
     * "cover" guarantees the image fills the card edge to edge — no letterbox,
     * no blurred bg leaking through. May crop the sides of very wide DLC
     * banners but that's acceptable: better than a coloured gap.
     */
    object-fit: cover;
    object-position: center;
    z-index: 2;   /* always above the bg layer */
    background: #0d0d0d;
}

/*
 * DLC banners (Beat Saber, etc) have a coloured gradient strip at the bottom
 * of the source image (~25-30% of the image height). We zoom in 40% anchored
 * to the top so that strip is fully cropped off the visible area, while the
 * artwork stays at the top of the card.
 *
 * Tradeoff: in DLCs whose banner doesn't have a bottom strip, we lose a
 * little artwork at the bottom of the image — acceptable cost.
 */
.mc-card--addon .mc-card__image-main {
    transform: scale(1.55);
    transform-origin: center top;
}
.mc-card__image-placeholder {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--mc-primary-dark), #1e1b4b);
}

/* Top-LEFT: stacked badges (offer / free / coupon / cross-buy / horizon+) */
.mc-card__badges {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.mc-badge-img {
    padding: 3px 8px; border-radius: 5px;
    font-size: 11px; font-weight: 500; line-height: 1.2;
    color: #fff; letter-spacing: .02em;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.mc-badge-img--offer   {
    background: linear-gradient(135deg, var(--mc-sale) 0%, #c1121f 100%);
}
.mc-badge-img--coupon  {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);  /* orange — temporary coupon */
    display: inline-flex; align-items: center; gap: 3px;
}
/* Horizon+ Exclusive Offers — deliberately its own red shade (not the same
 * red as --offer, not the blue of --feature below): a plain "-30%" store
 * sale and "only cheaper if you're subscribed to H+" are different deals,
 * and re-using --feature's blue would make it look like the (unrelated)
 * "included in H+ subscription" badge instead. */
.mc-badge-img--horizon-exclusive {
    background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%);
}
.mc-badge-icon {
    width: 11px; height: 11px;
    flex-shrink: 0;
    vertical-align: -1px;
}
.mc-badge-img--free    { background: linear-gradient(135deg, var(--mc-free) 0%, #16a34a 100%); }
/* Cross-Buy / Horizon+ — blue→grey gradient */
.mc-badge-img--feature {
    background: linear-gradient(90deg, var(--mc-primary) 0%, var(--mc-primary) 45%, #7a7a7a 100%);
}
/* Add-on / DLC — compact purple→grey chip. Parent game shown in card overlay */
.mc-badge-img--addon {
    background: linear-gradient(90deg, #7c3aed 0%, #7c3aed 45%, #7a7a7a 100%);
    font-size: 10px;
    letter-spacing: .05em;
    padding: 2px 7px;
}

/* Upcoming release badge — teal gradient, distinct from DLC purple */
.mc-badge-img--upcoming {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    font-size: 10px;
    letter-spacing: .03em;
    padding: 2px 7px;
}

/* Early Access — amber/gold, distinct from every other badge color already
 * in use (red=offer, orange=coupon, blue=feature, purple=addon, teal=upcoming). */
.mc-badge-img--early-access {
    background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
    font-size: 10px;
    letter-spacing: .03em;
    padding: 2px 7px;
}

/* "Complemento de <Beat Saber>" label in the bottom overlay */
.mc-card__parent {
    font-size: 10px;
    font-weight: 400;
    color: rgba(255,255,255,.72);
    line-height: 1.15;
    margin: 0;
    padding-right: 78px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-card__parent strong { font-weight: 600; color: rgba(255,255,255,.92); }

/* Badge that's actually a clickable button — looks the same, behaves
 * like a link/filter trigger. */
button.mc-badge-link {
    border: none;
    font-family: inherit;
    cursor: pointer;
    transition: filter .12s, transform .08s;
}
button.mc-badge-link:hover { filter: brightness(1.15); }
button.mc-badge-link:active { transform: scale(.96); }
button.mc-badge-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

/* Toast (coupon copied confirmation) */
#mc-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(20,20,20,.95);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    /* width:auto + left:50% (no `right`) shrink-to-fits against only half
     * the viewport, so longer messages wrap to 2 lines on narrow screens
     * even though the box itself is visually re-centered by the transform —
     * max-content avoids that artificial narrowing. */
    width: max-content;
    max-width: calc(100vw - 32px);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
}
#mc-toast.mc-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Detail modal (lupa) — pushState swaps the URL, this overlay shows the
 * same markup the real page renders, without leaving the catalog/favorites/
 * library page underneath. ──────────────────────────────────────────────── */
body.mc-modal-open { overflow: hidden; }
#mc-detail-modal-overlay {
    position: fixed; inset: 0;
    z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s;
}
#mc-detail-modal-overlay.mc-detail-modal-overlay--visible {
    opacity: 1;
    visibility: visible;
}
#mc-detail-modal {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--mc-bg);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
#mc-detail-modal .mc-detail { margin: 0 auto; padding: 14px; }
/* The hero's height was tuned for a full standalone page — inside the
 * modal it was eating most of the 90vh budget before the spec table even
 * started, forcing a scrollbar almost regardless of how compact the table
 * below got. Shorter here only; the real page keeps the taller hero. */
#mc-detail-modal .mc-detail__hero { min-height: clamp(130px, 16vw, 170px); margin-bottom: 12px; }
#mc-detail-modal .mc-detail__hero-content { padding: 14px 16px 12px; }
#mc-detail-modal .mc-detail__hero-title { font-size: 20px; margin-bottom: 6px; }
#mc-detail-modal .mc-detail__hero-rating,
#mc-detail-modal .mc-detail__hero-modes,
#mc-detail-modal .mc-detail__hero-genres { font-size: 12px; margin-bottom: 4px; }
#mc-detail-modal .mc-detail__hero-actions { margin-top: 8px; }
/* Same idea for the spec table and the "Similares" row added afterwards —
 * tighter padding/margins so the modal has a fighting chance of fitting
 * everything in 90vh without a scrollbar. */
#mc-detail-modal .mc-detail__meta-table th,
#mc-detail-modal .mc-detail__meta-table td { padding: 3px 10px; font-size: 12px; }
#mc-detail-modal .mc-detail__parent-game { margin: 8px 0 8px; }
#mc-detail-modal .mc-detail__parent-game-grid .mc-card__image-wrap { padding-top: 0; height: 260px; }
#mc-detail-modal .mc-detail__similar { margin: 8px 0 8px; }
#mc-detail-modal .mc-detail__similar-title { margin-bottom: 8px; font-size: 14px; line-height: 1.3; }
/* Modal similar cards get a slightly shorter image to fit 90vh */
#mc-detail-modal .mc-detail__similar-grid .mc-card__image-wrap { padding-top: 48%; }
#mc-detail-modal-close {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 2;
    width: 32px; height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
#mc-detail-modal-close:hover { background: rgba(0,0,0,.75); }
@media (max-width: 700px) {
    #mc-detail-modal-overlay { padding: 0; }
    #mc-detail-modal { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
}

/* Top-RIGHT: rating badge only */
.mc-card__rating-badge {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    padding: 3px 8px; border-radius: 5px;
    font-size: 11px; font-weight: 500;
    /* No backdrop-filter: this badge exists on every card with a rating
     * (almost all of them) — one GPU-composited blur layer per card, times
     * however many have piled up via infinite scroll, is a reliable way to
     * crash iOS Safari. A slightly more opaque flat background keeps the
     * text just as legible without the compositing cost. */
    background: rgba(0,0,0,.78);
    color: #f5f5f5;
    letter-spacing: .01em;
    border: 1px solid rgba(255,255,255,.12);
}

/* Favorite (heart) toggle — just the silhouette, no chip/background. The
 * drop-shadow on the icon keeps it legible over any cover image, the same
 * way the card title uses a text-shadow instead of a solid backing box.
 * Positioning is contextual (.mc-card__fav-toggle for the card corner,
 * .mc-detail__fav-toggle for the full-width button on the detail page). */
.mc-fav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    padding: 0; border: none; background: transparent;
    cursor: pointer;
    transition: filter .12s, transform .08s;
}
.mc-fav-toggle:hover { filter: brightness(1.25); }
.mc-fav-toggle:active { transform: scale(.92); }
.mc-fav-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.mc-fav-icon {
    width: 17px; height: 17px;
    fill: none; stroke: #f5f5f5; stroke-width: 2;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.75));
    transition: fill .12s, stroke .12s;
}
.mc-fav-toggle--active .mc-fav-icon {
    fill: url(#mc-grad-red); stroke: url(#mc-grad-red);
}

/* Card placement: bottom-right corner of the title/genres overlay, not on
 * top of the cover image — keeps the top-left badge stack uncluttered.
 * Library sits immediately to the left of the heart. */
.mc-card__fav-toggle {
    position: absolute; right: 8px; bottom: 6px; z-index: 1;
}
.mc-card__library-toggle {
    position: absolute; right: 34px; bottom: 6px; z-index: 1;
}
.mc-card__detail-link {
    position: absolute; right: 60px; bottom: 6px; z-index: 1;
}

/* "Ver ficha" — same silhouette/size as the heart and library icons. */
.mc-detail-link {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    padding: 0; border: none; background: transparent;
    cursor: pointer;
    transition: filter .12s, transform .08s;
}
.mc-detail-link:hover { filter: brightness(1.25); }
.mc-detail-link:active { transform: scale(.92); }
.mc-detail-link:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.mc-detail-link-icon {
    width: 15px; height: 15px;
    fill: none; stroke: #f5f5f5; stroke-width: 1.6; stroke-linecap: round;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.75));
}

/* Library (biblioteca) toggle — same silhouette treatment as the heart,
 * but its own icon + color per status so it's never confused with favorites. */
.mc-library-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    padding: 0; border: none; background: transparent;
    cursor: pointer;
    transition: filter .12s, transform .08s;
}
.mc-library-toggle:hover { filter: brightness(1.25); }
.mc-library-toggle:active { transform: scale(.92); }
.mc-library-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.mc-library-icon {
    width: 14px; height: 14px;
    fill: none; stroke: #f5f5f5; stroke-width: 1.6;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.75));
    transition: fill .12s, stroke .12s;
}
.mc-library-toggle[data-status="pending"]   .mc-library-icon { fill: url(#mc-grad-orange); stroke: url(#mc-grad-orange); }
.mc-library-toggle[data-status="playing"]   .mc-library-icon { fill: url(#mc-grad-blue);   stroke: url(#mc-grad-blue); }
.mc-library-toggle[data-status="completed"] .mc-library-icon { fill: url(#mc-grad-purple); stroke: url(#mc-grad-purple); }
.mc-library-toggle[data-status="owned"]      .mc-library-icon,
.mc-library-toggle[data-status="added"]      .mc-library-icon { fill: url(#mc-grad-green); stroke: url(#mc-grad-green); }

/* ── Image overlay: gradient covers genres + title ───────────────────────── */

.mc-card__overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 2;
    overflow: hidden;
    /* NO border-radius here on purpose. This box sits in the MIDDLE of the
     * card (the CTA strip is below it, not the card's actual bottom edge),
     * so it never touches the card's own rounded corner — the parent
     * .mc-card's overflow:hidden already clips the whole card to shape.
     * Rounding this box's corners (tried once) just curves it away from
     * its own straight edge, exposing the card's grey background in the
     * gap between this box and the CTA strip below it. */
    /*
     * Steam-style bar: only as tall as the text, semi-transparent so the
     * art behind shows through. No vertical gradient — that was making
     * the overlay look 2x bigger than it actually was.
     *
     * NO backdrop-filter here on purpose (dropped it — was blur(8px)
     * saturate(110%)): this overlay exists on EVERY single card, and with
     * infinite scroll appending cards with no upper bound, one GPU-
     * composited blur layer per card reliably crashes iOS Safari after
     * enough scrolling ("se ha recargado porque ha habido un problema").
     * A flatter, slightly more opaque background reads almost the same
     * without that cost.
     */
    background: rgba(0,0,0,.78);
    padding: 7px 10px 7px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Title — white text, max 2 lines but compact. Right padding keeps the
 * text from running under the favorite/library toggles in the corner. */
.mc-card__title {
    margin: 0;
    font-family: inherit;
    font-size: 13px; font-weight: 600; line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.55);
    /* The title text is already shortened in PHP to fit one line — this is
     * just a backup clamp in case a narrow card/long word still overflows. */
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* The corner icons sit at a fixed bottom offset inside the overlay, so they
 * land on whichever row is actually last (title alone, or the genres/parent
 * row below it) — only reserve the icons' width on the title when there's
 * no genres/parent row to push them down past it instead. */
.mc-card__title:last-child { padding-right: 78px; }

/* Genres: plain inline text — NO pill/bubble style */
.mc-card__genres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding-right: 78px;
    line-height: 1.2;
}
.mc-genre-chip {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-size: 10px;
    font-weight: 400;
    color: rgba(255,255,255,.65);
    white-space: nowrap;
}
/* Dot separator between genres */
.mc-genre-chip + .mc-genre-chip::before {
    content: '\00B7';   /* · */
    padding: 0 4px;
    color: rgba(255,255,255,.35);
}

/* ── Card footer: only the CTA ───────────────────────────────────────────── */

.mc-card__footer {
    flex-shrink: 0;
    /* No padding — the CTA strip fills the full width edge to edge */
}

/* ── Price block ─────────────────────────────────────────────────────────── */

/* Price block removed — prices live inside the CTA button now */

/* ── CTA strip — price embedded ──────────────────────────────────────────── */

.mc-card__cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px; font-weight: 600; line-height: 1.3;
    color: #fff;
    /* Full-width flat strip across the bottom of the card */
    transition: opacity .14s;
    white-space: nowrap;
}
.mc-card:hover .mc-card__cta { opacity: .88; }

/* Gradient backgrounds — scoped to card CTA only */
.mc-card__cta.mc-btn--store { background: linear-gradient(90deg, var(--mc-primary) 0%, var(--mc-primary) 45%, #7a7a7a 100%); }
.mc-card__cta.mc-btn--free  { background: linear-gradient(90deg, var(--mc-primary) 0%, var(--mc-primary) 42%, var(--mc-free) 100%); }
.mc-card__cta.mc-btn--offer { background: linear-gradient(90deg, var(--mc-primary) 0%, var(--mc-primary) 42%, var(--mc-sale) 100%); }
/* Horizon+ Exclusive: same blue→X shape as --offer above, but blue swapped
 * for red on the near side too — a solid red-family bar instead of
 * blue-fading-to-red, so it reads as visually distinct from a regular
 * store sale at a glance, not just via the badge text. */
.mc-card__cta.mc-btn--horizon-exclusive { background: linear-gradient(90deg, var(--mc-sale) 0%, var(--mc-sale) 42%, #7a7a7a 100%); }

/* Price elements inside the CTA — same size & weight, base price struck through */
.mc-cta-sep   { font-size: 14px; font-weight: 600; margin: 0 3px; opacity: .85; }
.mc-cta-price { font-size: 14px; font-weight: 600; }
.mc-cta-orig  { font-size: 14px; font-weight: 600; text-decoration: line-through; opacity: .85; }
.mc-cta-pct   { font-size: 14px; font-weight: 600; letter-spacing: .02em; }

/* Catalog card CTA: orig/code/price sit in one row with no arrow —
 * explicit margin (instead of relying on the removed separator) so they
 * read as clearly distinct, evenly-spaced groups. No pct here — the corner
 * badge over the image already shows the discount percentage. */
.mc-card__cta .mc-cta-orig { margin-right: 10px; }
/* Long coupon codes were hard-clipped by the card's own overflow:hidden —
 * no ellipsis, just an abrupt cut mid-character. Ellipsis here keeps it a
 * clean cutoff instead; the full code still copies on click regardless
 * (data-coupon on the card <a>, unaffected by what's visually shown). */
.mc-card__cta .mc-cta-code {
    margin-right: 10px;
    display: inline-block; vertical-align: middle;
    max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Generic .mc-btn for the detail page — solid buttons */
.mc-btn {
    display: block; width: 100%; text-align: center; text-decoration: none;
    padding: 9px 12px; border-radius: 7px; border: none;
    font-family: inherit;
    font-size: 13px; font-weight: 700; cursor: pointer; color: #fff;
    transition: opacity .14s, transform .1s; line-height: 1;
    box-sizing: border-box;
}
.mc-btn:hover  { opacity: .9; transform: translateY(-1px); }
.mc-btn--large { padding: 13px 22px; font-size: 15px; border-radius: 9px; }
/* Same gradients already used for the card CTA strip — kept in sync so
 * every "store/free/offer" button looks the same everywhere (account
 * forms, logout, detail-page CTA), not just on catalog cards. */
.mc-btn.mc-btn--store { background: linear-gradient(90deg, var(--mc-primary) 0%, var(--mc-primary) 45%, #7a7a7a 100%); }
.mc-btn.mc-btn--free  { background: linear-gradient(90deg, var(--mc-primary) 0%, var(--mc-primary) 42%, var(--mc-free) 100%); }
.mc-btn.mc-btn--offer { background: linear-gradient(90deg, var(--mc-primary) 0%, var(--mc-primary) 42%, var(--mc-sale) 100%); }
.mc-btn.mc-btn--horizon-exclusive { background: linear-gradient(90deg, var(--mc-sale) 0%, var(--mc-sale) 42%, #7a7a7a 100%); }
/* Modal "Cancelar" — same shape as the other .mc-btn modal action, red→grey
 * so it's visually distinct from "Confirmar" regardless of which color the
 * confirm button is using. */
.mc-btn.mc-btn--cancel { background: linear-gradient(90deg, var(--mc-sale) 0%, var(--mc-sale) 45%, #7a7a7a 100%); }

/* Favorite toggle in the hero actions row — compact outline button, sits
 * inline next to the CTA instead of stacked full-width underneath it. */
.mc-detail__fav-toggle {
    width: auto; height: var(--mc-control-h); flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 18px;
    background: var(--mc-surface);
    border: 1.5px solid #fff;
    color: #fff;
}
.mc-detail__fav-toggle:hover { background: var(--mc-surface-2); }
/* The red→gray fill lives on the BUTTON background when active, not on
 * the heart icon — the heart stays a plain white outline in both states. */
.mc-detail__fav-toggle.mc-fav-toggle--active {
    background: linear-gradient(90deg, var(--mc-sale) 0%, var(--mc-sale) 45%, #7a7a7a 100%);
    border-color: #fff;
    color: #fff;
}
.mc-detail__fav-toggle .mc-fav-icon {
    width: 18px; height: 18px;
    fill: none; stroke: #fff; stroke-width: 1.6;
}
/* Library toggle gets the same compact treatment, plain icon button.
 * box-sizing:border-box is needed explicitly here — this button has no
 * .mc-btn class (unlike the CTA/favorite buttons), so without it the
 * 1.5px border was added on top of the 40px box, making it 3px taller
 * than its siblings. */
.mc-detail__library-toggle {
    width: 40px; height: 40px; flex: 0 0 auto;
    box-sizing: border-box;
    background: var(--mc-surface);
    border: 1.5px solid #fff;
    border-radius: var(--mc-radius);
}
.mc-detail__library-toggle:hover { background: var(--mc-surface-2); }
.mc-detail__library-toggle .mc-library-icon {
    width: 18px; height: 18px;
}
/* [data-status] bumps specificity to match (and, by source order, beat)
 * the global .mc-library-toggle[data-status="x"] .mc-library-icon colour
 * rules above — otherwise those would still win and re-colour the icon. */
.mc-detail__library-toggle[data-status] .mc-library-icon {
    fill: none; stroke: #fff;
}
/* Same idea as the favorite button: the status colour fills the button
 * background (colour→gray, like .mc-btn--cancel), not the icon — the
 * bookmark stays a plain white outline regardless of status. */
.mc-detail__library-toggle[data-status="pending"]   { background: linear-gradient(90deg, #d97706 0%, #d97706 45%, #7a7a7a 100%); }
.mc-detail__library-toggle[data-status="playing"]   { background: linear-gradient(90deg, #4f8ef7 0%, #4f8ef7 45%, #7a7a7a 100%); }
.mc-detail__library-toggle[data-status="completed"] { background: linear-gradient(90deg, #7c3aed 0%, #7c3aed 45%, #7a7a7a 100%); }
.mc-detail__library-toggle[data-status="owned"],
.mc-detail__library-toggle[data-status="added"]      { background: linear-gradient(90deg, #2a9d5c 0%, #2a9d5c 45%, #7a7a7a 100%); }

/* Promo/coupon code chip inside the CTA */
.mc-cta-code {
    font-size: 12px; font-weight: 600;
    background: rgba(255,255,255,.22);
    border-radius: 3px; padding: 1px 6px;
    letter-spacing: .03em;
}

/* Discount % next to the hero price line — was referenced but never had a
 * rule (carried over from the page this replaced). */
.mc-price-pct-badge {
    display: inline-block;
    background: var(--mc-sale);
    color: #fff;
    font-size: 12px; font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    vertical-align: middle;
}

/* ── Quick toggle filters (topbar) ───────────────────────────────────────── */
.mc-quick-toggle {
    height: var(--mc-control-h);
    padding: 0 13px;
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
    background: var(--mc-surface-2);
    color: var(--mc-text-muted);
    font-family: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0;
}
.mc-quick-toggle:hover { border-color: var(--mc-border-hover); color: var(--mc-text); }
/* Oferta active = red */
.mc-quick-toggle.mc-quick-toggle--active {
    background: linear-gradient(90deg, var(--mc-sale) 0%, #f97316 100%);
    color: #fff; border-color: transparent;
    box-shadow: 0 2px 8px rgba(229,56,59,.35);
}
/* Cross-Buy / Horizon+ active = blue→grey gradient */
.mc-quick-toggle--feature.mc-quick-toggle--active {
    background: linear-gradient(90deg, var(--mc-primary) 0%, var(--mc-primary) 45%, #7a7a7a 100%);
    color: #fff; border-color: transparent;
    box-shadow: 0 2px 8px rgba(79,142,247,.35);
}

/* ── Infinite-scroll sentinel + status ───────────────────────────────────── */

#mc-load-more-sentinel {
    height: 1px;          /* invisible row at end of grid */
    width: 100%;
    margin: 0;
    pointer-events: none;
}

#mc-load-more-status {
    text-align: center;
    color: var(--mc-text-muted);
    font-size: 13px;
    padding: 14px 0 6px;
    display: none;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */

/*
 * Pagination div is kept in the DOM so the JS can read its data-* attributes
 * (pages/current) to seed infinite-scroll state. Visually hidden because the
 * infinite scroll replaces the button-row UI.
 */
.mc-pagination {
    display: none;
    justify-content: center; gap: 5px; margin-top: 20px; flex-wrap: wrap;
}
/* If the user disables JS, show the classic pagination as fallback */
.no-js .mc-pagination { display: flex; }
.mc-page-btn {
    height: 34px; min-width: 34px; padding: 0 12px;
    border: 1px solid var(--mc-border); border-radius: 6px;
    background: var(--mc-surface-2); cursor: pointer; font-family: inherit; font-size: 13px;
    transition: background .12s, color .12s, border-color .12s;
    color: var(--mc-text-muted);
}
.mc-page-btn:hover     { border-color: var(--mc-border-hover); color: var(--mc-text); }
.mc-page-btn--active   { background: var(--mc-primary); color: #fff; border-color: var(--mc-primary); }

/* ── Detail page (kept simple — purple accents) ──────────────────────────── */

/* width:100% is required here, not just max-width — .mc-detail is a flex
 * item of #ajax-content-wrap (Salient wraps the whole page in flex columns)
 * and width:auto wasn't resolving to the stretched/available size in this
 * context, so the box rendered at its shrink-to-fit content width instead
 * of filling up to max-width. */
.mc-detail { width: 100%; max-width: 1100px; margin: 28px auto; padding: 0 18px; font-family: 'Montserrat', sans-serif; color: var(--mc-text); }


/* Hero: blurred cover fills the banner, content sits at the bottom — same
 * blur+darken technique as the card overlay, which already proved that a
 * medium-res cover image still looks fine once blurred (it hides exactly
 * the kind of resolution/compression artefacts that would show up sharp). */
.mc-detail__hero {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    /* min-height (not aspect-ratio) so the box still grows for items with
     * more quick-info rows instead of clipping the title — aspect-ratio
     * forced a fixed height regardless of content and cut the title off. */
    min-height: clamp(310px, 34vw, 415px);
    display: flex;
    align-items: flex-end;
    background: #0d0d0d;
    margin-bottom: 28px;
}
.mc-detail__hero-bg {
    position: absolute; inset: -4%;
    width: 108%; height: 108%;
    background-size: cover; background-position: center;
    filter: blur(2px) brightness(.65) saturate(110%);
    transform: scale(1.02);
}
.mc-detail__hero-bg--placeholder {
    background: linear-gradient(135deg, var(--mc-primary-dark), #1e1b4b);
}
/* Crisp (unblurred) dark gradient on top of the blurred cover — stronger
 * at the bottom where the title/text sits, so legibility doesn't depend
 * solely on the blur filter's own brightness(.65). */
.mc-detail__hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.05) 100%);
}
.mc-detail__hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 32px 28px 28px;
}
.mc-detail__hero-title    { font-size: 30px; font-weight: 800; line-height: 1.25; padding: 0; margin: 0 0 10px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.mc-detail__hero-rating   { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 14px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.mc-detail__hero-modes,
.mc-detail__hero-genres   { font-size: 13px; color: rgba(255,255,255,.85); margin-bottom: 6px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.mc-detail__hero-modes span { margin-right: 16px; }
.mc-detail__hero-actions  {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 14px;
}
.mc-detail__hero-actions .mc-btn { width: auto; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; height: var(--mc-control-h); }
.mc-detail__cta .mc-cta-orig { opacity: .7; margin-right: 8px; }
/* Coupon codes can run long (affiliate-generated ones especially) — the
 * hero CTA is a single-line pill, unlike the catalog card, which has more
 * room and reads fine at full length. Ellipsis instead of wrapping/
 * overflowing keeps the button one line and any dashes that DO fit stay
 * visible (plain clipping, not a character-count cutoff that could land
 * mid-word). The full code is still copied on click — see data-coupon on
 * this same <a> in detail.php — so truncating here never loses it. */
.mc-detail__cta .mc-cta-code {
    margin-right: 8px; font-size: .85em;
    display: inline-block; vertical-align: middle;
    max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-detail__cta .mc-cta-price { font-weight: 700; }
.mc-detail__cta .mc-cta-slash { margin: 0 6px; opacity: .6; font-weight: 700; }
.mc-detail__cta .mc-cta-pct { font-weight: 700; opacity: .85; }

@media (max-width: 600px) {
    .mc-detail__hero-content { padding: 22px 18px 20px; }
    .mc-detail__hero-title   { font-size: 22px; }
    .mc-detail__hero-actions { gap: 7px; flex-wrap: nowrap; }
    .mc-detail__hero-actions .mc-btn,
    .mc-detail__hero-actions .mc-detail__cta { flex: 1; padding: 0 10px; font-size: 12px; min-width: 0; }
    .mc-detail__hero-actions .mc-cta-code { max-width: 72px; }
    /* Icon-only here — keeping the "Favoritos" label was taking width away
     * from the CTA, which needs it more (price/code/discount text). */
    .mc-detail__hero-actions .mc-fav-toggle,
    .mc-detail__hero-actions .mc-library-toggle { flex: 0 0 auto; }
    .mc-detail__fav-toggle span { display: none; }
    .mc-detail__fav-toggle { gap: 0; padding: 0 10px; }
}

.mc-detail__meta-table   { width: 100%; border-collapse: collapse; font-size: 13px; }
.mc-detail__meta-table th,
.mc-detail__meta-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--mc-border); }
.mc-detail__meta-table th { width: 160px; color: var(--mc-text-muted); font-weight: 600; white-space: nowrap; }
/* Two columns of label/value pairs on desktop/tablet so a long spec list
 * doesn't force a tall scrollbar inside the modal — tr/tbody become
 * display:contents so their th/td cells flow directly into a 4-track grid
 * (label, value, label, value), same markup, no JS. Mobile keeps the
 * single stacked column — there's no spare width to split there. */
@media (min-width: 700px) {
    .mc-detail__meta-table {
        display: grid;
        grid-template-columns: max-content 1fr max-content 1fr;
        column-gap: 28px;
    }
    .mc-detail__meta-table tbody,
    .mc-detail__meta-table tr { display: contents; }
    .mc-detail__meta-table th { width: auto; }
    /* Long values (idiomas, URL) get the full row instead of being squeezed
     * into a single 1fr column — they'd just wrap onto far more lines than
     * needed and end up taller than the two-column layout was meant to save. */
    .mc-detail__meta-row--wide th { grid-column: 1; }
    .mc-detail__meta-row--wide td { grid-column: 2 / -1; }
}

/* ── "Similares" — up to 4 catalog-sized cards, same genre tag, ranked by
 * popularity. Plain row on desktop/modal; an auto-rotating one-at-a-time
 * slider on mobile instead of squeezing 4 catalog cards into a narrow
 * screen (see initSimilarSlider in catalog.js). ─────────────────────────── */
/* ── Add-on detail page: link back to the base game ──────────────────────── */
.mc-detail__parent-game { margin: 16px 0 16px; }
/* Same real .mc-card as the catalog grid, just the feature badges
 * (Cross-Buy/Horizon+/DLC/offer) and the 3 corner action icons hidden: this
 * card is purely informational ("this is the game X belongs to"), not
 * another set of actions to take. Genres, rating and the price strip stay,
 * same as any other card. Spans the full content width — a fixed image
 * height (not the grid's normal width-relative padding-top:62% ratio)
 * keeps that from also ballooning the image into something enormous;
 * this fixed value works out to roughly double the card's old fixed-width
 * (220px) height. */
.mc-detail__parent-game-grid .mc-card__image-wrap { padding-top: 0; height: 300px; }
.mc-detail__parent-game-grid .mc-card__badges,
.mc-detail__parent-game-grid .mc-card__detail-link,
.mc-detail__parent-game-grid .mc-card__library-toggle,
.mc-detail__parent-game-grid .mc-card__fav-toggle { display: none; }

.mc-detail__similar { margin: 16px 0 16px; }
/* line-height + padding explicit on purpose — Salient gives bare h2/h3
 * elements a big fixed line-height meant for marketing-size headings, and
 * since it's not relative to font-size, just shrinking the font (like the
 * modal override below does) doesn't shrink the inherited line-height —
 * this is what was leaving ~45px of dead air above "Similares". */
.mc-detail__similar-title { font-size: 18px; font-weight: 700; line-height: 1.3; padding: 0; margin: 0 0 16px; color: var(--mc-text); }
.mc-detail__similar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.mc-detail__similar-grid .mc-card__genres,
.mc-detail__similar-grid .mc-card__detail-link,
.mc-detail__similar-grid .mc-card__library-toggle,
.mc-detail__similar-grid .mc-card__fav-toggle,
.mc-detail__similar-grid .mc-card__badges,
.mc-detail__similar-grid .mc-card__rating-badge,
.mc-detail__similar-grid .mc-card__footer { display: none; }
.mc-detail__similar-grid .mc-card { cursor: pointer; }
/* Unlike the main catalog cards, this grid hides the CTA footer — the
 * overlay IS the card's actual bottom edge here, so (unlike the general
 * .mc-card__overlay rule, which deliberately has no radius) it needs to
 * match the card's own rounding, or the backdrop-filter's blur paints as a
 * sharp rect that the card's rounded overflow:hidden then clips unevenly,
 * leaving a sliver of un-darkened image at the corner. */
.mc-detail__similar-grid .mc-card__overlay { padding: 10px 12px; border-radius: 0 0 var(--mc-radius) var(--mc-radius); }
.mc-detail__similar-grid .mc-card__title { padding-right: 10px; font-size: 14px; }
.mc-detail__similar-grid .mc-card__image-wrap { padding-top: 56%; }
@media (max-width: 700px) {
    .mc-detail__similar-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* Hide the scrollbar — this row is meant to read as a slider,
         * not a scrollable list (still swipeable, just no visible track). */
        scrollbar-width: none;
    }
    .mc-detail__similar-grid::-webkit-scrollbar { display: none; }
    .mc-detail__similar-grid .mc-card { flex: 0 0 100%; scroll-snap-align: start; }
}

/* Star utility (kept for detail page) */
.mc-star--full  { color: #f4a435; }
.mc-star--half  { color: #f4a435; }
.mc-star--empty { color: #ddd; }

/* ── Responsive helpers (desktop defaults) ───────────────────────────────── */
/* Row-break inside topbar: forces a new flex row on mobile, invisible on desktop */
.mc-topbar-break { display: none; }
/* Short badge labels (CB, H+): hidden on desktop, shown on mobile */
.mc-txt-short { display: none; }
/* Filter panel header with close button: hidden on desktop */
.mc-filters-header { display: none; }

/* ── Mobile layout (≤ 767px) ─────────────────────────────────────────────── */

@media (max-width: 767px) {

    /* Tighter outer padding — closer to screen edges */
    .mc-catalog { padding: 10px; border-radius: 10px; }

    /* Topbar wraps to 2 rows */
    .mc-topbar { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

    /*
     * Row 1: search + sort
     * DO NOT override .mc-search-wrap flex here — the desktop rule
     * `flex: 1` (= flex: 1 1 0%) lets it share the row with the sort select.
     * Overriding with `flex: 1 1 auto` makes it take 100% width alone.
     */
    .mc-sort-select { width: 120px; }

    /* Row break: forces quick toggles to row 2 */
    .mc-topbar-break { display: block; width: 100%; height: 0; flex-shrink: 0; }

    /* Row 2: quick toggles + filters icon — distribute width evenly */
    .mc-quick-toggle   { flex: 1 1 auto; text-align: center; padding: 0 4px; font-size: 12px; height: 36px; }
    .mc-filters-toggle { flex: 0 0 auto; height: 36px; }
    /* No quick toggles (e.g. [meta_catalog_free]) — "Filtros" shares row 1
     * with the search bar instead of sitting alone on row 2, so it needs
     * to match the search input's height (40px) instead of row 2's 36px. */
    .mc-topbar--solo-filters .mc-filters-toggle { height: var(--mc-control-h); }

    /* Badge short labels on card image: show CB / H+, hide full text */
    .mc-txt-full  { display: none; }
    .mc-txt-short { display: inline; }

    /* Icon legend: dropping the names made the icons meaningless, so keep
     * them — just drop the redundant "Leyenda:" word and tighten everything
     * up so count + icons + names fit on one line instead of wrapping.
     * Tightening the gaps alone isn't enough once the result count grows a
     * digit (e.g. "5637 de 10611" vs "95 de 10611") — the row would still
     * wrap onto 2 lines. Force it to stay on one line and let it scroll
     * horizontally instead, so the layout is consistent regardless of how
     * many digits the count has. */
    .mc-icon-legend-label { display: none; }
    .mc-results-bar {
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mc-results-bar::-webkit-scrollbar { display: none; }
    .mc-icon-legend { font-size: 11px; gap: 5px; flex-wrap: nowrap; flex-shrink: 0; }
    .mc-icon-legend-item { font-size: 11px; gap: 3px; white-space: nowrap; }
    .mc-icon-legend-sep { margin: 0 -1px; }
    .mc-icon-legend-icon { width: 11px; height: 11px; }
    #mc-results-count { font-size: 11px; white-space: nowrap; flex-shrink: 0; }

    /* Card badges: horizontal row instead of vertical stack */
    .mc-card__badges { flex-direction: row; flex-wrap: wrap; gap: 3px; }

    /* Rating badge + favorite/library/detail toggles — smaller on mobile so
     * they don't dominate the card */
    .mc-card__rating-badge { top: 6px; right: 6px; font-size: 10px; padding: 2px 6px; }
    /* Scoped to the card corner buttons specifically — the bare base
     * classes also matched .mc-detail__library-toggle on the product page
     * (same classes, different context), shrinking it out of step with
     * its full-size siblings ("Obtener gratis" / "Favoritos") there. */
    .mc-card__fav-toggle, .mc-card__library-toggle, .mc-card__detail-link { width: 28px; height: 28px; }
    .mc-fav-icon, .mc-library-icon, .mc-detail-link-icon { width: 15px; height: 15px; }
    .mc-card__fav-toggle     { right: 6px; bottom: 4px; }
    .mc-card__library-toggle { right: 38px; bottom: 4px; }
    .mc-card__detail-link    { right: 70px; bottom: 4px; }
    .mc-card__title:last-child { padding-right: 102px; }
    .mc-card__genres, .mc-card__parent { padding-right: 102px; }

    /* Taller card image for better visual weight on small screens */
    .mc-card__image-wrap { padding-top: 72%; }

    /* Smaller CTA strip: 11px fits longer price strings without clipping */
    .mc-card__cta { font-size: 11px; padding: 8px 5px; }
    /* Arrow (→) removed on mobile — saves ~12 px and avoids vertical misalignment */
    .mc-cta-sep   { display: none; }
    .mc-cta-price { font-size: 11px; }
    .mc-cta-orig  { font-size: 11px; }
    .mc-cta-pct   { font-size: 11px; }
    .mc-cta-code  { font-size: 10px; padding: 1px 4px; }
    .mc-card__cta .mc-cta-orig,
    .mc-card__cta .mc-cta-code { margin-left: 5px; margin-right: 5px; }
    .mc-card__cta .mc-cta-code { max-width: 90px; }

    /* Filters button: icon + count only (no "Filtros" text) */
    .mc-filters-toggle span:not(.mc-filter-count) { display: none; }
    /* "Comparar" (library page) is less self-explanatory as a bare icon
     * than the hamburger/share ones next to it — keep its text label. */
    #mc-library-compare-toggle span { display: inline; }
    /* Library toolbar (Filtros/Compartir/Comparar): Filtros and Compartir
     * are icon-only here, so let them hug their own content instead of
     * stretching to an equal third — that used to leave a lone icon
     * floating in a wide, mostly-empty box. Comparar keeps its text label
     * and takes whatever width is left, since it's the toolbar's main
     * action on this page. */
    .mc-library-toolbar .mc-filters-toggle { flex: 0 0 auto; }
    .mc-library-toolbar #mc-library-compare-toggle { flex: 1 1 auto; }

    /*
     * Mobile: hide the Upcoming quick toggle from the topbar so the Filters
     * button stays on row 2 (Upcoming is still accessible via the card badge).
     */
    .mc-quick-toggle--desktop { display: none; }

    /*
     * Mobile filter panel: same inline accordion as desktop
     * (.mc-filters-panel--open), expanding downward below the topbar.
     * Taller max-height since chips wrap onto more lines on narrow screens.
     */
    .mc-filters-panel.mc-filters-panel--open {
        max-height: 1400px;
    }

    /* Card badges: limit width so they don't slip under the rating chip */
    .mc-card__badges {
        max-width: calc(100% - 56px);
    }
}

/* Below 480px the grid drops to a single column (see .mc-catalog-grid above)
 * — cards are full-width with plenty of room, so the CB/H+ abbreviation
 * from the wider 767px mobile range is no longer needed here. */
@media (max-width: 480px) {
    .mc-txt-full  { display: inline; }
    .mc-txt-short { display: none; }
}

/* ── Theme overrides (Salient / any theme) ───────────────────────────────── */
/*
 * Salient and many themes apply `a:hover { color: purple/theme-color }`.
 * Cards are <a> tags, so we need high-specificity overrides to prevent
 * theme styles from leaking in.
 */
.mc-catalog .mc-search-input,
.mc-catalog .mc-sort-select,
.mc-catalog .mc-filters-toggle {
    color: var(--mc-text) !important;
    font-weight: 500 !important;
}
.mc-catalog .mc-search-input::placeholder {
    color: var(--mc-text-muted) !important;
    font-weight: 400 !important;
}

/* Force the icon padding (Salient overrides input[type=search] padding).
 * .mc-library-compare has no icon of its own (no left padding needed) but
 * still needs the same background/border treatment — otherwise it ends up
 * looking like a different control than the search box next to it. */
.mc-catalog .mc-search-wrap .mc-search-input {
    padding-left: 38px !important;
    background: var(--mc-surface-2) !important;
    border: 1px solid var(--mc-border) !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.mc-catalog .mc-library-compare .mc-search-input {
    background: var(--mc-surface-2) !important;
    border: 1px solid var(--mc-border) !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
/* Kill Salient's purple hover/focus on the search box */
.mc-catalog .mc-search-wrap .mc-search-input:hover,
.mc-catalog .mc-library-compare .mc-search-input:hover {
    border-color: var(--mc-border-hover) !important;
    box-shadow: none !important;
}
.mc-catalog .mc-search-wrap .mc-search-input:focus,
.mc-catalog .mc-library-compare .mc-search-input:focus {
    border-color: var(--mc-primary) !important;
    box-shadow: 0 0 0 3px var(--mc-primary-light) !important;
}
/* Ensure the icon sits above the input and never gets covered */
.mc-catalog .mc-search-wrap .mc-search-icon {
    z-index: 2;
}
/* Hide native search clear/decoration that themes may add */
.mc-catalog .mc-search-input::-webkit-search-decoration,
.mc-catalog .mc-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
/* Force sort option text to be legible (white in dark mode) */
.mc-catalog .mc-sort-select option {
    background: var(--mc-surface-2);
    color: var(--mc-text);
}

/*
 * ── Salient theme override ────────────────────────────────────────────────
 * Salient applies theme-color to all <a> on hover/focus.
 * We block it at every level with high-specificity rules.
 */
.mc-catalog a.mc-card,
.mc-catalog a.mc-card:link,
.mc-catalog a.mc-card:visited,
.mc-catalog a.mc-card:hover,
.mc-catalog a.mc-card:focus,
.mc-catalog a.mc-card:active {
    color: var(--mc-text) !important;
    text-decoration: none !important;
    outline: none !important;
    /* Prevent Salient's box-shadow / border hover overrides */
    -webkit-tap-highlight-color: transparent;
}

/* Every direct child of the card — block theme color inheritance */
.mc-catalog a.mc-card > *,
.mc-catalog a.mc-card:hover > * {
    color: inherit;
}

/* Title always stays white */
.mc-catalog .mc-card .mc-card__title,
.mc-catalog .mc-card:hover .mc-card__title { color: #fff !important; }

/* Genres stay semi-transparent white */
.mc-catalog .mc-card .mc-genre-chip,
.mc-catalog .mc-card:hover .mc-genre-chip { color: rgba(255,255,255,.65) !important; }

/* CTA: gradient background, white text. Override Salient's link color. */
.mc-catalog .mc-card .mc-card__cta,
.mc-catalog .mc-card:hover .mc-card__cta,
.mc-catalog .mc-card .mc-card__cta > *,
.mc-catalog .mc-card:hover .mc-card__cta > * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none !important;
}

/*
 * Restore the strike-through on the original (pre-discount) price.
 * The CTA rule above forces `text-decoration: none` on EVERY child of the
 * CTA, which also kills the line-through on <s class="mc-cta-orig">. This
 * higher-specificity rule (4 classes) wins it back. Both the standard and
 * -webkit- properties are needed for Safari/iOS.
 */
.mc-catalog .mc-card .mc-card__cta .mc-cta-orig,
.mc-catalog .mc-card:hover .mc-card__cta .mc-cta-orig,
.mc-catalog .mc-card .mc-card__cta s.mc-cta-orig {
    text-decoration: line-through !important;
    -webkit-text-decoration: line-through !important;
}

/* ── Account (login / register / reset) ──────────────────────────────────────
 * Everything here uses <div>/<button>, never bare <p>, on purpose — page-
 * builder themes (Salient included) tend to apply generous default margins
 * to raw <p> tags, which stacked with our own spacing and produced huge gaps
 * between fields. Spacing is controlled entirely by this stylesheet instead.
 */

.mc-account-box {
    max-width: 380px;
    /* Vertical margin matters most on the standalone verify/reset/unsubscribe
     * routes (MC_Account) — those render between get_header()/get_footer()
     * with no page template around them, so without this the card sits
     * flush against the menu and footer. */
    margin: 56px auto;
    padding: 28px 26px;
    /* White card on purpose, to stand out against the dark page background —
     * overriding the shared variables here (instead of each rule below)
     * re-themes every descendant that uses them without touching .mc-catalog
     * globally. */
    background: #ffffff;
    box-shadow: 0 10px 34px rgba(0,0,0,.45);
    --mc-text:        #1d2327;
    --mc-text-muted:  #5f6368;
    --mc-surface-2:   #f3f4f6;
    --mc-border:      #d8dadd;
}
/* Salient sets its own font on headings/inputs/buttons, sometimes scoped
 * under a body/container class with enough specificity to beat a plain
 * ".mc-account-box *" rule even with !important. The class repeated 3x is
 * a deliberate specificity-boosting trick (valid CSS — same element, same
 * class, just counted 3 times) to make sure this wins regardless. Narrow
 * selector + only the font-family property, so the blast radius stays
 * contained to this one component. */
.mc-account-box.mc-account-box.mc-account-box,
.mc-account-box.mc-account-box.mc-account-box * {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.mc-account-box h2 {
    margin: 0 0 14px;
    font-size: 19px;
    font-weight: 700;
    color: var(--mc-text);
    line-height: 1.3;
}
.mc-account-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}
.mc-account-tab {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 7px;
    background: var(--mc-surface-2);
    color: var(--mc-text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.mc-account-tab--active {
    background: linear-gradient(90deg, var(--mc-primary) 0%, var(--mc-primary) 45%, #7a7a7a 100%);
    color: #fff;
}

.mc-account-form { display: flex; flex-direction: column; gap: 14px; }
/* Salient's theme CSS has `button[type=submit]{border-radius:2px}` which,
 * thanks to the type-selector bumping its specificity, beats our base
 * .mc-btn{border-radius:7px} on these forms' submit buttons specifically —
 * the extra "button" type-qualifier here restores the intended radius. */
.mc-account-form button.mc-btn { border-radius: 7px !important; }

.mc-account-field { display: flex; flex-direction: column; gap: 6px; }
.mc-account-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mc-text-muted);
}
.mc-account-field-hint {
    font-size: 11px;
    color: var(--mc-text-muted);
    line-height: 1.4;
}
.mc-account-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 7px;
    border: 1px solid var(--mc-border);
    background: var(--mc-surface-2);
    color: var(--mc-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.3;
}
.mc-account-input:focus { outline: 2px solid var(--mc-primary); outline-offset: 1px; }

.mc-account-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 2px;
}
.mc-account-form .mc-btn { width: 100%; padding: 10px 22px; }

.mc-account-msg { font-size: 12px; line-height: 1.4; }
.mc-account-msg--error { color: var(--mc-sale); }
.mc-account-msg--ok    { color: var(--mc-free); }
.mc-account-msg--block { display: block; margin-bottom: 14px; }

.mc-account-footer { margin-top: -2px; }
.mc-account-link {
    color: var(--mc-text-muted);
    font-size: 12px;
    text-decoration: underline;
}

.mc-account-hint {
    color: var(--mc-text-muted);
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 16px;
}

.mc-account-legal {
    color: var(--mc-text-muted);
    font-size: 11px;
    line-height: 1.5;
    margin-top: 14px;
}

.mc-account-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}
.mc-account-consent input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}
.mc-account-consent span {
    font-size: 11px;
    line-height: 1.5;
    color: var(--mc-text-muted);
}
.mc-account-consent a { color: var(--mc-primary); text-decoration: underline; }
.mc-account-greeting { font-size: 14px; margin-bottom: 8px; color: var(--mc-text); }
#mc-logout-btn { margin-top: 4px; }

.mc-account-danger-zone {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--mc-border);
}
.mc-account-danger-zone h3 {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mc-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
/* Text on top, button below — full width so it lines up edge-to-edge with
 * the text above it instead of sitting as a small pill off to the side. */
.mc-account-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--mc-border);
    font-size: 13px;
}
.mc-account-row:last-of-type { border-bottom: none; }
.mc-account-row .mc-link-btn { width: 100%; justify-content: center; }
#mc-account-danger-msg { margin-top: 10px; display: block; }
/* Logout sits outside .mc-account-row, full width like every other button
 * in this card (same height as Desactivar/Borrar todos/Eliminar cuenta —
 * was using .mc-btn before, which has no fixed height and made it shorter). */
#mc-logout-btn { width: 100%; }

/* ── Confirmation modal (replaces native confirm()) ───────────────────────── */

.mc-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
    padding: 20px;
}
.mc-modal-overlay--visible { opacity: 1; visibility: visible; }
.mc-modal-box {
    background: #fff;
    color: #1d2327;
    border-radius: 12px;
    padding: 24px;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 14px 40px rgba(0,0,0,.4);
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.mc-modal-message { margin: 0 0 20px; font-size: 14px; line-height: 1.5; }
.mc-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.mc-modal-actions .mc-btn { width: auto; display: inline-block; }

/* ── Share search dropdown (account page) ─────────────────────────────────── */

.mc-share-results {
    position: absolute;
    /* Inside a .mc-filters-panel, a blanket `div{margin:0 !important}` rule
     * (it kills Salient's own leaking margins on these panels) was zeroing
     * this gap too — `top: calc(100% + Npx)` gets the same visual gap
     * without relying on a margin that can get reset out from under it. */
    top: calc(100% + 4px); left: 0; right: 0;
    z-index: 10;
    background: #fff;
    /* White card on purpose (same trick as .mc-account-box) — re-theme the
     * shared variables locally so every descendant relying on them (the
     * muted "no results" text, the hover background) gets readable dark-on-
     * light colours too, instead of just patching this one rule's own text
     * colour and leaving the rest inheriting the dark theme's light values. */
    color: #1d2327;
    --mc-text:        #1d2327;
    --mc-text-muted:  #5f6368;
    --mc-surface-2:   #f3f4f6;
    --mc-border:      #d8dadd;
    border: 1px solid var(--mc-border);
    border-radius: 7px;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
    max-height: 220px;
    overflow-y: auto;
}
.mc-share-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    font-size: 13px;
    cursor: pointer;
}
.mc-share-result-item:hover { background: var(--mc-surface-2); }
.mc-share-result-empty { padding: 10px 12px; font-size: 12px; color: var(--mc-text-muted); }

/* ── "Mi biblioteca" page ([meta_catalog_biblioteca]) ─────────────────────── */

.mc-library-title { margin: 0 0 14px; font-size: 18px; font-weight: 700; }

/* Row of toggle buttons ("Filtros", "Compartir") that open the collapsible
 * panels below — same look as the catalog's own "Filtros" toggle. */
.mc-library-toolbar { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; }
.mc-library-count-badge { font-size: 13px; color: var(--mc-text-muted); }

/* display:flex + gap (not margin) for the same reason as the dropdown above
 * — .mc-filters-panel forces margin:0 !important on every div/span/input
 * inside it. */
.mc-library-compare { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.mc-library-compare .mc-search-input { width: 100%; }
/* The results dropdown used to float as an absolutely-positioned overlay
 * (like the shared .mc-share-results elsewhere) — but since it doesn't take
 * up space in the layout, the panel's own box stayed input-sized and the
 * floating list ended up overlapping the results bar/grid right below it.
 * Flex column + gap here instead: the dropdown becomes a normal in-flow
 * child, so the panel actually grows taller to contain it. */
.mc-library-compare-search-wrap { display: flex; flex-direction: column; gap: 6px; }
#mc-library-compare-results { position: static; max-height: 260px; }

/* "Compara tu biblioteca…" intro line + the "?" help icon and its tooltip. */
.mc-compare-intro {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--mc-text-muted);
}
.mc-info-icon {
    width: 18px; height: 18px; flex-shrink: 0; padding: 0;
    border-radius: 50%; border: 1px solid var(--mc-border);
    background: var(--mc-surface-2); color: var(--mc-text-muted);
    font-size: 11px; font-weight: 700; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.mc-info-icon:hover, .mc-info-icon:focus-visible {
    border-color: var(--mc-border-hover); color: var(--mc-text); background: rgba(255,255,255,.09);
}
/* position: fixed, placed by catalog.js (not CSS anchoring to the icon) —
 * the panel this lives in has `backdrop-filter: blur()` for its glass
 * effect, and browsers clip a backdrop-filter element's own box to its
 * bounds even with `overflow: visible` set, cutting off anything nested
 * inside that tries to escape it (same root cause as the card-overlay
 * corner clipping fixed earlier). catalog.js also detaches it to a direct
 * child of <body> the first time it's shown, so it's not laid out as a flex
 * item of .mc-compare-intro either — its position comes entirely from the
 * inline top/left it sets, anchored just under the icon. */
.mc-info-tooltip {
    display: none;
    z-index: 60;
    width: 360px; max-width: calc(100vw - 32px);
    padding: 10px 12px; border-radius: 7px;
    background: #fff; color: #1d2327; font-size: 11px; line-height: 1.4;
    box-shadow: 0 8px 20px rgba(0,0,0,.18); border: 1px solid #d8dadd;
}
.mc-info-tooltip--visible { display: block; }

/* "Recientes:" quick-pick chips — same pill look as the active filter chips
 * elsewhere, just lighter (not yet selected, only a shortcut). */
.mc-compare-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.mc-compare-recent-label { color: var(--mc-text-muted); }
.mc-compare-recent-chip {
    height: 24px; padding: 0 10px;
    border: 1px solid var(--mc-border); border-radius: 999px;
    background: rgba(255,255,255,.05); color: var(--mc-text-muted);
    font-family: inherit; font-size: 12px; cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.mc-compare-recent-chip:hover { border-color: var(--mc-border-hover); color: var(--mc-text); background: rgba(255,255,255,.09); }

/* Chips for the users queued up to compare, plus the "Comparar" button —
 * sit below the search input, growing the box as needed instead of the
 * fixed narrow width that only ever had to fit one search field. */
.mc-compare-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-compare-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 6px 0 12px;
    border-radius: 999px;
    /* Same blue→gray gradient as every other primary button/badge on the
     * site (.mc-btn--store, .mc-link-btn--primary…) instead of flat blue. */
    background: linear-gradient(90deg, var(--mc-primary) 0%, var(--mc-primary) 45%, #7a7a7a 100%);
    color: #fff;
    font-size: 12px; font-weight: 600;
}
.mc-compare-chip-remove {
    width: 18px; height: 18px;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,.2);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
}
.mc-compare-chip-remove:hover { background: rgba(255,255,255,.35); }
#mc-library-compare-btn { width: 100%; }

/* Same visual language as the catalog's .mc-chip, but its own class so the
 * library's single-select (radio-style) behaviour never collides with the
 * catalog's global multi-select .mc-chip click handler. */
.mc-library-chip {
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--mc-border);
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    color: var(--mc-text-muted);
}
.mc-library-chip:hover    { border-color: var(--mc-border-hover); color: var(--mc-text); background: rgba(255,255,255,.09); }
.mc-library-chip--active,
.mc-library-chip--active:hover {
    background: linear-gradient(90deg, var(--mc-primary) 0%, var(--mc-primary) 45%, #7a7a7a 100%);
    color: #fff; border-color: transparent;
    box-shadow: 0 2px 8px rgba(79,142,247,.35);
}

/* Guardar/Cancelar row under the username field — flex:1 so a lone
 * "Guardar" (no username set yet, so no Cancelar to pair with) stretches
 * full width like every other button on this page, instead of sitting at
 * its own short content-width. */
.mc-username-actions { display: flex; gap: 8px; margin-top: 6px; }
.mc-username-actions .mc-link-btn { flex: 1; }

/* ── Shared button look for "Generar/Copiar/Regenerar enlace" — same shape
 * as the tabs above so every control on this page matches. ───────────────── */
.mc-link-btn {
    height: var(--mc-control-h);
    padding: 0 16px;
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-border);
    background: var(--mc-surface-2);
    color: var(--mc-text);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.mc-link-btn:hover { border-color: var(--mc-border-hover); color: var(--mc-text); opacity: .95; }
.mc-link-btn--primary {
    background: linear-gradient(90deg, var(--mc-primary) 0%, var(--mc-primary) 45%, #7a7a7a 100%);
    color: #fff; border-color: transparent;
    box-shadow: 0 2px 8px rgba(79,142,247,.35);
}
.mc-link-btn--primary:hover { opacity: .9; }
.mc-link-btn--danger {
    background: linear-gradient(90deg, var(--mc-sale) 0%, var(--mc-sale) 45%, #7a7a7a 100%);
    color: #fff; border-color: transparent;
    box-shadow: 0 2px 8px rgba(229,56,59,.35);
}
.mc-link-btn--danger:hover { opacity: .9; }

/* Comparison header: the stats line + "Volver" share the row 50/50, edge
 * to edge, instead of a plain text line next to a small link. */
.mc-library-shared-header { gap: 10px; }
.mc-library-shared-header .mc-link-btn { flex: 1; text-align: center; }
/* The stats line can run long ("En común con X: N de M (tuyos)...") —
 * let it wrap instead of clipping like a normal single-line button. */
#mc-library-shared-title {
    height: auto;
    min-height: var(--mc-control-h);
    white-space: normal;
    padding: 8px 16px;
}

/* Theme form styles bleed into readonly inputs outside .mc-account-box
 * (which has its own white-card override) — force the dark-theme colors. */
#mc-library-share-link {
    color: var(--mc-text) !important;
    background: var(--mc-surface-2) !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: var(--mc-radius) !important;
}

/* Wrapper stays out of the grid's box flow (its card child IS the grid
 * item) so toggling its display hides/shows that card for the tab filter. */
.mc-library-card-wrap { display: contents; }
.mc-library-card-wrap[data-hidden="1"] { display: none; }

@media (max-width: 640px) {
    .mc-library-compare { flex-basis: auto; }
}

/* Let the share-link box fill the panel (minus its own padding) instead of
 * being capped to a narrow column — more of the URL is visible at a glance. */
.mc-filters-panel .mc-account-field { width: 100%; max-width: none; }

/* "Generar enlace para compartir" (shown before any link exists yet) sits
 * outside .mc-account-field, so it didn't inherit the width:100% above and
 * stayed shrink-wrapped to its own label — narrower than the hint text
 * right above it. Match that text's width like every other primary action
 * in these panels (#mc-library-compare-btn already does the same). */
#mc-create-library-link-btn { width: 100%; }

/* "Copiar enlace" / "Generar otro enlace" (shown once a link already
 * exists) — same shrink-wrap problem as the button above: their row div
 * has no flex-grow of its own, so together they sat narrower than the
 * link input above them instead of spanning its full width. */
#mc-copy-library-link-btn, #mc-regen-library-link-btn { flex: 1 1 0; }

/* ── Status picker (3 botones por viñeta) — solo en "Mi biblioteca" ──────── */

.mc-card__status-picker {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    /* Default cross-axis behaviour (stretch) makes every button match
     * whichever one in the row ends up tallest — with a single "Comprado"
     * button vs a row of 3, that comparison point keeps moving depending
     * on padding/line-height roundoff. Pin to each button's own natural
     * height instead, so 1-button and 3-button rows are never compared. */
    align-items: flex-start;
    gap: 4px;
    padding: 7px 8px;
    background: var(--mc-surface-2);
    border-top: 1px solid var(--mc-border);
}
.mc-status-btn {
    flex: 1;
    min-width: 0;
    min-height: 26px;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 600;
    /* <button> (the 3-state row) and <span> ("Comprado") inherit line-height
     * differently in most browsers — form controls get their own UA default
     * instead of the page's inherited value, spans don't. That mismatch was
     * the real source of the height difference, independent of padding. */
    line-height: 1.2;
    padding: 8px 2px;
    border: 1px solid var(--mc-border);
    border-radius: 6px;
    background: transparent;
    color: var(--mc-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mc-status-btn:hover { border-color: var(--mc-border-hover); color: var(--mc-text); }
/* Each status gets its own gradient (still blue→grey as the fallback/base —
 * "En curso" effectively uses it as-is). */
.mc-status-btn--active,
.mc-status-btn--active:hover {
    background: linear-gradient(90deg, var(--mc-primary) 0%, var(--mc-primary) 45%, #7a7a7a 100%);
    border-color: transparent; color: #fff;
}
.mc-status-btn[data-status="pending"].mc-status-btn--active,
.mc-status-btn[data-status="pending"].mc-status-btn--active:hover {
    background: linear-gradient(90deg, #d97706 0%, #d97706 45%, #7a7a7a 100%);
}
.mc-status-btn[data-status="completed"].mc-status-btn--active,
.mc-status-btn[data-status="completed"].mc-status-btn--active:hover {
    background: linear-gradient(90deg, #7c3aed 0%, #7c3aed 45%, #7a7a7a 100%);
}
.mc-status-btn--owned,
.mc-status-btn--owned:hover {
    cursor: default;
    background: linear-gradient(90deg, var(--mc-free) 0%, var(--mc-free) 45%, #7a7a7a 100%);
    border-color: transparent; color: #fff;
}
/* Same padding as the 3-button pending/playing/completed row (.mc-status-btn's
 * own base value) — now that the specificity fight below is actually won,
 * matching it exactly is what makes the two rows line up. A plain
 * !important rule wasn't winning on its own — Salient likely has its own
 * !important button-sizing rule loaded after ours, and ties between two
 * !important declarations are broken by specificity, not load order. The
 * repeated-class chain below boosts specificity (0,3,0) without needing an
 * ID, same trick already used for .mc-account-box's font-family fix. */
span.mc-status-btn--owned.mc-status-btn--owned.mc-status-btn--owned {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 2px !important;
    line-height: 1.2 !important;
}
/* Comparison view: the other person's status for a shared game — a full
 * row of its own, same button shape as the picker above it, colored by
 * their status. Not interactive (it's their account, not the visitor's). */
.mc-status-theirs-btn,
.mc-status-theirs-btn:hover {
    flex: 0 0 100%;
    margin-top: 4px;
    cursor: default;
    border-color: transparent;
    color: #fff;
}
.mc-status-theirs-btn[data-status="pending"]   { background: linear-gradient(90deg, #d97706 0%, #d97706 45%, #7a7a7a 100%); }
.mc-status-theirs-btn[data-status="playing"]   { background: linear-gradient(90deg, var(--mc-primary) 0%, var(--mc-primary) 45%, #7a7a7a 100%); }
.mc-status-theirs-btn[data-status="completed"] { background: linear-gradient(90deg, #7c3aed 0%, #7c3aed 45%, #7a7a7a 100%); }
.mc-status-theirs-btn[data-status="owned"],
.mc-status-theirs-btn[data-status="added"]     { background: linear-gradient(90deg, var(--mc-free) 0%, var(--mc-free) 45%, #7a7a7a 100%); }