/**
 * Piel del visor de imagenes de la ficha de producto (PhotoSwipe 4).
 *
 * Va junto a themes/panda/assets/js/st-product-lightbox.js y se carga solo en la
 * ficha de producto, desde themes/panda/templates/catalog/product.tpl.
 *
 * No se usa el "default-skin" de PhotoSwipe: la barra superior y las flechas
 * laterales estan ocultas y los controles son los tres botones circulares de
 * abajo, asi que aqui va lo minimo que el UI por defecto necesita (visibilidad
 * de .pswp__ui, elementos desactivados y preloader) mas nuestra barra.
 */

/* --------------------------------------------------------------------- */
/* Base que aportaba default-skin.css                                     */
/* --------------------------------------------------------------------- */

.pswp__ui {
    -webkit-font-smoothing: auto;
    visibility: visible;
    opacity: 1;
    z-index: 1550;
}

/* PhotoSwipe marca asi los elementos de UI desactivados por opciones. */
.pswp__element--disabled {
    display: none !important;
}

/* Cursores. Los lleva st-product-lightbox.js con clases propias porque las de
   PhotoSwipe (pswp--zoom-allowed / pswp--zoomed-in / pswp--dragging) dependen
   de su modulo desktop-zoom, que en portatiles con pantalla tactil llega tarde
   y borra el estado de zoom. Mayor especificidad que las reglas del vendor. */
.pswp.st-pswp .pswp__img {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

.pswp.st-pswp.st-pswp--zoomed .pswp__img {
    cursor: -webkit-grab;
    cursor: grab;
}

.pswp.st-pswp.st-pswp--dragging .pswp__img {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

/* Controles del tema PhotoSwipe que no usamos. */
.pswp .pswp__top-bar,
.pswp .pswp__caption,
.pswp .pswp__share-modal,
.pswp .pswp__button--arrow--left,
.pswp .pswp__button--arrow--right {
    display: none !important;
}

/* --------------------------------------------------------------------- */
/* Barra de controles inferior                                            */
/* --------------------------------------------------------------------- */

.pswp .st-pswp-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    z-index: 1600;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* Los huecos entre botones no capturan el click: caen sobre .pswp__ui, que
       es una de las zonas que PhotoSwipe usa para cerrar. */
    pointer-events: none;
    opacity: 1;
    -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
    direction: ltr;
}

/* PhotoSwipe oculta los controles durante los gestos y con un toque en movil. */
.pswp__ui--hidden .st-pswp-bar {
    opacity: 0;
    pointer-events: none;
}

.pswp .st-pswp-btn {
    pointer-events: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* Area tactil minima 44x44. */
    width: 48px;
    height: 48px;
    margin: 0 8px;
    padding: 0;
    /* Fondo oscuro y no translucido-claro: la barra flota sobre la foto y casi
       todo el catalogo esta fotografiado sobre blanco. */
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.72);
    color: #fff;
    cursor: pointer;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    -webkit-transition: background-color 0.15s ease, border-color 0.15s ease;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pswp .st-pswp-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.7);
}

.pswp .st-pswp-btn:active {
    background: #000;
}

.pswp .st-pswp-btn:focus {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Sin anillo de foco cuando el foco viene de un click, en los navegadores que
   soportan :focus-visible. */
.pswp .st-pswp-btn:focus:not(:focus-visible) {
    outline: none;
}

.pswp .st-pswp-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.pswp .st-pswp-ico {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.pswp .st-pswp-btn--close .st-pswp-ico {
    width: 20px;
    height: 20px;
}

/* Una sola imagen: no hay a donde navegar. */
.pswp.st-pswp--single .st-pswp-btn--prev,
.pswp.st-pswp--single .st-pswp-btn--next {
    display: none;
}

/* En RTL se espeja el orden de los botones; cada uno conserva su icono y su
   accion, que es como se comportan las barras de galeria en RTL. */
[dir="rtl"] .pswp .st-pswp-bar {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

@media (max-width: 480px) {
    .pswp .st-pswp-bar {
        bottom: 16px;
    }
    .pswp .st-pswp-btn {
        width: 44px;
        height: 44px;
        margin: 0 6px;
    }
}

/* --------------------------------------------------------------------- */
/* Indicador de carga                                                     */
/* --------------------------------------------------------------------- */

.pswp .pswp__preloader {
    position: absolute;
    top: 24px;
    left: 50%;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.pswp .pswp__preloader--active {
    opacity: 1;
}

.pswp .st-pswp-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    -webkit-animation: st-pswp-spin 0.8s linear infinite;
    animation: st-pswp-spin 0.8s linear infinite;
}

@-webkit-keyframes st-pswp-spin {
    to { -webkit-transform: rotate(360deg); }
}

@keyframes st-pswp-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pswp .st-pswp-spinner {
        -webkit-animation: none;
        animation: none;
    }
    .pswp .st-pswp-bar {
        -webkit-transition: none;
        transition: none;
    }
}

/* --------------------------------------------------------------------- */
/* Pagina de producto                                                     */
/* --------------------------------------------------------------------- */

/* El visor del tema (.kk_container) sigue en el HTML pero queda inerte: el
   click sobre .kk_triger se corta en fase de captura antes de que llegue su
   handler. Se oculta solo cuando nuestro JS ha arrancado, para que la tienda
   siga teniendo visor si el script fallara al cargar. */
body.st-pswp-ready .kk_container {
    display: none !important;
}

/* Misma pista visual que dentro del visor. */
.pro_gallery_top a.kk_triger {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}