:root {
    --mc-passepartout-color: #000000;
    --mc-passepartout-opacity: .9;
    --mc-passepartout-blend-mode: screen;
    --mc-passepartout-border-opacity: .96;
    --mc-passepartout-border-color: #c7a15a;
    --mc-passepartout-border-image: none;
    /* 1.10.246.42: raw Finish texture stays as its original URL.
       Auto cant rails bind the texture profile to real rail thickness; no
       generated full-stage border bitmap is used by ordinary Gallery. */
    --mc-passepartout-border-texture-size: max(18px, 7%) auto;
    --mc-passepartout-border-filter: saturate(1.06) contrast(1.08) brightness(.91) drop-shadow(0 .25px .45px rgba(32, 18, 5, .65));
    --mc-passepartout-border-gradient: linear-gradient(
        112deg,
        #3f2912 0%,
        #6c491d 12%,
        #96702e 25%,
        #a97a32 34%,
        #d4b06a 45%,
        #b98d45 56%,
        #c8a45f 67%,
        #815a25 83%,
        #3f2912 100%
    );
}
.woocommerce-product-gallery__image.mc-passepartout-stage,
.mc-premium-thumbs__item.mc-passepartout-thumb-stage {
    position: relative !important;
    isolation: isolate;
}

.mc-premium-thumbs__item.mc-passepartout-thumb-stage {
    overflow: hidden;
}

.mc-passepartout-overlay,
.mc-passepartout-lightbox-overlay,
.mc-passepartout-border-overlay,
.mc-passepartout-lightbox-border-overlay {
    position: absolute;
    display: block;
    visibility: visible;
    pointer-events: none;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transform: translate3d(0, 0, 0);
    transform-origin: 0 0;
}

.mc-passepartout-overlay,
.mc-passepartout-lightbox-overlay {
    z-index: 3 !important;
    background: var(--mc-passepartout-color);
    opacity: var(--mc-passepartout-opacity);
    mix-blend-mode: var(--mc-passepartout-blend-mode);
}

