/**
 * Estilos base del módulo (hookDisplayHeader → ficha de producto).
 * Cargado siempre en product.php junto con swiper-front.css o embla-front.css según THEME.
 */

/* --------------------------------------------------------------------------
 * Tarjeta de producto en sliders (partial propio, sin miniatura del tema)
 * Partial: views/templates/hook/_partials/product-slide-item.tpl
 * Incluido desde:
 *   - productfooter_slide.tpl (THEME 3, Swiper, hook displayFooterProduct)
 *   - productfooter_embla.tpl (THEME 4, Embla, hook displayFooterProduct)
 * Contenedor: #tpcrelacionaproductos > .swiper-slide | .embla__slide
 * -------------------------------------------------------------------------- */

/* article.tpcrelacionaproductos-slide-item */
#tpcrelacionaproductos .tpcrelacionaproductos-slide-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
    text-align: center;
}

/* a.tpcrelacionaproductos-slide-item__image */
#tpcrelacionaproductos .tpcrelacionaproductos-slide-item__image {
    display: block;
    padding: 10px;
}

/* Imagen dentro del enlace de la tarjeta */
#tpcrelacionaproductos .tpcrelacionaproductos-slide-item__image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* div.tpcrelacionaproductos-slide-item__body */
#tpcrelacionaproductos .tpcrelacionaproductos-slide-item__body {
    flex: 1 1 auto;
    padding: 0 10px 12px;
}

/* h4.tpcrelacionaproductos-slide-item__name */
#tpcrelacionaproductos .tpcrelacionaproductos-slide-item__name {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Enlace al nombre del producto */
#tpcrelacionaproductos .tpcrelacionaproductos-slide-item__name a {
    color: inherit;
    text-decoration: none;
}

#tpcrelacionaproductos .tpcrelacionaproductos-slide-item__name a:hover {
    text-decoration: underline;
}

/* div.tpcrelacionaproductos-slide-item__price (+ .product-price-and-shipping del partial) */
#tpcrelacionaproductos .tpcrelacionaproductos-slide-item__price {
    font-size: 0.95rem;
}

/* Precio tachado cuando hay descuento (span.regular-price del partial) */
#tpcrelacionaproductos .tpcrelacionaproductos-slide-item__price .regular-price {
    margin-right: 6px;
    text-decoration: line-through;
    color: #999;
}

/* --------------------------------------------------------------------------
 * Bloque principal #tpcrelacionaproductos (márgenes del bloque en ficha)
 * Templates con id="tpcrelacionaproductos":
 *   - productfooter_grid.tpl   (THEME 1, lista/rejilla)
 *   - productfooter_table.tpl  (THEME 2, tabla)
 *   - productfooter_slide.tpl  (THEME 3, Swiper)
 *   - productfooter_embla.tpl  (THEME 4, Embla)
 * Hook: displayFooterProduct
 * -------------------------------------------------------------------------- */

#tpcrelacionaproductos {
    margin-top: 30px;
    margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
 * Columna izquierda de la ficha (miniatura Akira product-1)
 * Template: views/templates/hook/leftcolumnproduct.tpl
 * Tema: catalog/_partials/miniatures/_partials/_product/product-1.tpl
 * Hook: displayLeftColumnProduct (opción LEFT_COLUMN del BO)
 * -------------------------------------------------------------------------- */

/* section#tpcrelacionaproductos-left.tpcrelacionaproductos-left-column */
.tpcrelacionaproductos-left-column {
    margin-bottom: 1.5rem;
}

/* Cada producto ocupa el ancho máximo de la columna (~300px en Akira col-lg-3) */
.tpcrelacionaproductos-left-column-products .tpcrelacionaproductos-left-column-item {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.25rem;
}

.tpcrelacionaproductos-left-column-products .tpcrelacionaproductos-left-column-item .js-product.item-inner,
.tpcrelacionaproductos-left-column-products .tpcrelacionaproductos-left-column-item .js-product-miniature {
    width: 100%;
    max-width: 100%;
}

.tpcrelacionaproductos-left-column-products .tpcrelacionaproductos-left-column-item .wrapper-imgs,
.tpcrelacionaproductos-left-column-products .tpcrelacionaproductos-left-column-item .wrapper-imgs picture,
.tpcrelacionaproductos-left-column-products .tpcrelacionaproductos-left-column-item .wrapper-imgs img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Evita desbordes de variantes/botones en columna estrecha */
.tpcrelacionaproductos-left-column-products .tpcrelacionaproductos-left-column-item .variant-links-list {
    flex-wrap: wrap;
}