/* ============================================================================
   PRIDO — Galería de producto (columna izquierda del PDP) · rediseño
   ----------------------------------------------------------------------------
   Migrado FUERA del monolito css-maestro (las reglas gallery-exclusivas:
   ultra-gallery, main-wrap, main-stage, thumbs, thumb-item, thumb-arrow,
   pagination-glass, stock-overlay, stock-badge, custom-badge se removieron del
   monolito) a este asset dedicado, encolado solo en is_product(). Las bases compartidas
   (.prido-gallery-arrow / .prido-slide / .prido-dot, que reutilizan carruseles
   y el hero del home) quedan en el monolito; aquí se reestilizan SCOPEADAS a la
   galería para no afectar esos componentes.

   Diseño "Galería Producto PRIDO": imagen principal arriba, rail de miniaturas
   HORIZONTAL debajo, visor con nav/dots/herramientas; tarjeta de descripción.
   Tema por dos señales (:root[data-theme=dark] y body.woodmart-dark).
   ============================================================================ */

.prido-product-gallery, .prido-product-gallery *,
.prido-product-gallery *::before, .prido-product-gallery *::after { box-sizing: border-box; }

/* ---------- TOKENS (light) ---------- */
.prido-product-gallery {
  --gl-fh: 'Outfit', system-ui, sans-serif;
  --gl-fb: var(--prido-font-body, 'Noto Sans', system-ui, sans-serif);
  --gl-mono: 'JetBrains Mono', ui-monospace, monospace;
  --gl-teal: var(--prido-secondary, var(--prido-teal, #2dc6c1));
  --gl-teal-600: #20a9a4;
  --gl-ri: 12px; --gl-rc: 16px; --gl-ease: cubic-bezier(.2, 0, .2, 1);

  --gl-ink:#0f1a26; --gl-ink-soft:#1a2a3a; --gl-muted:#5e6f80; --gl-faint:#8a9aae;
  --gl-line:#e4e9ef; --gl-line-soft:#eef1f5; --gl-line-strong:#cfd6df;
  --gl-page:#ffffff; --gl-surface:#ffffff; --gl-surface-2:#f6f8fb; --gl-surface-3:#eef2f6;
  --gl-info-bg:#e8f9f8; --gl-info-fg:#147068;
  --gl-photo: linear-gradient(160deg,#f4f7fa 0%,#e9eef3 100%);
  --gl-shadow-sm:0 1px 2px rgba(15,26,38,.05);
  --gl-shadow-md:0 12px 32px -14px rgba(15,26,38,.18), 0 2px 6px rgba(15,26,38,.05);

  display: flex !important;
  flex-direction: column;
  gap: 18px;
  font-family: var(--gl-fb);
}

/* ---------- TOKENS (dark) — dos señales ---------- */
:root[data-theme="dark"] .prido-product-gallery,
body.woodmart-dark .prido-product-gallery {
  --gl-ink:#ecf2f7; --gl-ink-soft:#d8e2ec; --gl-muted:#8d9eb2; --gl-faint:#6b7c91;
  --gl-line:rgba(255,255,255,.10); --gl-line-soft:rgba(255,255,255,.06); --gl-line-strong:rgba(255,255,255,.20);
  --gl-page:#101822; --gl-surface:#18222e; --gl-surface-2:#1d2835; --gl-surface-3:#243042;
  --gl-info-bg:rgba(45,198,193,.14); --gl-info-fg:#3fd6d0;
  --gl-photo: linear-gradient(160deg,#1d2835 0%,#141d27 100%);
  --gl-shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --gl-shadow-md:0 16px 38px -16px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
}

/* ============================================================================
   LAYOUT: imagen principal arriba, miniaturas debajo (todas las pantallas)
   ============================================================================ */
.prido-product-gallery .prido-ultra-gallery {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100%;
  position: relative;
}
.prido-product-gallery .prido-main-wrap { order: 1; }
.prido-product-gallery .prido-thumbs-wrapper { order: 2; }

/* ============================================================================
   VISOR PRINCIPAL
   ============================================================================ */
.prido-product-gallery .prido-main-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border: 1px solid var(--gl-line) !important;
  border-radius: var(--gl-rc) !important;
  background: var(--gl-photo) !important;
  overflow: hidden !important;
}
.prido-product-gallery .prido-main-stage {
  display: flex !important;
  position: absolute !important; inset: 0 !important;   /* evita el feedback aspect-ratio↔overflow que zoomeaba en iOS */
  z-index: 1 !important;                                  /* la imagen al fondo: badge/overlay/flechas/dots van encima */
  width: auto !important;
  height: auto !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  border-radius: var(--gl-rc) !important;
}
.prido-product-gallery .prido-main-stage::-webkit-scrollbar { display: none !important; }
.prido-product-gallery .prido-main-stage .prido-slide {
  flex: 0 0 100% !important;
  min-width: 0 !important;
  scroll-snap-align: start !important;
  margin: 0 !important;
  display: flex !important; align-items: center; justify-content: center;
}
.prido-product-gallery .prido-main-stage .prido-slide img {
  width: 100% !important; height: 100% !important; min-height: 0 !important; object-fit: contain !important;
}

/* nav prev/next (redondas a los lados) — SCOPEADO al visor */
.prido-product-gallery .prido-main-wrap .prido-gallery-arrow {
  position: absolute !important;
  top: 50% !important; transform: translateY(-50%) !important;
  width: 46px !important; height: 46px !important;
  border-radius: 999px !important; cursor: pointer;
  background: color-mix(in srgb, var(--gl-surface) 80%, transparent) !important;
  -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
  border: 1px solid var(--gl-line) !important; color: var(--gl-ink) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: var(--gl-shadow-md) !important;
  transition: background .16s var(--gl-ease), color .16s var(--gl-ease), border-color .16s var(--gl-ease) !important;
  z-index: 4 !important;
}
.prido-product-gallery .prido-main-wrap .prido-gallery-arrow:hover {
  background: var(--gl-ink) !important; color: var(--gl-page) !important; border-color: var(--gl-ink) !important;
}
.prido-product-gallery .prido-main-wrap .prido-gallery-arrow svg { width: 19px !important; height: 19px !important; }
.prido-product-gallery .prido-main-wrap .prido-gallery-arrow.prev { left: 16px !important; right: auto !important; }
.prido-product-gallery .prido-main-wrap .prido-gallery-arrow.next { right: 16px !important; left: auto !important; }

/* dots (píldora glass abajo-centro) */
.prido-product-gallery .prido-pagination-glass {
  position: absolute !important;
  bottom: 18px !important; left: 50% !important; transform: translateX(-50%) !important;
  display: flex !important; align-items: center !important; gap: 6px !important;
  padding: 7px 11px !important; border-radius: 999px !important;
  background: color-mix(in srgb, var(--gl-surface) 78%, transparent) !important;
  -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
  border: 1px solid var(--gl-line) !important; z-index: 4 !important;
}
.prido-product-gallery .prido-pagination-glass .prido-dot {
  width: 6px !important; height: 6px !important; border-radius: 999px !important;
  background: var(--gl-line-strong) !important; box-shadow: none !important;
  transition: all .2s var(--gl-ease) !important; cursor: pointer;
}
.prido-product-gallery .prido-pagination-glass .prido-dot.active {
  width: 22px !important; background: var(--gl-teal) !important;
}

/* herramientas (expandir / comparar / guía de color) → botones redondos abajo-izq */
.prido-product-gallery .prido-gallery-actions {
  position: absolute !important;
  left: 16px !important; bottom: 16px !important;
  display: inline-flex !important; flex-direction: row !important; align-items: center !important;
  gap: 8px !important; z-index: 12 !important; pointer-events: none;
  max-width: none !important;
}
.prido-product-gallery .prido-gallery-actions > * { pointer-events: auto; }
.prido-product-gallery .prido-gallery-actions :is(.prido-gallery-expand, .prido-gallery-compare-button, .prido-color-guide-button) {
  position: static !important; inset: auto !important;
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  padding: 0 !important; margin: 0 !important;
  border-radius: 999px !important; cursor: pointer;
  background: color-mix(in srgb, var(--gl-surface) 85%, transparent) !important;
  -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
  border: 1px solid var(--gl-line) !important; color: var(--gl-ink-soft) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: var(--gl-shadow-sm) !important;
  transition: background .16s var(--gl-ease), color .16s var(--gl-ease), border-color .16s var(--gl-ease), transform .16s var(--gl-ease) !important;
  font-size: 0 !important;
}
.prido-product-gallery .prido-gallery-actions :is(.prido-gallery-expand, .prido-gallery-compare-button, .prido-color-guide-button):hover {
  background: var(--gl-info-bg) !important; border-color: var(--gl-teal) !important; color: var(--gl-info-fg) !important;
  transform: translateY(-1px) !important;
}
.prido-product-gallery .prido-gallery-actions :is(.prido-gallery-expand, .prido-gallery-compare-button, .prido-color-guide-button) svg {
  width: 18px !important; height: 18px !important;
}
/* etiquetas de texto ocultas (los botones quedan icon-only, con aria-label) */
.prido-product-gallery .prido-gallery-actions :is(.prido-gallery-expand, .prido-gallery-compare-button, .prido-color-guide-button) span {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}

/* overlay/badge de stock (Agotado) — conservar comportamiento */
.prido-product-gallery .prido-stock-overlay {
  position: absolute !important; inset: 0 !important; z-index: 5 !important;
  background: color-mix(in srgb, var(--gl-page) 55%, transparent) !important;
  -webkit-backdrop-filter: saturate(40%) !important; backdrop-filter: saturate(40%) !important;
  opacity: 0; pointer-events: none; transition: opacity .2s var(--gl-ease) !important;
}
.prido-product-gallery .prido-stock-badge {
  position: absolute !important; top: 16px !important; left: 16px !important; z-index: 6 !important;
  display: none; padding: 6px 13px !important; border-radius: 999px !important;
  background: #c0392f !important; color: #fff !important;
  font-family: var(--gl-fh) !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .02em; box-shadow: var(--gl-shadow-sm) !important;
  transform: none !important;   /* anula translate(-50%,-50%) centrado de la regla base de otro archivo */
}
.prido-product-gallery .prido-ultra-gallery.is-out-of-stock .prido-stock-overlay { opacity: 1; }
.prido-product-gallery .prido-ultra-gallery.is-out-of-stock .prido-stock-badge { display: inline-flex; transform: none !important; }

/* ============================================================================
   RAIL DE MINIATURAS (horizontal, debajo)
   ============================================================================ */
.prido-product-gallery .prido-thumbs-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
}
.prido-product-gallery .prido-thumbs {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-height: none !important;
  padding: 2px !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: none !important;
}
.prido-product-gallery .prido-thumbs::-webkit-scrollbar { display: none !important; }
.prido-product-gallery .prido-thumb-item {
  position: relative !important;
  width: 84px !important; height: 84px !important;
  flex: 0 0 84px !important;
  margin: 0 !important;
  border: 1.5px solid var(--gl-line) !important;
  border-radius: var(--gl-ri) !important;
  overflow: hidden !important; cursor: pointer;
  scroll-snap-align: start !important;
  transition: border-color .16s var(--gl-ease), box-shadow .16s var(--gl-ease) !important;
}
.prido-product-gallery .prido-thumb-item:hover { border-color: var(--gl-line-strong) !important; }
.prido-product-gallery .prido-thumb-item.active {
  border-color: var(--gl-teal) !important; box-shadow: 0 0 0 1px var(--gl-teal) !important;
}
.prido-product-gallery .prido-thumb-item img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}

/* flechas del rail (izquierda/derecha) — reutiliza .prido-thumb-arrow.up/.down */
.prido-product-gallery .prido-thumb-arrow {
  position: static !important;
  width: 36px !important; height: auto !important; flex: 0 0 36px !important;
  align-self: stretch !important;
  border-radius: 10px !important; cursor: pointer;
  background: var(--gl-surface) !important; border: 1px solid var(--gl-line) !important;
  color: var(--gl-muted) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  transition: background .16s var(--gl-ease), color .16s var(--gl-ease), border-color .16s var(--gl-ease) !important;
}
.prido-product-gallery .prido-thumb-arrow:hover {
  background: var(--gl-surface-2) !important; color: var(--gl-ink) !important; border-color: var(--gl-line-strong) !important;
}
.prido-product-gallery .prido-thumb-arrow svg { width: 16px !important; height: 16px !important; transform: rotate(-90deg); }
.prido-product-gallery .prido-thumb-arrow.up { order: 0; }   /* izquierda */
.prido-product-gallery .prido-thumb-arrow.down { order: 3; } /* derecha */
.prido-product-gallery .prido-thumbs { order: 1; }

/* ============================================================================
   TARJETA DE DESCRIPCIÓN (re-skin del typewriter)
   ============================================================================ */
.prido-product-gallery .prido-tw-glass-panel {
  position: relative !important;
  background: var(--gl-surface-2) !important;
  border: 1px solid var(--gl-line) !important;
  border-radius: var(--gl-rc) !important;
  padding: 22px clamp(20px, 2.5vw, 26px) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.prido-product-gallery .prido-tw-wrapper { display: flex !important; flex-direction: column; gap: 12px; }
.prido-product-gallery .prido-tw-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--gl-fh); font-size: 11px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gl-info-fg);
}
.prido-product-gallery .prido-tw-eyebrow::after {
  content: ""; height: 1px; width: 34px; background: var(--gl-teal); opacity: .5;
}
.prido-product-gallery :is(.prido-tw-canvas, .prido-tw-ghost) {
  font-family: var(--gl-fb) !important;
  font-size: 14.5px !important; line-height: 1.7 !important; color: var(--gl-muted) !important;
}
.prido-product-gallery :is(.prido-tw-canvas, .prido-tw-ghost) strong { color: var(--gl-ink) !important; font-weight: 700 !important; }
.prido-product-gallery :is(.prido-tw-canvas, .prido-tw-ghost) p { margin: 0 0 10px !important; }
.prido-product-gallery :is(.prido-tw-canvas, .prido-tw-ghost) p:last-child { margin-bottom: 0 !important; }

