/* =================================================================================================
   Product card styles — Eurosur Sanlúcar
   Fase 3 step 1 (PR_product_card_contract) — 2026-07-23

   Esta hoja define el estilo canónico de la "tarjeta de producto" compartido por:
     - PLP grid  (blocks/product.php VIEW_MODE_GRID)         [ya la usa]
     - Slider    (blocks/product-slider.php)                [migrada en este mismo PR]
     - Deal      (blocks/product_deal.php, con slot countdown) [pendiente]
     - Search overlay (ajax/search_overlay.php)              [pendiente]

   Cargada en blocks/head.php DESPUÉS de search-overlay.css y ANTES de los temas estacionales,
   con id="product-card-css-v2" para rollback de 1 click vía DevTools:
       document.getElementById('product-card-css-v2')?.remove();

   Markup objetivo (BEM-ish sobre Bootstrap 5):
     <article class="card product-card">
         <div class="product-image position-relative">
             <a href="/articulo/{codigo}">
                 <img src="..." class="img-fluid" alt="{nombre}">
             </a>
             <span class="badge bg-secondary product-badge">Agotado</span>
             <span class="badge bg-warning text-dark product-badge">Últimas unidades</span>
         </div>
         <div class="card-body d-flex flex-column">
             <small class="product-ref">Ref. {codigo}</small>
             <h5 class="product-title"><a href="/articulo/{codigo}">{nombre}</a></h5>
             <p class="product-offer-link"><a href="/ofertas/{id}">{oferta}</a></p>
             <div class="mt-auto">
                 <div class="mb-3">
                     <span class="product-price">{precio}€</span>
                     <span class="product-old-price">{precioAnterior}€</span>
                 </div>
                 <div class="bulk-price">N uds o más <strong>{pvp}€</strong></div>
                 <form action="/addtocart.php" method="post">
                     <button class="btn btn-primary w-100 addtocart-list-btn">…</button>
                 </form>
             </div>
         </div>
     </article>
   ================================================================================================= */

/* -------------------------------------------------------------------------------------------------
   Container — card moderno con borde sutil, hover sutil, esquinas redondeadas.

   `.card.product-card` selector compuesto (specificity 0,2,0,0) gana contra cualquier `.card {…}`
   genérico de assets/css/style.css (third-party ~18k líneas, cargado ANTES de este archivo).
   ------------------------------------------------------------------------------------------------- */
.card.product-card {
    background: #fff;
    border: 1px solid var(--eu-border);
    border-radius: var(--eu-radius);
    padding: 0;
    overflow: hidden;
    height: 100%;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}
.card.product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--eu-shadow-md);
    border-color: var(--eu-primary-soft);
}

/* -------------------------------------------------------------------------------------------------
   Image container — aspect ratio 4:3, padding interior, imagen centrada con object-fit:contain.

   No usamos background color en el wrapper para que las imágenes con fondo transparente
   se vean sobre el blanco del card. La etiqueta <a> envuelve la imagen directamente porque,
   si ajustara al tamaño del padre, tendríamos problema con object-fit.

   `.product-card .product-image` (specificity 0,2,0,0) gana contra `.product-image`
   suelto de style.css / custom.css.
   ------------------------------------------------------------------------------------------------- */
.product-card .product-image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: .75rem;
}
.product-card .product-image > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.product-card .product-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: pointer;
}

/* -------------------------------------------------------------------------------------------------
   Overlay badge (Agotado / Últimas unidades) — esquina superior izquierda.

   Boost: `span.product-badge` selector simple (0,1,0,1) gana contra `.badge` (0,1,0,0)
   que pudiera venir de style.css third-party.
   ------------------------------------------------------------------------------------------------- */
span.product-badge {
    position: absolute;
    top: .65rem;
    left: .65rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .4rem .65rem;
    text-transform: uppercase;
    border-radius: var(--eu-radius-sm);
    z-index: 2;
}

/* -------------------------------------------------------------------------------------------------
   Card body — flex column para empujar `mt-auto` al fondo y alinear CTAs entre items.
   ------------------------------------------------------------------------------------------------- */
