/**
 * card-v2.css — SISTEMA DE CARD v2/v3 (FUENTE ÚNICA compartida).
 *
 * BASADO en store-v3.css (T4/R3): las reglas de card se movieron aquí para que la MISMA
 * card la usen la tienda (rediseño v2/v3) y la sección de promos del home, sin duplicar
 * una sola regla ni encolar el store-v3.css completo en el home. Reglas trasladadas:
 *   - tokens --v3-* (antes en .mhw-v3)   -> aquí en .mhw-v3, .mhw-v3-grid
 *   - grilla .mhw-v3-grid + overrides WC (float/clearfix)
 *   - card .mhw-v3-grid .product-card-wrapper (+ badge -N%, cabecera marca/COMPATIBLE)
 *   - card móvil horizontal (@media max-width:760px)
 * NO es verbatim: tiene 2 ADICIONES documentadas frente al original de store-v3.css —
 *   (a) versiones sin ancestro .woocommerce del clearfix y del reset de ancho de celda
 *       (ul.products.mhw-v3-grid::before/after y > li.product), para el home donde la
 *       sección de promos no vive dentro de .woocommerce;
 *   (b) text-decoration:none en el botón COMPRAR (el add-to-cart es un <a>: sin la raya
 *       blanca que heredaba del contenido del home).
 * store-v3.css conserva TODO lo demás (hero, rail, chips, skeleton, fitment, vista lista)
 * y depende de este archivo (se encola como dependencia). La tienda queda idéntica; las
 * suites (cphome/parity) y r2-desktop lo protegen.
 *
 * Los tokens se declaran también en .mhw-v3-grid para que la card funcione en el home,
 * donde NO existe el contenedor .mhw-v3 (las custom properties son globales una vez
 * cargado cualquier selector que matchee, y heredan a las cards).
 */

.mhw-v3,
.mhw-v3-grid {
    --v3-red: #e11414;
    --v3-red-dark: #c50f0f;
    --v3-yellow: #ffde00;
    --v3-ink: #17171a;
    --v3-muted: #6b6b73;
    --v3-faint: #9a9aa2;
    --v3-line: #e6e6ea;
    --v3-surface: #fff;
    --v3-bg: #f4f4f6;
    --v3-cond: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
    --v3-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Grid full-width (las cards se estilizan solas con .product-card-wrapper) ---- */
.mhw-v3-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
@media (max-width: 1200px) { .mhw-v3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .mhw-v3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .mhw-v3-grid { grid-template-columns: 1fr; } }

/* WooCommerce mete un clearfix `ul.products::before/::after { content:" "; display:
   table }`. En una grilla esos pseudo-elementos cuentan como items y se comen la 1ª
   y última celda (el 1er producto caía en la columna 2). Anularlos. Especificidad
   > `.woocommerce ul.products::before` (0,0,2,2). */
.woocommerce ul.products.mhw-v3-grid::before,
.woocommerce ul.products.mhw-v3-grid::after { content: none; display: none; }
/* En el home la sección de promos NO vive dentro de .woocommerce; el mismo clearfix
   (si WooCommerce lo aplica sin ese ancestro) se anula acá sin depender de él. */
ul.products.mhw-v3-grid::before,
ul.products.mhw-v3-grid::after { content: none; display: none; }

/* Card en v3: layout limpio, sin el stretch de flex:6/8 del tema (que en columna
   repartía el alto y dejaba huecos enormes). Imagen cuadrada arriba, contenido
   empacado, botón COMPRAR al fondo. Especificidad > reglas del tema. */
/* WooCommerce (woocommerce-layout.css) le mete `float:left; width:22.05%; margin:
   0 3.8% ...` a cada li.product para su layout de columnas flotadas. Su selector
   `.woocommerce ul.products li.product` es (0,0,3,2) — DOS tipos (ul, li). Para
   ganarle hay que superar eso: `.woocommerce ul.products.mhw-v3-grid li.product`
   es (0,0,4,2). Sin esto la card se encoge a ~72px y el contenido se corta. */
.woocommerce ul.products.mhw-v3-grid li.product {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    float: none;
}
/* Equivalente para el home (sin .woocommerce): la celda ocupa su columna de grid. */
ul.products.mhw-v3-grid > li.product {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    float: none;
}
/* Card exterior: blanco, borde 1px, radio 14px, overflow hidden (match mockup). */
.mhw-v3-grid .product-card-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--v3-surface);
    border: 1px solid var(--v3-line);
    border-radius: 14px;
    overflow: hidden;
}
.mhw-v3-grid .product-card-wrapper .left-panel {
    position: relative;          /* ancla del badge de oferta */
    flex: 0 0 auto;
    display: block;
}
.mhw-v3-grid .product-card-wrapper .product-img-wrapper {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 14px;
}
.mhw-v3-grid .product-card-wrapper .product-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* el logo bajo la imagen se oculta en v3: va en la cabecera del contenido */
.mhw-v3-grid .product-card-wrapper .brand-img-wrapper { display: none; }

