/* BS – Galería del producto: caja de proporción fija para que las fotos verticales no ocupen varias pantallas */
.single-product .woocommerce-product-gallery { position: relative; }
.single-product .woocommerce-product-gallery__image {
  background: var(--surface-soft, #f7f8fa);
  border-radius: 24px;
  overflow: hidden;
}
.single-product .woocommerce-product-gallery__image > a { display: block; }
.single-product .woocommerce-product-gallery__image > a > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  padding: 6%;
  box-sizing: border-box;
  background: transparent !important; /* theme.css le pone fondo propio; con multiply eso dejaba un rectángulo visible */
  border-radius: 0 !important;
  mix-blend-mode: multiply; /* el fondo blanco de la foto toma el gris de la caja */
}

/* Miniaturas (si el producto tiene varias fotos) */
.single-product .flex-control-thumbs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 10px 0 0 !important; padding: 0 !important; list-style: none; }
.single-product .flex-control-thumbs li { width: auto !important; float: none !important; margin: 0 !important; background: var(--surface-soft, #f7f8fa); }
.single-product .flex-control-thumbs img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 8%; box-sizing: border-box; mix-blend-mode: multiply; opacity: .6; cursor: pointer; transition: opacity .15s ease; }
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover { opacity: 1; }

/* Botón de pantalla completa: círculo blanco con lupa en vez del emoji suelto */
.single-product .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 9;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(10, 12, 18, .12);
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
}
.single-product .woocommerce-product-gallery__trigger > span { display: none; }
.single-product .woocommerce-product-gallery__trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background: var(--text-ink, #0a0c12);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22m20%2020-4.2-4.2M11%208.5v5M8.5%2011h5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22m20%2020-4.2-4.2M11%208.5v5M8.5%2011h5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

@media (max-width: 768px) {
  .single-product .woocommerce-product-gallery__image > a > img { aspect-ratio: 1 / 1; padding: 5%; }
  .single-product .woocommerce-product-gallery__image { border-radius: 20px; }
  .single-product .woocommerce-product-gallery__trigger { top: 10px; right: 10px; width: 36px; height: 36px; }
}