/* Fanor · Producto — Galería
 *
 * Todo lo ajustable pasa por variables CSS con el valor del diseño como
 * respaldo. Los controles del widget solo escriben esas variables, así que el
 * aspecto por defecto sigue saliendo de aquí y este archivo no tiene que
 * enterarse de qué se puede tocar desde el panel. */

.fanor-prod-galeria {
  display: flex;
  flex-direction: column;
  gap: var(--fg-gap, 14px);
}

.fanor-prod-galeria__main {
  position: relative;
  background: var(--fg-main-bg, #fff);
  border: var(--fg-main-bw, 1px) solid var(--fg-main-bc, var(--fn-borde));
  border-radius: var(--fg-main-radio, 8px);
  min-height: var(--fg-main-alto, 380px);
  padding: var(--fg-main-pad, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fanor-prod-galeria__viewport {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fanor-prod-galeria__img {
  max-width: 100%;
  max-height: var(--fg-img-alto, 320px);
  height: auto;
  object-fit: contain;
}

.fanor-prod-galeria__badge {
  position: absolute;
  top: var(--fg-badge-y, 14px);
  left: var(--fg-badge-x, 14px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--fg-badge-bg, var(--fn-verde-bg));
  color: var(--fg-badge-color, var(--fn-verde));
  font-size: var(--fg-badge-texto, 12px);
  font-weight: 600;
  padding: var(--fg-badge-pad-y, 5px) var(--fg-badge-pad-x, 10px);
  border-radius: var(--fg-badge-radio, 4px);
  z-index: 2;
}

/* Badge a la derecha: se ancla por `right` y hay que soltar el `left`, o el
   ancho del texto lo dejaría estirado de lado a lado. */
.fanor-prod-galeria.badge-derecha .fanor-prod-galeria__badge {
  left: auto;
  right: var(--fg-badge-x, 14px);
}

.fanor-prod-galeria.badge-abajo .fanor-prod-galeria__badge {
  top: auto;
  bottom: var(--fg-badge-y, 14px);
}

.fanor-prod-galeria__badge svg,
.fanor-prod-galeria__badge i {
  width: var(--fg-badge-ico, 14px);
  height: var(--fg-badge-ico, 14px);
  font-size: var(--fg-badge-ico, 14px);
}

.fanor-prod-galeria__thumbs {
  display: flex;
  gap: var(--fg-thumb-gap, 10px);
  flex-wrap: wrap;
  justify-content: var(--fg-thumb-align, flex-start);
}

.fanor-prod-galeria__thumb {
  width: var(--fg-thumb, 64px);
  height: var(--fg-thumb, 64px);
  border: var(--fg-thumb-bw, 2px) solid var(--fg-thumb-bc, var(--fn-borde));
  border-radius: var(--fg-thumb-radio, 6px);
  background: var(--fg-thumb-bg, #fff);
  padding: var(--fg-thumb-pad, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s ease;
}

.fanor-prod-galeria__thumb.is-active {
  border-color: var(--fg-thumb-activa, var(--fn-rojo));
}

.fanor-prod-galeria__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ---- Sin imagen (fallback propio, a juego con relacionados) ---- */
.fanor-prod-galeria__noimg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.fanor-prod-galeria__noimg-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #FAFAFA;
  border: 1px solid #EDEDED;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C9A0A0;               /* el SVG usa stroke=currentColor */
}
.fanor-prod-galeria__noimg-icon {
  display: block;
  width: 56px;
  height: 56px;
}
.fanor-prod-galeria__noimg-label {
  font-family: var(--fn-fuente-cond);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #BCBCBC;
}

/* Foto de reemplazo elegida en el widget: se le da el mismo trato de tamaño que
   a una foto de producto real, para que al alternar entre un producto con foto y
   otro sin ella la caja no cambie de altura. */
.fanor-prod-galeria__noimg-img {
  display: block;
  max-width: 100%;
  max-height: var(--fg-img-alto, 320px);
  height: auto;
  object-fit: contain;
}

/* ════════════════ RESPONSIVE ≤767px ════════════════
   La foto es la razón de ser de esta página y en un teléfono estaba recibiendo el
   peor trato de toda la ficha: metida en una caja de 342×302 con marco y 20px de
   aire, la pieza ocupaba menos de la cuarta parte de la primera pantalla.

   Mismo tratamiento que la parrilla del catálogo, para que la ficha y el catálogo
   se lean como la misma tienda:
     · a sangre hasta el borde del teléfono (de ~250px de foto a 390: +56% de lado,
       más del doble de superficie),
     · plato gris cuadrado en vez de caja blanca con marco,
     · `multiply` porque las fotos del ERP traen el blanco grabado y sobre el plato
       dibujarían un cuadrado blanco (ver productos-grid.css).

   El sangrado sale de --fnr-sangrado-izq/der, que publica sangrado.js sobre el
   `[data-fanor-sangrado]` del widget; sin JS valen 0px y la galería se queda
   dentro del container. El umbral 767.98 es el breakpoint móvil de Elementor: por
   encima la ficha ya no es de una columna y sangrar no tendría sentido. */
@media (max-width: 767.98px) {
  .fanor-prod-galeria {
    --fnr-sangrado-izq: 0px;
    --fnr-sangrado-der: 0px;
    gap: var(--fg-gap, 12px);
  }

  .fanor-prod-galeria__main {
    margin-left: var(--fnr-sangrado-izq);
    margin-right: var(--fnr-sangrado-der);
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 18px;
    background: var(--fanor-plato, #F2F2F2);
    border: 0;
    border-radius: 0;
    /* Confina el `multiply` a este plato: sin `isolate` la mezcla buscaría el
       fondo del contexto de apilamiento de más arriba. */
    isolation: isolate;
  }

  .fanor-prod-galeria__viewport {
    height: 100%;
  }

  .fanor-prod-galeria__img {
    max-height: 100%;
    mix-blend-mode: multiply;
  }

  /* La foto de reemplazo recibe el mismo `multiply` que una foto real, y es
     deliberado: sobre el plato gris, una imagen de relleno con fondo blanco
     —que es lo que suele ser— dibujaría un cuadrado blanco. Un PNG con
     transparencia no se ve afectado por la mezcla, así que el trato sirve para
     los dos casos. */
  .fanor-prod-galeria__noimg-img {
    max-height: 100%;
    mix-blend-mode: multiply;
  }

  /* Las miniaturas NO se sangran: son controles, y a sangre el primero quedaría
     pegado al borde de la pantalla. */
  .fanor-prod-galeria__badge {
    top: var(--fg-badge-y, 10px);
    left: var(--fg-badge-x, 10px);
    font-size: var(--fg-badge-texto, 11px);
    padding: var(--fg-badge-pad-y, 4px) var(--fg-badge-pad-x, 8px);
  }

  .fanor-prod-galeria.badge-derecha .fanor-prod-galeria__badge {
    left: auto;
    right: var(--fg-badge-x, 10px);
  }

  .fanor-prod-galeria.badge-abajo .fanor-prod-galeria__badge {
    top: auto;
    bottom: var(--fg-badge-y, 10px);
  }

  /* El fallback "sin imagen" pintaba su círculo en #FAFAFA, invisible sobre el
     plato gris; pasa a blanco como en las tarjetas del catálogo. */
  .fanor-prod-galeria__noimg-circle {
    background: #FFFFFF;
    border-color: #E4E4E4;
  }

  /* Miniaturas: de "wrap" a carrusel horizontal con scroll-snap. */
  .fanor-prod-galeria__thumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fanor-prod-galeria__thumbs::-webkit-scrollbar {
    display: none;
  }
  .fanor-prod-galeria__thumb {
    flex: 0 0 var(--fg-thumb, 56px);
    width: var(--fg-thumb, 56px);
    height: var(--fg-thumb, 56px);
    scroll-snap-align: start;
  }

  .fanor-prod-galeria__noimg-circle {
    width: 96px;
    height: 96px;
  }
  .fanor-prod-galeria__noimg-icon {
    width: 46px;
    height: 46px;
  }
}