/* badge de oferta sobre la imagen (amarillo Malossi) */
.mhw-v3-grid .mhw-v3-disc {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--v3-yellow);
    color: var(--v3-ink);
    font-family: var(--v3-cond);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .02em;
    padding: 3px 8px;
    border-radius: 6px;
}

/* contenido a la izquierda */
.mhw-v3-grid .product-card-wrapper .right-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 13px 15px 15px;
    text-align: left;
}
/* fila cabecera: logo marca ↔ ✓ COMPATIBLE */
.mhw-v3-cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 30px;
}
.mhw-v3-brand { display: inline-flex; align-items: center; }
/* ALTURA DEFINIDA obligatoria: los logos SVG de marca solo traen viewBox (sin
   width/height propios) y con width/height:auto colapsan a 0×0 dentro del flex
   (medido por CDP: rect 0×0 con naturalWidth 300). La clásica los salva con su
   width:100px explícito (theme.css); aquí fijamos la altura y el ancho se deriva
   del aspect ratio del viewBox. Delta CP-L2. */
.mhw-v3-brand img,
.mhw-v3-brand svg {
    height: 42px;
    width: auto;
    max-width: 132px;
    object-fit: contain;
}
.mhw-v3-compat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    font-family: var(--v3-cond);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #1f9d57;
    white-space: nowrap;
}
.mhw-v3-compat svg { width: 12px; height: 12px; flex: none; }

.mhw-v3-grid .product-card-wrapper .product-title-link { text-decoration: none; }
.mhw-v3-grid .product-card-wrapper .title {
    font-family: var(--v3-cond);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.22;
    /* Título NEGRO (feedback de Rafael, CP-LD): antes theme.css lo forzaba a rojo
       (#D10E10 !important) y en CP-L3 lo unificamos a rojo token; ahora el esquema es
       título negro + precio rojo. !important para ganarle al rojo del tema sin tocar el
       clásico. */
    color: var(--v3-ink) !important;
    margin: 7px 0 0;
    min-height: 39px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mhw-v3-grid .product-card-wrapper .sku-label {
    font-family: var(--v3-mono);
    /* CÓDIGO + SKU más legibles (feedback de Rafael, CP-LD): 10.5 → 13px. */
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--v3-muted);
    margin: 7px 0 0;
}
.mhw-v3-grid .product-card-wrapper .sku-label strong { font-weight: 700; color: var(--v3-ink); }

/* precio: oscuro normal; en oferta, tachado gris + venta en rojo */
.mhw-v3-grid .product-card-wrapper .price-wrapper { margin: 8px 0 0; }
.mhw-v3-grid .product-card-wrapper .price-wrapper .amount {
    font-family: var(--v3-cond);
    font-weight: 700;
    font-size: 21px;
    /* Precio ROJO (feedback de Rafael, CP-LD): esquema título negro + precio rojo. */
    color: var(--v3-red);
}
.mhw-v3-grid .product-card-wrapper .price-wrapper del {
    text-decoration: none;
    margin-right: 6px;
}
.mhw-v3-grid .product-card-wrapper .price-wrapper del .amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--v3-faint);
    text-decoration: line-through;
}
.mhw-v3-grid .product-card-wrapper .price-wrapper ins { text-decoration: none; }
.mhw-v3-grid .product-card-wrapper .price-wrapper ins .amount { color: var(--v3-red); }

