/*
 * NUEVAMANO — escenario único para prendas
 *
 * Todas las imágenes comerciales de prendas comparten
 * exactamente el mismo fondo visual.
 */

:root{
  --nm-product-stage:
    radial-gradient(
      circle at 50% 37%,
      rgba(255,255,255,.96) 0%,
      rgba(239,226,207,.72) 58%,
      rgba(217,199,174,.52) 100%
    );
}


/* TARJETAS — inicio, catálogo, relacionados, favoritos */
.product-media,
.nm14-media,
.product-image,
.product-photo,
.product-thumb{
  position:relative;
  background:var(--nm-product-stage) !important;
  overflow:hidden;
}


/* FICHA INDIVIDUAL */
.gallery,
.gallery > img,
#productImage{
  background:var(--nm-product-stage) !important;
}


/* MINIATURAS */
.gallery-thumb{
  background:var(--nm-product-stage) !important;
  overflow:hidden;
}


/* BOLSA / CARRITO */
.cart-visual,
.cart-item > img,
.cart-item img{
  background:var(--nm-product-stage) !important;
}


/* MIS PRENDAS Y OTROS LISTADOS */
.mp-foto,
.mp-card img,
.prenda-foto,
.prenda-imagen{
  background:var(--nm-product-stage) !important;
}


/*
 * IMPORTANTE:
 * cuando recorte-catalogo.js convierte la foto a PNG/blob
 * transparente, dejamos ver el escenario de atrás.
 */
.product-media img,
.nm14-media img,
.product-image img,
.product-photo img,
.product-thumb img,
.gallery img,
.gallery-thumb img,
#productImage,
.cart-visual img,
.cart-item img,
.mp-foto img,
.mp-card img,
.prenda-foto img,
.prenda-imagen img{
  background:transparent !important;
}


/* Presentación uniforme */
.product-media img,
.nm14-media img,
#productImage,
.gallery-thumb img,
.cart-item img{
  object-fit:contain;
  object-position:center center;
}


/*
 * Nunca volver a los fondos genéricos gris/blanco
 * definidos anteriormente en public.css.
 */
.product-media,
.gallery > img,
.gallery-thumb,
.cart-visual{
  background-color:transparent !important;
}


/* ===== NUEVAMANO — GALERIA 4X5 + FOTOS MULTIPLES ===== */

/*
 * La GALERIA puede crecer porque debajo de la principal
 * pueden existir miniaturas.
 */
.gallery{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  overflow:visible !important;
  padding:0 !important;
}

/*
 * Solamente la FOTO PRINCIPAL usa 4:5.
 */
#productImage{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:4 / 5 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
}

#productImage[data-nm-modelo="1"]{
  object-fit:contain !important;
}

/*
 * Recuperar tira de fotos secundarias.
 */
#productThumbs{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  height:auto !important;
  margin-top:12px !important;
  overflow:visible !important;
}

/*
 * Cada miniatura conserva la misma estética 4:5.
 */
#productThumbs .gallery-thumb{
  display:block !important;
  flex:0 0 76px !important;
  width:76px !important;
  height:auto !important;
  aspect-ratio:4 / 5 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:10px !important;
  cursor:pointer !important;
}

#productThumbs .gallery-thumb img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:cover !important;
  object-position:center !important;
}

#productThumbs .gallery-thumb img[data-nm-modelo="1"]{
  object-fit:contain !important;
}

/* Foto elegida */
#productThumbs .gallery-thumb.is-active{
  outline:2px solid rgba(31,70,57,.75) !important;
  outline-offset:2px !important;
}

@media (max-width:760px){
  #productImage{
    width:100% !important;
    aspect-ratio:4 / 5 !important;
  }

  #productThumbs{
    gap:8px !important;
    margin-top:10px !important;
  }

  #productThumbs .gallery-thumb{
    flex-basis:62px !important;
    width:62px !important;
  }
}

/* ===== NM MOBILE FOTO REAL V3 ===== */
@media (max-width:760px){

  /* HOME Y CATALOGO: clases reales usadas actualmente */
  #homeProducts .product-media,
  #catalogGrid .product-media,
  .catalog-layout .product-grid .product-media{
    box-sizing:border-box !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:4 / 5 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  #homeProducts .product-media > img,
  #catalogGrid .product-media > img,
  .catalog-layout .product-grid .product-media > img{
    box-sizing:border-box !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:100% !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  /* El lienzo de portada IA es 4:5 completo; evitar recorte adicional. */
  #homeProducts .product-media > img[data-nm-modelo="1"],
  #catalogGrid .product-media > img[data-nm-modelo="1"],
  .catalog-layout .product-grid .product-media > img[data-nm-modelo="1"]{
    object-fit:contain !important;
  }

  #homeProducts .nm-slot-placeholder__visual,
  #catalogGrid .nm-slot-placeholder__visual{
    aspect-ratio:4 / 5 !important;
  }
}
/* ===== FIN NM MOBILE FOTO REAL V3 ===== */

/* El collage manual conserva su lienzo completo y su proporción original. */
#homeProducts .product-media:has(> img[data-nm-modelo="1"]),
#catalogGrid .product-media:has(> img[data-nm-modelo="1"]),
.product-grid .product-media:has(> img[data-nm-modelo="1"]){
  height:auto !important;
  aspect-ratio:auto !important;
}

#homeProducts .product-media > img[data-nm-modelo="1"],
#catalogGrid .product-media > img[data-nm-modelo="1"],
.product-grid .product-media > img[data-nm-modelo="1"]{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
}

.product-card .product-media:hover > img[data-nm-modelo="1"]{
  transform:none !important;
}

.gallery > #productImage[data-nm-modelo="1"]{
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
}