/**
 * Mecha Media Gallery — Estilos del componente frontend
 * Versión: 1.0.0
 * Identidad: MechatronicStore (morado #6017b1, Montserrat)
 *
 * Tabla de contenidos:
 *   1. Variables CSS
 *   2. Contenedor raíz
 *   3. Viewport y aspecto 4:3
 *   4. Slots (imagen y video)
 *   5. Estado del video: poster, loading, error, playing
 *   6. Botón play
 *   7. Botones de navegación prev/next
 *   8. Tira de thumbnails
 *   9. Contador móvil
 *  10. Estados de foco y teclado
 *  11. prefers-reduced-motion
 *  12. Responsive: tablet (≤ 1023px)
 *  13. Responsive: móvil (≤ 767px)
 *  14. Animaciones y keyframes
 */

/* =========================================================
   1. VARIABLES CSS
   ========================================================= */
.mecha-gallery {
  --mmg-brand:          #6017b1;
  --mmg-brand-dark:     #5a0bb5;
  --mmg-brand-light:    #7d21c7;
  --mmg-brand-alpha:    rgba(96, 23, 177, 0.15);
  --mmg-white:          #ffffff;
  --mmg-black:          #000000;
  --mmg-bg:             #ffffff;
  --mmg-surface:        #ffffff;
  --mmg-border:         #e8e4f0;
  --mmg-text:           #2e2e2e;
  --mmg-muted:          #888;
  --mmg-error:          #d63838;
  --mmg-success:        #2a9d4a;

  /* Proporción del visor principal.
     Es el valor de padding-bottom: alto / ancho en porcentaje.
     100% = 1:1 (cuadrado, lo que usa la tienda hoy: 343x343 en móvil
     y 762x762 en escritorio). 75% = 4:3. */
  --mmg-aspect:         100%;

  /* Radios */
  --mmg-radius-main:    12px;
  --mmg-radius-thumb:   8px;
  --mmg-radius-btn:     50%;

  /* Sombras */
  --mmg-shadow-sm:      0 2px 8px rgba(0,0,0,0.08);
  --mmg-shadow-md:      0 4px 18px rgba(0,0,0,0.14);
  --mmg-shadow-lg:      0 8px 32px rgba(0,0,0,0.2);

  /* Transiciones */
  --mmg-transition:     all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --mmg-transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Thumbnails — tamaño y espacio */
  --mmg-thumb-w:        96px;
  --mmg-thumb-h:        72px;
  --mmg-thumb-gap:      6px;

  /* Play button */
  --mmg-play-size:      64px;

  /* Spinner */
  --mmg-spinner-size:   40px;
}


/* =========================================================
   2. CONTENEDOR RAÍZ
   ========================================================= */
.mecha-gallery {
  position: relative;
  width: 100%;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Aislamiento de contexto de apilamiento */
  isolation: isolate;
}


/* =========================================================
   3. VIEWPORT Y PROPORCIÓN CONFIGURABLE (1:1 por defecto)
   ========================================================= */
.mecha-gallery__viewport {
  position: relative;
  width: 100%;
  border-radius: var(--mmg-radius-main);
  overflow: hidden;
  background: var(--mmg-bg);
  box-shadow: var(--mmg-shadow-md);

  /* Proporciona contexto para los botones de navegación absolutos */
}

/* Truco del padding-bottom: la caja se sostiene sola, no depende de que
   ningún ancestro respete una altura. Ojo con esto, que es justo lo que
   rompió las 1.487 fichas esta semana: acá NO va ninguna altura fija,
   ni max-height, ni height en px.

   --mmg-aspect es alto / ancho en porcentaje:
     100%  = 1:1  (cuadrado, lo que usa la tienda hoy)
      75%  = 4:3

   El 100% repetido dentro del var() es el respaldo a propósito: si Remove
   Unused CSS de WP Rocket se comiera el bloque de variables, el visor
   igual queda cuadrado y no colapsa a alto cero. */
.mecha-gallery__aspect {
  position: relative;
  width: 100%;
  padding-bottom: var(--mmg-aspect, 100%);
  height: 0;
  overflow: hidden;
  background: #ffffff;
}

/* Proporciones disponibles. Se eligen de dos formas:
     1) clase en el contenedor: <div class="mecha-gallery mecha-gallery--ratio-4-3">
     2) inline en el contenedor: style="--mmg-aspect:75%"
   Para esta prueba no hace falta ninguna de las dos: el default ya es 1:1.
   Si más adelante usas la clase, revisa que quede escrita en el HTML que
   sirve el servidor; si solo la pusiera el JS, Remove Unused CSS la borra.
   La forma inline sobrevive siempre, porque no es un selector. */
