/**
 * FRB · Tarjetas de producto
 * Pure CSS: no JavaScript, no external assets, no layout reflow.
 * The card is drawn with box-shadow (including the 1px inner ring),
 * so the product grid keeps its original dimensions.
 */

/*
 * Akira / PrestaShop product tiles. The repeated selectors deliberately
 * stay inside common product-list contexts to avoid styling unrelated boxes.
 */
#products .product-miniature,
.products .product-miniature,
.featured-products .product-miniature,
.product-accessories .product-miniature,
.product_list .product-miniature,
.product-miniature.js-product-miniature {
    border-radius: var(--frbpc-radius, 6px);
    box-shadow: var(--frbpc-ring, inset 0 0 0 1px rgba(17,24,39,.085)),
                var(--frbpc-elevation, 0 3px 12px rgba(17,24,39,.055));
    box-sizing: border-box;
    position: relative;
    transition: box-shadow .18s ease;
    will-change: auto;
}

/* Desktop hover: depth increases slightly, never translates or scales. */
@media (hover:hover) and (pointer:fine) {
    #products .product-miniature:hover,
    .products .product-miniature:hover,
    .featured-products .product-miniature:hover,
    .product-accessories .product-miniature:hover,
    .product_list .product-miniature:hover,
    .product-miniature.js-product-miniature:hover {
        box-shadow: var(--frbpc-ring-hover, var(--frbpc-ring)),
                    var(--frbpc-elevation-hover, var(--frbpc-elevation));
    }
}

/* Mobile is intentionally lighter and tighter. */
@media (max-width:767.98px) {
    #products .product-miniature,
    .products .product-miniature,
    .featured-products .product-miniature,
    .product-accessories .product-miniature,
    .product_list .product-miniature,
    .product-miniature.js-product-miniature {
        border-radius: 5px;
        box-shadow: var(--frbpc-ring, inset 0 0 0 1px rgba(17,24,39,.085)),
                    var(--frbpc-mobile-elevation, 0 2px 8px rgba(17,24,39,.040));
    }
}

/*
 * Keep badges, wishlist, quick-view and theme overlays above the card surface.
 * No overflow:hidden is used, so Akira controls are not clipped.
 */
#products .product-miniature .product-flags,
.products .product-miniature .product-flags,
.featured-products .product-miniature .product-flags,
.product-accessories .product-miniature .product-flags,
.product-miniature.js-product-miniature .product-flags {
    z-index: 3;
}