/**
 * AW New Custom Product Gallery
 * Thumbnails links (desktop) · grote afbeelding rechts · pijlen · vergrootglas · lightbox
 */

.aw-pg {
    --aw-pg-thumb-size: 88px;
    --aw-pg-gap: 14px;
    --aw-pg-accent: #111;
    /* Instelbaar via Instellingen → AW Product Gallery (inline overschreven) */
    --aw-pg-icon-color: #ffffff;
    --aw-pg-icon-bg: rgba(0, 0, 0, .3);
    --aw-pg-icon-bg-hover: rgba(0, 0, 0, .55);
    display: flex;
    align-items: stretch;
    gap: var(--aw-pg-gap);
    width: 100%;
    max-width: 100%;
}

/* ---------- Linkerkolom: thumbnails ---------- */
.aw-pg__thumbs {
    flex: 0 0 var(--aw-pg-thumb-size);
    width: var(--aw-pg-thumb-size);
    max-width: var(--aw-pg-thumb-size);
}

.aw-pg-thumbs-swiper {
    height: 100%;
    max-height: 100%;
}

.aw-pg-thumbs-swiper .swiper-wrapper {
    height: 100%;
}

.aw-pg-thumb {
    height: auto !important;
    width: var(--aw-pg-thumb-size);
    aspect-ratio: 1 / 1;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s ease, opacity .15s ease;
    opacity: .7;
}

.aw-pg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.aw-pg-thumb:hover {
    opacity: 1;
}

/* Actieve thumbnail (Swiper zet .swiper-slide-thumb-active) */
.aw-pg-thumb.swiper-slide-thumb-active {
    border-color: var(--aw-pg-accent);
    opacity: 1;
}

/* "+N" meer-tegel: opent de lightbox. Geen zichtbare border (transparant,
   zodat de tegel dezelfde afmeting houdt als de rest). */
.aw-pg-thumb--more,
.aw-pg-thumb--more.swiper-slide-thumb-active {
    position: relative;
    opacity: 1;
    border-color: transparent;
}

.aw-pg-thumb--more img {
    filter: brightness(.55);
}

.aw-pg-thumb__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .01em;
    pointer-events: none;
}

/* ---------- Rechterkolom: hoofdafbeelding ---------- */
.aw-pg__main {
    flex: 1 1 auto;
    min-width: 0;
}

.aw-pg-main-swiper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}

.aw-pg-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.aw-pg-slide__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.aw-pg-slide__link img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Enkele afbeelding: geen flex-kolom nodig */
.aw-pg--single {
    display: block;
}

/* ---------- Prev/next-pijlen ----------
   !important omdat Elementor de knop-styling anders overneemt. */
.aw-pg-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 50% !important;
    background: var(--aw-pg-icon-bg) !important;
    box-shadow: none !important;
    color: var(--aw-pg-icon-color) !important;
    cursor: pointer !important;
    transition: background .15s ease, opacity .15s ease !important;
}

.aw-pg-nav svg {
    width: 20px !important;
    height: 20px !important;
    fill: var(--aw-pg-icon-color) !important;
    color: var(--aw-pg-icon-color) !important;
}

.aw-pg-nav:hover {
    background: var(--aw-pg-icon-bg-hover) !important;
}

.aw-pg-nav--prev {
    left: 12px !important;
}

.aw-pg-nav--next {
    right: 12px !important;
}

.aw-pg-nav.swiper-button-disabled {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---------- Vergrootglas ---------- */
.aw-pg-zoom {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 5 !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 50% !important;
    background: var(--aw-pg-icon-bg) !important;
    box-shadow: none !important;
    color: var(--aw-pg-icon-color) !important;
    cursor: zoom-in !important;
    transition: background .15s ease !important;
}

.aw-pg-zoom svg {
    width: 18px !important;
    height: 18px !important;
    fill: var(--aw-pg-icon-color) !important;
    color: var(--aw-pg-icon-color) !important;
}

.aw-pg-zoom:hover {
    background: var(--aw-pg-icon-bg-hover) !important;
}

/* ---------- Fractie-teller ---------- */
.aw-pg-fraction {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 5;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: .02em;
}

/* ---------- Paginatie-bolletjes (mobiel) ----------
   Onder de galerij, buiten het raster. Alleen zichtbaar op mobiel. */
.aw-pg-pagination {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}

.aw-pg-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0 !important;
    background: rgba(0, 0, 0, .3);
    opacity: 1;
    transition: background .15s ease;
}