/* ============================================================================
   STICKY columna izquierda (galería) + BREADCRUMBS pinneados. Solo ≥1025px
   (a ≤1024px el layout colapsa a 1 columna y debe fluir normal).

   El header del sitio (.prido-hs) es position:fixed y se condensa a ~72px al
   scrollear. Los breadcrumbs (.prido-product-breadcrumbs) están en FLUJO NORMAL,
   así que al scrollear se metían bajo el header (~scroll 93px) y "se perdían".
   Subir el top de la galería NO los recupera (son elementos independientes): la
   ÚNICA solución es hacer los breadcrumbs sticky justo bajo el header condensado.

   - breadcrumbs: sticky top:72px (alto del header condensado), fondo OPACO igual
     al de la página (light #f8fafc / dark #111821), opacity:1 (el inline trae .75
     que volvería el fondo translúcido), z-index 900 (< 1002 del header), margin:0
     (el inline trae margin:10px que dejaría un escalón al pinnear) + padding.
   - galería: top:118px para arrancar DEBAJO del breadcrumb pinneado (72 + ~46 de
     su alto con padding). align-self:start evita que se estire a la fila del grid.
   El layout y todos los ancestros del breadcrumb son overflow:visible (ok, no recorta).
   ============================================================================ */
@media (min-width: 1025px) {
  .prido-product-breadcrumbs {
    position: sticky !important;
    top: 72px !important;
    z-index: 900 !important;
    opacity: 1 !important;
    background: #f8fafc !important;
    margin: 0 !important;
    padding: 10px 0 !important;
  }
  .prido-product-gallery {
    position: sticky !important;
    top: 118px !important;
    align-self: start !important;
  }
}
:root[data-theme="dark"] .prido-product-breadcrumbs,
body.woodmart-dark .prido-product-breadcrumbs { background: #111821 !important; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1024px) {
  .prido-product-gallery .prido-thumb-item { width: 76px !important; height: 76px !important; flex-basis: 76px !important; }
}
@media (max-width: 600px) {
  .prido-product-gallery .prido-main-wrap .prido-gallery-arrow { width: 38px !important; height: 38px !important; }
  .prido-product-gallery .prido-thumb-item { width: 66px !important; height: 66px !important; flex-basis: 66px !important; }
  .prido-product-gallery .prido-thumb-arrow { display: none !important; }  /* en mobile se hace swipe */
}

@media (prefers-reduced-motion: reduce) {
  .prido-product-gallery .prido-main-stage { scroll-behavior: auto !important; }
  .prido-product-gallery .prido-main-wrap .prido-gallery-arrow,
  .prido-product-gallery .prido-gallery-actions :is(.prido-gallery-expand, .prido-gallery-compare-button, .prido-color-guide-button) { transition: none !important; }
}