/* Marco cuadrado para la foto de producto — shop, categorías y subcategorías.
 *
 * El bundle (main-ShOSBjOT.css) fija:
 *     .product-card .card-img     { height: 260px }
 *     .product-card .card-img img { object-fit: cover }
 *
 * Una caja de Lego es apaisada, así que "cover" la agranda hasta tapar los
 * 260px de alto y le corta los costados o la parte de arriba: se pierde el
 * nombre del set y media caja. Esto lo reemplaza por un marco 1:1 con la foto
 * contenida entera. Las bandas que sobran quedan del color del propio marco
 * (#1a1a1a, ya definido por el bundle), así que no aparece ningún blanco.
 *
 * Va en un archivo aparte y no dentro del bundle porque el bundle está
 * minificado y sin fuente: se sobrescribe desde afuera, nunca se edita. Se
 * carga DESPUÉS de main-ShOSBjOT.css y repite su misma especificidad
 * (.product-card .card-img, dos clases), que es lo que hace ganar a estas
 * reglas sin necesidad de !important. Un selector de una sola clase perdería.
 */

.product-card .card-img,
.card-img {
    height: auto;
    aspect-ratio: 1 / 1;
}

/* Incluye el carrusel de fotos dentro de la tarjeta (.main-img / .alt-img). */
.product-card .card-img img,
.card-img img {
    object-fit: contain;
}