/* Product zoom lightbox — theme skin over PhotoSwipe 5's default UI.

   Geometry taken from the reference implementation: a white ground rather than
   PhotoSwipe's default near-black, and the three controls gathered into one
   bottom-centred cluster (prev 44px / close 56px / next 44px) instead of
   PhotoSwipe's default top-right bar plus vertically-centred side arrows.

   PhotoSwipe renders the arrows at the root of .pswp and the close button inside
   .pswp__top-bar, so they cannot be flexed into a row — each is positioned to
   the same baseline instead. Offsets are from the horizontal centre: -68px,
   0, +68px, which reproduces the reference's 18px gaps. */

.pswp {
    --pswp-bg: #FFFFFF;
    --pswp-placeholder-bg: #F1EEE6;
    --pswp-icon-color: #15140F;
    --pswp-icon-color-secondary: #FFFFFF;
    --pswp-icon-stroke-color: transparent;
    --pswp-icon-stroke-width: 0;
    --pswp-error-text-color: #4E4A40;
}

.pswp__bg {
    background: #FFFFFF;
}

/* The bar itself is only a positioning context here — the counter and zoom
   button are both disabled in the JS config, so nothing else lives in it. */
.pswp__top-bar {
    background: transparent !important;
    top: auto;
    bottom: 0;
    height: auto;
    padding: 0;
}

/* A hairline ring, not a drop shadow. The theme draws every circular control
   this way — colour swatches, card chips, the gallery's own zoom button — and a
   soft shadow under three floating white circles was the one thing here that
   looked like it came from somewhere else. */
.pswp__button--arrow--prev,
.pswp__button--arrow--next,
.pswp__button--close {
    position: absolute;
    top: auto;
    margin: 0;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(21, 20, 15, 0.12);
    opacity: 1;
    transition: background 140ms ease, box-shadow 140ms ease;
}

.pswp__button--arrow--prev,
.pswp__button--arrow--next {
    width: 44px;
    height: 44px;
    bottom: 46px;
}

.pswp__button--arrow--prev {
    left: calc(50% - 90px);
    right: auto;
}

.pswp__button--arrow--next {
    left: calc(50% + 46px);
    right: auto;
}

.pswp__button--close {
    width: 56px;
    height: 56px;
    bottom: 40px;
    left: calc(50% - 28px);
    right: auto;
}

.pswp__button--arrow--prev:hover,
.pswp__button--arrow--next:hover,
.pswp__button--close:hover {
    background: #15140F;
    box-shadow: inset 0 0 0 1px #15140F;
}

.pswp__button--arrow--prev:hover .pswp__icn,
.pswp__button--arrow--next:hover .pswp__icn,
.pswp__button--close:hover .pswp__icn {
    color: #FFFFFF;
    fill: #FFFFFF;
}

/* PhotoSwipe sizes its icons with a viewBox offset for the default 60px hit
   area; recentre them for these circles. The glyphs also ship at 32px, which in
   a 44px circle leaves almost no ring showing — 20px on the arrows and 18px on
   the close cross give the same proportion the gallery's zoom button now has. */
.pswp__button--arrow--prev .pswp__icn,
.pswp__button--arrow--next .pswp__icn,
.pswp__button--close .pswp__icn {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    margin: 0;
    color: #15140F;
    fill: #15140F;
}

.pswp__button--arrow--prev .pswp__icn,
.pswp__button--arrow--next .pswp__icn {
    width: 20px;
    height: 20px;
}

.pswp__button--close .pswp__icn {
    width: 18px;
    height: 18px;
}

/* PhotoSwipe draws one arrow glyph and mirrors it for "next" with
   `transform: scale(-1, 1)`. Re-centring the icon above replaced that transform
   at equal specificity, which left both arrows pointing the same way — so the
   flip has to be reapplied alongside the centring. */
.pswp__button--arrow--next .pswp__icn {
    transform: translate(-50%, -50%) scale(-1, 1);
}

/* A disabled arrow would leave a floating circle with a dead icon; loop is on
   in the config so this only matters for a single-image product. */
.pswp__button--arrow:disabled {
    display: none;
}

.pswp__img--placeholder {
    background: var(--pswp-placeholder-bg);
}

/* base.css carries a global `img { max-height: 100%; object-fit: cover }`.
   PhotoSwipe's image is position:absolute inside .pswp__zoom-wrap, whose height
   is `auto`, so `max-height: 100%` resolved against an auto-height containing
   block and collapsed the image to ZERO height — PhotoSwipe was setting
   `height: 780px` inline and the computed value came out 0px. The lightbox
   opened, zoomed and navigated correctly the whole time; there was simply
   nothing to see.

   object-fit is reset to contain as well: PhotoSwipe sizes the element to the
   image's exact aspect ratio, so `cover` would only ever crop it. */
.pswp__img {
    max-width: none;
    max-height: none;
    object-fit: contain;
}

/* The reference keeps the cluster clear of the image on small screens by
   pulling it in tight to the bottom edge. */
@media screen and (max-width: 749px) {

    .pswp__button--arrow--prev,
    .pswp__button--arrow--next {
        width: 40px;
        height: 40px;
        bottom: 26px;
    }

    .pswp__button--arrow--prev {
        left: calc(50% - 82px);
    }

    .pswp__button--arrow--next {
        left: calc(50% + 42px);
    }

    .pswp__button--close {
        width: 50px;
        height: 50px;
        bottom: 21px;
        left: calc(50% - 25px);
    }
}