.product-card .card-body {
    padding: 1rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* -------------------------------------------------------------------------------------------------
   Ref. code chip — pequeño, mono, color secundario, encima del título.

   `.product-card .product-ref` (specificity 0,2,0,0) gana contra `.product-ref` suelto.
   ------------------------------------------------------------------------------------------------- */
.product-card .product-ref {
    font-family: var(--eu-font-mono);
    font-size: .72rem;
    color: var(--eu-steel);
    letter-spacing: .03em;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------------------------------
   Title — máximo 2 líneas (webkit-line-clamp con fallback razonable), color de texto principal.
   Línea mínima de 2.6em para mantener alturas parejas entre cards en la grid (PLP / slider).
   ------------------------------------------------------------------------------------------------- */
.product-card .product-title {
    font-family: var(--eu-font-sans);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--eu-ink);
    margin: 0 0 .8rem;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card .product-title a {
    color: inherit;
    text-decoration: none;
}
.product-card .product-title a:hover {
    color: var(--eu-primary);
}

/* -------------------------------------------------------------------------------------------------
   Offer link (deal-specific, opcional) — bajo el título, color primario.
   Usado en blocks/product_deal.php.
   ------------------------------------------------------------------------------------------------- */
.product-card .product-offer-link {
    font-size: .82rem;
    color: var(--eu-steel);
    margin: -.4rem 0 .7rem;
}
.product-card .product-offer-link a {
    color: var(--eu-primary);
    text-decoration: none;
    font-weight: 500;
}
.product-card .product-offer-link a:hover {
    color: var(--eu-primary-dark);
    text-decoration: underline;
}

/* -------------------------------------------------------------------------------------------------
   Price block — precio grande en primario, precio anterior tachado en steel.
   Tipografía display, sin mayúsculas (los precios no se transforman).
   ------------------------------------------------------------------------------------------------- */
.product-card .product-price {
    font-family: var(--eu-font-display);
    font-weight: 700;
    font-size: 1.55rem;
    color: var(--eu-primary);
    line-height: 1;
}
.product-card .product-old-price {
    color: var(--eu-steel);
    text-decoration: line-through;
    font-size: .9rem;
    margin-left: .5rem;
    font-weight: 500;
}

/* -------------------------------------------------------------------------------------------------
   Bulk-price chip — bajo el precio, fondo primary-soft, padding discreto.
   ------------------------------------------------------------------------------------------------- */
.product-card .bulk-price {
    font-size: .78rem;
    color: var(--eu-steel);
    background: var(--eu-primary-soft);
    border-radius: var(--eu-radius-sm);
    padding: .35rem .6rem;
    margin-top: .55rem;
    display: inline-block;
    font-family: var(--eu-font-sans);
}
.product-card .bulk-price strong {
    color: var(--eu-primary-dark);
    font-weight: 700;
}

/* -------------------------------------------------------------------------------------------------
   CTA button (add-to-cart).

   Antes era `<button class="addto_cart_btn btn button addtocart-list-btn">` (sin iconos ni width).
   Bootstrap `.btn-primary` se re-pinta a la paleta canónica desde custom.css
   (background-color: var(--main-color)). Aquí lo complementamos SOLO en el contexto
   de la card: width:100%, tipografía display, mayúsculas.
   ------------------------------------------------------------------------------------------------- */
.product-card .addtocart-list-btn {
    width: 100%;
    font-family: var(--eu-font-display);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    border-radius: var(--eu-radius-sm);
    padding: .6rem 1rem;
    margin-top: .9rem;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        transform .1s ease;
}
.product-card .addtocart-list-btn:hover {
    transform: translateY(-1px);
}
.product-card .addtocart-list-btn:active {
    transform: translateY(0);
}

/* -------------------------------------------------------------------------------------------------
   Countdown slot (deal-specific) — esquina inferior izquierda del .product-image.
   Digits rojo semitransparente en mono, alimenta jQuery countdown.js

   Selector `.product-card .countdown-wrap` (0,2,0,0) gana contra `.product_timing`
   (0,1,0,0) y contra `.countdown` (0,1,0,0) que style.css third-party puede definir.
   ------------------------------------------------------------------------------------------------- */
.product-card .countdown-wrap {
    position: absolute;
    bottom: .65rem;
    color: #000;
    border-radius: var(--eu-radius-sm);
    padding: .3rem .55rem;
    font-family: var(--eu-font-mono);
    font-size: .78rem;
    font-weight: 600;
    z-index: 2;
    backdrop-filter: blur(2px);
}

/* -------------------------------------------------------------------------------------------------
   Owl-carousel — igualar altura entre items del slider (blocks/product-slider.php).

   NO forzamos `.owl-stage { display: flex }` porque owl-carousel (v2.3.x) controla el
   posicionamiento de `.owl-item` mediante transform: translate3d + estilos inline que
   el plugin inyecta en init(). Forzar flex rompería la animación de translateX.

   Solución alternativa: sólo declaramos `height: 100%` en cada `.owl-item > .product-card`
   para igualar la altura entre cards dentro del mismo `.owl-stage`. La altura del item
   la define el plugin vía JS; aquí sólo forzamos que la card rellene ese alto sin
   desbordar el botón añadir / desalineándose con cards vecinos más altos.
   ------------------------------------------------------------------------------------------------- */
.owl-carousel .owl-item .product-card {
    height: 100%;
}

/* -------------------------------------------------------------------------------------------------
   Accesibilidad — focus-visible ring consistente con tokens.
   Aplicado a CTAs y a los enlaces del card.
   ------------------------------------------------------------------------------------------------- */
.product-card .addtocart-list-btn:focus-visible,
.product-card .product-title a:focus-visible,
.product-card .product-image a:focus-visible {
    outline: none;
    box-shadow: var(--eu-focus-ring-shadow);
    border-radius: var(--eu-radius-sm);
}

/* -------------------------------------------------------------------------------------------------
   Responsive — en móvil (<576px) compactar tamaños tipográficos del card.
   ------------------------------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .product-card .product-price { font-size: 1.35rem; }
    .product-card .product-title { font-size: .92rem; min-height: 2.4em; }
    .product-card .card-body { padding: .85rem 1rem 1rem; }
}