.mecha-gallery--ratio-1-1 {
  --mmg-aspect: 100%;
}

.mecha-gallery--ratio-4-3 {
  --mmg-aspect: 75%;
}


/* =========================================================
   4. SLOTS (IMAGEN Y VIDEO)
   ========================================================= */
.mecha-gallery__slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mmg-bg);

  /* Z-index bajo: el slot entrante (is-active) se coloca ENCIMA del saliente */
  z-index: 1;

  /* Oculto con visibility para mantener accesibilidad y permitir transición */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* Transición solo de opacity — más simple y más smooth */
  transition:
    opacity   0.45s ease,
    visibility 0s   linear 0.45s; /* visibility:hidden al FINAL de la salida */

  outline: none;
}

.mecha-gallery__slot.is-active {
  z-index: 2;          /* Por encima del slot saliente durante el cross-fade */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* visibility:visible INMEDIATAMENTE al entrar */
  transition:
    opacity   0.45s ease,
    visibility 0s   linear 0s;
}

/* ── Imagen ── */
.mecha-gallery__slot--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

/* ── Video contenedor ── */
.mecha-gallery__slot--video {
  cursor: default;
}

/* ── Iframe YouTube / Vimeo ── */
.mecha-gallery__embed-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 5;    /* Encima del poster */
  background: #000;
}


/* =========================================================
   5. ESTADO DEL VIDEO: POSTER / LOADING / ERROR / PLAYING
   ========================================================= */

/* ── El atributo hidden manda SIEMPRE ─────────────────────
   PHP imprime el spinner y el cartel de error con el atributo hidden
   (class-gallery-renderer.php, líneas 244 y 248), pero la regla base les
   da display:flex, así que hoy el cartel "No se pudo cargar el video"
   queda encima del video aunque esté reproduciendo. Esta es la regla que
   faltaba en las 1.274 líneas del archivo.

   El !important va a propósito: la regla
   .mecha-gallery__slot--video.is-loading .mecha-gallery__loading
   tiene más especificidad (0,3,0) que .mecha-gallery__loading[hidden]
   (0,2,0) y le ganaría sin él.

   Los tres selectores están escritos tal como aparecen en el HTML que
   sirve el servidor, para que Remove Unused CSS de WP Rocket los
   reconozca como usados y no los borre.

   Consecuencia para el JS: mostrar el spinner o el error se hace
   apagando la propiedad (el.hidden = false), no solo poniendo la clase
   de estado. Con la clase sola ya no se ven. */
.mecha-gallery [hidden],
.mecha-gallery__loading[hidden],
.mecha-gallery__error[hidden] {
  display: none !important;
}


/* ── Poster (portada) ── */
.mecha-gallery__poster {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mmg-bg);
  z-index: 2;
  transition: opacity var(--mmg-transition-slow);
}

/* contain, no cover: la portada del video es una foto de producto y con
   cover se le recortan los bordes dentro de la caja cuadrada. El fondo del
   poster ya es blanco, así que las bandas no se notan sobre catálogo. */
.mecha-gallery__poster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Placeholder monocromático cuando no hay imagen de portada */
.mecha-gallery__poster-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ede6f7 0%, #f8f5ff 100%);
}

.mecha-gallery__poster-icon {
  color: var(--mmg-brand-light);
  opacity: 0.4;
}

.mecha-gallery__poster-icon svg {
  width: 80px;
  height: 80px;
}

/* Poster oculto cuando el video está reproduciéndose */
.mecha-gallery__slot--video.is-playing .mecha-gallery__poster {
  opacity: 0;
  pointer-events: none;
}

/* ── Loading (spinner) ── */
.mecha-gallery__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(247, 247, 249, 0.7);
  backdrop-filter: blur(4px);
  z-index: 3;
}

/* El slot muestra el spinner al estar en estado loading */
.mecha-gallery__slot--video.is-loading .mecha-gallery__loading {
  display: flex;
}

.mecha-gallery__spinner {
  width: var(--mmg-spinner-size);
  height: var(--mmg-spinner-size);
  border: 3px solid var(--mmg-border);
  border-top-color: var(--mmg-brand);
  border-radius: 50%;
  animation: mmg-spin 0.75s linear infinite;
}

/* ── Error ── */
.mecha-gallery__error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(247, 247, 249, 0.96);
  z-index: 4;
  padding: 24px;
  text-align: center;
}