.aw-pg-pagination .swiper-pagination-bullet-active {
    background: var(--aw-pg-accent);
}

/* ---------- Lightbox-thumbnailstrip (PhotoSwipe, desktop) ---------- */
.aw-pswp-thumbs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.aw-pswp-thumbs::-webkit-scrollbar {
    display: none;
}

.aw-pswp-thumb {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    padding: var(--aw-lb-card-pad, 6px);
    border: var(--aw-lb-card-border-w, 2px) solid transparent;
    border-color: var(--aw-lb-card-border, #ffffff) !important;
    border-radius: 6px;
    overflow: hidden;
    background: var(--aw-lb-card-bg, #ffffff) !important;
    box-sizing: border-box;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s ease, background-color .15s ease, border-color .15s ease;
}

.aw-pswp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Hover/focus – !important omdat Elementor's button:hover/:focus (#c36) anders aanslaat */
.aw-pswp-thumb:hover,
.aw-pswp-thumb:focus {
    opacity: 1;
    background: var(--aw-lb-card-bg-hover, #ffffff) !important;
    border-color: var(--aw-lb-card-border-hover, #cccccc) !important;
}

/* Actieve kaart (wint van hover: staat na de hover-regel) */
.aw-pswp-thumb.is-active {
    opacity: 1;
    background: var(--aw-lb-card-bg-active, #ffffff) !important;
    border-color: var(--aw-lb-card-border-active, #111111) !important;
}

/* Strip alleen op desktop tonen */
/* Mobiel: de thumbnailstrip in de lightbox blijft staan, maar compacter.
   (Stond hier eerder op `display: none`.) De strip volgt nog steeds de
   instelling "Thumbnailstrip in lightbox".

   `safe center` is nodig omdat een gecentreerde flexrij die breder is dan het
   scherm aan de linkerkant buiten het scrollbereik valt — je kunt de eerste
   thumbnails dan niet meer bereiken. Met `safe` valt hij in dat geval terug op
   links uitlijnen. De gewone `center` blijft als fallback voor oudere browsers
   staan. */
@media (max-width: 768px) {
    .aw-pswp-thumbs {
        gap: 6px;
        padding: 8px 10px;
        justify-content: center;
        justify-content: safe center;
    }

    .aw-pswp-thumb {
        width: 44px;
        height: 44px;
        padding: calc(var(--aw-lb-card-pad, 6px) / 2);
    }
}

/* ---------- Lightbox: pijlen & sluitknop (PhotoSwipe) ----------
   Fallback-defaults als de inline CSS ontbreekt (RUCSS). */
.pswp {
    --aw-lb-arrow-color: #ffffff;
    --aw-lb-arrow-bg: rgba(0, 0, 0, .3);
    --aw-lb-arrow-bg-hover: rgba(0, 0, 0, .5);
    --aw-lb-close-color: #ffffff;
    --aw-lb-counter-color: #ffffff;
    --aw-lb-card-bg: #ffffff;
    --aw-lb-card-border: #ffffff;
    --aw-lb-card-border-w: 2px;
    --aw-lb-card-pad: 6px;
    --aw-lb-card-bg-hover: #ffffff;
    --aw-lb-card-border-hover: #cccccc;
    --aw-lb-card-bg-active: #ffffff;
    --aw-lb-card-border-active: #111111;
}

/* Gedeeld: maat + centrering voor alle lightbox-knoppen */
.pswp .pswp__button--arrow,
.pswp .pswp__button--close,
.pswp .pswp__button--zoom {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    transition: background .15s ease, opacity .15s ease !important;
    /* schaduw achter het icoon uitzetten */
    --pswp-icon-color-secondary: transparent;
    --pswp-icon-stroke-width: 0;
}

/* Eigen SVG's centreren netjes; reset ook PhotoSwipe's absolute icn-positie
   én de standaard spiegeling van de next-pijl (onze SVG's zijn al juist gericht). */
.pswp .pswp__icn {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 24px !important;
    height: 24px !important;
    filter: none !important;
    transform: none !important;
}

/* Top-bar-items (counter + sluiten + inzoomen) verticaal gelijk uitlijnen */
.pswp .pswp__top-bar {
    align-items: center !important;
}

/* Pijlen: ronde knop MET achtergrond, verticaal gecentreerd aan de randen */
.pswp .pswp__button--arrow {
    top: 50% !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: var(--aw-lb-arrow-bg) !important;
    --pswp-icon-color: var(--aw-lb-arrow-color);
}

.pswp .pswp__button--arrow:hover,
.pswp .pswp__button--arrow:focus {
    background: var(--aw-lb-arrow-bg-hover) !important;
}

.pswp .pswp__button--arrow--prev {
    left: 16px !important;
}

.pswp .pswp__button--arrow--next {
    right: 16px !important;
}

.pswp .pswp__button--arrow .pswp__icn {
    fill: var(--aw-lb-arrow-color) !important;
    color: var(--aw-lb-arrow-color) !important;
}

/* Pijlen óók op touch tonen.
   PhotoSwipe verbergt ze daar standaard zelf — `.pswp--touch .pswp__button--arrow
   { visibility: hidden }` in photoswipe.css — en laat ze pas zien zodra er een
   muis is gedetecteerd (`.pswp--has_mouse`). De redenering is dat je op touch
   toch swipet, maar dan mist de bezoeker een zichtbare navigatie-aanwijzing.
   Bewust geen media-query: `.pswp--touch` gaat over touch-bediening, niet over
   schermbreedte, dus dit dekt ook tablets en touch-laptops. */
.pswp--touch .pswp__button--arrow {
    visibility: visible;
}

/* Sluiten + inzoomen: GEEN achtergrond, alleen icoonkleur.
   background transparent !important nodig, anders slaat Elementor's
   button:hover/:focus (#c36 roze) aan. */
.pswp .pswp__button--close,
.pswp .pswp__button--zoom,
.pswp .pswp__button--close:hover,
.pswp .pswp__button--close:focus,
.pswp .pswp__button--zoom:hover,
.pswp .pswp__button--zoom:focus {
    background: transparent !important;
    --pswp-icon-color: var(--aw-lb-close-color);
}

.pswp .pswp__button--close:hover,
.pswp .pswp__button--close:focus,
.pswp .pswp__button--zoom:hover,
.pswp .pswp__button--zoom:focus {
    opacity: .7 !important;
}

.pswp .pswp__button--close .pswp__icn,
.pswp .pswp__button--zoom .pswp__icn {
    fill: var(--aw-lb-close-color) !important;
    color: var(--aw-lb-close-color) !important;
}

/* Counter (x / N) – kleur instelbaar (hangt van de achtergrond af).
   margin-top:0 zodat 'ie met de top-bar-centrering gelijk staat met de knoppen
   (PhotoSwipe zet standaard margin-top:15px). */
.pswp .pswp__counter {
    color: var(--aw-lb-counter-color) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    margin-top: 0 !important;
}

/* Kleinere lightbox-knoppen op mobiel */
@media (max-width: 768px) {

    .pswp .pswp__button--arrow,
    .pswp .pswp__button--close,
    .pswp .pswp__button--zoom {
        width: 36px !important;
        height: 36px !important;
    }

    .pswp .pswp__icn {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ---------- Responsive: onder 768px geen thumbs, wel dots ---------- */
@media (max-width: 768px) {
    .aw-pg__thumbs {
        display: none;
    }

    .aw-pg {
        display: block;
    }

    /* Dots onder de galerij tonen */
    .aw-pg-pagination {
        display: flex;
    }

    /* Kleinere pijlen op mobiel */
    .aw-pg-nav {
        width: 30px !important;
        height: 30px !important;
    }

    .aw-pg-nav svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Optioneel: pijlen volledig verbergen op mobiel (via settings) */
    .aw-pg--hide-mobile-arrows .aw-pg-nav {
        display: none !important;
    }

    /* ---------- Optioneel: thumbnailstrip onder de hoofdfoto (via settings) ----------
       De thumbnails staan in de DOM vóór de hoofdafbeelding (dat is de
       desktop-indeling: kolom links). Op mobiel draaien we de volgorde om met
       flex `order`, zodat de strip eronder komt zonder de markup te wijzigen. */
    .aw-pg--mobile-thumbs {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .aw-pg--mobile-thumbs .aw-pg__main {
        order: 1;
    }

    .aw-pg--mobile-thumbs .aw-pg__thumbs {
        order: 2;
        display: block;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    /* Strip horizontaal: hoogte volgt de thumbnail i.p.v. de kolomhoogte. */
    .aw-pg--mobile-thumbs .aw-pg-thumbs-swiper {
        height: auto;
        max-height: none;
    }

    .aw-pg--mobile-thumbs .aw-pg-thumb {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
    }

    /* Alle afbeeldingen zijn hier zichtbaar, dus de "+N"-tegel slaat nergens op.
       Naast de overlay en de verduistering moeten ook de rand en de opacity
       terug naar normaal: als "+N"-tegel staat hij bewust op `opacity: 1` en
       `border-color: transparent`, en dan valt juist die ene thumbnail uit de
       toon tussen de rest. */
    .aw-pg--mobile-thumbs .aw-pg-thumb__more {
        display: none;
    }

    .aw-pg--mobile-thumbs .aw-pg-thumb--more img {
        filter: none;
    }

    .aw-pg--mobile-thumbs .aw-pg-thumb--more {
        opacity: .7;
        border-color: #e5e5e5;
    }

    .aw-pg--mobile-thumbs .aw-pg-thumb--more.swiper-slide-thumb-active {
        opacity: 1;
        border-color: var(--aw-pg-accent);
    }

    /* De strip vervangt de stippen. */
    .aw-pg--mobile-thumbs .aw-pg-pagination {
        display: none;
    }
}

/* ---------- Desktop: thumbnails voorbij de limiet verbergen ----------
   Ze staan alleen in de DOM omdat de mobiele strip ze nodig heeft; op desktop
   blijft het bij 5 stuks plus de "+N"-tegel. */
@media (min-width: 769px) {
    .aw-pg-thumb--overflow {
        display: none;
    }

    /* Hoofdafbeelding + thumbnailstrook op gelijke hoogte (klantverzoek
       2026-08-06): cap beide op de hoogte van 5 thumbnails, zodat de linkerkolom
       netjes aansluit op de (vierkante) hoofdafbeelding i.p.v. korter te eindigen.
       32px = 4 × Swiper spaceBetween (8px) tussen de 5 thumbs. Een eventuele
       extra Swiper-marge onder de 5e thumb (bij >5 afbeeldingen) valt buiten de
       cap en wordt door de swiper (overflow hidden) afgeknipt.
       Niet bij losse afbeelding (.aw-pg--single) en niet op mobiel. */
    .aw-pg:not(.aw-pg--single) .aw-pg-main-swiper,
    .aw-pg:not(.aw-pg--single) .aw-pg-thumbs-swiper {
        max-height: calc(5 * var(--aw-pg-thumb-size) + 32px);
    }

    /* Losse afbeelding (.aw-pg--single): border-box op de VOLLEDIGE containerbreedte
       (geen breedte-cap), hoogte gecapt op de multi-image-maat (472px). aspect-ratio
       :auto heft het 1/1-vierkant op; de afbeelding blijft GECENTREERD binnen de box
       via de flex-slide + object-fit:contain. (Klantverzoek 2026-08-10.) */
    .aw-pg--single .aw-pg-main-swiper {
        aspect-ratio: auto;
        height: calc(5 * var(--aw-pg-thumb-size) + 32px);
    }
}