/**
 * Solira — HOJA DE VISTA PREVIA (Nivel 2). NO se sirve a ningún visitante.
 * =====================================================================
 * Sólo se encola cuando el usuario es ADMINISTRADOR **y** la URL lleva
 * ?sol_preview=1 (ver peptide_theme_preview_active() en functions.php).
 * La doble llave es deliberada: la sesión de administrador hace bypass de
 * Varnish, así que esta hoja no puede quedarse cacheada ni servirse a un
 * anónimo por accidente. Gatearla sólo por parámetro de URL sí tendría ese
 * riesgo, porque la URL con parámetro se cachea como objeto propio.
 *
 * Qué propone (plan a+b+c del análisis de competencia, §5.5):
 *   a) UN SOLO azul de interfaz, y que sea el de la banda del vial (#4980CC).
 *      Antes había dos cianes haciendo el mismo trabajo (#22D3EE con 54 usos
 *      y #0EA5E9 con 8) y ninguno se parecía al producto: el acento estaba a
 *      46° de tono y dE 22.4 de la banda impresa. El de la pantalla y el que
 *      el cliente tiene en la mano no eran el mismo color.
 *   b) El VERDE sólo para estado, con dos valores en vez de siete.
 *   c) Fuera el ámbar, y cajas neutras: el color se reserva para el estado.
 *
 * ⚠️ Esto es una PROPUESTA para mirar, no la implementación. Lleva !important
 * por todas partes porque tiene que ganarle al override inline de Astra, que
 * carga al final. Al promocionarla a producción, los valores van a los tokens
 * de :root en style.css y estos !important NO deben viajar con ellos.
 */

/* ---------------------------------------------------------------------
 * a) Un solo azul. La mayor parte del trabajo la hacen los tokens: hay 147
 *    usos de var(--color-teal) y 22 de var(--color-teal-dark) en style.css,
 *    así que redefinirlos aquí reapunta casi toda la interfaz de una vez.
 *    Los nombres siguen diciendo "teal" a propósito: renombrarlos es parte de
 *    la promoción a producción, no de la vista previa.
 * ------------------------------------------------------------------- */
:root {
    --color-teal: #4980CC;            /* era #22D3EE — ahora ES la banda del vial */
    --color-teal-dark: #3A6BB0;       /* era #0EA5E9 — paso oscuro del MISMO azul, para hover */
    --color-teal-glow: rgba(73, 128, 204, 0.15);
    --color-blue-accent: #4980CC;     /* era #4A90C4 */
    --color-blue-ruo: #4980CC;        /* era #3B7DD8 */

    /* b) El verde de estado: dos valores, no siete. */
    --sol-state-green: #157F3D;       /* absorbe #16A34A, #15803D, #166534 */
    --sol-state-green-tint: #F2F8F4;  /* absorbe #DCFCE7, #F0FDF4 */
    --sol-state-green-line: #D7E9DD;  /* absorbe #BBF7D0, #86EFAC */
    --color-success: #157F3D;
}