/* "Ver recambios / Se aplica a" = link gris (no botón rojo) */
.mhw-v3-grid .product-card-wrapper .minimal-recambios-wrapper {
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.mhw-v3-grid .minimal-recambios-wrapper .btn-ver-recambios {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    /* Estilo del mockup (feedback de Rafael, CP-LD): gris medio + flecha "→". El !important
       es necesario: la clase `.button` del tema les fuerza el rojo #D10E10. */
    color: var(--v3-muted) !important;
    font-family: var(--v3-cond);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    text-align: left;
    cursor: pointer;
}
.mhw-v3-grid .minimal-recambios-wrapper .btn-ver-recambios::after {
    content: "→";
    font-weight: 700;
}
.mhw-v3-grid .minimal-recambios-wrapper .btn-ver-recambios:hover,
.mhw-v3-grid .minimal-recambios-wrapper .btn-ver-recambios:focus {
    background: none;
    color: var(--v3-ink) !important;
}

/* COMPRAR rojo, ancho completo, pegado al fondo. Solo el add-to-cart (último div),
   no los links de recambios. */
.mhw-v3-grid .product-card-wrapper .right-panel > div:last-child { margin-top: auto; padding-top: 12px; }
.mhw-v3-grid .product-card-wrapper .right-panel > div:last-child .button {
    display: block;
    width: 100%;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: center;
    text-decoration: none;   /* el add-to-cart es un <a>: sin subrayado (raya blanca bajo COMPRAR) */
    color: #fff;
    background-color: var(--v3-red);
    border-radius: 9px;
    transition: background-color .12s ease;
}
.mhw-v3-grid .product-card-wrapper .right-panel > div:last-child .button:hover,
.mhw-v3-grid .product-card-wrapper .right-panel > div:last-child .button:focus {
    background-color: var(--v3-red-dark);
    color: #fff;
}
/* AGOTADO: botón deshabilitado GRIS (no rojo) — feedback de Rafael, CP-LD. El <li>
   lleva la clase `outofstock` (wc_product_class). */
.mhw-v3-grid .product-card-wrapper.outofstock .right-panel > div:last-child .button,
.mhw-v3-grid .product-card-wrapper.outofstock .right-panel > div:last-child .button:hover,
.mhw-v3-grid .product-card-wrapper.outofstock .right-panel > div:last-child .button:focus {
    background-color: #e2e2e6;
    color: #8a8a92;
    cursor: not-allowed;
}

/* ---- M4: cards en filas horizontales (foto 132px izq + info der) ---- */
@media (max-width: 760px) {
    .mhw-v3-grid { grid-template-columns: 1fr; gap: 11px; }
    .mhw-v3-grid .product-card-wrapper {
        display: flex;
        flex-direction: row;
        gap: 14px;
        align-items: stretch;
        background: #fff;
        border: 1px solid #e7e7ea;
        border-radius: 13px;
        padding: 12px;
        margin: 0;
    }
    .mhw-v3-grid .product-card-wrapper .left-panel {
        flex: 0 0 132px;
        width: 132px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;   /* foto centrada vertical contra la columna de texto */
        gap: 9px;
    }
    /* Foto con PROTAGONISMO (feedback de Rafael, CP-LD): sin marco ni fondo tipo "cajita
       de carrito", y a ancho COMPLETO de la columna (no una miniatura centrada). No se
       ensancha la columna — la foto "se ve más grande" porque la card se acorta (título
       2 líneas + CTA compacto abajo), no porque ocupe más espacio horizontal. */
    .mhw-v3-grid .product-card-wrapper .product-img-wrapper {
        width: 132px;
        height: auto;
        padding: 0;
        border: 0;
        background: none;
    }
    .mhw-v3-grid .product-card-wrapper .product-img-wrapper img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .mhw-v3-grid .mhw-v3-disc { top: 0; left: 0; }
    .mhw-v3-grid .product-card-wrapper .right-panel {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    /* Ritmo vertical COMPRIMIDO: la card baja de alto (sin meter aire) y la foto —
       centrada verticalmente— gana protagonismo relativo. */
    .mhw-v3-grid .product-card-wrapper .mhw-v3-cardhead { margin-bottom: 2px; }
    /* Logo un poco más chico en la cabecera angosta del móvil (el bump a 42px es de
       desktop; acá el cardhead comparte fila con COMPATIBLE). */
    .mhw-v3-brand img,
    .mhw-v3-brand svg { height: 34px; max-width: 108px; }
    /* El .title trae border-bottom (theme.css:1343) como separador sobre CÓDIGO, más
       padding/min-height del tema que estiraban la caja a ~57px (2.85 renglones) → el
       overflow dejaba asomar una 3ª línea sobre el borde en títulos largos. Se fija el
       modelo de caja COMPLETO con !important: 41px border-box (2×20px de línea + 1px de
       borde), sin padding ni min-height → recorte exacto a 2 líneas, borde limpio. */
    .mhw-v3-grid .product-card-wrapper .title {
        display: block !important;
        box-sizing: border-box !important;
        height: 41px !important;
        line-height: 20px !important;
        padding: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        margin: 3px 0 8px !important;
    }
    .mhw-v3-grid .product-card-wrapper .sku-label { margin: 5px 0 0; }
    .mhw-v3-grid .product-card-wrapper .price-wrapper { margin: 5px 0 0; }
    .mhw-v3-grid .product-card-wrapper .minimal-recambios-wrapper { margin: 5px 0 0; }
    /* CTA compacto (no full-width, pegado al contenido): la card deja de ser tan alta */
    .mhw-v3-grid .product-card-wrapper .right-panel > div:last-child {
        margin-top: 10px;
        padding-top: 0;
        align-self: flex-start;
    }
    .mhw-v3-grid .product-card-wrapper .right-panel > div:last-child .button {
        width: auto;
        display: inline-block;
        padding: 10px 28px;
    }
}