/* =========================================================
   VORLANO — product-images.css
   <link rel="stylesheet" href="css/product-images.css" />
   ========================================================= */

/* ── Base: ambas imágenes absolutas, cubriendo el media ─── */
.product__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  will-change: transform, opacity;
}

/* Ícono SVG detrás cuando hay foto */
.product__media--photo::before,
.product__media--photo::after { z-index: 0; }

/* ── Imagen principal: visible por defecto ─────────────── */
.product__img--main {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
  transition:
    opacity   .55s cubic-bezier(.2,.7,.2,1),
    transform .55s cubic-bezier(.2,.7,.2,1);
}

/* ── Imagen hover (modelo): oculta por defecto ──────────── */
.product__img--hover {
  z-index: 2;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity   .55s cubic-bezier(.2,.7,.2,1),
    transform .55s cubic-bezier(.2,.7,.2,1);
}

/* ── Hover: crossfade entre las dos imágenes ────────────── */
.product:hover .product__img--main {
  opacity: 0;
  transform: scale(1.04);
}
.product:hover .product__img--hover {
  opacity: 1;
  transform: scale(1);
}

/* Si solo hay imagen principal (sin hover): zoom sutil */
.product__img--main:only-of-type {
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.product:hover .product__img--main:only-of-type {
  opacity: 1;
  transform: scale(1.05);
}

/* Botón favorito y badge por encima de ambas fotos */
.product__media--photo .product__fav   { z-index: 3; }
.product__media--photo .product__badge { z-index: 3; }

/* ── Etiqueta "Vista con modelo" ──────────────────────────── */
.product__hover-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(14,11,8,.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(244,234,216,.8);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(199,154,90,.22);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity   .4s cubic-bezier(.2,.7,.2,1) .08s,
    transform .4s cubic-bezier(.2,.7,.2,1) .08s;
}
.product__hover-hint svg { stroke: var(--gold, #c79a5a); flex-shrink: 0; }
.product:hover .product__hover-hint {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Miniatura en el carrito ─────────────────────────────── */
.cart-item__img {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.cart-item__img--photo::before,
.cart-item__img--photo::after { display: none !important; }
.cart-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: inherit;
}

/* ── Galería de detalle de producto ──────────────────────── */
/* NOTA: .gallery-view usa position:absolute definido en styles.css — no sobreescribir */
.gallery-view--photo::before,
.gallery-view--photo::after { display: none !important; }
.gallery-view img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}