/* ===================================================================
 * vb-custom.css — Estilos custom de Voleiboleando
 *
 * Editable en: WP Admin → Apariencia → Editor de archivos del tema
 *              → Voleiboleando Child → assets/css/vb-custom.css
 * O por SFTP:  wp-content/themes/voleiboleando-child/assets/css/vb-custom.css
 *
 * Cargado desde vb-custom.php con prioridad 30 después de vb-theme.
 * Cada SECCIÓN es independiente, edita o comenta lo que quieras.
 * =================================================================== */

/* ─────────────────────────────────────────────────────────────────
 * SECCIÓN 1 — TARJETAS PRODUCTO PEQUEÑAS: 100% blanco limpio
 * Override con body. para ganar especificidad sin lugar a dudas.
 * Eliminamos cualquier gradient/pseudo-element residual.
 * ──────────────────────────────────────────────────────────────── */
body .prod-card,
body .vb-prod-card {
    background: #ffffff !important;
    border: 1px solid var(--vb-gray-200, #e5e7eb) !important;
}
body .prod-card .img,
body .vb-prod-card .img,
body .prod-img,
body .featured-product .img,
body .related-card .img {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid var(--vb-gray-200, #e5e7eb) !important;
    position: relative !important;
}
body .prod-card .img::before,
body .prod-card .img::after,
body .vb-prod-card .img::before,
body .vb-prod-card .img::after {
    display: none !important;
    content: none !important;
}
/* Imagen dentro del contenedor — sin mix-blend-mode (causaba tintes raros) */
body .prod-card .img img,
body .vb-prod-card .img img,
body .related-card .img img {
    mix-blend-mode: normal !important;
    background: transparent !important;
    object-fit: contain !important;
}

/* ─────────────────────────────────────────────────────────────────
 * SECCIÓN 2 — WIDE CARDS (.prod-review): rediseño limpio
 * Eliminamos:
 *   · El número decorativo gigante ::before (#04, #05, etc.)
 *   · Los fondos bone/cream de tags y specs
 *   · El padding excesivo
 * Añadimos:
 *   · Imagen sobre fondo blanco
 *   · Tags con borde gris claro (no bone)
 *   · Specs con fondo gris muy claro y borde sutil
 *   · Layout más respirado
 * ──────────────────────────────────────────────────────────────── */
body .prod-review {
    padding: 28px !important;
    border-radius: 12px !important;
    margin-bottom: 28px !important;
}
/* Grid se aplica al .prod-grid-2 (hijo directo), no al .prod-review.
   Si el .prod-review no tiene .prod-grid-2 dentro (estructura legacy),
   entonces se le aplica el grid al propio .prod-review como fallback. */
body .prod-review .prod-grid-2 {
    display: grid !important;
    grid-template-columns: minmax(160px, 240px) 1fr !important;
    gap: 24px !important;
    align-items: start !important;
}
body .prod-review:not(:has(.prod-grid-2)) {
    display: grid !important;
    grid-template-columns: minmax(160px, 240px) 1fr !important;
    gap: 24px !important;
    align-items: start !important;
}
@media (max-width: 640px) {
    body .prod-review .prod-grid-2,
    body .prod-review:not(:has(.prod-grid-2)) {
        grid-template-columns: 1fr !important;
    }
    body .prod-review .img-box {
        max-width: 220px !important;
        margin: 0 auto !important;
    }
}
body .prod-review .img-box {
    aspect-ratio: 1 / 1 !important;
    max-width: 240px !important;
    width: 100% !important;
    height: auto !important;
}
body .prod-review .img-box img {
    width: 100% !important;
    height: 100% !important;
    max-height: 240px !important;
    object-fit: contain !important;
    padding: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════
 * GRIDS RESPONSIVE SIN @media (compatibles con LiteSpeed combine)
 * Usan auto-fit + minmax para que se adapten solos.
 * ═════════════════════════════════════════════════════════════ */

/* Home — Top ventas 2026 (8 productos) */
.vb-top8-slider {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    margin: 24px 0 !important;
}
.vb-slider-card {
    background: #fff;
    border: 1px solid #e5e9f2;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    color: #111 !important;
    transition: all .2s;
    display: flex;
    flex-direction: column;
}
.vb-slider-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    border-color: #d8dde7;
}
.vb-slider-img {
    aspect-ratio: 1/1;
    background: linear-gradient(135deg, #f7f9fc 0%, #eef3f9 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 14px;
}
.vb-slider-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vb-slider-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.vb-slider-brand { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #6b7280; text-transform: uppercase; }
.vb-slider-name { font-size: 15px; font-weight: 700; line-height: 1.3; color: #111; min-height: 40px; margin: 4px 0; }
.vb-slider-meta { font-size: 12px; color: #6b7280; }
.vb-slider-price { font-size: 22px; font-weight: 800; color: #ea580c; margin: 8px 0 10px; }
.vb-slider-cta { margin-top: auto; }
.vb-slider-cta .btn { width: 100%; text-align: center; display: inline-block; padding: 10px 14px; font-size: 13px; font-weight: 700; border-radius: 8px; }
.vb-slider-review { display: block; margin-top: 10px; font-size: 12px; color: #0d4a8d; font-weight: 600; text-decoration: none; text-align: center; }
.vb-slider-review:hover { text-decoration: underline; }

/* Hub /balones-voleibol/ — filtros + grid */
.vb-balon-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 28px; overflow-x: auto; padding-bottom: 4px; }
.vb-chip { background: #fff; border: 1px solid #e5e9f2; color: #4b5563; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; }
.vb-chip:hover { background: #f7f9fc; }
.vb-chip.active { background: #1f2d4d; color: #fff; border-color: #1f2d4d; }

.vb-balon-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 18px !important;
    margin: 24px 0 !important;
}
.vb-balon-card {
    background: #fff;
    border: 1px solid #e5e9f2;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    flex-direction: column;
}
.vb-balon-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.08); border-color: #d8dde7; }
.vb-balon-img { aspect-ratio: 1/1; background: linear-gradient(135deg, #f7f9fc 0%, #eef3f9 100%); display: flex; align-items: center; justify-content: center; padding: 14px; }
.vb-balon-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vb-balon-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.vb-balon-brand { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #6b7280; text-transform: uppercase; }
.vb-balon-name { font-size: 16px !important; font-weight: 700 !important; margin: 4px 0 !important; line-height: 1.3 !important; color: #111827 !important; min-height: 42px; }
.vb-balon-meta { font-size: 12px; color: #6b7280; }
.vb-balon-rating { color: #f5a623; font-weight: 600; }
.vb-balon-nivel { font-size: 12px; color: #4b5563; margin: 4px 0; }
.vb-balon-price { font-size: 22px; font-weight: 800; color: #ea580c; margin: 10px 0 12px; }
.vb-balon-buttons { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.vb-balon-buttons .btn { flex: 1 1 80px; }
.vb-card-review { display: block; text-align: center; margin-top: 10px; font-size: 12px; color: #0d4a8d; text-decoration: none; font-weight: 600; }
.vb-card-review:hover { text-decoration: underline; }

/* Versus cards — comparativas */
.vb-versus-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    margin: 24px 0 !important;
}
.vb-versus-card { background: #fff; border: 1px solid #e5e9f2; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.vb-versus-img { aspect-ratio: 4/3; background: linear-gradient(135deg,#f7f9fc,#eef3f9); display:flex; align-items:center; justify-content:center; padding:24px; }
.vb-versus-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vb-versus-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.vb-versus-tag { display: inline-block; background: #1f2d4d; color: #fff; font-size: 11px; padding: 4px 10px; border-radius: 999px; align-self: flex-start; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.vb-versus-body h3 { font-size: 24px !important; margin: 4px 0 !important; line-height: 1.2 !important; font-weight: 800 !important; }
.vb-versus-pitch { color: #4b5563; font-size: 14px; line-height: 1.55; margin: 0; }
.vb-versus-specs { list-style: none; padding: 0; margin: 0; font-size: 13px; color: #4b5563; }
.vb-versus-specs li { padding: 8px 0; border-bottom: 1px solid #f0f3f9; }
.vb-versus-specs li:last-child { border-bottom: none; }
.vb-versus-price { font-size: 32px; font-weight: 800; color: #ea580c; margin: 4px 0; }
.vb-versus-buttons { display: flex; gap: 10px; }
.vb-versus-buttons .btn { flex: 1; text-align: center; padding: 12px 16px; font-weight: 700; border-radius: 8px; }
.vb-versus-review { display: block; text-align: center; font-size: 13px; color: #0d4a8d; text-decoration: none; font-weight: 600; margin-top: 6px; padding-top: 8px; border-top: 1px solid #f0f3f9; }
.vb-versus-review:hover { text-decoration: underline; }

/* Mini productos (como-elegir-balon) — 2x2 desktop, slider horizontal móvil */
.vb-productos-cta { background: #f7f9fc; border-radius: 12px; padding: 28px; margin: 32px 0; }
.vb-productos-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin-top: 16px !important;
}
.vb-producto-mini { background: #fff; border: 1px solid #e5e9f2; border-radius: 10px; padding: 14px; display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; }
.vb-producto-mini img { width: 90px; height: 90px; object-fit: contain; border-radius: 6px; background: #fafbfc; padding: 6px; }
.vb-producto-mini h4 { font-size: 15px !important; margin: 0 0 4px !important; font-weight: 700 !important; line-height: 1.25 !important; }
.vb-mini-nivel { font-size: 13px; color: #6b7280; margin: 0 0 8px; }
.vb-mini-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.vb-mini-buttons .btn { flex: 1 1 80px; text-align: center; padding: 7px 10px; font-size: 12px; font-weight: 700; border-radius: 6px; }

/* Slider horizontal en móvil */
@media (max-width: 768px) {
    .vb-productos-cta { padding: 22px 0 22px 16px; }
    .vb-productos-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: 12px !important;
        padding: 4px 16px 14px 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .vb-productos-grid::-webkit-scrollbar { display: none; }
    .vb-productos-grid > .vb-producto-mini {
        flex: 0 0 78%;
        min-width: 78%;
        scroll-snap-align: start;
    }
}

/* Bloque "Dónde comprar al mejor precio" — Amazon + Decathlon */
.vb-buy-block { background: #f7f9fc; border: 1px solid #e5e9f2; border-radius: 12px; padding: 28px 32px 32px; margin: 32px 0; text-align: center; }
.vb-buy-block h2 { margin-top: 0 !important; margin-bottom: 8px !important; }
.vb-buy-intro { color: #5a6478; margin: 0 0 18px; }
.vb-buy-buttons {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
    max-width: 640px !important;
    margin: 0 auto !important;
}
.vb-buy-buttons .btn { text-align: center; padding: 14px 22px !important; font-weight: 700 !important; font-size: 15px !important; border-radius: 8px !important; }

/* ═══════════════════════════════════════════════════════════════
 * BOTONES BASE — estilo coherente (no depender de tema padre)
 * ═════════════════════════════════════════════════════════════ */
a.btn, .btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all .15s;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    line-height: 1.4;
}
a.btn.btn-sm, .btn.btn-sm {
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

/* btn-primary = Amazon naranja */
a.btn.btn-primary,
body a.btn.btn-primary {
    background: #ea580c !important;
    background-color: #ea580c !important;
    color: #fff !important;
    border-color: #ea580c !important;
}
a.btn.btn-primary:hover,
body a.btn.btn-primary:hover {
    background: #c2410c !important;
    background-color: #c2410c !important;
    color: #fff !important;
}

/* btn-decathlon = Azul Decathlon (con estilos base completos para que no dependa de .btn) */
a.btn-decathlon,
a.btn.btn-decathlon,
body a.btn.btn-decathlon,
body a.btn-decathlon {
    display: inline-block !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-align: center !important;
    line-height: 1.4 !important;
    background: #0082C3 !important;
    background-color: #0082C3 !important;
    color: #fff !important;
    border: 1px solid #0082C3 !important;
    transition: all .15s !important;
}
a.btn-decathlon:hover,
a.btn.btn-decathlon:hover,
body a.btn.btn-decathlon:hover,
body a.btn-decathlon:hover {
    background: #006699 !important;
    background-color: #006699 !important;
    color: #fff !important;
    border-color: #006699 !important;
}
a.btn.btn-decathlon.btn-sm,
a.btn-decathlon.btn-sm {
    padding: 8px 12px !important;
    font-size: 12px !important;
}

/* btn-outline = secundario con borde */
a.btn.btn-outline,
body a.btn.btn-outline {
    background: transparent !important;
    color: #1f2d4d !important;
    border: 1px solid #1f2d4d !important;
}
a.btn.btn-outline:hover,
body a.btn.btn-outline:hover {
    background: #1f2d4d !important;
    color: #fff !important;
}

/* Botón Decathlon también en links genéricos a afiliacion.decathlon.es */
a.btn[href*="afiliacion.decathlon.es"],
a.btn-primary[href*="afiliacion.decathlon.es"],
a.buy-mini[href*="afiliacion.decathlon.es"] {
    background: #0082C3 !important;
    background-color: #0082C3 !important;
    color: #fff !important;
    border-color: #0082C3 !important;
}
a.btn[href*="afiliacion.decathlon.es"]:hover,
a.btn-primary[href*="afiliacion.decathlon.es"]:hover,
a.buy-mini[href*="afiliacion.decathlon.es"]:hover {
    background: #006699 !important;
    color: #fff !important;
    border-color: #006699 !important;
}

/* Acciones de producto: Amazon primario + review secundario lado a lado */
.prod-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px !important;
}
.prod-actions .btn {
    flex: 1 1 auto;
    min-width: 140px;
    text-align: center;
}
@media (max-width: 480px) {
    .prod-actions .btn {
        flex: 1 1 100%;
    }
}

/* Cards con estructura simple (no usan .body wrapper).
   Sobrescribe valores del tema padre para que mi <article class="prod-card"> con .prod-card-img
   se pinte como las cards de producto del tema. */
body article.prod-card {
    padding: 0 !important;
    cursor: default !important;
    display: flex !important;
    flex-direction: column !important;
}
body article.prod-card:hover {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
body article.prod-card > * {
    padding-left: 18px;
    padding-right: 18px;
}
body article.prod-card .prod-card-img {
    padding: 0 !important;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #f7f9fc 0%, #eef3f9 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 16px;
}
body article.prod-card .prod-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 14px !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
}
body article.prod-card h3 {
    font-size: 18px !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
}
body article.prod-card .prod-tag {
    font-size: 12px !important;
    color: #6b7280 !important;
    margin: 0 0 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
body article.prod-card > p:not(.prod-tag):not(.prod-price):not(.prod-actions) {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #4b5563 !important;
    margin: 0 0 12px !important;
}
body article.prod-card .prod-price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ea580c !important;
    margin: 8px 0 14px !important;
}
body article.prod-card .prod-actions {
    margin-top: auto !important;
    padding-bottom: 18px !important;
    flex-direction: column !important;
    gap: 8px !important;
}
body article.prod-card .prod-actions .btn {
    flex: 0 0 auto !important;
    width: 100% !important;
}

/* Hero bullets: bullets pegados a la izquierda dentro de bloque centrado */
.ranking-hero .hero-bullets,
.article-hero .hero-bullets,
section.ranking-hero .hero-bullets,
section.article-hero .hero-bullets,
header.ranking-hero .hero-bullets,
header.article-hero .hero-bullets {
    display: inline-block !important;
    text-align: left !important;
    list-style: disc !important;
    padding-left: 1.4em !important;
    margin: 14px auto !important;
}
body .prod-review::before {
    display: none !important;
    content: none !important;
}
body .prod-review .img-box,
body .img-box {
    background: #ffffff !important;
    background-image: none !important;
    border-right: 1px solid var(--vb-gray-200, #e5e7eb) !important;
    border-radius: 8px 0 0 8px !important;
    position: relative !important;
}
body .prod-review .img-box::before,
body .prod-review .img-box::after,
body .img-box::before,
body .img-box::after {
    display: none !important;
    content: none !important;
}
body .prod-review .img-box img,
body .img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
    padding: 16px;
}
/* Pills (entry-level, iniciación, etc.): outline sutil, sin bone */
body .prod-review .tag {
    background: #ffffff !important;
    border: 1px solid var(--vb-gray-200, #e5e7eb) !important;
    color: var(--vb-ink-soft, #4b5563) !important;
}
/* Spec boxes (NIVEL, PESO, TECNO): gris muy claro + border */
body .prod-review .spec {
    background: #f9fafb !important;
    border: 1px solid var(--vb-gray-200, #e5e7eb) !important;
}

/* ─────────────────────────────────────────────────────────────────
 * SECCIÓN 3 — CTA pill "Ver precio →" sobre imagen
 * ──────────────────────────────────────────────────────────────── */
.vb-cta-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(4px);
    color: #111827;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
    transition: background 0.15s, box-shadow 0.15s;
    z-index: 10;
    display: inline-block;
}
.vb-cta-btn:hover {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
    color: #111827;
    text-decoration: none !important;
}

/* ─────────────────────────────────────────────────────────────────
 * SECCIÓN 4 — Truncamiento de nombres a 3 líneas
 * ──────────────────────────────────────────────────────────────── */
.prod-card .name,
.prod-review h2 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    word-break: break-word;
}
.prod-review h2 { line-height: 1.25; }

/* ─────────────────────────────────────────────────────────────────
 * SECCIÓN 4a — Hero centrado en pages top list y category hub
 * Aplica a .ranking-hero y .article-hero estándar para que el copy
 * (eyebrow + h1 + lead) salga centrado tanto en mobile como en PC.
 * ──────────────────────────────────────────────────────────────── */
.wrap.ranking-hero,
section.ranking-hero,
.wrap.article-hero,
section.article-hero {
    text-align: center !important;
}
.wrap.ranking-hero .eyebrow,
.wrap.ranking-hero .article-lead,
.wrap.article-hero .eyebrow,
.wrap.article-hero .article-lead,
section.ranking-hero .eyebrow,
section.ranking-hero .article-lead,
section.article-hero .eyebrow,
section.article-hero .article-lead {
    margin-left: auto !important;
    margin-right: auto !important;
}
.wrap.ranking-hero h1,
.wrap.article-hero h1,
section.ranking-hero h1,
section.article-hero h1 {
    margin-left: auto !important;
    margin-right: auto !important;
}
.wrap.ranking-hero .article-lead,
.wrap.article-hero .article-lead,
section.ranking-hero .article-lead,
section.article-hero .article-lead {
    max-width: 720px;
}

/* ─────────────────────────────────────────────────────────────────
 * SECCIÓN 5a — Icons en .marca-ico de /marcas/ vía CSS background
 * El HTML de /marcas/ tiene <div class="marca-ico"></div> vacíos.
 * Inyectamos el SVG por background-image según href de la marca-card.
 * Para editar el icon, sustituye el SVG dataURI.
 * ──────────────────────────────────────────────────────────────── */
.marca-card .marca-ico {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 60% !important;
}

/* Marcas de balones — icon balón (volleyball). SVG URL-encoded para evitar romper la URL CSS */
.marca-card[href="/mikasa/"] .marca-ico,
.marca-card[href="/molten/"] .marca-ico,
.marca-card[href="/wilson/"] .marca-ico,
.marca-card[href="/tachikara/"] .marca-ico {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F25C2B%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M2%2012c4-2%208-2%2010-2s6%200%2010%202%22%2F%3E%3Cpath%20d%3D%22M12%202c-2%204-2%208-2%2010s0%206%202%2010%22%2F%3E%3Cpath%20d%3D%22M22%2012c-4%202-8%202-10%202s-6%200-10-2%22%2F%3E%3Cpath%20d%3D%22M12%2022c2-4%202-8%202-10s0-6-2-10%22%2F%3E%3C%2Fsvg%3E") !important;
}

/* Marcas de zapatillas — icon zapatilla (sneaker). SVG URL-encoded */
.marca-card[href="/mizuno/"] .marca-ico,
.marca-card[href="/asics/"] .marca-ico,
.marca-card[href="/nike/"] .marca-ico,
.marca-card[href="/adidas/"] .marca-ico {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F25C2B%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2018h20%22%2F%3E%3Cpath%20d%3D%22M3%2018l-1-3%203-2%203-3%204-2%205%201%204%204%201%205%22%2F%3E%3Cpath%20d%3D%22M8%2013l1%202%22%2F%3E%3Cpath%20d%3D%22M11%2011l2%202%22%2F%3E%3Cpath%20d%3D%22M14%209l2%202%22%2F%3E%3C%2Fsvg%3E") !important;
}

/* ─────────────────────────────────────────────────────────────────
 * SECCIÓN 5b — Grid de /marcas/ (.vb-marca-grid)
 * Desktop: 2 columnas. Tablet: 2 columnas. Móvil: 1 columna.
 * Soporta también div:has(> a.marca-card) por si queda algún div sin clase.
 * ──────────────────────────────────────────────────────────────── */
/* IMPORTANTE: NO usar :has() — LiteSpeed CSS combiner lo rompe a ".marca-card)" huérfano */
.vb-marca-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 32px;
}
@media (max-width: 768px) {
    .vb-marca-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .vb-marca-grid > * {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
 * SECCIÓN 5c — Badges de [vb_prod] cards: una sola línea en móvil
 * El shortcode renderiza .vb-prod-featured / .vb-prod-hero con badges
 * tipo "OFICIAL FIVB · BALÓN COMPETICIÓN". En móvil se rompen a 2 líneas.
 * Solución: nowrap + font más pequeño + overflow ellipsis + wrap-row si no cabe.
 * ──────────────────────────────────────────────────────────────── */
.featured-product .badges,
.vb-prod-featured .badges,
.vb-prod-hero .badges,
.featured-product .tags,
.vb-prod-card .tags,
.brand-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
}
.featured-product .badges > *,
.vb-prod-featured .badges > *,
.vb-prod-hero .badges > *,
.featured-product .tags > *,
.vb-prod-card .tags > * {
    white-space: nowrap !important;
    line-height: 1.2 !important;
}
@media (max-width: 480px) {
    .featured-product .badges,
    .vb-prod-featured .badges,
    .vb-prod-hero .badges {
        font-size: 10px !important;
    }
    .featured-product .badges > *,
    .vb-prod-featured .badges > *,
    .vb-prod-hero .badges > * {
        padding: 3px 8px !important;
        font-size: 10px !important;
        letter-spacing: 0.5px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
 * SECCIÓN 5d — Estrellas automáticas antes de "X reseñas"
 * Inyectadas vía JS en vb-custom.php para cards .prod-card / .vb-prod-card
 * que muestren rating numérico sin estrellas.
 * Aquí solo damos estilo a la clase .vb-auto-stars.
 * ──────────────────────────────────────────────────────────────── */
.vb-auto-stars {
    display: inline-flex;
    gap: 1px;
    align-items: center;
    vertical-align: -2px;
    margin-right: 4px;
    color: var(--vb-yellow, #f59e0b);
}
.vb-auto-stars svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.prod-card .rating .vb-auto-stars,
.vb-prod-card .rating .vb-auto-stars {
    margin-right: 6px;
}

/* ─────────────────────────────────────────────────────────────────
 * SECCIÓN 5 — /marcas/ en móvil: 1 columna + sin overflow horizontal
 * Solo aplica al body de la página /marcas/. Para añadir más slugs,
 * incluye selectores adicionales con :is() o body.page-id-XX.
 * ──────────────────────────────────────────────────────────────── */
body.page-template-default.page :is(.brand-grid, .marcas-grid, .grid-brands),
body.page :is([class*="brand-grid"], [class*="brands-grid"]) {
    /* nada por defecto, solo activamos en /marcas/ via JS body class abajo */
}

/* Cuando estemos en /marcas/, el body tendrá class "page-marcas" */
body.page-marcas html,
body.page-marcas {
    overflow-x: hidden !important;
}
@media (max-width: 768px) {
    body.page-marcas .brand-grid,
    body.page-marcas .marcas-grid,
    body.page-marcas .grid-brands,
    body.page-marcas [class*="brand-grid"],
    body.page-marcas [class*="brands-grid"] {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 16px !important;
    }
    body.page-marcas [class*="brand-grid"] > *,
    body.page-marcas .brand-grid > *,
    body.page-marcas .marcas-grid > * {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
 * SECCIÓN 6 — Article-featured-img con imagen real
 * Cuando el placeholder tiene class .vb-has-image (porque le inyectamos
 * un <img>), eliminamos el ::after "Foto · ..." y el ::before gradient
 * para que se vea limpia la foto.
 * ──────────────────────────────────────────────────────────────── */
.article-featured-img.vb-has-image::before,
.article-featured-img.vb-has-image::after {
    display: none !important;
    content: none !important;
}
.article-featured-img.vb-has-image {
    background: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────
 * SECCIÓN 7 — Disclosure afiliados (estilo discreto)
 * Solo aplica si vuelves a meter el bloque <div class="vb-disclosure">
 * en alguna página manualmente. Por defecto no se inyecta.
 * ──────────────────────────────────────────────────────────────── */
.vb-disclosure {
    background: #f9fafb;
    border-left: 3px solid #d1d5db;
    padding: 10px 14px;
    margin: 0 0 24px 0;
    border-radius: 4px;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
}
.vb-disclosure small { font-size: 13px; }