.mecha-gallery__error-icon {
  color: var(--mmg-error);
}

.mecha-gallery__error-icon svg {
  width: 48px;
  height: 48px;
}

.mecha-gallery__error p {
  font-size: 14px;
  color: var(--mmg-text);
  margin: 0;
  font-weight: 600;
}

.mecha-gallery__retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: none;
  border-radius: 999px;
  background: var(--mmg-brand);
  color: var(--mmg-white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--mmg-transition);
}

.mecha-gallery__retry-btn:hover {
  background: var(--mmg-brand-dark);
  transform: translateY(-1px);
  box-shadow: var(--mmg-shadow-sm);
}

/* ── Elemento <video> ── */
/* contain: el MP4 casi nunca viene cuadrado. Con cover, un video 16:9
   dentro del visor 1:1 pierde alrededor de un cuarto por cada costado y
   se come el producto. Con contain se ve entero. */
.mecha-gallery__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  /* El video empieza invisible; se muestra cuando está listo */
  opacity: 0;
  transition: opacity var(--mmg-transition-slow);
}

.mecha-gallery__slot--video.is-playing .mecha-gallery__video {
  opacity: 1;
}

/* Después de cargar, mostramos el video (aunque esté pausado) */
.mecha-gallery__slot--video.is-loaded .mecha-gallery__video {
  opacity: 1;
}


/* =========================================================
   6. BOTÓN PLAY
   ========================================================= */
.mecha-gallery__play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
  /* El ícono en sí */
}

.mecha-gallery__play-btn::before {
  content: '';
  display: block;
  width: var(--mmg-play-size);
  height: var(--mmg-play-size);
  border-radius: var(--mmg-radius-btn);
  background: rgba(96, 23, 177, 0.88);
  position: absolute;
  transition: var(--mmg-transition);
  box-shadow: 0 4px 20px rgba(96, 23, 177, 0.4);
}

.mecha-gallery__play-btn svg {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  color: var(--mmg-white);
  margin-left: 3px; /* Ajuste óptico del triángulo */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  transition: var(--mmg-transition);
}

/* Ocultar botón play cuando el video está reproduciéndose */
.mecha-gallery__slot--video.is-playing .mecha-gallery__play-btn,
.mecha-gallery__slot--video.is-loading .mecha-gallery__play-btn {
  opacity: 0;
  pointer-events: none;
}

/* Hover del play button */
.mecha-gallery__play-btn:hover::before {
  background: var(--mmg-brand-dark);
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(96, 23, 177, 0.55);
}

.mecha-gallery__play-btn:hover svg {
  transform: scale(1.05);
}

/* Foco teclado en el play button */
.mecha-gallery__play-btn:focus-visible {
  outline: 3px solid var(--mmg-brand);
  outline-offset: 4px;
  border-radius: var(--mmg-radius-btn);
}


/* =========================================================
   7. BOTONES DE NAVEGACIÓN PREV / NEXT
   ========================================================= */
.mecha-gallery__nav {
  position: absolute;
  z-index: 20;

  /* Tamaño fijo cuadrado — necesario para border-radius:50% */
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;

  /* Círculo perfecto — !important + aspect-ratio para sobrevivir cualquier reset */
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  cursor: pointer;

  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--mmg-shadow-sm);

  color: var(--mmg-text);
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
  opacity: 0;

  /* Centrado vertical en el viewport 4:3 */
  top: 37.5%;
  transform: translateY(-50%);
}

.mecha-gallery__nav svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mecha-gallery__nav--prev {
  left: 10px;
}

.mecha-gallery__nav--next {
  right: 10px;
}

/* Mostrar en hover o foco dentro del viewport */
.mecha-gallery:hover .mecha-gallery__nav,
.mecha-gallery:focus-within .mecha-gallery__nav {
  opacity: 1;
}

.mecha-gallery__nav:hover {
  background: var(--mmg-white);
  color: var(--mmg-brand);
  box-shadow: var(--mmg-shadow-md);
  transform: translateY(-50%) scale(1.08);
}

.mecha-gallery__nav:focus-visible {
  opacity: 1;
  outline: 3px solid var(--mmg-brand);
  outline-offset: 2px;
}

.mecha-gallery__nav:disabled {
  opacity: 0.3;
  cursor: default;
}


/* =========================================================
   8. TIRA DE THUMBNAILS
   ========================================================= */
