/* =========================

   IMAGEN PRODUCTO – ASPECT RATIO

   ========================= */



/* Marco maestro: define el tamaño REAL */

.product-image-wrapper {

  position: relative;

  width: 100%;

  aspect-ratio: 4 / 5;   /* ������ CAMBIA SOLO ESTO */

  overflow: hidden;

}



/* Todos los wrappers internos ocupan el frame */

.product-image-wrapper > a,

.product-image-wrapper > a > figure,

.product-image-wrapper picture,

.product-image-wrapper img {

  width: 100%;

  height: 100%;

  display: block;

}



/* Imagen: siempre llena el frame */

.product-image-wrapper img {

  object-fit: cover;

  object-position: center;

  max-height: none;

  transition: transform 0.35s ease;

}



/* Hover imagen */

.product-image-wrapper:hover img {

  transform: scale(1.03);

}



/* Overlay amarillo */

.product-image-wrapper::after {

  content: "";

  position: absolute;

  inset: 0;

  background-color: rgba(255, 229, 35, 0.65);

  opacity: 0;

  transition: opacity 0.3s ease;

  z-index: 2;

}



.product-image-wrapper:hover::after {

  opacity: 1;

}



/* Título centrado sobre overlay */

.product-image-wrapper .woocommerce-loop-product__title {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;



  margin: 0;

  padding: 20px;



  color: #000;

  text-align: center;

  text-transform: uppercase;

  font-weight: 600;

  letter-spacing: 0.08em;

  font-size: 14px;



  opacity: 0;

  transition: opacity 0.3s ease;

  z-index: 3;

  pointer-events: none;

}



.product-image-wrapper:hover .woocommerce-loop-product__title {

  opacity: 1;

}



/* Mobile */

@media (max-width: 768px) {

  .product-image-wrapper {

    aspect-ratio: 2 / 3; /* un poco menos alto en mobile */

  }

}





/* ===================================

   OVERRIDE REAL DE IMÁGENES EN ELEMENTOR

   =================================== */



/* Contenedor real de producto en Elementor */

.elementor-widget-woocommerce-products li.product,

.elementor-loop-item {

  position: relative;

}



/* Forzar mismo alto visual usando aspect-ratio */

.elementor-widget-woocommerce-products li.product a,

.elementor-loop-item__featured-image {

  width: 100%;

  aspect-ratio: 4 / 5; /* AJUSTA AQUÍ */

  overflow: hidden;

  display: block;

}



/* Imagen REAL (esta es la clave) */

.elementor-widget-woocommerce-products li.product img,

.elementor-loop-item__featured-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  max-height: none !important;

  min-height: 100%;

  display: block;

}


/* =========================

   PRODUCTO – PRECIO CENTRADO

   ========================= */



.woocommerce ul.products li.product .price {

  display: block;

  width: 100%;

  text-align: center;

  margin-top: 10px;

}


/* =========================

   CENTRAR PRODUCTOS DENTRO DEL GRID

   (NO el contenedor)

   ========================= */



/* El grid de productos */

.elementor-shortcode .woocommerce ul.products {

  display: flex;

  flex-wrap: wrap;

  justify-content: center; /* ������ clave */

  gap: 30px;               /* espacio entre productos */

}



/* Quitar el layout por columnas de WooCommerce */

.elementor-shortcode .woocommerce ul.products li.product {

  float: none;

  margin: 0;

}


/* =========================

   GRID – 3 COLUMNAS

   ========================= */



.elementor-shortcode .woocommerce ul.products.columns-3 li.product {

  flex: 0 1 calc(33.333% - 30px);

  max-width: calc(33.333% - 30px);

}


/* =========================

   MOBILE – IMAGEN RECTANGULAR CONTROLADA

   ========================= */

@media (max-width: 600px) {



  .product-image-wrapper {

    aspect-ratio: 4 / 5;     /* ✅ rectangular, NO cuadrado */

    max-height: 420px;       /* evita imágenes gigantes */

    width: 100%;

    overflow: hidden;        /* ������ la franja nunca se sale */

  }



}

@media (max-width: 600px) {



  .product-image-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

  }



}


/* =========================

   MOBILE – FRANJA AMARILLA INFERIOR

   ========================= */

@media (max-width: 600px) {



  .product-image-wrapper::after {

    top: auto;

    bottom: 0;

    left: 0;

    right: 0;



    height: 52px;  /* altura coherente en móvil */

    width: 100%;



    background-color: rgba(255, 229, 35, 0.75);

    opacity: 1;

    z-index: 2;

  }



}



/* =========================

   MOBILE – TÍTULO EN FRANJA

   ========================= */

@media (max-width: 600px) {



  .product-image-wrapper .woocommerce-loop-product__title {

    top: auto;

    bottom: 0;

    height: 52px;

    width: 100%;



    display: flex;

    align-items: center;

    justify-content: center;



    padding: 0 12px;



    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    text-align: center;

    color: #000;



    opacity: 1;

    z-index: 3;

  }



}

/* =========================

   MOBILE – 1 PRODUCTO POR FILA

   ========================= */

@media (max-width: 600px) {



  .elementor-shortcode .woocommerce ul.products {

    justify-content: center;

  }



  .elementor-shortcode .woocommerce ul.products.columns-3 li.product {

    flex: 0 1 100%;

    max-width: 100%;

  }



}






/* =========================

   MOBILE – IMAGEN 4/5 (CORRECCIÓN DEFINITIVA)

   ========================= */

@media (max-width: 600px) {



  .product-image-wrapper {

    aspect-ratio: 4 / 5;   /* ✅ FORZAMOS 4/5 */

    height: auto;          /* ������ evita comportarse como 1:1 */

    max-height: none;

    width: 100%;

    overflow: hidden;

  }



}


/* =========================

   SEPARACIÓN BANNER / */   SEPARACIÓN BANNER / PRODUCTOS



.elementor-shortcode .woocommerce {

  margin-top: 7 em;

}