.mc-passepartout-border-overlay,
.mc-passepartout-lightbox-border-overlay {
    z-index: 4 !important;
    /* Finish System: colour is always the material fallback; an optional
       texture is layered above it. Keep these as individual properties so an
       old !important background shorthand cannot erase the runtime texture. */
    background-color: var(--mc-passepartout-border-color, #c7a15a) !important;
    background-image: none !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    opacity: var(--mc-passepartout-border-opacity) !important;
    mix-blend-mode: normal !important;
    filter: var(--mc-passepartout-border-filter) !important;
}

/* 1.10.246.42: auto rectangular cant uses normalized opening geometry, not a
   generated bitmap mask. The parent must stay transparent; the four rail
   children carry the fallback colour/texture themselves. */
.mc-passepartout-border-overlay[data-mc-cant-mask-mode="geometry"],
.mc-passepartout-thumb-border-overlay[data-mc-cant-mask-mode="geometry"] {
    background-color: transparent !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}



/*
 * 1.10.246.42 — geometry-bound directional cant rails.
 * The border overlay keeps the canonical ring mask. Four children split the
 * perimeter into mitred sides; only their material child is rotated, so the
 * mask itself never changes orientation. No canvas and no Data URI are created
 * during gallery/thumbnail updates.
 */
.mc-cant-directional-field,
.mc-cant-directional-side,
.mc-cant-directional-material {
    position: absolute;
    display: block;
    pointer-events: none;
}

.mc-cant-directional-field,
.mc-cant-directional-side {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.mc-cant-directional-field {
    overflow: hidden;
}

.mc-cant-directional-side {
    overflow: hidden;
}

.mc-cant-directional-material {
    max-width: none !important;
    max-height: none !important;
    opacity: 1;
    mix-blend-mode: normal;
    filter: none;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
}

.mc-passepartout-overlay,
.mc-passepartout-border-overlay,
.mc-passepartout-thumb-overlay,
.mc-passepartout-thumb-border-overlay {
    will-change: left, top, width, height;
}

.woocommerce-product-gallery__image.mc-passepartout-stage > a,
.woocommerce-product-gallery__image.mc-passepartout-stage > img,
.mc-premium-thumbs__item.mc-passepartout-thumb-stage > a,
.mc-premium-thumbs__item.mc-passepartout-thumb-stage > img,
.mc-premium-thumbs__item.mc-passepartout-thumb-stage img {
    position: relative;
    z-index: 1;
}

.mc-passepartout-thumb-overlay,
.mc-passepartout-thumb-border-overlay {
    border-radius: inherit;
}

.mc-passepartout-lightbox-overlay,
.mc-passepartout-lightbox-border-overlay {
    left: 0;
    top: 0;
    will-change: left, top, width, height;
}

@media (prefers-reduced-motion: no-preference) {
    .mc-passepartout-overlay,
    .mc-passepartout-lightbox-overlay,
    .mc-passepartout-border-overlay,
    .mc-passepartout-lightbox-border-overlay {
        transition: background-color 180ms ease, opacity 180ms ease;
    }
}


/*
 * PhotoSwipe 4 zero-DOM overlay mode (1.10.12).
 * Do not append any real nodes to .pswp__zoom-wrap: PhotoSwipe uses its own
 * child structure when switching to max-resolution zoom. The passepartout and
 * border are painted by pseudo-elements, so PhotoSwipe always keeps complete
 * ownership of its image/placeholder DOM and transforms.
 */
.mc-passepartout-lightbox-composite,
.mc-passepartout-lightbox-overlay,
.mc-passepartout-lightbox-border-overlay {
    display: none !important;
}

.pswp__zoom-wrap.mc-passepartout-lightbox-pseudo-stage::after,
.pswp__zoom-wrap.mc-passepartout-lightbox-pseudo-stage::before {
    content: "";
    position: absolute;
    pointer-events: none;
    left: var(--mc-lightbox-left, 0px);
    top: var(--mc-lightbox-top, 0px);
    width: var(--mc-lightbox-width, 0px);
    height: var(--mc-lightbox-height, 0px);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transform: none;
    transform-origin: 0 0;
    transition: none !important;
}

/* Passepartout colour. */
.pswp__zoom-wrap.mc-passepartout-lightbox-pseudo-stage::after {
    z-index: 2;
    display: block;
    background: var(--mc-passepartout-color);
    opacity: calc(var(--mc-passepartout-opacity) - var(--mc-lightbox-repaint-nudge, 0));
    /* Firefox/PhotoSwipe: cross-layer screen blending can stay stale while the
       pointer remains over a GPU-transformed image. Normal alpha compositing
       gives the same selected colour over the black passepartout base and
       repaints synchronously during zoom. */
    mix-blend-mode: normal;
    -webkit-mask-image: var(--mc-lightbox-mask-image, none);
    mask-image: var(--mc-lightbox-mask-image, none);
}

/* Optional Finish System inner border/cant. */
.pswp__zoom-wrap.mc-passepartout-lightbox-pseudo-stage::before {
    z-index: 3;
    display: var(--mc-lightbox-border-display, none);
    background-color: var(--mc-lightbox-border-color, var(--mc-passepartout-border-color, #c7a15a));
    background-image: var(--mc-lightbox-border-image, none);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: var(--mc-passepartout-border-opacity);
    mix-blend-mode: normal;
    filter: none;
    -webkit-mask-image: var(--mc-lightbox-border-mask-image, none);
    mask-image: var(--mc-lightbox-border-mask-image, none);
}


/* ==========================================================
 * MC_PASSEPARTOUT_RUNTIME_TEXTURE_V2
 *
 * Swatch Image material texture.
 *
 * Dynamic image URL is supplied by passepartout-mask.js.
 * All static presentation remains here in the CSS file.
 * ========================================================== */

:root {
    /*
     * Relative tile size preserves approximately the same
     * material scale in full gallery and thumbnails.
     */
    --mc-passepartout-texture-size: 25% auto;
}


/*
 * Main WooCommerce gallery and premium thumbnails.
 *
 * !important is necessary only because the existing
 * passepartout runtime sets the fallback Color with an
 * inline background shorthand.
 */
html.mc-passepartout-has-texture
.mc-passepartout-overlay,
html.mc-passepartout-has-texture
.mc-passepartout-lightbox-overlay {

    background-color:
        var(
            --mc-passepartout-texture-base-color,
            var(--mc-passepartout-color)
        ) !important;

    background-image:
        var(
            --mc-passepartout-texture-image
        ) !important;

    background-repeat:
        repeat !important;

    background-size:
        var(
            --mc-passepartout-texture-size,
            25% auto
        ) !important;

    background-position:
        center center !important;
}


/*
 * PhotoSwipe 4 zero-DOM mode.
 *
 * Existing passepartout-mask.css draws this layer using ::after,
 * so the same texture variable is reused here.
 */
html.mc-passepartout-has-texture
.pswp__zoom-wrap.mc-passepartout-lightbox-pseudo-stage::after {

    background-color:
        var(
            --mc-passepartout-texture-base-color,
            var(--mc-passepartout-color)
        ) !important;

    background-image:
        var(
            --mc-passepartout-texture-image
        ) !important;

    background-repeat:
        repeat !important;

    background-size:
        var(
            --mc-passepartout-texture-size,
            25% auto
        ) !important;

    background-position:
        center center !important;
}