/*
 * product_gallery.css — Styles du module galerie produit (PhotoSwipe v5)
 * Créé par Claude 2026
 *
 * Charge ce fichier APRÈS photoswipe.css.
 */

.pg-gallery {
    display: inline-block;
    vertical-align: top;
}

/* ========================================================================
   Variants de mise en page — modifier class --<layout> sur .pg-gallery,
   contrôlé par $pg_layout dans product_gallery.tpl.php.
   ======================================================================== */

/* --bottom (défaut) : vignettes sous l'image principale = comportement legacy
   (rien à override). */

/* --right : vignettes à droite de l'image, grille 2 colonnes qui s'allonge
   verticalement quand il y a beaucoup de vues. */
.pg-gallery.pg-gallery--right {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
}
.pg-gallery.pg-gallery--right .pg-thumbs {
    display: grid;
    grid-template-columns: repeat(2, 60px);
    grid-auto-rows: 60px;
    gap: 4px;
    margin-top: 0;
    max-width: none;
}
@media (max-width: 600px) {
    /* Sur mobile : on revient sous l'image pour éviter de comprimer la photo */
    .pg-gallery.pg-gallery--right {
        display: block;
    }
    .pg-gallery.pg-gallery--right .pg-thumbs {
        margin-top: 6px;
    }
}

.pg-gallery .pg-main {
    display: inline-block;
    position: relative; /* ancre pour .pg-overlay-logo */
    cursor: zoom-in;
    line-height: 0;
}

.pg-gallery .pg-main > img:first-child {
    max-width: 250px;
    height: auto;
    border: 1px solid #ddd;
    background: #fff;
    transition: border-color .15s ease;
}

/* Overlay logo manufacturer (Claude 2026)
   Position via attribut [data-mfr-pos="br|bl|tr|tl"], taille/opacite via CSS vars
   posées inline sur .pg-gallery par le template :
       style="--mfr-size: 60px; --mfr-opacity: 1"
   Marge constante 6px (thumb) / 16px (PhotoSwipe full). */
.pg-gallery .pg-overlay-logo {
    position: absolute;
    width:    var(--mfr-size, 60px);
    height:   var(--mfr-size, 60px);
    max-width: 30%;
    max-height: 30%;
    object-fit: contain;
    background: transparent;
    border: none;
    opacity: var(--mfr-opacity, 1);
    pointer-events: none; /* le clic doit traverser vers .pg-main pour ouvrir PhotoSwipe */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.pg-gallery .pg-overlay-logo[data-mfr-pos="br"] { right: 6px;  bottom: 6px; }
.pg-gallery .pg-overlay-logo[data-mfr-pos="bl"] { left:  6px;  bottom: 6px; }
.pg-gallery .pg-overlay-logo[data-mfr-pos="tr"] { right: 6px;  top:    6px; }
.pg-gallery .pg-overlay-logo[data-mfr-pos="tl"] { left:  6px;  top:    6px; }

.pg-gallery .pg-main:hover img,
.pg-gallery .pg-main:focus img {
    border-color: #888;
}

.pg-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    max-width: 260px;
}

.pg-thumbs .pg-thumb {
    display: inline-block;
    cursor: zoom-in;
    line-height: 0;
}

.pg-thumbs .pg-thumb img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 1px solid #ddd;
    background: #fff;
    transition: border-color .15s ease;
}

.pg-thumbs .pg-thumb:hover img,
.pg-thumbs .pg-thumb:focus img {
    border-color: #888;
}

@media (max-width: 480px) {
    .pg-gallery .pg-main img {
        max-width: 100%;
    }
    .pg-thumbs {
        max-width: 100%;
    }
    .pg-thumbs .pg-thumb img {
        width: 56px;
        height: 56px;
    }
}

.pswp__button--zoom-out,
.pswp__button--zoom-in,
.pswp__button--close,
.pswp__button--arrow {
    outline: none;
}

/* Overlay logo manufacturer dans PhotoSwipe (Claude 2026)
   Injecte par product_gallery.js dans document.body (beforeOpen), retire au destroy.
   position:fixed + z-index 100001 (PhotoSwipe root = 100000).
   left/top sont poses chaque frame par le JS pour coller au coin de l'IMAGE
   affichee (suit zoom/pan/slide). --mfr-size-full / --mfr-opacity inline par le JS. */
.pswp__pg-mfr-logo {
    position: fixed;
    z-index: 100001;
    left: 0;
    top:  0;
    width:  var(--mfr-size-full, 120px);
    height: var(--mfr-size-full, 120px);
    opacity: var(--mfr-opacity, 1);
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
.pswp__pg-mfr-logo img {
    width:  100%;
    height: 100%;
    object-fit: contain;
    display: block;
}