.mecha-gallery__thumbs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;   /* Centrar la tira horizontalmente */
  gap: var(--mmg-thumb-gap);

  margin-top: 12px;
  padding: 6px 0 4px;        /* Espacio arriba para respirar */

  /* Separador sutil entre visor y tira */
  border-top: 1px solid var(--mmg-border);

  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;     /* Ocultar scrollbar — sigue funcionando con swipe */
  scroll-snap-type: x mandatory;
}

/* Ocultar scrollbar en Webkit también */
.mecha-gallery__thumbs::-webkit-scrollbar {
  display: none;
}




/* Thumbnail individual */
.mecha-gallery__thumb {
  flex: 0 0 var(--mmg-thumb-w);
  width: var(--mmg-thumb-w);
  height: var(--mmg-thumb-h);
  padding: 0;
  border: 2px solid var(--mmg-border);
  border-radius: var(--mmg-radius-thumb);
  background: var(--mmg-bg);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: var(--mmg-transition);
  scroll-snap-align: start;
  outline: none;

  /* Para animar la selección */
  box-shadow: none;
}

/* contain: las fotos de la tienda son cuadradas y la miniatura es 4:3
   (96x72), así que cover les cortaba arriba y abajo. El fondo de la
   miniatura ya es blanco, igual que las fotos de catálogo. */
.mecha-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.2s ease;
}

.mecha-gallery__thumb:hover img {
  transform: scale(1.06);
}

/* Placeholder texto en miniatura sin imagen */
.mecha-gallery__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--mmg-muted);
}

/* Estado activo / seleccionado */
.mecha-gallery__thumb.is-active {
  border-color: var(--mmg-brand);
  box-shadow: 0 0 0 2px var(--mmg-brand-alpha);
}

.mecha-gallery__thumb.is-active img {
  /* Efecto viñeta sutil */
  filter: brightness(0.97);
}

.mecha-gallery__thumb:hover:not(.is-active) {
  border-color: var(--mmg-brand-light);
}

/* Foco de teclado en thumbnail */
.mecha-gallery__thumb:focus-visible {
  outline: 3px solid var(--mmg-brand);
  outline-offset: 2px;
}

/* ── Badge de video en la miniatura ── */
.mecha-gallery__video-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(96, 23, 177, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: var(--mmg-transition);
}

.mecha-gallery__video-badge svg {
  width: 12px;
  height: 12px;
  color: var(--mmg-white);
}

.mecha-gallery__thumb--video {
  /* Leve overlay oscuro para diferenciar visualmente */
}

.mecha-gallery__thumb--video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  border-radius: calc(var(--mmg-radius-thumb) - 2px);
  pointer-events: none;
  transition: background var(--mmg-transition);
}

.mecha-gallery__thumb--video:hover::after {
  background: rgba(0, 0, 0, 0.06);
}


/* =========================================================
   9. CONTADOR MÓVIL
   ========================================================= */
.mecha-gallery__counter {
  display: none; /* Oculto en desktop, visible en móvil */
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mmg-muted);
}

.mecha-gallery__counter-current {
  color: var(--mmg-brand);
  font-weight: 700;
}


/* =========================================================
   10. ESTADOS DE FOCO Y TECLADO
   ========================================================= */
.mecha-gallery__slot:focus-visible {
  outline: 3px solid var(--mmg-brand);
  outline-offset: -3px;
  border-radius: var(--mmg-radius-main);
}

/* Evitar outline doble cuando el foco está en un hijo */
.mecha-gallery__slot:focus:not(:focus-visible) {
  outline: none;
}


/* =========================================================
   11. PREFERS-REDUCED-MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  /* Deshabilitar todas las transiciones y animaciones */
  .mecha-gallery *,
  .mecha-gallery *::before,
  .mecha-gallery *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* El spinner no se anima */
  .mecha-gallery__spinner {
    border-top-color: var(--mmg-brand);
    animation: none;
    opacity: 0.4;
  }

  /* El video NO se reproduce automáticamente */
  /* (controlado por JS, esta clase bloquea el autoplay) */
  .mecha-gallery[data-reduced-motion="true"] .mecha-gallery__slot--video.is-playing .mecha-gallery__poster {
    opacity: 1;
    pointer-events: auto;
  }

  .mecha-gallery[data-reduced-motion="true"] .mecha-gallery__slot--video.is-playing .mecha-gallery__video {
    opacity: 0;
  }
}


/* =========================================================
   12. RESPONSIVE: TABLET (768px – 1023px)
   ========================================================= */
