/*
 * Tarjetas de producto (.product-box-4) en móvil.
 *
 * El template fija la altura de la imagen en ~82px (calc que arranca en 80px)
 * con object-fit:contain. Eso se pensó para fotos apaisadas; nuestras fotos de
 * flores son verticales (p. ej. 1155x1362), así que quedaban encajonadas en una
 * tira diminuta. Aquí se les da una altura mucho mayor SOLO en móvil, para que
 * la flor se vea grande. Se mantiene object-fit:contain: nunca se recorta la
 * imagen, solo se muestra completa y centrada.
 *
 * Va DESPUÉS de style.css (mismo selector, gana por orden de carga). El
 * escritorio no se toca: no hay reglas fuera de estos media queries.
 */

/* Móvil de una sola columna (por debajo de col-sm-6). */
@media (max-width: 575.98px) {
    .product-box-4 .product-image img {
        width: 100%;
        height: 300px;
        margin: 18px auto 14px;
    }
}

/* Móvil grande / tablet pequeña: 2 productos por fila (col-sm-6). Al ser más
   estrechos que en una sola columna, la imagen se baja un poco. */
@media (min-width: 576px) and (max-width: 767.98px) {
    .product-box-4 .product-image img {
        width: 100%;
        height: 240px;
        margin: 18px auto 14px;
    }
}