/* ===========================================================
   CM Descanso · galeria de la PDP (G10g)
   Viste el visor nativo de WooCommerce (PhotoSwipe) y las flechas
   del slider con los tokens del sistema. Se encola SOLO en producto
   (is_product) desde functions.php, bloque /* G10g galeria */.
   El skin noventero por defecto (photoswipe-default-skin) se pisa
   aqui: fondo casi negro, controles finos en crema, contador Hanken.
   Las miniaturas del slider (.cmd-pgal .flex-control-thumbs) ya viven
   estiladas en sections.css; aqui solo lo que ese archivo no cubre.
   =========================================================== */

/* --- Afordancia: la imagen principal abre el visor (JS en functions) --- */
.cmd-pgal .woocommerce-product-gallery__image,
.cmd-pgal .woocommerce-product-gallery__image > a { cursor: zoom-in; }

/* --- Flechas del slider principal (flexslider), si Woo las pinta: finas --- */
.cmd-pgal .flex-direction-nav { list-style: none; margin: 0; padding: 0; }
.cmd-pgal .flex-direction-nav a {
  width: 40px; height: 40px; margin: -20px 0 0;
  background: rgba(251, 250, 246, .82); border-radius: var(--cmd-r-pill);
  box-shadow: 0 1px 6px rgba(28, 25, 22, .12);
  opacity: 0; transition: opacity .18s ease, background .15s ease;
  text-indent: 0; overflow: hidden;
}
.cmd-pgal:hover .flex-direction-nav a { opacity: .9; }
.cmd-pgal .flex-direction-nav a:hover { background: #fff; opacity: 1; }
.cmd-pgal .flex-direction-nav a::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px; margin: -5px 0 0 -4px;
  border-left: 1.5px solid var(--cmd-ink); border-bottom: 1.5px solid var(--cmd-ink);
  font: 0/0 a; /* mata el glifo/sprite por defecto de flexslider */
}
.cmd-pgal .flex-direction-nav a.flex-prev::before { transform: rotate(45deg); }
.cmd-pgal .flex-direction-nav a.flex-next::before { transform: rotate(-135deg); margin-left: -6px; }
/* en movil no hay hover: la navegacion es swipe + miniaturas, fuera flechas */
@media (max-width: 782px) {
  .cmd-pgal .flex-direction-nav { display: none; }
}

/* ===========================================================
   VISOR A PANTALLA COMPLETA · PhotoSwipe
   =========================================================== */

/* IMPRESCINDIBLE: el fade-in de lazy-load (components.css:
   html.cmd-motion .cmd-scope img { opacity: 0 }) tambien alcanza las
   imagenes que PhotoSwipe CREA al vuelo, y esas nunca reciben la clase
   .cmd-img-loaded que las levanta -> el visor salia en negro (imagenes
   cargadas pero a opacity:0). Las imagenes del visor SIEMPRE visibles;
   su transicion la gestiona el propio PhotoSwipe. */
.pswp img,
.pswp .pswp__img { opacity: 1 !important; }

/* fondo casi negro, calido (no #000 puro) */
.pswp__bg { background: rgba(18, 16, 14, .94) !important; }

/* barra superior sin el degradado oscuro noventero */
.pswp__top-bar { background: none !important; }
.pswp__caption { display: none !important; } /* caption fuera: es ruido en esta tienda */

/* solo dejamos cerrar + flechas; share / fullscreen / zoom fuera
   (el skin por defecto los cablea con .pswp--svg .pswp__button--x a
   especificidad (0,2,0); prefijamos con .pswp para ganarles) */
.pswp .pswp__button--share,
.pswp .pswp__button--fs,
.pswp .pswp__button--zoom { display: none !important; }

/* todos los botones y las pseudo de flecha: MATAR el sprite PNG/SVG del
   skin por defecto (background-image longhand + !important; el skin lo
   pone tanto en @media DPR>=1.1 .pswp--svg .pswp__button como en base) */
.pswp .pswp__button,
.pswp .pswp__button--arrow--left::before,
.pswp .pswp__button--arrow--right::before {
  background: none !important; background-image: none !important;
}
.pswp .pswp__button { opacity: .55; transition: opacity .15s ease; }
.pswp .pswp__button:hover,
.pswp .pswp__button:focus { opacity: 1; }

/* cerrar: aspa fina en crema, sin caja (pseudo por encima del boton) */
.pswp .pswp__button--close { position: relative; }
.pswp .pswp__button--close::before,
.pswp .pswp__button--close::after {
  content: ''; position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 18px; height: 1.5px; background: #FBFAF6 !important; border-radius: 2px;
}
.pswp .pswp__button--close::before { transform: translate(-50%, -50%) rotate(45deg); }
.pswp .pswp__button--close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* flechas: chevron fino en crema, sin caja dura */
.pswp .pswp__button--arrow--left,
.pswp .pswp__button--arrow--right { background: none !important; background-image: none !important; }
.pswp .pswp__button--arrow--left::before,
.pswp .pswp__button--arrow--right::before {
  content: ''; display: block; position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 15px; height: 15px; margin: -8px 0 0 -8px;
  border-left: 1.5px solid #FBFAF6; border-bottom: 1.5px solid #FBFAF6;
}
.pswp .pswp__button--arrow--left::before  { transform: rotate(45deg); }
.pswp .pswp__button--arrow--right::before { transform: rotate(-135deg); margin-left: -10px; }

/* contador "2 / 6" en Hanken pequeno, crema tenue */
.pswp__counter {
  font-family: var(--cmd-font-body);
  font-size: 13px; font-weight: 400; letter-spacing: .04em;
  color: rgba(251, 250, 246, .72);
  opacity: 1; height: auto; top: 16px; left: 18px;
}