/* Los hexes que no pasaban por token y por eso se escapaban del sistema. */
.sol-variation-pill.is-available.is-active:hover {
    background-color: #4980CC !important;
    border-color: #4980CC !important;
}
.sol-variation-pill.is-unavailable.is-active:hover { border-color: #4980CC !important; }
.sol-hero__title-accent   { background: linear-gradient(135deg, #4980CC 0%, #6FA0DC 100%) !important; }
.sol-promo                { background: linear-gradient(90deg, #3A6BB0 0%, #4980CC 100%) !important; }
.sol-shipping-bar__fill   { background: linear-gradient(90deg, #4980CC 0%, #6FA0DC 100%) !important; }

/* El azul medio SÍ admite texto blanco (4.0:1). El cian claro no llegaba
 * (1.81:1) y por eso el CTA principal llevaba letra navy: era un botón claro
 * con letra oscura mientras el producto era un azul medio. Botón sólido. */
.single_add_to_cart_button,
.sol-btn:not(.sol-btn--ghost):not(.sol-btn--outline):not(.sol-btn--secondary),
.sol-empty-cart__btn,
.checkout-button {
    background: #4980CC !important;
    background-image: none !important;
    border-color: #4980CC !important;
    color: #FFFFFF !important;
}
.single_add_to_cart_button:hover,
.sol-btn:not(.sol-btn--ghost):not(.sol-btn--outline):not(.sol-btn--secondary):hover,
.sol-empty-cart__btn:hover,
.checkout-button:hover {
    background: #3A6BB0 !important;
    border-color: #3A6BB0 !important;
    color: #FFFFFF !important;
}

/* ---------------------------------------------------------------------
 * b) Verde = estado, y nada más. "In stock", "descuento aplicado" y
 *    "pedido verificado" son estados reales y el verde se los ha ganado.
 *    Siete verdes para eso, no.
 * ------------------------------------------------------------------- */
.sol-badge--in-stock,
.sol-wholesale__save {
    background: var(--sol-state-green-tint) !important;
    color: var(--sol-state-green) !important;
    border-color: var(--sol-state-green-line) !important;
}
.sol-product__instock,
.sol-product__instock svg,
.sol-sp__icon,
.sol-sp__verified {
    color: var(--sol-state-green) !important;
}
.sol-sp { border-left-color: var(--sol-state-green) !important; }

.sol-tier__row--save {
    background: var(--sol-state-green-tint) !important;
    border-color: var(--sol-state-green-line) !important;
    border-left-color: var(--sol-state-green) !important;
}
.sol-tier__row--save .sol-tier__qty,
.sol-tier__row--save .sol-tier__price { color: var(--sol-state-green) !important; }
.sol-tier__auto { background: var(--sol-state-green) !important; }
.sol-shipping-bar.is-unlocked .sol-shipping-bar__fill { background: var(--sol-state-green) !important; }

/* ---------------------------------------------------------------------
 * c) Fuera el ámbar, y cajas neutras.
 *    "No reseller markup" era el único ámbar de la página, estaba pegado al
 *    precio y era lo más ruidoso de la primera pantalla — siendo una
 *    AFIRMACIÓN, no un estado. Una afirmación no debería parecer un aviso.
 * ------------------------------------------------------------------- */
.sol-no-markup-badge {
    background: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    color: #475569 !important;
}
.sol-no-markup-badge svg { color: #64748B !important; }

/* La caja de "Direct-source pricing" es texto explicativo, no un estado
 * positivo: no necesita ser verde ni tener una barra de color. */
.sol-product__direct-source {
    background: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    border-left-color: #CBD5E1 !important;
}
.sol-product__direct-source strong { color: var(--color-navy) !important; }

/* ---------------------------------------------------------------------
 * Marca de "estás en vista previa". Sin esto es fácil creer que el cambio
 * ya está en producción, que es justo el error que esta hoja debe evitar.
 * ------------------------------------------------------------------- */
.sol-preview-flag {
    position: fixed;
    z-index: 99999;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #0B1424;
    color: #FFFFFF;
    font: 600 12px/1.2 var(--font-primary, sans-serif);
    letter-spacing: 0.04em;
    box-shadow: 0 4px 14px rgba(11, 20, 36, 0.32);
}
.sol-preview-flag a { color: #9EC1EE; text-decoration: underline; }


/* =====================================================================
 * VUELTA 2 — paquete 5a–5f del brief. Lo de arriba es la vuelta 1.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 5a · CORRECCIÓN: "unificar no es reducir".
 * La vuelta 1 pintó SIETE cajas del mismo azul, así que el botón dejó de ser
 * especial. El azul se reserva AL BOTÓN; el resto de paneles van blancos con
 * borde fino gris.
 * ------------------------------------------------------------------- */
.sol-product__cutoff,
.sol-product-calc-cta,
.sol-take,
.sol-quickfacts,
.sol-crosssell,
.sol-pay-fallback,
.sol-wholesale,
.woocommerce-info {
    background: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid #E2E8F0 !important;
    border-left-width: 1px !important;
    border-top-width: 1px !important;
}
.sol-product__cutoff *,
.sol-product-calc-cta__arrow { color: var(--color-gray-text) !important; }
.sol-product-calc-cta__title,
.sol-take__title,
.sol-quickfacts__title { color: var(--color-navy) !important; }

/* El chip de categoría: neutro, con el texto en el color de SU categoría.
 * Decidido así en §5.5 — si el chip fuese verde quedaría a dos centímetros del
 * "In stock", que también es verde: mismo color, dos significados. El color de
 * categoría vive en el campo de la foto, que es donde se nota. */
.sol-product__eyebrow {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    color: var(--sol-cat, var(--color-navy)) !important;
}

/* La fila de descuento decía lo mismo dos veces (el "5% off" verde y la
 * pastilla AUTO-APPLIED verde). Se queda el valor; la pastilla se calla. */
.sol-tier__auto {
    background: #EDF1F5 !important;
    color: var(--color-gray-text) !important;
}

/* ---------------------------------------------------------------------
 * 5b · CAMPO DE COLOR POR CATEGORÍA
 * Tres capas: campo arriba, mesa abajo, y el cambio de tono ES el horizonte —
 * no hay línea. El vial se apoya DENTRO de la mesa (base al 84%, horizonte al
 * 79%): puesto justo sobre la línea, flota.
 * Las variables las emite el CONTENEDOR desde PHP. El <picture> no se toca.
 * ------------------------------------------------------------------- */
.sol-product__gallery,
.sol-card__image {
    background: linear-gradient(
        to bottom,
        var(--sol-field, #F8FAFC) 0%,
        var(--sol-field, #F8FAFC) 79%,
        var(--sol-mesa, #E2E8F0) 79%,
        var(--sol-mesa, #E2E8F0) 100%
    ) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
}

/* La sombra de contacto. Corta y poco difusa = apoyo; grande y difusa = flota.
 * Va en azul grisáceo derivado de la mesa: en negro ensucia. */
.sol-product__gallery::after,
.sol-card__image::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 84%;
    width: 46%;
    height: 3.2%;
    transform: translate(-46%, -50%);
    background: var(--sol-shadow, #C7D2DD);
    border-radius: 50%;
    filter: blur(7px);
    opacity: 0.55;
    z-index: 0;
    pointer-events: none;
}
.sol-product__gallery picture,
.sol-product__gallery img,
.sol-card__image picture,
.sol-card__image img {
    position: relative !important;
    z-index: 1 !important;
}
/* El vial ocupa ~74% del alto y su base cae en el 84%: el aire vacío se nota
 * mucho más en cuanto el fondo tiene color. */
.sol-product__gallery { aspect-ratio: 3 / 4; padding: 0 0 16% 0 !important; }
.sol-card__image      { aspect-ratio: 1 / 1; padding: 0 0 16% 0 !important; }
.sol-product__gallery img { max-height: 74% !important; width: auto !important; object-fit: contain !important; }
.sol-card__image img      { max-height: 74% !important; width: auto !important; object-fit: contain !important; }

/* ---------------------------------------------------------------------
 * 5c · CATÁLOGO: la barra lateral deja de ser una mancha oscura.
 * Es la mayor superficie de la página y lo que contiene es navegación, o sea
 * lo menos importante de un catálogo.
 * ------------------------------------------------------------------- */
.sol-preview .sol-shop__sidebar { background: #FAFAFA !important; border-right: 1px solid #E2E8F0 !important; }
.sol-preview .sol-shop__sidebar-bg,
.sol-preview .sol-shop__sidebar-orb { display: none !important; }
.sol-preview .sol-shop__title,
.sol-preview .sol-shop__nav-title   { color: var(--color-navy) !important; }
.sol-preview .sol-shop__subtitle,
.sol-preview .sol-shop__nav-label   { color: var(--color-gray-text) !important; }
.sol-preview .sol-shop__nav-count   { color: #94A3B8 !important; background: transparent !important; }
.sol-preview .sol-shop__eyebrow,
.sol-preview .sol-shop__back        { color: var(--color-gray-dark) !important; background: transparent !important; border-color: #E2E8F0 !important; }
.sol-preview .sol-shop__nav-link    { background: transparent !important; border: 0 !important; }
/* Lo ÚNICO que se pinta en toda la columna: dónde estás. Y en el color de su
 * propia categoría, así que además informa. */
.sol-preview .sol-shop__nav-link.is-active {
    background: var(--sol-field, #EDF2FA) !important;
    color: var(--color-navy) !important;
    border-left: 3px solid var(--sol-cat, #4980CC) !important;
    border-radius: 6px !important;
}
.sol-preview .sol-shop__nav-link.is-active .sol-shop__nav-label { color: var(--color-navy) !important; font-weight: 600 !important; }
.sol-preview .sol-shop__ruo { background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; }
/* 🔴 Las dos tarjetas de oferta, DENTRO de la barra lateral.
   La regla de arriba pinta de gris todo lo que cuelgue de `.sol-shop__sidebar`
   con `!important`, y en MOVIL theme.js MUEVE `.sol-shop__offers` dentro de esa
   barra (para que las ofertas salgan antes que las categorias). Resultado: el
   texto del boton "Build yours" / "Order bulk" salia GRIS #475569 SOBRE NAVY
   #1B2A4A — ilegible, y solo en movil, que es el 80% del trafico. En
   escritorio la tarjeta vive fuera de la barra y por eso se veia bien.
   Se devuelven sus colores propios. Lo vio el operador; la auditoria de
   contraste no lo cazo porque la corri en escritorio. */
.sol-preview .sol-shop__sidebar .sol-more__cta { color: #FFFFFF !important; }
.sol-preview .sol-shop__sidebar .sol-more__pct,
.sol-preview .sol-shop__sidebar .sol-more__body strong { color: var(--color-navy) !important; }
.sol-preview .sol-shop__ruo * { color: var(--color-gray-text) !important; }

/* VARIANTE 2 — las mismas categorías como píldoras horizontales, sin columna.
 * En móvil (80% del tráfico) esa columna hoy o desaparece o es un acordeón que
 * nadie abre, así que se está manteniendo un patrón que solo existe para una
 * cuarta parte de la gente. */
.sol-preview-v2 .sol-shop__layout   { display: block !important; }
.sol-preview-v2 .sol-shop__sidebar  { background: transparent !important; border: 0 !important; width: 100% !important; max-width: none !important; padding: 0 0 8px !important; }
.sol-preview-v2 .sol-shop__nav-list { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.sol-preview-v2 .sol-shop__nav-item { margin: 0 !important; }
.sol-preview-v2 .sol-shop__nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 40px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: #F4F6F9 !important;
    color: var(--color-gray-text) !important;
    border: 1px solid transparent !important;
}
.sol-preview-v2 .sol-shop__nav-link.is-active {
    background: var(--sol-field, #EDF2FA) !important;
    border: 1px solid var(--sol-cat, #4980CC) !important;
    color: var(--color-navy) !important;
}
.sol-preview-v2 .sol-shop__nav-arrow { display: none !important; }
/* 🔴 La etiqueta de la pildora ACTIVA, en blanco. Sin esto se leia en NAVY
 * SOBRE EL AZUL SOLIDO — 3,55:1 medido en vivo, y es lo que el operador
 * describio como "el texto dentro de la burbuja es demasiado oscuro".
 * La causa es de especificidad, no de color: la regla de la VARIANTE 1
 * `.sol-preview .sol-shop__nav-link.is-active .sol-shop__nav-label` puntua
 * (0,4,0) y le ganaba a la de la v2 `...is-active *`, que puntua (0,3,0) — y
 * en la v2 el fondo de esa pildora ya no es un campo claro, es el color
 * fuerte. Esta regla iguala la especificidad y va DESPUES, asi que gana.
 * No la acortes a `*`: volveria a perder. */
.sol-preview-v2 .sol-shop__nav-link.is-active .sol-shop__nav-label,
.sol-preview-v2 .sol-shop__nav-link.is-active .sol-shop__nav-count {
    color: #FFFFFF !important;
}
/* 🔴 Y su forma. La pildora ACTIVA salia CUADRADA (6px) entre nueve pildoras
   redondas (999px) — se lee como un bloque suelto y mal alineado, y es el que
   mas se mira porque marca donde estas. Segunda fuga de la misma regla de la
   VARIANTE 1: `.sol-preview .sol-shop__nav-link.is-active` puntua (0,3,0) y
   trae `border-radius: 6px` de cuando esa pildora era una fila de una columna
   lateral, donde el rectangulo tenia sentido. La regla de la v2 que va despues
   redefine `border` pero NO el radio, asi que el 6px sobrevivia.
   Si aparece un tercer sintoma raro solo en la pildora activa, mira ahi antes
   que en ningun otro sitio. */
.sol-preview-v2 .sol-shop__nav-link.is-active { border-radius: 999px !important; }
.sol-preview-v2 .sol-shop__subtitle  { max-width: 62ch !important; }

/* ---------------------------------------------------------------------
 * 5d · LA HOME A LA MISMA TEMPERATURA
 * Si la ficha y el catálogo van a claro y el hero se queda azul marino, el
 * sitio tiene dos temperaturas y se lee como dos sitios.
 * ------------------------------------------------------------------- */
.sol-preview .sol-hero,
.sol-preview .sol-hero__inner { background: #F8FAFC !important; background-image: none !important; }
.sol-preview .sol-hero__title,
.sol-preview .sol-hero__eyebrow { color: var(--color-navy) !important; }
.sol-preview .sol-hero__subtitle,
.sol-preview .sol-hero p        { color: var(--color-gray-text) !important; }
.sol-preview .sol-hero__title-accent {
    background: none !important;
    -webkit-text-fill-color: #4980CC !important;
    color: #4980CC !important;
}
.sol-preview .sol-trust-bar,
.sol-preview .sol-trust-bar__inner { background: #FFFFFF !important; border-top: 1px solid #E2E8F0 !important; border-bottom: 1px solid #E2E8F0 !important; }
.sol-preview .sol-trust-bar * { color: var(--color-gray-text) !important; }

/* ---------------------------------------------------------------------
 * 5e · EL APILADO SUPERIOR
 * Tres franjas antes del contenido, y encima dos modales encadenados. Un
 * visitante nuevo cerraba dos ventanas antes de ver nada.
 * ------------------------------------------------------------------- */
.sol-preview .sol-ticker { display: none !important; }          /* marquesina fuera: se queda UNA barra */
.sol-preview .sol-promo  { padding: 8px 0 !important; }
/* El pop-up de email deja de dispararse encima de la puerta de edad. Aquí se
 * suprime para poder juzgar la primera pantalla; en producción va con retardo,
 * no eliminado. */
.sol-preview .sol-email-modal,
.sol-preview .sol-newsletter-modal,
.sol-preview [class*="popup"][class*="email"] { display: none !important; }

/* ---------------------------------------------------------------------
 * 5f · PULIDO DE LA TARJETA
 * La foto ya no flota sobre blanco (el campo le da borde sin necesitar borde),
 * el precio sube junto al nombre y la flecha ambigua pasa a botón con texto.
 * ------------------------------------------------------------------- */
.sol-preview .sol-card { border: 1px solid #E9EDF2 !important; border-radius: 16px !important; overflow: hidden !important; }
.sol-preview .sol-card__body { padding: 16px !important; }
.sol-preview .sol-card__footer { border-top: 0 !important; padding-top: 12px !important; }
.sol-preview .sol-card__price-label { display: none !important; }
.sol-preview .sol-card__price { color: var(--color-navy) !important; font-weight: 700 !important; }
.sol-preview .sol-card__arrow {
    width: 100% !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: var(--color-navy) !important;
    font: 600 13px/1 var(--font-primary, sans-serif) !important;
}
.sol-preview .sol-card__arrow svg { display: none !important; }
.sol-preview .sol-card__arrow::after { content: "View"; }

/* El distintivo, encima de todo */
.sol-preview-flag { z-index: 2147483647; }
.sol-preview-flag a { margin-left: 6px; }


/* ---------------------------------------------------------------------
 * 5b-bis · EL ACTIVO. Las fotos de producto NO tienen canal alfa (RGB con el
 * blanco horneado, originales incluidos), así que el campo de color se veía
 * como un recuadro blanco. §5.6 verificó la transparencia sobre el HERO, que
 * sí la tiene — las 58 del catálogo no.
 *
 * Se pinta el gemelo recortado como capa de fondo, con la geometría aprobada:
 * base del vial al 84%, alto ~74%. El <picture> original se oculta, no se
 * toca — es el elemento que rompió el swap por talla en 1.8.10.
 * ------------------------------------------------------------------- */
.sol-product__gallery:not([style*="--sol-cut"]) picture,
.sol-card__image:not([style*="--sol-cut"]) picture { /* sin recorte: se deja la foto tal cual */ }

.sol-product__gallery[style*="--sol-cut"] picture,
.sol-product__gallery[style*="--sol-cut"] > img,
.sol-card__image[style*="--sol-cut"] picture,
.sol-card__image[style*="--sol-cut"] > img { visibility: hidden !important; }

.sol-product__gallery[style*="--sol-cut"]::before,
.sol-card__image[style*="--sol-cut"]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 84%;
    transform: translate(-50%, -100%);
    width: 100%;
    height: 74%;
    background-image: var(--sol-cut);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}


/* ---------------------------------------------------------------------
 * Correcciones vistas en pantalla (no en el CSS): al aclarar la barra, los
 * enlaces que NO llevan <span class="nav-label"> se quedaban con su blanco
 * heredado -> texto blanco sobre fondo claro, invisible. El color vive en el
 * enlace, no en la etiqueta.
 * ------------------------------------------------------------------- */
.sol-preview .sol-shop__sidebar a,
.sol-preview .sol-shop__sidebar p,
.sol-preview .sol-shop__sidebar span,
.sol-preview .sol-shop__nav-link { color: var(--color-gray-text) !important; }
.sol-preview .sol-shop__sidebar strong,
.sol-preview .sol-shop__title    { color: var(--color-navy) !important; }
.sol-preview .sol-shop__nav-link.is-active,
.sol-preview .sol-shop__nav-link.is-active * { color: var(--color-navy) !important; }

/* El botón "View" a ancho completo se salía de la tarjeta 72 px: el pie es un
 * flex y width:100% se calcula sobre el contenedor, no sobre el hueco libre. */
.sol-preview .sol-card__footer { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: nowrap !important; }
.sol-preview .sol-card__arrow  { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; }

/* La foto oculta: algunas tarjetas no envuelven en <picture>. */
.sol-product__gallery[style*="--sol-cut"] img,
.sol-card__image[style*="--sol-cut"] img { visibility: hidden !important; }

/* v2: la columna dejaba su alto reservado y empujaba los productos bajo el
 * pliegue — exactamente lo que esta variante venía a arreglar. */
.sol-preview-v2 .sol-shop__sidebar,
.sol-preview-v2 .sol-shop__sidebar-inner { min-height: 0 !important; height: auto !important; padding-bottom: 0 !important; }
.sol-preview-v2 .sol-shop__title    { margin-bottom: 8px !important; font-size: clamp(1.6rem, 3vw, 2.1rem) !important; }
.sol-preview-v2 .sol-shop__subtitle { margin-bottom: 14px !important; }
.sol-preview-v2 .sol-shop__nav      { margin-bottom: 10px !important; }
.sol-preview-v2 .sol-shop__ruo,
.sol-preview-v2 .sol-shop__sidebar > *:last-child:not(.sol-shop__sidebar-inner) { display: none !important; }
.sol-preview-v2 .sol-shop__main     { margin-top: 0 !important; padding-top: 0 !important; }

/* v2 en móvil (80% del tráfico): nueve píldoras envueltas ocupan cinco filas y
 * los productos siguen bajo el pliegue — el mismo defecto que la columna, con
 * otra forma. En una sola fila con desplazamiento lateral ocupan 40 px.
 * El scroll es del carril, nunca del documento. */
@media (max-width: 782px) {
    .sol-preview-v2 .sol-shop__nav-list {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px !important;
        margin-right: -16px !important;
    }
    .sol-preview-v2 .sol-shop__nav-item { flex: 0 0 auto !important; scroll-snap-align: start; }
    .sol-preview-v2 .sol-shop__nav-link { white-space: nowrap !important; }
}

/* =====================================================================
 * VUELTA 2 — los cinco puntos medidos sobre la vuelta 1.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * V2·3 · LA HOME SEGUÍA OSCURA.
 * Mis reglas pintaban .sol-hero y .sol-hero__inner, pero el navy real vive en
 * DOS sitios: el fondo de .sol-hero y, encima, un .sol-hero__bg absoluto con
 * tres degradados. Pintar el de abajo no sirve de nada si el de arriba sigue
 * ahí. La home tenía tres temperaturas en una página.
 * ------------------------------------------------------------------- */
.sol-preview .sol-hero { background: #F8FAFC !important; min-height: 0 !important; padding: 56px 0 !important; }
.sol-preview .sol-hero__bg {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(73,128,204,0.07) 0%, transparent 55%),
        linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%) !important;
}
.sol-preview .sol-hero__eyebrow { color: #64748B !important; }
.sol-preview .sol-hero__title   { color: var(--color-navy) !important; }
.sol-preview .sol-hero__subtitle{ color: var(--color-gray-text) !important; }
.sol-preview .sol-hero__textlink{ color: #4980CC !important; border-bottom-color: #4980CC !important; }
.sol-preview .sol-hero__title-accent {
    background: none !important; -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #4980CC !important; color: #4980CC !important;
}
/* La tarjeta de COA del hero estaba pensada sobre fondo oscuro: al aclarar el
 * hero se quedaba en texto claro sobre claro, ilegible. La clase real es
 * .sol-proof (adivinar .sol-proof-card no acertaba a nada). */
/* Tinte por categoria (2026-08-15): el operador vio la tarjeta "muy blanca,
 * se pierde" — y la blanqueo ESTA regla al promover el paquete. Ahora toma el
 * color de la categoria del compuesto destacado via --sol-proof-cat/-field,
 * que emite hero-proof-card.php desde la paleta del catalogo; sin las
 * variables cae al blanco de antes. */
.sol-preview .sol-proof {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--sol-proof-field, #FFFFFF) 100%) !important;
    border: 1px solid #E2E8F0 !important;
    border-top: 3px solid var(--sol-proof-cat, #4980CC) !important;
    box-shadow: 0 10px 30px rgba(27, 42, 74, 0.08) !important;
}
.sol-preview .sol-proof,
.sol-preview .sol-proof dt,
.sol-preview .sol-proof dd,
.sol-preview .sol-proof span:not(.sol-proof__int):not(.sol-proof__frac) { color: var(--color-gray-text) !important; }
.sol-preview .sol-proof__eyebrow { color: var(--sol-proof-cat, #64748B) !important; }
.sol-preview .sol-proof__value,
.sol-preview .sol-proof__int,
.sol-preview .sol-proof__frac { color: #4980CC !important; }
.sol-preview .sol-proof__row  { border-color: #EDF1F5 !important; }
.sol-preview .sol-proof__seal { background: #F1F8F3 !important; color: #157F3D !important; border-color: #D7E9DD !important; }

/* La franja de confianza se quedaba en navy justo entre el hero claro y la
 * sección clara de abajo: una banda oscura suelta en medio de nada. */
.sol-preview .sol-trustbar {
    background: #FFFFFF !important;
    border-top: 1px solid #E9EDF2 !important;
    border-bottom: 1px solid #E9EDF2 !important;
}
.sol-preview .sol-trustbar__item { color: var(--color-gray-text) !important; }

/* V2·4 · Cian sobreviviente fuera de la ficha. */
.sol-preview .sol-pricing-note,
.sol-preview .sol-pricing-note__text {
    background: #F5F8FC !important;
    border-color: #E2E8F0 !important;
}
.sol-preview .sol-pricing-note__lead { color: #4980CC !important; }

/* V2·4 · En la ficha el campo era un cuadrado con blanco muerto alrededor:
 * debe ocupar el ancho del área de imagen. */
.sol-preview .sol-product__gallery { width: 100% !important; aspect-ratio: 4 / 5 !important; }

/* ---------------------------------------------------------------------
 * V2·5 · LAS PÍLDORAS SE QUEDAN, pero ordenadas. Cuatro diferencias medidas
 * contra las suyas: una sola fila que nunca envuelve, sin conteos dentro
 * (anchos parejos), la activa RELLENA y sólida, y pegadas a la grilla.
 * ------------------------------------------------------------------- */
.sol-preview-v2 .sol-shop__nav-list {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px !important;
}
/* 1.8.98 — en ESCRITORIO envuelven. Antes se forzaba `nowrap` a todos los
 * anchos y la fila se leia cortada por la derecha ("Metabolic Research
 * Peptide...") sin nada que dijera que se podia deslizar: medido, 1136px de
 * carril para 1914px de pildoras, o sea casi la mitad del catalogo escondida.
 * 🔴 La media query NO es decorativa. Sin ella esta regla, que va DESPUES en
 * el fichero, le gana al carril movil de `@media (max-width: 782px)` de mas
 * arriba y las pildoras envuelven tambien a 393px: medido, SIETE filas antes
 * de ver un solo producto. En movil el motivo original del carril se sostiene
 * — nuestros nombres de categoria son largos. */
@media (min-width: 783px) {
    .sol-preview-v2 .sol-shop__nav-list {
        flex-wrap: wrap !important;
        overflow-x: clip !important;
    }
}
.sol-preview-v2 .sol-shop__nav-list::-webkit-scrollbar { display: none; }
.sol-preview-v2 .sol-shop__nav-item { flex: 0 0 auto !important; }
.sol-preview-v2 .sol-shop__nav-link { white-space: nowrap !important; }
/* Los conteos dentro de la píldora desigualan los anchos y meten ruido. */
.sol-preview-v2 .sol-shop__nav-count { display: none !important; }
/* La activa RELLENA: con contorno fino se perdía. Contraste ~4.0 ya verificado
 * contra blanco, que es justo para lo que se calcularon estos tonos. */
.sol-preview-v2 .sol-shop__nav-link.is-active {
    background: var(--sol-cat, #4980CC) !important;
    border-color: var(--sol-cat, #4980CC) !important;
    color: #FFFFFF !important;
}
.sol-preview-v2 .sol-shop__nav-link.is-active * { color: #FFFFFF !important; }
/* Pegadas a la grilla: el bloque RUO y la fila de búsqueda se metían entre las
 * píldoras y los resultados, y los productos arrancaban demasiado abajo. */
.sol-preview-v2 .sol-shop__sidebar-footnote { display: none !important; }
.sol-preview-v2 .sol-shop__nav { margin-bottom: 4px !important; }
.sol-preview-v2 .sol-shop__toolbar,
.sol-preview-v2 .sol-shop__search { margin-top: 8px !important; }

/* V2·2 · El activo de la BARRA LATERAL también toma el color de SU categoría:
 * las variables ya las emite cada <li> desde PHP. Sin ellas caía al valor por
 * defecto, que es el azul de Metabolic — y por eso salía azul en Copper. */
.sol-preview-v1 .sol-shop__nav-link.is-active {
    background: var(--sol-field, #EDF2FA) !important;
    border-left: 3px solid var(--sol-cat, #4980CC) !important;
}

/* El carril "Most Ordered" arrastraba su propio fondo navy en un ::before con
 * borde curvo — por eso quedaba una banda oscura suelta bajo el hero claro y el
 * titular se leía apagado. No se ve inspeccionando el CSS del elemento: hay que
 * enumerar los pseudo-elementos. */
.sol-preview .sol-rail::before {
    background: #F4F7FB !important;
}
.sol-preview .sol-rail__title,
.sol-preview .sol-rail h2      { color: var(--color-navy) !important; }
.sol-preview .sol-rail__eyebrow,
.sol-preview .sol-rail__link   { color: #64748B !important; }
.sol-preview .sol-rail__link:hover { color: #4980CC !important; }

/* El fondo de la activa seguía en el teal viejo (rgba(45,212,191,.12), un rgba
 * escrito a mano en el tema) aunque la variable llegaba bien: la regla original
 * tiene más especificidad y también !important, así que empataba y ganaba ella.
 * Subir la especificidad es lo que lo resuelve; la variable ya estaba bien. */
body.sol-preview .sol-shop__nav-list .sol-shop__nav-item .sol-shop__nav-link.is-active {
    background: var(--sol-field, #EDF2FA) !important;
    background-color: var(--sol-field, #EDF2FA) !important;
}
body.sol-preview-v1 .sol-shop__nav-list .sol-shop__nav-item .sol-shop__nav-link.is-active {
    border-left: 3px solid var(--sol-cat, #4980CC) !important;
}
body.sol-preview-v2 .sol-shop__nav-list .sol-shop__nav-item .sol-shop__nav-link.is-active {
    background: var(--sol-cat, #4980CC) !important;
    background-color: var(--sol-cat, #4980CC) !important;
    border-color: var(--sol-cat, #4980CC) !important;
    color: #FFFFFF !important;
}

/* =====================================================================
 * V2·6 · LA TARJETA EN MÓVIL — medida contra la suya
 *
 * Nuestra tarjeta: 195×418, con la foto en 193×193 y el CUERPO en 193×223.
 * O sea: el cuerpo ocupa MÁS que el producto. La suya invierte la proporción,
 * y por eso su catálogo se lee y el nuestro parece un listado.
 *
 * El hueco muerto no es padding: las filas de la rejilla son de igual alto y el
 * pie se empuja al fondo, así que la tarjeta más alta de la fila dicta y las
 * demás se quedan con un vacío entre el subtítulo y el precio.
 * ------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* La foto manda: más alta que ancha, como la suya. */
    .sol-preview .sol-card__image { aspect-ratio: 4 / 5 !important; }

    /* El cuerpo deja de estirarse y el pie deja de irse al fondo. */
    .sol-preview .sol-card__body {
        padding: 10px 12px 12px !important;
        display: block !important;
    }
    .sol-preview .sol-card__title {
        font-size: 0.92rem !important;
        line-height: 1.25 !important;
        margin: 0 0 2px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .sol-preview .sol-card__subtitle {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        -webkit-line-clamp: 2;
    }
    .sol-preview .sol-card__footer {
        margin-top: 10px !important;        /* antes: auto, que creaba el vacío */
        padding-top: 0 !important;
        border-top: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }
    /* El botón es la acción de la tarjeta: sólido, no contorno, como el suyo. */
    .sol-preview .sol-card__arrow {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 84px !important;
        height: 36px !important;
        padding: 0 14px !important;
        background: #4980CC !important;
        border-color: #4980CC !important;
        color: #FFFFFF !important;
    }
    .sol-preview .sol-card__price { font-size: 1.02rem !important; }

    /* Los controles de arriba se apilaban en tres filas y empujaban la rejilla
     * bajo el pliegue. En la variante de píldoras el desplegable sobra: las
     * píldoras ya hacen ese trabajo, y duplicarlo cuesta media pantalla. */
    .sol-preview-v2 .sol-shop-filter__cat { display: none !important; }
    .sol-preview .sol-shop-filter__row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        align-items: center !important;
    }
    .sol-preview .sol-shop-filter__search { flex: 1 1 auto !important; min-width: 0 !important; }
    .sol-preview .sol-shop-filter__btn { flex: 0 0 auto !important; width: auto !important; padding: 0 16px !important; }
}

/* El pie vive DENTRO de .sol-card__body (no es hermano, como supuse), y el
 * cuerpo es un flex en columna con `margin-top: auto` en el pie: el `auto`
 * resolvía a 67px de vacío. Mis reglas anteriores no ganaban por especificidad,
 * así que se sube con `body.` delante. */
@media (max-width: 640px) {
    body.sol-preview .sol-card__body {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
    body.sol-preview .sol-card__body .sol-card__footer {
        margin-top: 10px !important;
        margin-bottom: 0 !important;
    }
    /* Que la tarjeta se ajuste a su contenido en vez de estirarse al alto de la
     * fila: es lo que dejaba el hueco solo en las tarjetas de subtítulo corto. */
    body.sol-preview .sol-shop__main ul.products,
    body.sol-preview ul.products { align-items: start !important; }
}

/* `ul.products li.product { height: 100% }` estiraba cada tarjeta al alto de su
 * fila, así que aunque el pie ya no se empujaba al fondo quedaba aire debajo
 * del botón. Con altura automática cada tarjeta mide lo que ocupa; como el
 * título y el subtítulo están cortados a dos líneas, la diferencia entre dos
 * tarjetas de una fila es como mucho una línea. */
@media (max-width: 640px) {
    body.sol-preview ul.products li.product { height: auto !important; align-self: start !important; }
}


/* =====================================================================
 * V2·7 · EL VIAL — y por qué el plan anterior no podía funcionar
 *
 * El handoff pedía llevar el vial al 78% del ancho de la tarjeta, con la
 * cuenta hecha sobre un recorte de 500x807 (1:1.61) y una tarjeta de 193.
 * Los tres números estaban mal, y por eso dos intentos de agrandarlo no
 * movieron nada:
 *
 *   - Recorte: medidos los 59 -cut.webp, 58 son 500x1129 y uno 500x1091.
 *     Ratio real 0.4429 (1:2.26). Ninguno mide 500x807.
 *   - Tarjeta: 193 era la medida a ~485px (el suelo de Chrome MCP). A 393
 *     reales la tarjeta es 149 y la caja de foto 147x183.
 *   - "Amino Club al 78%": medido sobre su propia captura (588px = 393 CSS),
 *     su vial ocupa 42.6% en la tapa, 36.7% en el cuello y 44.6% en el
 *     cuerpo. El 78% no existe.
 *
 * Con ancho_pintado = alto_pseudo x 0.4429, llenar TODA la altura de una
 * caja 3/4 daría como mucho el 59% del ancho. La meta era inalcanzable, y
 * además innecesaria: ya estábamos en el 41%, a tres puntos de ellos.
 *
 * Lo que sí faltaba era ANCHO DE TARJETA. El aire lateral se pagaba dos
 * veces: .ast-container mete 20px por lado y .sol-shop__main otros
 * var(--space-lg) = 21.9. Total 83.8px contra los ~47 de Amino Club, así
 * que sus tarjetas medían 167.8 y las nuestras 148.6.
 *
 * El margen negativo saca la rejilla de ese segundo padding SIN tocarlo,
 * de modo que el título, las píldoras y el buscador conservan su aire y
 * sólo los productos ganan ancho. Va con el token, no con un px a mano,
 * para que siga a --space-lg si cambia.
 *
 * Medido a 393x659 (iPhone 15) con la vista previa activa:
 *   tarjeta 149 -> 171   ·   vial 60 -> 74.6px   ·   44.3% de su caja
 *   (Amino Club: 167.8 / 74.9 / 44.6%)   desbordamiento lateral: 0
 *
 * El 80% del pseudo es el techo con margen: deja 8px sobre la tapa. Subirlo
 * más recorta el vial por arriba, que es justo lo que hace la competencia
 * pero no es lo que aquí se aprobó.
 * ------------------------------------------------------------------- */
@media (max-width: 640px) {
    body.sol-preview .sol-shop__main ul.products {
        margin-left:  calc(var(--space-lg) * -1) !important;
        margin-right: calc(var(--space-lg) * -1) !important;
    }
    body.sol-preview .sol-card__image[style*="--sol-cut"]::before {
        height: 80% !important;
    }
}

/* =====================================================================
 * V2·8 · 53 PÍXELES DE AIRE POR FILA, que no eran el gap
 *
 * `row-gap` valía 12px pero entre una fila y la siguiente había 65. La
 * diferencia salía de dos sitios que se suman y ninguno se ve mirando el
 * gap:
 *
 *   1. WooCommerce le pone a cada `li.product` un `margin-bottom` de
 *      var(--space-2xl) = 36.5px, herencia de cuando el catálogo era una
 *      lista flotada y no una rejilla. En un grid el gap ya separa: ese
 *      margen es aire duplicado.
 *   2. `grid-auto-rows: 1fr` iguala TODAS las filas a la más alta. Con
 *      `align-items: start` (V2·6) las tarjetas no se estiran, así que la
 *      fila reservaba 381px para tarjetas de 328 y el sobrante quedaba
 *      como hueco bajo el botón — el mismo defecto que V2·6 quitó DENTRO
 *      de la tarjeta, reaparecido a nivel de rejilla.
 *
 * Medido a 393x659 tras el cambio: hueco entre filas 65 -> 12 (el gap real),
 * filas de 327.8 y 344.6 según ocupe el título una o dos líneas, y la lista
 * completa baja ~265px de scroll.
 *
 * `auto` y no `min-content`: con min-content una tarjeta de título largo
 * partiría distinto de su compañera de fila.
 * ------------------------------------------------------------------- */
@media (max-width: 640px) {
    body.sol-preview ul.products { grid-auto-rows: auto !important; }
    body.sol-preview ul.products li.product { margin-bottom: 0 !important; }
}

/* =====================================================================
 * V2·9 · TODAS LAS TARJETAS, LA MISMA ALTURA
 *
 * Quitar `grid-auto-rows: 1fr` en V2·8 recupero 53px de aire por fila, pero
 * dejo el catalogo con dos alturas: 328px donde el titulo cabe en una linea
 * y 345 donde ocupa dos. El operador lo vio enseguida.
 *
 * La respuesta NO es volver al `1fr` — eso reintroduce el aire. El titulo ya
 * esta cortado a dos lineas con -webkit-line-clamp; basta con que RESERVE
 * esas dos lineas aunque use una, y entonces todas las tarjetas miden igual
 * y precios y botones caen en la misma linea entre columnas.
 *
 * Medido a 393x659: las 12 tarjetas a 345px (antes 328 y 345). La lista
 * crece 67px (17 x las cuatro filas de titulo corto), que sigue muy por
 * debajo de los ~265px que ahorro V2·8.
 * ------------------------------------------------------------------- */
@media (max-width: 640px) {
    body.sol-preview .sol-card__title { min-height: calc(1.25em * 2) !important; }
}

/* =====================================================================
 * V2·10 · LA VARIANTE DE ESCRITORIO — la pieza cuya ausencia rompió el sitio
 *
 * El 2026-08-15 el paquete se activó para todos (1.8.25) y en 1440 salían
 * tarjetas de 611x800 con viales gigantes. Causa medida, y es una trampa ya
 * documentada del proyecto ([[astra-no-sidebar-rows-sections]]): con Astra
 * sin barra lateral, .ast-container es FLEX, y section.sol-shop es un item
 * flex con min-width:auto. La rejilla del tema (300px + minmax(0,1fr))
 * contenía el contenido; al ponerla en block para las píldoras (V2, línea
 * ~287), la sección quedó libre de crecer hasta su max-content: 1978px sobre
 * un contenedor de 1240. Todo lo demás (tarjetas enormes, buscador y
 * píldoras saliéndose) era consecuencia de ese único desborde.
 * ------------------------------------------------------------------- */
.sol-preview-v2 .sol-shop { min-width: 0 !important; max-width: 100% !important; }

@media (min-width: 641px) {
    /* Cuatro columnas: a ancho completo (sin la columna de 300px) las tres
     * del tema daban tarjetas de ~380. Con cuatro salen de ~258, cerca de las
     * 252 de la producción actual y con la misma proporción que el móvil
     * aprobado. */
    .sol-preview-v2 .sol-shop__main ul.products,
    .sol-preview-v2 ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-rows: auto !important;
    }
    .sol-preview-v2 ul.products li.product { margin-bottom: 0 !important; height: auto !important; align-self: start !important; }

    /* La MISMA receta de tarjeta aprobada en móvil (V2·6/V2·9), para que el
     * catálogo sea un solo diseño y no dos: caja 4/5, vial al 80% del alto
     * (44.3% del ancho, la proporción verificada contra Amino Club), cuerpo
     * compacto, y título y subtítulo recortados Y reservados a dos líneas.
     * La reserva va en `lh` — un `em` multiplicado adivina el line-height y
     * falló: 1.4em x 2 = 39.2px contra 46.2 reales (line-height 1.65), y esa
     * diferencia era exactamente el descuadre de 7px entre tarjetas. El calc()
     * anterior queda de respaldo para navegadores sin `lh`. */
    .sol-preview-v2 .sol-card__image { aspect-ratio: 4 / 5 !important; }
    .sol-preview-v2 .sol-card__image[style*="--sol-cut"]::before { height: 80% !important; }
    .sol-preview-v2 .sol-card__body {
        padding: 12px 14px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
    .sol-preview-v2 .sol-card__title {
        margin: 0 0 2px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        min-height: calc(1.25em * 2) !important;
        min-height: 2lh !important;
    }
    .sol-preview-v2 .sol-card__subtitle {
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        min-height: calc(1.65em * 2) !important;
        min-height: 2lh !important;
    }
    .sol-preview-v2 .sol-card__footer {
        margin-top: 10px !important;
        padding-top: 0 !important;
        border-top: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }
    /* El botón sólido, como el aprobado en móvil: "la acción de la tarjeta,
     * sólido, no contorno". En escritorio seguía de contorno. */
    .sol-preview-v2 .sol-card__arrow {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 84px !important;
        background: var(--color-teal, #4980CC) !important;
        border-color: var(--color-teal, #4980CC) !important;
        color: #FFFFFF !important;
    }
}

/* Tableta: tres columnas entre los dos mundos. */
@media (min-width: 641px) and (max-width: 1100px) {
    .sol-preview-v2 .sol-shop__main ul.products,
    .sol-preview-v2 ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}