@media (max-width: 1023px) {
  .mecha-gallery {
    --mmg-thumb-w:     64px;
    --mmg-thumb-h:     48px;
    --mmg-play-size:   56px;
  }

  .mecha-gallery__nav {
    width: 36px;
    height: 36px;
  }

  .mecha-gallery__nav svg {
    width: 18px;
    height: 18px;
  }

  /* En tablet los botones nav son siempre visibles */
  .mecha-gallery__nav {
    opacity: 0.85;
  }
}


/* =========================================================
   13. RESPONSIVE: MÓVIL (≤ 767px)
   ========================================================= */
@media (max-width: 767px) {
  .mecha-gallery {
    --mmg-thumb-w:     56px;
    --mmg-thumb-h:     42px;
    --mmg-thumb-gap:   6px;
    --mmg-play-size:   50px;
    --mmg-radius-main: 8px;
    --mmg-radius-thumb: 6px;
  }

  /* En móvil el visor es ancho completo */
  .mecha-gallery__viewport {
    border-radius: var(--mmg-radius-main);
  }

  /* Botones nav más pequeños y siempre visibles en móvil */
  .mecha-gallery__nav {
    width: 32px;
    height: 32px;
    opacity: 0.9;
  }

  .mecha-gallery__nav--prev {
    left: 6px;
  }

  .mecha-gallery__nav--next {
    right: 6px;
  }

  .mecha-gallery__nav svg {
    width: 16px;
    height: 16px;
  }

  /* Contador: visible en móvil */
  .mecha-gallery__counter {
    display: flex;
  }

  /* Thumbnails en móvil: barra horizontal scrollable */
  .mecha-gallery__thumbs {
    gap: 6px;
    margin-top: 8px;
    /* Pequeño efecto fade en los bordes para indicar scroll */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    );
  }

  /* El play button más pequeño en móvil */
  .mecha-gallery__play-btn::before {
    width: var(--mmg-play-size);
    height: var(--mmg-play-size);
  }

  .mecha-gallery__play-btn svg {
    width: 22px;
    height: 22px;
  }

  /* Error state más compacto */
  .mecha-gallery__error {
    padding: 16px;
    gap: 8px;
  }

  .mecha-gallery__error-icon svg {
    width: 36px;
    height: 36px;
  }

  .mecha-gallery__error p {
    font-size: 13px;
  }
}


/* =========================================================
   14. ANIMACIONES Y KEYFRAMES
   ========================================================= */
@keyframes mmg-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes mmg-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mmg-slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animación de entrada del slot activo */
.mecha-gallery__slot.is-active {
  animation: mmg-fade-in 0.25s ease forwards;
}

/* Badge de video: micro-animación al activar */
.mecha-gallery__thumb--video.is-active .mecha-gallery__video-badge {
  animation: mmg-slide-up 0.2s ease forwards;
}
/* =========================================================
   MINIATURAS EN COLUMNA A LA IZQUIERDA (estilo Seeed)
   Solo desde 1200px: bajo ese ancho Flatsome deja el visor muy angosto
   y la columna terminaba mas alta que la foto. Bajo ese ancho la tira sigue viviendo abajo,
   que es donde funciona en un celular.
   ========================================================= */
@media (min-width: 1200px) {
  .mecha-gallery {
    display: flex;
    flex-direction: row-reverse;  /* el visor a la derecha sin reordenar el DOM */
    align-items: flex-start;   /* el visor manda su alto; que no lo estire la columna */
    gap: 14px;
  }

  .mecha-gallery__viewport {
    flex: 1 1 auto;
    min-width: 0;
  }

  .mecha-gallery__thumbs {
    flex: 0 0 var(--mmg-thumb-w);
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 0;
    padding: 2px;
    border-top: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    align-self: stretch;
    max-height: 100%;
  }

  /* En columna el flex-basis manda sobre el alto, no sobre el ancho. */
  .mecha-gallery__thumb {
    flex: 0 0 var(--mmg-thumb-w);
    width: var(--mmg-thumb-w);
    height: var(--mmg-thumb-w);   /* cuadradas: las fotos del catalogo lo son */
  }
}

/* =========================================================
   AJUSTES PEDIDOS EL 20-AGO-2026
   ========================================================= */

/* Sin caja flotante: la foto se apoya sola sobre el fondo de la ficha. */
.mecha-gallery__viewport {
  box-shadow: none;
}

/* Las flechas ahora viven DENTRO del visor (se movieron en el renderer), asi que
   se centran contra la foto y no contra la galeria completa. El 37.5% de la regla
   base venia de cuando colgaban de .mecha-gallery y la tira de miniaturas sumaba
   altura: dejaba la flecha 37px arriba del centro a 1199px y 68px a 834px. */
.mecha-gallery__nav {
  top: 50%;
}