/**
 * PhotoSwipe lightbox for the product gallery — white instead of PhotoSwipe's
 * default black.
 *
 * The skin's icons ship as a white PNG sprite, which would be invisible on a
 * light backdrop, so the chrome is inverted rather than recoloured — there is
 * no colour hook for a sprite.
 */
.pswp__bg {
    background: #fff;
}

/* The backdrop is faded in by JS; without this it settles semi-transparent and
   the page shows through the white. */
.pswp--animated-in .pswp__bg {
    opacity: 1 !important;
}

/* Close and fullscreen only. The arrows are excluded because they get the
   theme's green chevron below, and inverting would turn that magenta. */
.pswp__button:not(.pswp__button--arrow--left):not(.pswp__button--arrow--right) {
    filter: invert(1);
}

.pswp__button:hover,
.pswp__button:focus {
    opacity: 1;
}

/* Arrows: the skin draws them from the same white sprite as the rest of the
   chrome, on a dark translucent pad — both of which disappear against white.
   Replaced outright with the green chevron the theme's other sliders use,
   inlined as SVG so it can carry the colour. */
.pswp .pswp__button--arrow--left::before,
.pswp .pswp__button--arrow--right::before,
.pswp--svg .pswp__button--arrow--left::before,
.pswp--svg .pswp__button--arrow--right::before {
    filter: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m9.29289322 5.70710678 1.41421358-1.41421356 11.7071068 11.70710678-11.7071068 11.7071068-1.41421358-1.4142136 10.29210678-10.2928932z' fill='%23009a3b'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 42px;
    height: 42px;
    top: 29px;
}

.pswp .pswp__button--arrow--left::before,
.pswp--svg .pswp__button--arrow--left::before {
    left: 6px;
    transform: scaleX(-1);
}

.pswp .pswp__button--arrow--right::before,
.pswp--svg .pswp__button--arrow--right::before {
    right: 6px;
}

.pswp .pswp__button--arrow--left,
.pswp .pswp__button--arrow--right {
    opacity: 1;
}

/* The skin hides the arrows outright on touch devices; the gallery is swipeable
   there, but on a laptop with a touchscreen that left no way to click through. */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
    visibility: visible;
}

.pswp__counter,
.pswp__caption__center {
    color: #4b4a4b;
    text-shadow: none;
}

.pswp__caption {
    background: transparent;
}

/* The top bar is a dark gradient by default, which reads as a grey smear on
   white. */
.pswp__top-bar {
    background: transparent !important;
}

/* PhotoSwipe sizes the image to the viewport minus the bars; those are zeroed
   in the options filter (inc/product-page-setup.php) so the picture gets the
   full height. This keeps a small breathing margin without giving the space
   back to the chrome. */
.pswp__img {
    padding: 0;
}