{"version":3,"file":"frontend/assets/build/style-wpbean-wc-gallery.css","mappings":";;;AAAA,gBAAgB;AAAhB;;EAAA;AAIA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACJ;;AAEA;AAOA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;KAAA;UAAA;AALJ;AAOI;EACI;AALR;AAOI;EACI;AALR;AAQI;;;EAGI;AANR;;AAUA;EACI;EACA;EACA;EACA;AAPJ;;AAUA;AACA;EACI;EACA;EACA;AAPJ;;AAUA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAPJ;AASI;EACI;AAPR;AASI;EACI;AAPR;AAUI;EACI;EACA;AARR;;AAYA;EACI;AATJ;;AAYA;EACI;EACA;AATJ;;AAYA;EACI;EACA;EACA;AATJ;;AAYA;EACI;EACA;EAjFA;EACA;EACA;EAiFA;EACA;EACA;EAKA;AAXJ;AAcQ;EACI;AAZZ;AAcQ;EACI;AAZZ;;AAiBA;EACI;EACA;EACA;EACA;EACA;KAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAdJ;AAgBI;EAEI;AAfR;;AAsBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAnBR;AAqBQ;EAEI;AApBZ;;AAyBA;EACI;EACA;EACA;EACA;EACA;EACA;KAAA;AAtBJ;AAyBI;EACI;EACA;EACA;EACA;EACA;EACA;KAAA;AAvBR;;AA2BA;AAGA;EACI;EACA;EACA;EACA;EACA;AA1BJ;;AA6BA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;AA1BJ;;AA6BA;AAIA;EACI;EACA;EACA;EACA;EACA;KAAA;EACA;EACA;EACA;EACA;EACA;EACA,iDACI;AA9BR;AAiCI;EACI;AA/BR;;AAmCA;AAIA;EACI;EACA;EACA;AAnCJ;;AAuCA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EAEI;EACA;EACA;EAEJ,oFACI;EAEJ;EACA;AAxCJ;AA0CI;EACI;AAxCR;;AA4CA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAzCJ;AA2CI;EACI;AAzCR;;AA6CA;;;;;;gEAAA;AAOA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA1CJ;AA4CI;EACI;AA1CR;AA+BA;EAcI;;qDAAA;AAxCJ;AA2CI;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;AA1CR;;AA8CA;;yCAAA;AAGA;EACI;IACI;EA3CN;AACF;AA8CA;AAIA;;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,gFACI;EAGJ;AAlDJ;AAoDI;;EACI;EACA;EACA;AAjDR;AAoDI;;EACI;EACA;EACA;AAjDR;AAoDI;;EACI;EACA;AAjDR;;AAqDA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,yEACI;EAGJ;EACA;AArDJ;AAuDI;EACI;EACA;AArDR;AAwDI;EACI;EACA;EACA;EACA;EACA;AAtDR;AAyDI;EACI;EACA;EACA;AAvDR;AA0DI;EACI;EACA;AAxDR;AA2DI;EACI;EACA;AAzDR;AA4DI;EACI;EACA;AA1DR;AA6DI;EACI;EACA;AA3DR;;AA+DA;EACI;EACA;EA7ZA;EACA;EACA;EA6ZA;EACA;EACA;EACA;AA1DJ;AA4DI;EACI;AA1DR;AA6DI;EACI;EACA;EACA;EACA;EACA;EACA;AA3DR;;AA+DA;EACI;IACI;EA5DN;AACF;AA+DA;AACA;EACI;EACA;EACA;EACA;EACA;EA9bA;EACA;EACA;EA8bA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,2FACI;EAIJ;AA/DJ;AAiEI;EACI;EACA;AA/DR;AAiEI;EACI;EACA;AA/DR;AAkEI;EACI;EACA;EACA;EACA;AAhER;AAmEI;EACI;EACA;EACA;AAjER;AAmEI;EACI;EACA;EACA;EACA;AAjER;AAoEI;EACI;EACA;EACA;AAlER;;AAuEA;EACI;EACA;EACA;AApEJ;AAsEI;EACI;AApER;;AA0EA;EACI;EACA;EACA;AAvEJ;;AA4EA;EACI;EACA;EACA;AAzEJ;;AAgFA;EACI;EACA;EACA;AA7EJ;;AA+EA;EACI;EACA;EACA;AA5EJ;;AA8EA;EACI;EACA;AA3EJ;;AA8EA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAAA;EACA;EACA;AA3EJ;;AA+EA;EACI;EACA;EACA;AA5EJ;;AA8EA;EACI;EACA;AA3EJ;;AA8EA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,gLACI;EAIJ;EAEA;AAhFJ;AAiFI;EACI;EACA;EACA;AA/ER;AAkFI;EACI;EACA;EACA;AAhFR;AAmFI;EACI;EAEA;AAlFR;AAqFI;EACI;EACA;EACA;EACA;AAnFR;AAqFQ;EACI;EACA;EACA;AAnFZ;;AAwFA;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAvFJ;;AA0FA;EACI;EACA;EACA;EACA;EACA;EACA;AAvFJ;;AA0FA;AACA;EACI;EACA;AAvFJ;;AA2FA;EACI;AAxFJ;;AA2FA;AACA;EACI;EACA;AAxFJ;AA0FI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,mDACI;EAEJ;AA1FR;AA4FQ;EACI;EACA;EACA;AA1FZ;AA6FQ;EACI;EACA;AA3FZ;AA8FQ;EACI;EACA;AA5FZ;AAgGI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;KAAA;UAAA;AA9FR;;AAkGA;AAIA;EACI;EACA;EACA;AAlGJ;;AAqGA;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AApGJ;AAsGI;EACI;AApGR;AAsGI;EACI;AApGR;AAwGI;EACI,qGACI;AAvGZ;AA2GQ;EACI;EACA;EACA;AAzGZ;AA2GY;EACI;AAzGhB;;AAgHA;EACI;IACI;IACA;EA7GN;EA8GM;IACI;IACA;EA5GV;EAmHE;IACI;IACA;IACA;EA/GN;EAgHM;IACI;EA9GV;EAgHM;IACI;IACA;EA9GV;EAgHM;IACI;EA9GV;AAhBF;AAmIA;AAKA;EACI;AApHJ;AAsHI;EACI;EACA;AApHR;;AAwHA;EACI;EACA;EACA;EACA;EACA;EACA;AArHJ;AAuHI;EACI;AArHR;AAuHI;EACI;AArHR;AA0HI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAxHR;;AA8HI;EACI;AA3HR;AA8HI;EACI;AA5HR;AA+HI;EACI;EACA;EACA;AA7HR;AA+HQ;EACI;EACA;AA7HZ;AAgIQ;EACI;EACA;EACA;AA9HZ;AAgIY;EACI;EACA;AA9HhB;;AA2IQ;EACI;EACA;EACA;AAxIZ;AA6IQ;EACI;AA3IZ;AAkJQ;EACI;EACA;AAhJZ;AAkJQ;EACI;AAhJZ;;AAuJI;EACI;AApJR;AAsJI;EACI;EACA;AApJR;;AAwJA;EACI;EACA;EACA;AArJJ;;AAwJA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AArJJ;;AAwJA;EACI;EACA;EACA;EACA;EACA;EACA;AArJJ;AAuJI;EACI;AArJR;;AAyJA;EACI;EACA;EACA;EACA;KAAA;EACA;AAtJJ;;AA2JA;EACI;EACA;EACA;EACA;EACA;KAAA;EACA;EACA;EACA;EACA;EACA;EACA;AAxJJ;AA0JI;EACI;AAxJR;;AA4JA;EACI;EACA;EACA;EACA;AAzJJ;;AA4JA;EACI;EACA;EACA;EACA;EACA;AAzJJ;;AA+JA;;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;KAAA;AA5JJ;;AAgKI;;EAEI;AA7JR;AA+JI;EACI;AA7JR;AAgKI;;EAEI;AA9JR;;AAoKI;;EAEI;AAjKR;AAmKI;EACI;AAjKR;AAmKI;;EAEI;AAjKR;AAqKI;EACI;AAnKR;;AAwKA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAjiCA;EACA;EACA;EAiiCA;EACA;EACA;EACA,uDACI;AApKR;AAuKI;EACI;EACA;AArKR;AAwKI;EACI;EACA;AAtKR;AAyKI;EACI;EACA;EACA;AAvKR;;AA2KA;;;;;qEAAA;AAOA;EACI;EACA;EACA;AAzKJ;;AA4KA;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AAiTI;EACI;AA/SR;AAiTI;EACI;AA/SR;AAiTI;EACI;AA/SR;AAkTI;EACI;AAhTR;;AAoTA;EACI;EACA;EACA;EACA;EACA;EACA;AAjTJ;;AAoTA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjTJ;;AAoTA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,8DACI;EAEJ;EACA;EAKA;EACA;AAvTJ;AAyTI;EACI;EACA;AAvTR;;AA2TA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;AAzTJ;;AA4TA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAzTJ;;AA4TA;EACI;EACA;AAzTJ;AA2TI;EACI;EACA;AAzTR;AA4TI;EACI;EACA;AA1TR;;AA8TA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AA3TJ;;AA8TA;EACI;EACA;EACA;EACA;AA3TJ;;AA8TA;EACI;EACA;EACA;AA3TJ;;AA8TA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAt0DA;EACA;EACA;EAs0DA;AAzTJ;AA2TI;EACI;EACA;EACA;AAzTR;AA4TI;EACI;EACA;EACA;EACA;AA1TR;AA6TI;EACI;EACA;AA3TR;AA8TI;EACI;EACA;EACA;AA5TR;AA+TI;EACI;EACA;EACA;AA7TR;;AAiUA;AACA;EACI;EACA;AA9TJ;;AAiUA;EACI;EACA;EACA;EACA;EACA;EACA,yEACI;EAEJ;EACA;EACA;EACA;AAhUJ;AAkUI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhUR;;AAoUA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjUJ;AAmUI;EACI;EACA;EACA;AAjUR;AAoUI;EACI;EACA;AAlUR;AAqUI;EACI;EACA;AAnUR;;AAuUA;AACA;EACI;EACA;EAt7DA;EACA;EACA;EAs7DA;EACA;EACA;EACA;EACA;EACA;EACA,6EACI;AAnUR;AAuUI;EACI;AArUR;AAwUI;EACI;AAtUR;AAuUQ;EACI;AArUZ;AAwUI;EACI;AAtUR;AAuUQ;EACI;AArUZ;AAyUI;EACI;EACA;AAvUR;AA0UI;EACI;EACA;EACA;EACA;AAxUR;AA2UI;EACI;EACA;EACA;EAEA;EACA;EACA;EACA;AA1UR;;AA8UA;AACA;EACI;EACA;EA/+DA;EACA;EACA;EA++DA;EACA;EACA;AAzUJ;;AA4UA;;EAEI;EACA;EACA;EACA;EACA;EACA;KAAA;AAzUJ;;AA4UA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,8DACI;EAEJ;AA3UJ;AA6UI;EACI;EACA;AA3UR;AA8UI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA5UR;;AAgVA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,8DACI;EAEJ;AA/UJ;AAiVI;EACI;EACA;AA/UR;;AAmVA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhVJ;AAkVI;EACI;EACA;EACA;AAhVR;AAmVI;EACI;EACA;EACA;EACA;AAjVR;AAoVI;EACI;EACA;EACA;AAlVR;AAqVI;EACI;EACA;EACA;KAAA;EACA;KAAA;AAnVR;AAsVI;EACI;EACA;EA/lEJ;EACA;EACA;EA+lEI;EACA;AAlVR;AAoVQ;EACI;EACA;EACA;EACA;EACA,8EACI;AAnVhB;AAwVI;EACI;AAtVR;AAwVQ;EACI;EACA;AAtVZ;AA0VI;EACI;AAxVR;AA0VQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAxVZ;;AA6VA;AACA;EACI;EACA;AA1VJ;;AA6VA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,qDACI;EAEJ;AA5VJ;AA8VI;EACI;EACA;AA5VR;AA+VI;EACI;EACA;EACA;AA7VR;AAgWI;EACI;EACA;AA9VR;;AAkWA;AAII;EACI;AAlWR;AAqWI;EACI;AAnWR;AAwWQ;EACI;EACA;E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A;EACA;AAtdJ;;AA0dA;EACI;EACA;EACA;EACA;EACA;EACA;AAvdJ;AAydI;EACI;AAvdR;AA0dI;EACI;AAxdR;AA2dI;EAEI;EACA;EACA;AA1dR;;AA+dA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA5dJ;AA8dI;EACI;AA5dR;;AAieI;EAEI;EACA;EACA;EACA;KAAA;EACA;KAAA;EACA;EACA;AA/dR;;AAqeI;EACI;AAleR;AAqeI;EACI;EACA;EACA;AAneR;AAueQ;EAEI;EACA;KAAA;AAteZ;;AA4eA;EACI;EACA;EACA;EACA;EACA;KAAA;EACA;EACA;EACA;EACA;AAzeJ;AA2eI;EACI;AAzeR;;AA8eA;EACI;EACA;EACA;EACA;AA3eJ;AA6eI;EACI;EACA;EACA;EACA;EACA;KAAA;EACA;AA3eR;;AAgfA;EACI;EACA;EACA;EACA;AA7eJ;AA+eI;EACI;EACA;EACA;EACA;EACA;AA7eR;;AAkfA;EACI;EACA;EACA;AA/eJ;;AAkfA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA/eJ;AAifI;EACI;EACA;EACA;EACA;AA/eR;AAkfI;EACI;AAhfR,C","sources":["webpack://wpbean-product-gallery-slider-for-woocommerce/./src/frontend/style.scss"],"sourcesContent":["/**\n * WooCommerce Image Zoom — Stylesheet v2.0.0 (SCSS Version)\n */\n\n/* ── Variables ───────────────────────────────── */\n:root {\n    --wcpg-thumb-w: 80px;\n    --wcpg-thumb-h: 80px;\n    --wcpg-thumb-aspect: auto;\n    --wcpg-thumb-gap: 8px;\n    --wcpg-active-color: rgba(0, 0, 0, 0.82);\n    --wcpg-active-bw: 2px;\n    --wcpg-spinner-color: rgba(0, 0, 0, 0.82);\n    --wcpg-tr-dur: 280ms;\n    --wcpg-img-bg: #f7f7f7;\n    --wcpg-thumb-radius: 4px;\n    --wcpg-grid-cols: 4;\n    --wcpg-radius: 6px;\n}\n\n/* ── Mixins for Reusable Logic ───────────────── */\n@mixin flex-center {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n/* ── Main Wrapper & Layout ───────────────────── */\n.wcpg-wrapper {\n    position: relative !important;\n    display: flex !important;\n    flex-direction: column;\n    gap: var(--wcpg-thumb-gap);\n    max-width: 100%;\n    user-select: none;\n\n    &.wcpg-thumb-top {\n        flex-direction: column-reverse;\n    }\n    &.wcpg-thumb-bottom {\n        flex-direction: column;\n    }\n\n    [data-wcpg-image],\n    [data-wcpg-video],\n    [data-wcpg-embed] {\n        display: none !important;\n    }\n}\n\n.wcpg-row {\n    display: flex;\n    gap: var(--wcpg-strip-gap);\n    width: 100%;\n    align-items: flex-start;\n}\n\n/* ── Stage & Main Display ────────────────────── */\n.wcpg-stage {\n    position: relative;\n    flex: 1;\n    min-width: 0;\n}\n\n.wcpg-main-wrap {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    border-radius: var(--wcpg-radius);\n    line-height: 0;\n    border: var(--wcpg-main-bw, 0px) solid var(--wcpg-main-bc, transparent);\n    box-shadow: var(--wcpg-main-shadow, none);\n\n    &.wcpg-zooming .wcpg-main-img {\n        cursor: crosshair;\n    }\n    &.wcpg-no-zoom {\n        cursor: default;\n    }\n\n    &:hover .wcpg-lb-trigger {\n        opacity: 1;\n        transform: scale(1);\n    }\n}\n\n.wcpg-stacked-item.wcpg-zooming {\n    cursor: crosshair;\n}\n\n.wcpg-stacked-item:hover .wcpg-lb-trigger {\n    opacity: 1;\n    transform: scale(1);\n}\n\n.wcpg-stacked-item.wcpg-lb-always .wcpg-lb-trigger {\n    opacity: 1;\n    transform: scale(1);\n    pointer-events: auto;\n}\n\n.wcpg-main-display {\n    position: relative;\n    width: 100%;\n    @include flex-center;\n    min-height: 200px;\n    overflow: hidden;\n    background: var(--wcpg-img-bg);\n    // Creates a proper stacking context so .wcpg-slide-out's z-index:4 is\n    // contained here and cannot escape to occlude the pagination (which lives\n    // outside this element). Without this, the GPU compositing layer for the\n    // sliding outImg stacks above the pagination and causes it to blink.\n    isolation: isolate;\n\n    &:not([style*=\"height\"]) {\n        .wcpg-main-img {\n            height: auto;\n        }\n        .wcpg-main-video {\n            height: auto;\n        }\n    }\n}\n\n.wcpg-main-img {\n    display: block;\n    width: auto !important;\n    height: auto !important;\n    max-width: 100%;\n    object-fit: contain;\n    pointer-events: none;\n    will-change: transform, opacity;\n    transform-origin: 50% 50%;\n    min-height: 0;\n    position: relative;\n    z-index: 1;\n    mix-blend-mode: darken;\n\n    &[src=\"\"],\n    &:not([src]) {\n        min-height: 200px;\n    }\n}\n\n// Cover mode: image fills the container edge-to-edge, cropping as needed.\n// Overrides the base width/height: auto so object-fit: cover has effect.\n.wcpg-fit-cover {\n    .wcpg-main-img {\n        width: 100% !important;\n        height: 100% !important;\n        max-width: none;\n        position: absolute;\n        inset: 0;\n        z-index: 1;\n        min-height: 0;\n\n        &[src=\"\"],\n        &:not([src]) {\n            min-height: 0;\n        }\n    }\n}\n\n.wcpg-main-video {\n    display: none;\n    width: 100%;\n    height: 100%;\n    max-width: 100%;\n    background: #000;\n    object-fit: contain;\n\n    // Fit-to-container mode: fills the locked display area, cropping as needed.\n    &.wcpg-fit {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        max-width: none;\n        object-fit: cover;\n    }\n}\n\n/* ── Embed iframe (YouTube / Vimeo) ──────────── */\n// Fills the display area with a 16:9 aspect-ratio by default.\n// CSS aspect-ratio ensures correct sizing even when height is auto.\n.wcpg-main-iframe {\n    display: none;\n    width: 100%;\n    aspect-ratio: 16 / 9;\n    border: none;\n    background: #000;\n}\n\n/* ── Lightbox iframe ─────────────────────────── */\n.wcpg-lb-iframe {\n    display: none;\n    width: min(90vw, 960px);\n    aspect-ratio: 16 / 9;\n    border: none;\n    border-radius: 8px;\n    background: #000;\n}\n\n/* ── Blur-up placeholder ─────────────────────── */\n// Sits behind the real image (z-index 0 vs mainImg's default stack order).\n// A small blurred version of the image is shown immediately on load,\n// eliminating the layout shift and blank flash while the full image fetches.\n.wcpg-placeholder-img {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: contain; // overridden inline to match mainImageFit setting\n    filter: blur(12px);\n    transform: scale(1.08); // slightly overscale to hide blurred edges\n    opacity: 0;\n    pointer-events: none;\n    z-index: 0;\n    transition:\n        opacity 0.35s ease,\n        filter 0.35s ease;\n\n    &.wcpg-placeholder-active {\n        opacity: 1;\n    }\n}\n\n/* ── Carousel slide overlay ──────────────────── */\n// The outgoing image is captured as an absolute overlay; it slides out\n// while mainImg (off-screen from the start) slides in. Contained inside\n// .wcpg-main-display (isolation:isolate) so its z-index never escapes.\n.wcpg-slide-out {\n    position: absolute;\n    pointer-events: none;\n    z-index: 2; // above wcpg-main-img (z-index:1) so the outgoing frame renders on top during slide\n    // position/size/top/left set inline from actual rendered image bounds\n}\n\n/* ── Lens & Zoom Window ──────────────────────── */\n.wcpg-lens {\n    position: absolute;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n    opacity: 0;\n    z-index: 15;\n    border-style: solid;\n    background: {\n        color: #fff;\n        repeat: no-repeat;\n        clip: border-box;\n    }\n    box-shadow:\n        0 2px 20px rgba(0, 0, 0, 0.28),\n        inset 0 0 0 1px rgba(255, 255, 255, 0.6);\n    transition: opacity 0.15s ease;\n    will-change: left, top, background-position, background-size;\n\n    &.wcpg-lens-active {\n        opacity: 1;\n    }\n}\n\n/* ── Window Zoom Cursor Overlay ──────────────── */\n.wcpg-win-cursor {\n    position: absolute;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n    border-style: solid;\n    z-index: 16;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n    will-change: left, top, width, height;\n\n    &.wcpg-win-cursor-active {\n        opacity: 1;\n    }\n}\n\n/* The zoom window is appended to document.body so it is never clipped by\n   any ancestor's overflow:hidden (e.g. the WooCommerce product gallery\n   wrapper). position:fixed places it in viewport coordinates, matching the\n   values calculated from getBoundingClientRect().\n   No real CSS border is used — the visual border is rendered by the ::after\n   inset box-shadow, so background-position is always relative to the full\n   element area with no border-width offset to compensate for. */\n.wcpg-zoom-window {\n    position: fixed;\n    z-index: 999990;\n    opacity: 0;\n    pointer-events: none;\n    background: #fff no-repeat;\n    overflow: hidden;\n    transition: opacity 0.18s ease;\n    will-change: opacity;\n\n    &.wcpg-zoom-win-active {\n        opacity: 1;\n    }\n\n    /* Inset border overlay — rendered on top of the background image so it\n       never shifts or clips the zoomed content. Width and color are driven\n       by CSS custom properties set from JS settings. */\n    &::after {\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        box-shadow: inset 0 0 0 var(--wcpg-zwin-bw, 0px)\n            var(--wcpg-zwin-bc, transparent);\n        pointer-events: none;\n        z-index: 2;\n    }\n}\n\n/* Touch devices never use the zoom window — hide it entirely so simulated\n   mouse events (fired by some touch browsers after a tap) cannot make it\n   appear and break the gallery layout. */\n@media (hover: none) {\n    .wcpg-zoom-window {\n        display: none !important;\n    }\n}\n\n/* ── Linked-Video Play Button ── */\n// Centred play button overlaid on gallery images that have an attached video.\n// Shown by JS when navigating to an image item with linkedVideoType set.\n// .wcpg-lb-linked-video-btn is the same button inside the lightbox.\n.wcpg-linked-video-btn,\n.wcpg-lb-linked-video-btn {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(1);\n    z-index: 25;\n    width: 64px;\n    height: 64px;\n    padding: 0;\n    border: 3px solid rgba(255, 255, 255, 0.85);\n    border-radius: 50%;\n    background: rgba(0, 0, 0, 0.55);\n    color: #fff;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 0;\n    transition:\n        background 0.18s ease,\n        transform 0.15s ease,\n        border-color 0.18s ease;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n\n    svg {\n        width: 26px;\n        height: 26px;\n        margin-left: 4px; // optical center for play triangle\n    }\n\n    &:hover {\n        background: rgba(0, 0, 0, 0.78);\n        border-color: #fff;\n        transform: translate(-50%, -50%) scale(1.08);\n    }\n\n    &:focus-visible {\n        outline: 2px solid var(--wcpg-active-color);\n        outline-offset: 3px;\n    }\n}\n\n/* ── Interactive Elements (Trigger & Spinner) ── */\n.wcpg-lb-trigger {\n    position: absolute;\n    z-index: 20;\n    width: 34px;\n    height: 34px;\n    padding: 7px;\n    border: none;\n    border-radius: 50%;\n    background: rgba(255, 255, 255, 0.92);\n    color: #333;\n    cursor: pointer;\n    opacity: 0;\n    transform: scale(0.85);\n    transition:\n        opacity 0.2s ease,\n        transform 0.2s ease,\n        background 0.15s ease;\n    line-height: 0;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n\n    &:hover {\n        background: var(--wcpg-active-color);\n        color: #fff;\n    }\n\n    &:focus-visible {\n        outline: 2px solid var(--wcpg-active-color);\n        outline-offset: 2px;\n        opacity: 1;\n        transform: scale(1);\n        background: rgba(255, 255, 255, 0.96);\n    }\n\n    svg {\n        width: 100%;\n        height: 100%;\n        display: block;\n    }\n\n    &.wcpg-lb-pos-bottom-right {\n        bottom: 10px;\n        right: 10px;\n    }\n\n    &.wcpg-lb-pos-bottom-left {\n        bottom: 10px;\n        left: 10px;\n    }\n\n    &.wcpg-lb-pos-top-right {\n        top: 10px;\n        right: 10px;\n    }\n\n    &.wcpg-lb-pos-top-left {\n        top: 10px;\n        left: 10px;\n    }\n}\n\n.wcpg-spinner {\n    position: absolute;\n    inset: 0;\n    @include flex-center;\n    z-index: 10;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n\n    &.wcpg-spinner-active {\n        opacity: 1;\n    }\n\n    .wcpg-spinner-inner {\n        width: 26px;\n        height: 26px;\n        border: 3px solid rgba(0, 0, 0, 0.08);\n        border-top-color: var(--wcpg-spinner-color);\n        border-radius: 50%;\n        animation: wcpg-spin 0.65s linear infinite;\n    }\n}\n\n@keyframes wcpg-spin {\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n/* ── Main Image Navigation Arrows ────────────── */\n.wcpg-main-arrow {\n    position: absolute;\n    top: 50%;\n    z-index: 25;\n    width: var(--wcpg-arrow-size, 40px);\n    height: var(--wcpg-arrow-size, 40px);\n    @include flex-center;\n    border: none;\n    border-radius: var(--wcpg-arrow-radius, 50%);\n    background: var(--wcpg-arrow-bg, rgba(255, 255, 255, 0.92));\n    backdrop-filter: blur(4px);\n    -webkit-backdrop-filter: blur(4px);\n    color: var(--wcpg-arrow-color, #1a1a1a);\n    cursor: pointer;\n    opacity: 0;\n    pointer-events: none;\n    padding: 0;\n    transition:\n        opacity 0.6s ease,\n        transform 0.6s ease,\n        background 0.15s ease,\n        color 0.15s ease;\n    line-height: 0;\n\n    &.wcpg-main-prev {\n        left: 12px;\n        transform: translateY(-50%) translateX(-24px);\n    }\n    &.wcpg-main-next {\n        right: 12px;\n        transform: translateY(-50%) translateX(24px);\n    }\n\n    svg {\n        width: var(--wcpg-arrow-icon-size, 18px);\n        height: var(--wcpg-arrow-icon-size, 18px);\n        display: block;\n        flex-shrink: 0;\n    }\n\n    &:hover {\n        background: var(--wcpg-arrow-hover-bg, rgba(0, 0, 0, 0.82));\n        color: var(--wcpg-arrow-hover-color, #fff);\n        transform: translateY(-50%) scale(1.1);\n    }\n    &:focus-visible {\n        background: var(--wcpg-arrow-hover-bg, rgba(0, 0, 0, 0.82));\n        color: var(--wcpg-arrow-hover-color, #fff);\n        outline: 2px solid rgba(255, 255, 255, 0.7);\n        outline-offset: -2px;\n    }\n\n    &:active {\n        background: var(--wcpg-arrow-hover-bg, rgba(0, 0, 0, 0.82));\n        filter: brightness(0.85);\n        transition-duration: 0.08s;\n    }\n}\n\n// Slide arrows in from their respective edges when hovering the main image\n.wcpg-main-wrap:hover .wcpg-main-arrow {\n    opacity: 1;\n    pointer-events: auto;\n    transform: translateY(-50%) translateX(0);\n\n    &.wcpg-btn-disabled {\n        opacity: 0.25 !important;\n    }\n}\n\n// Always-visible override: when auto-hide is disabled the arrows stay visible\n// regardless of hover state (class added by JS when mainImageArrowsAutoHide=false)\n.wcpg-main-wrap.wcpg-arrows-always .wcpg-main-arrow {\n    opacity: 1;\n    pointer-events: auto;\n    transform: translateY(-50%) translateX(0);\n}\n\n// Always-visible override for the lightbox expand button\n// (class added by JS when lightboxButtonAutoHide=false)\n.wcpg-main-wrap.wcpg-lb-always .wcpg-lb-trigger {\n    opacity: 1;\n    transform: scale(1);\n    pointer-events: auto;\n}\n\n// Touch-active: show auto-hide controls when the user taps the main image area.\n// Class is added by JS on touchstart and removed after a short timeout,\n// mirroring the desktop :hover behaviour for touch devices.\n// Always-visible variants (wcpg-arrows-always / wcpg-lb-always) remain unaffected.\n.wcpg-main-wrap.wcpg-touch-active .wcpg-main-arrow:not(.wcpg-btn-disabled) {\n    opacity: 0.85;\n    pointer-events: auto;\n    transform: translateY(-50%) translateX(0);\n}\n.wcpg-main-wrap.wcpg-touch-active .wcpg-lb-trigger {\n    opacity: 1;\n    transform: scale(1);\n    pointer-events: auto;\n}\n.wcpg-main-wrap.wcpg-touch-active .wcpg-pagination.wcpg-pagination-autohide {\n    opacity: 1;\n    pointer-events: auto;\n}\n\n/* ── Main Image Pagination Dots ──────────────── */\n.wcpg-pagination {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    flex-wrap: wrap;\n    position: absolute;\n    bottom: 12px;\n    left: 0;\n    right: 0;\n    background-color: #ffffff;\n    padding: 8px 11px;\n    border-radius: 20px;\n    width: max-content;\n    margin: auto;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n// Auto-hide pagination (shown only when hovering the stage)\n.wcpg-pagination.wcpg-pagination-autohide {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.22s ease;\n}\n.wcpg-main-wrap:hover .wcpg-pagination.wcpg-pagination-autohide {\n    opacity: 1;\n    pointer-events: auto;\n}\n\n.wcpg-dot {\n    width: var(--wcpg-dot-size, 5px);\n    height: var(--wcpg-dot-size, 5px);\n    border-radius: 999px;\n    background: var(--wcpg-dot-color, rgba(0, 0, 0, 0.2));\n    border: none;\n    cursor: pointer;\n    padding: 0;\n    flex-shrink: 0;\n    transition:\n        width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),\n        height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),\n        background 0.22s ease,\n        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);\n    outline: none;\n    // Invisible padding enlarges the touch target without affecting layout\n    position: relative;\n    &::before {\n        content: \"\";\n        position: absolute;\n        inset: -8px;\n    }\n\n    &:hover {\n        background: var(--wcpg-dot-color, rgba(0, 0, 0, 0.2));\n        filter: brightness(1.6);\n        transform: scale(1.3);\n    }\n\n    &:focus-visible {\n        outline: 2px solid\n            var(--wcpg-dot-active-color, var(--wcpg-active-color));\n        outline-offset: 3px;\n    }\n\n    &.wcpg-dot-active {\n        width: calc(var(--wcpg-dot-size, 5px) * 4.4);\n        background: var(--wcpg-dot-active-color, var(--wcpg-active-color));\n        filter: none;\n        transform: none;\n\n        &:hover {\n            background: var(--wcpg-dot-active-color, var(--wcpg-active-color));\n            filter: brightness(1.15);\n            transform: none;\n        }\n    }\n}\n\n/* ── Progress Bar Pagination ── */\n// Full-width thin bar at the bottom edge of the stage, fills left→right\n// as the user advances through images. Non-interactive (display only).\n.wcpg-pagination.wcpg-pagination-progress {\n    display: block;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    height: 4px;\n    border-radius: 0;\n    box-shadow: none;\n    background: rgba(0, 0, 0, 0.15);\n    gap: 0;\n    flex-wrap: unset;\n    backdrop-filter: none;\n    -webkit-backdrop-filter: none;\n}\n\n.wcpg-progress-fill {\n    height: 100%;\n    background: var(--wcpg-active-color);\n    border-radius: 0 2px 2px 0;\n    transition: width 0.38s cubic-bezier(0.4, 0, 0.2, 1);\n    min-width: 0;\n    will-change: width;\n}\n\n/* ── Top-positioned pagination ── */\n.wcpg-pagination.wcpg-pagination-top {\n    bottom: auto;\n    top: 12px;\n}\n\n// Progress bar at top: flush to the top edge (no floating gap)\n.wcpg-pagination.wcpg-pagination-progress.wcpg-pagination-top {\n    top: 0;\n}\n\n/* ── Count Pagination ── */\n.wcpg-pagination.wcpg-pagination-count {\n    gap: 4px;\n    padding: 6px 10px;\n\n    .wcpg-count-nav {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 22px;\n        height: 22px;\n        border: none;\n        background: none;\n        cursor: pointer;\n        padding: 0;\n        border-radius: 50%;\n        color: rgba(0, 0, 0, 0.65);\n        transition:\n            background 0.15s ease,\n            color 0.15s ease;\n        flex-shrink: 0;\n\n        svg {\n            width: 13px;\n            height: 13px;\n            display: block;\n        }\n\n        &:hover {\n            background: rgba(0, 0, 0, 0.08);\n            color: rgba(0, 0, 0, 0.85);\n        }\n\n        &:focus-visible {\n            outline: 2px solid var(--wcpg-active-color);\n            outline-offset: 2px;\n        }\n    }\n\n    .wcpg-count-text {\n        font-size: 13px;\n        font-weight: 500;\n        color: rgba(0, 0, 0, 0.72);\n        letter-spacing: 0.03em;\n        min-width: 3.2em;\n        text-align: center;\n        line-height: 1;\n        font-variant-numeric: tabular-nums;\n        user-select: none;\n    }\n}\n\n/* ── Anchor Dots Pagination ── */\n// Lives inside .wcpg-stage (outside .wcpg-main-wrap) — not clipped by\n// mainWrap's overflow:hidden. Never auto-hidden. Use .wcpg-pagination-anchor\n// as the styling hook; combine with .wcpg-pagination-side for left/right placement.\n.wcpg-pagination.wcpg-pagination-anchor {\n    background-color: transparent;\n    box-shadow: none;\n    padding: 6px 5px;\n}\n\n/* ── Side Pagination (Left / Right) — Anchor Navigation style ── */\n// Dots float vertically on the left or right edge of the main image.\n// The active indicator grows in height (not width) to match the vertical axis.\n.wcpg-pagination-side {\n    flex-direction: column;\n    bottom: auto;\n    left: auto;\n    right: auto;\n    top: 50%;\n    transform: translateY(-50%);\n    width: auto;\n    margin: 0;\n    padding: 10px 7px;\n    gap: 7px;\n\n    &.wcpg-pagination-left {\n        left: 12px;\n    }\n    &.wcpg-pagination-right {\n        right: 12px;\n    }\n\n    // Override the horizontal width-grow with a vertical height-grow\n    .wcpg-dot {\n        transition:\n            height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),\n            background 0.22s ease,\n            transform 0.2s ease;\n\n        &.wcpg-dot-active {\n            width: var(--wcpg-dot-size, 5px);\n            height: calc(var(--wcpg-dot-size, 5px) * 4.4);\n            transform: none;\n\n            &:hover {\n                transform: none;\n            }\n        }\n    }\n}\n\n// Larger side dots on touch devices\n@media (hover: none) {\n    .wcpg-pagination-side .wcpg-dot {\n        width: 7px;\n        height: 7px;\n        &.wcpg-dot-active {\n            width: 7px;\n            height: 26px;\n        }\n    }\n}\n\n// Larger dots + :active feedback on touch devices\n@media (hover: none) {\n    .wcpg-dot {\n        width: 7px;\n        height: 7px;\n        background: rgba(0, 0, 0, 0.25);\n        &::before {\n            inset: -10px;\n        }\n        &:active {\n            background: rgba(0, 0, 0, 0.55);\n            transform: scale(1.35);\n        }\n        &.wcpg-dot-active {\n            width: 26px;\n        }\n    }\n}\n\n/* ── Stacked Gallery Layout (Anchor Navigation) ── */\n// All items are rendered simultaneously as a vertical stack.\n// The dot rail sits absolute inside .wcpg-stage; position:sticky on the\n// pagination keeps it centred in the viewport while the gallery is in view.\n\n.wcpg-layout-stacked {\n    flex-direction: column;\n\n    .wcpg-stage {\n        position: relative;\n        width: 100%;\n    }\n}\n\n.wcpg-anchor-rail {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 36px;\n    z-index: 20;\n    pointer-events: none;\n\n    &.wcpg-anchor-rail-left {\n        left: 14px;\n    }\n    &.wcpg-anchor-rail-right {\n        right: 14px;\n    }\n\n    // Make the dot strip sticky so it floats at viewport centre\n    // while the gallery is visible, and scrolls away with it.\n    .wcpg-pagination {\n        position: sticky !important;\n        top: 50vh !important;\n        bottom: auto !important;\n        left: auto !important;\n        right: auto !important;\n        margin: 0 !important;\n        transform: translateY(-50%) !important;\n        pointer-events: all;\n    }\n}\n\n// ── Stacked layout customisation (CSS vars set by JS from admin settings) ──\n.wcpg-layout-stacked {\n    .wcpg-stacked-wrap {\n        gap: var(--wcpg-stacked-gap, 24px);\n    }\n\n    .wcpg-anchor-rail .wcpg-pagination {\n        gap: var(--wcpg-stacked-dot-gap, 8px);\n    }\n\n    .wcpg-anchor-rail .wcpg-dot {\n        width: var(--wcpg-stacked-dot-size, 8px);\n        height: var(--wcpg-stacked-dot-size, 8px);\n        background: var(--wcpg-stacked-dot-color, rgba(255, 255, 255, 0.5));\n\n        &:hover {\n            background: var(--wcpg-stacked-dot-color, rgba(255, 255, 255, 0.5));\n            filter: brightness(1.3);\n        }\n\n        &.wcpg-dot-active {\n            width: var(--wcpg-stacked-dot-size, 8px);\n            height: calc(var(--wcpg-stacked-dot-size, 8px) * 2.75);\n            background: var(--wcpg-stacked-dot-active-color, #ffffff);\n\n            &:hover {\n                background: var(--wcpg-stacked-dot-active-color, #ffffff);\n                filter: none;\n            }\n        }\n    }\n}\n\n// ── Stacked layout: thumbnail navigation (left/right sticky sidebar) ────────\n// When stackedNavigationType === 'thumbs' with a left/right position, the\n// thumbnail strip sits in a .wcpg-row beside the stacked content. It must be\n// sticky so it stays visible as the user scrolls through the tall stack.\n.wcpg-layout-stacked {\n    &.wcpg-thumb-left,\n    &.wcpg-thumb-right {\n        .wcpg-thumbnails-wrap {\n            position: sticky;\n            top: var(--wcpg-stacked-thumbs-top, 40px);\n            align-self: flex-start; // prevent stretching to row height\n        }\n\n        // Cap the track height so it never taller than the viewport,\n        // which also gives _updateThumbButtons() a meaningful measured height.\n        .wcpg-thumbnails-track {\n            max-height: calc(100vh - var(--wcpg-stacked-thumbs-top, 40px));\n        }\n    }\n\n    // Top/bottom: thumbnails span full width above/below the stacked content\n    &.wcpg-thumb-top,\n    &.wcpg-thumb-bottom {\n        .wcpg-thumbnails-wrap {\n            flex-direction: row;\n            width: 100%;\n        }\n        .wcpg-thumbnails-list {\n            flex-direction: row;\n        }\n    }\n}\n\n// Outside mode: shift the rail beyond the image edges using negative offsets\n.wcpg-stage.wcpg-dots-outside {\n    .wcpg-anchor-rail.wcpg-anchor-rail-left {\n        left: -40px;\n    }\n    .wcpg-anchor-rail.wcpg-anchor-rail-right {\n        right: -40px;\n        text-align: right;\n    }\n}\n\n.wcpg-stacked-wrap {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n.wcpg-stacked-item {\n    position: relative;\n    width: 100%;\n    line-height: 0;\n    cursor: pointer; // signals clickable for lightbox\n    border-radius: var(--wcpg-radius, 0px);\n    border: var(--wcpg-main-bw, 0px) solid var(--wcpg-main-bc, transparent);\n    box-shadow: var(--wcpg-main-shadow, none);\n    overflow: hidden;\n}\n\n.wcpg-stacked-display {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    isolation: isolate;\n    line-height: 0;\n    background: var(--wcpg-img-bg);\n\n    .wcpg-stacked-img {\n        mix-blend-mode: darken;\n    }\n}\n\n.wcpg-stacked-img {\n    display: block;\n    width: 100%;\n    height: auto;\n    object-fit: contain;\n    pointer-events: none;\n}\n\n// Blur-up placeholder shown while the full stacked image loads.\n// Sits as position:absolute on top of the loading img, fades out on load.\n.wcpg-stacked-placeholder {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: contain; // overridden inline by JS to match mainImageFit\n    filter: blur(12px);\n    transform: scale(1.06); // hide the blur fringe at the edges\n    z-index: 1;\n    pointer-events: none;\n    opacity: 1;\n    transition: opacity 0.4s ease;\n\n    &.wcpg-stacked-ph-hide {\n        opacity: 0;\n    }\n}\n\n.wcpg-stacked-video {\n    display: block;\n    width: 100%;\n    height: auto;\n    background: #000;\n}\n\n.wcpg-stacked-iframe {\n    display: block;\n    width: 100%;\n    aspect-ratio: 16 / 9;\n    border: none;\n    background: #000;\n}\n\n// ── Stacked linked-video overlay ──────────────────────────────────────────\n// Sits absolutely on top of the image (image still provides item height).\n// Shown/hidden via .wcpg-stacked-lv-active on the parent .wcpg-stacked-item.\n.wcpg-stacked-lv-iframe,\n.wcpg-stacked-lv-video {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    border: none;\n    background: #000;\n    z-index: 5;\n    display: none;\n    object-fit: contain;\n}\n\n.wcpg-stacked-item.wcpg-stacked-lv-active {\n    .wcpg-stacked-lv-iframe,\n    .wcpg-stacked-lv-video {\n        display: block;\n    }\n    .wcpg-stacked-linked-close {\n        display: flex;\n    }\n    // Hide play button and lightbox trigger while video is playing\n    .wcpg-linked-video-btn,\n    .wcpg-lb-trigger {\n        display: none !important;\n    }\n}\n\n// HG items reuse the same overlay elements — mirror the active state\n.wcpg-hg-item.wcpg-stacked-lv-active {\n    .wcpg-stacked-lv-iframe,\n    .wcpg-stacked-lv-video {\n        display: block;\n    }\n    .wcpg-stacked-linked-close {\n        display: flex;\n    }\n    .wcpg-linked-video-btn,\n    .wcpg-lb-trigger {\n        display: none !important;\n    }\n    // visibility: hidden keeps the element in the layout (preserves hero height)\n    // while hiding the image behind the active video overlay\n    .wcpg-hg-display {\n        visibility: hidden;\n    }\n}\n\n// Close / back-to-image button shown while linked video is active\n.wcpg-stacked-linked-close {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    z-index: 30;\n    width: 32px;\n    height: 32px;\n    padding: 7px;\n    border: none;\n    border-radius: 50%;\n    background: rgba(0, 0, 0, 0.6);\n    color: #fff;\n    cursor: pointer;\n    @include flex-center;\n    display: none;\n    line-height: 0;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);\n    transition:\n        background 0.15s ease,\n        transform 0.15s ease;\n\n    &:hover {\n        background: rgba(0, 0, 0, 0.88);\n        transform: scale(1.08);\n    }\n\n    &:focus-visible {\n        outline: 2px solid rgba(255, 255, 255, 0.7);\n        outline-offset: 2px;\n    }\n\n    svg {\n        width: 100%;\n        height: 100%;\n        display: block;\n    }\n}\n\n/* ── Stacked Gallery: Sticky Product Summary ────\n   Applied to the product summary element when stackedStickyEnabled is true.\n   Pure CSS sticky — the element scrolls naturally with the page and sticks\n   at --wcpg-summary-sticky-top. When the parent container (gallery + summary\n   wrapper) ends, sticky releases automatically and the summary scrolls away\n   exactly as if it were in normal flow. No JS scroll magic needed. */\n\n.wcpg-summary-sticky {\n    position: sticky !important;\n    top: var(--wcpg-summary-sticky-top, 100px) !important;\n    align-self: flex-start; // prevent stretching to gallery height in flex rows\n}\n\n/* ── Gallery Loading Skeleton ────────────────── */\n// Rendered by PHP before JS runs. Mirrors the gallery layout with the correct\n// aspect-ratio so there is zero layout shift on page load.\n// JS removes it synchronously after the real gallery is built.\n.wcpg-skeleton {\n    display: flex;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.wcpg-sk-main {\n    width: 100%;\n    position: relative;\n    overflow: hidden;\n    box-sizing: border-box;\n    min-height: 60px; // safety floor on very narrow viewports\n\n    // In a side-position skeleton, main image takes remaining flex space\n    .wcpg-sk-left &,\n    .wcpg-sk-right & {\n        flex: 1;\n        min-width: 0;\n        width: auto;\n    }\n\n    // Shimmer sweep\n    &::after {\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(\n            90deg,\n            transparent 0%,\n            rgba(255, 255, 255, 0.55) 45%,\n            rgba(255, 255, 255, 0.55) 55%,\n            transparent 100%\n        );\n        background-size: 300% 100%;\n        animation: wcpg-sk-shimmer 1.8s ease-in-out infinite;\n    }\n}\n\n.wcpg-sk-thumbs {\n    display: flex;\n    flex-wrap: nowrap;\n    overflow: hidden;\n    box-sizing: border-box;\n\n    &.wcpg-sk-thumbs-h {\n        flex-direction: row;\n        width: 100%;\n    }\n    &.wcpg-sk-thumbs-v {\n        flex-direction: column;\n        flex-shrink: 0;\n    }\n    // Alignment: works for both orientations.\n    // Horizontal (row): positions items along the horizontal axis.\n    // Vertical (column): parent skeleton is flex-row with align-items:stretch, so the\n    //   strip fills main-image height and justify-content positions items vertically.\n    &.wcpg-sk-align-center {\n        justify-content: center;\n    }\n    &.wcpg-sk-align-right {\n        justify-content: flex-end;\n    }\n}\n\n.wcpg-sk-thumb {\n    flex-shrink: 0;\n    position: relative;\n    overflow: hidden;\n    box-sizing: border-box;\n    // Slightly darker shade than the main area for visual hierarchy\n    background: rgba(0, 0, 0, 0.06);\n\n    &::after {\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(\n            90deg,\n            transparent 0%,\n            rgba(255, 255, 255, 0.55) 45%,\n            rgba(255, 255, 255, 0.55) 55%,\n            transparent 100%\n        );\n        background-size: 300% 100%;\n        animation: wcpg-sk-shimmer 1.8s ease-in-out infinite;\n        animation-delay: 0.25s; // stagger thumb shimmer slightly behind main\n    }\n}\n\n@keyframes wcpg-sk-shimmer {\n    0% {\n        background-position: 150% 0;\n    }\n    100% {\n        background-position: -150% 0;\n    }\n}\n\n/* ── Thumbnails ──────────────────────────────── */\n.wcpg-thumbnails-wrap {\n    position: relative;\n    @include flex-center;\n    gap: 4px;\n    min-width: 0;\n}\n\n// Layout variants\n.wcpg-thumb-left,\n.wcpg-thumb-right {\n    .wcpg-thumbnails-wrap {\n        flex-direction: column;\n        flex-shrink: 0;\n        width: var(--wcpg-thumb-w);\n        align-self: flex-start;\n\n        &.wcpg-slider-fit {\n            overflow: hidden;\n\n            .wcpg-thumbnails-track {\n                min-height: 0;\n            }\n        }\n    }\n    .wcpg-thumbnails-list {\n        flex-direction: column;\n    }\n}\n\n.wcpg-thumb-top,\n.wcpg-thumb-bottom {\n    .wcpg-thumbnails-wrap {\n        flex-direction: row;\n        width: 100%;\n    }\n    .wcpg-thumbnails-list {\n        flex-direction: row;\n    }\n}\n\n.wcpg-thumbnails-track {\n    flex: 1;\n    overflow: hidden;\n    position: relative;\n    min-width: 0;\n    // mask-image is set directly via JS (_updateFadeMask) to avoid\n    // browser inconsistencies with CSS-variable-driven gradient masks.\n}\n\n.wcpg-thumbnails-list {\n    display: flex;\n    gap: var(--wcpg-thumb-gap);\n    transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n    will-change: transform;\n}\n\n/* ── Grid Layout ── */\n.wcpg-thumbs-grid {\n    // Top/bottom: full width strip\n    .wcpg-thumb-top &.wcpg-thumbnails-wrap,\n    .wcpg-thumb-bottom &.wcpg-thumbnails-wrap {\n        width: 100%;\n    }\n\n    // Left/right: sidebar width equals one thumb column; base rule already\n    // sets width:var(--wcpg-thumb-w) so no override needed here.\n\n    .wcpg-thumbs-grid-list {\n        display: grid;\n        grid-template-columns: repeat(\n            var(--wcpg-grid-cols),\n            var(--wcpg-thumb-w)\n        );\n        gap: var(--wcpg-thumb-gap);\n        width: 100%;\n    }\n\n    // Left/right: single-column vertical stack\n    .wcpg-thumb-left &,\n    .wcpg-thumb-right & {\n        .wcpg-thumbs-grid-list {\n            grid-template-columns: var(--wcpg-thumb-w);\n        }\n    }\n\n    // Fit-to-image mode: browser distributes columns exactly with 1fr — no rounding gap\n    &.wcpg-grid-fit {\n        .wcpg-thumbs-grid-list {\n            grid-template-columns: repeat(var(--wcpg-grid-cols), 1fr);\n        }\n        .wcpg-thumb-item {\n            width: 100%;\n        }\n    }\n}\n\n/* ── Thumbnail Items ── */\n.wcpg-thumb-item {\n    flex-shrink: 0;\n    width: var(--wcpg-thumb-w);\n    height: var(--wcpg-thumb-h);\n    aspect-ratio: var(--wcpg-thumb-aspect);\n    border-radius: var(--wcpg-thumb-radius);\n    overflow: hidden;\n    cursor: pointer;\n    position: relative;\n    box-sizing: border-box;\n    transition: opacity 0.18s ease;\n    opacity: 0.6;\n    outline: none;\n\n    // Active ring — uses ::after so it never shifts layout.\n    // inset box-shadow keeps the ring within the overflow:hidden bounds;\n    // scale animates from slightly shrunk → full-size for a satisfying pop.\n    &::after {\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        box-shadow: inset 0 0 0 var(--wcpg-active-bw) var(--wcpg-active-color);\n        opacity: 0;\n        transform: scale(0.88);\n        transition:\n            opacity 0.2s ease,\n            transform 0.2s ease;\n        pointer-events: none;\n        z-index: 2;\n    }\n\n    &:hover {\n        opacity: 1;\n        img {\n            transform: scale(1.06);\n        }\n    }\n\n    &:focus-visible {\n        outline: 2px solid var(--wcpg-active-color);\n        outline-offset: 2px;\n    }\n\n    &.wcpg-thumb-active {\n        opacity: 1;\n\n        &::after {\n            opacity: 1;\n            transform: scale(1);\n        }\n    }\n\n    img {\n        width: 100% !important;\n        height: 100% !important;\n        object-fit: cover !important;\n        object-position: center !important;\n        display: block;\n        pointer-events: none;\n        transition: transform 0.22s ease;\n        box-shadow: none !important;\n    }\n\n    .wcpg-thumb-play-badge {\n        position: absolute;\n        inset: 0;\n        @include flex-center;\n        background: rgba(0, 0, 0, 0.35);\n        transition: background 0.15s ease;\n\n        svg {\n            width: 20px;\n            height: 20px;\n            color: #fff;\n            filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));\n            transition:\n                transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),\n                filter 0.2s ease;\n        }\n    }\n\n    &:hover .wcpg-thumb-play-badge {\n        background: rgba(0, 0, 0, 0.5);\n\n        svg {\n            transform: scale(1.22);\n            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));\n        }\n    }\n\n    // No-thumbnail fallback for video items (upload type with no custom thumb set)\n    &.wcpg-thumb-no-thumb {\n        background: #e0e0e0;\n\n        &::before {\n            content: \"\";\n            position: absolute;\n            inset: 0;\n            background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(0%2C0%2C0%2C0.3)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E\");\n            background-repeat: no-repeat;\n            background-position: center;\n            background-size: 44%;\n            z-index: 0;\n        }\n    }\n}\n\n/* ── Thumbnail entrance animation ── */\n// A single scale keyframe is used for all positions and alignments.\n// Direction is driven entirely by transform-origin — the item scales from\n// whichever corner/edge is nearest to the main image and matches the alignment,\n// so it visually \"grows into place\" from the correct direction.\n// No translate is used: translate-based animations extend items outside the\n// track's overflow:hidden boundary mid-animation, causing visible cut-off.\n.wcpg-thumbs-animate .wcpg-thumb-item {\n    animation: wcpg-thumb-in 0.52s cubic-bezier(0.22, 1, 0.36, 1) backwards;\n    animation-delay: var(--wcpg-thumb-delay, 0ms);\n    transform-origin: center bottom; // default: bottom position + center alignment\n}\n\n// ── Bottom position (default) + stacked left/right ────────────────────────────\n// Items grow up toward the main image from the bottom edge.\n// Left-aligned strip: stagger flows left→right, grow from left-bottom corner.\n.wcpg-thumb-bottom .wcpg-thumbs-animate.wcpg-align-left .wcpg-thumb-item,\n.wcpg-stacked.wcpg-thumb-left\n    .wcpg-thumbs-animate.wcpg-align-left\n    .wcpg-thumb-item,\n.wcpg-stacked.wcpg-thumb-right\n    .wcpg-thumbs-animate.wcpg-align-left\n    .wcpg-thumb-item {\n    transform-origin: left bottom;\n}\n// Right-aligned strip: stagger flows right→left (row-reverse), grow from right-bottom.\n.wcpg-thumb-bottom .wcpg-thumbs-animate.wcpg-align-right .wcpg-thumb-item,\n.wcpg-stacked.wcpg-thumb-left\n    .wcpg-thumbs-animate.wcpg-align-right\n    .wcpg-thumb-item,\n.wcpg-stacked.wcpg-thumb-right\n    .wcpg-thumbs-animate.wcpg-align-right\n    .wcpg-thumb-item {\n    transform-origin: right bottom;\n}\n\n// ── Top position ──────────────────────────────────────────────────────────────\n// Items grow down toward the main image from the top edge.\n.wcpg-thumb-top .wcpg-thumbs-animate .wcpg-thumb-item {\n    transform-origin: center top;\n}\n.wcpg-thumb-top .wcpg-thumbs-animate.wcpg-align-left .wcpg-thumb-item {\n    transform-origin: left top;\n}\n.wcpg-thumb-top .wcpg-thumbs-animate.wcpg-align-right .wcpg-thumb-item {\n    transform-origin: right top;\n}\n\n// ── Left position (vertical sidebar, not stacked) ─────────────────────────────\n// Items grow rightward from the left edge toward the main image.\n// \"align-left\" = top of strip; \"align-right\" = bottom of strip (column-reverse).\n.wcpg-thumb-left:not(.wcpg-stacked) .wcpg-thumbs-animate .wcpg-thumb-item {\n    transform-origin: left center;\n}\n.wcpg-thumb-left:not(.wcpg-stacked)\n    .wcpg-thumbs-animate.wcpg-align-left\n    .wcpg-thumb-item {\n    transform-origin: left top;\n}\n.wcpg-thumb-left:not(.wcpg-stacked)\n    .wcpg-thumbs-animate.wcpg-align-right\n    .wcpg-thumb-item {\n    transform-origin: left bottom;\n}\n\n// ── Right position (vertical sidebar, not stacked) ────────────────────────────\n// Items grow leftward from the right edge toward the main image.\n.wcpg-thumb-right:not(.wcpg-stacked) .wcpg-thumbs-animate .wcpg-thumb-item {\n    transform-origin: right center;\n}\n.wcpg-thumb-right:not(.wcpg-stacked)\n    .wcpg-thumbs-animate.wcpg-align-left\n    .wcpg-thumb-item {\n    transform-origin: right top;\n}\n.wcpg-thumb-right:not(.wcpg-stacked)\n    .wcpg-thumbs-animate.wcpg-align-right\n    .wcpg-thumb-item {\n    transform-origin: right bottom;\n}\n\n@keyframes wcpg-thumb-in {\n    from {\n        opacity: 0;\n        transform: scale(0.82);\n    }\n}\n\n// Respect the user's motion preference\n@media (prefers-reduced-motion: reduce) {\n    .wcpg-thumbs-animate .wcpg-thumb-item {\n        animation: none;\n    }\n}\n\n/* ── Navigation Buttons ── */\n.wcpg-thumb-btn {\n    flex-shrink: 0;\n    width: 28px;\n    height: 28px;\n    padding: 5px;\n    border: 1px solid #ddd;\n    border-radius: 50%;\n    background: #fff;\n    color: #555;\n    @include flex-center;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);\n    line-height: 0;\n\n    &:hover {\n        background: var(--wcpg-active-color);\n        color: #fff;\n        border-color: var(--wcpg-active-color);\n        transform: scale(1.1);\n        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);\n    }\n\n    &:focus-visible {\n        outline: 2px solid var(--wcpg-active-color);\n        outline-offset: 2px;\n        background: var(--wcpg-active-color);\n        color: #fff;\n        border-color: var(--wcpg-active-color);\n    }\n\n    svg {\n        width: 100%;\n        height: 100%;\n        display: block;\n    }\n}\n\n.wcpg-btn-disabled {\n    opacity: 0 !important;\n    cursor: default !important;\n}\n\n.wcpg-thumb-btn.wcpg-btn-hidden {\n    display: none !important;\n}\n\n/* ── Thumbnail Alignment ── */\n\n// Horizontal slider (top/bottom, and stacked left/right):\n// Make the track a flex container so the list positions within the available width.\n// Only when wcpg-align-active (all items fit — no scroll needed).\n.wcpg-align-center.wcpg-align-active .wcpg-thumbnails-track {\n    display: flex;\n    justify-content: center;\n}\n.wcpg-align-right.wcpg-align-active .wcpg-thumbnails-track {\n    display: flex;\n    justify-content: flex-end;\n}\n\n// Vertical (left/right, not stacked):\n// The wrap has align-self:flex-start by default, which shrinks it to content height —\n// there is no vertical space to align into. Stretch it to fill the row's cross-axis\n// (= stage height). The wrap is already flex-direction:column with justify-content:center\n// from the @flex-center mixin, so stretching is all that's needed for center alignment.\n.wcpg-thumb-left:not(.wcpg-stacked),\n.wcpg-thumb-right:not(.wcpg-stacked) {\n    // Grid — center: stretch the wrap; mixin's justify-content:center does the rest.\n    .wcpg-thumbs-grid.wcpg-align-center:not(.wcpg-grid-fit) {\n        align-self: stretch;\n    }\n    // Grid — right (bottom): stretch + push to bottom.\n    .wcpg-thumbs-grid.wcpg-align-right:not(.wcpg-grid-fit) {\n        align-self: stretch;\n        justify-content: flex-end;\n    }\n\n    // Slider — center: stretch wrap so track grows taller, then center list inside it.\n    .wcpg-thumbs-slider.wcpg-align-center.wcpg-align-active {\n        align-self: stretch;\n    }\n    .wcpg-thumbs-slider.wcpg-align-center.wcpg-align-active\n        .wcpg-thumbnails-track {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n    }\n    // Slider — right (bottom): stretch wrap, push list to bottom of track.\n    .wcpg-thumbs-slider.wcpg-align-right.wcpg-align-active {\n        align-self: stretch;\n    }\n    .wcpg-thumbs-slider.wcpg-align-right.wcpg-align-active\n        .wcpg-thumbnails-track {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n    }\n}\n\n// Horizontal grid (top/bottom): shrink grid to content width, then margin it.\n.wcpg-thumb-top,\n.wcpg-thumb-bottom {\n    .wcpg-align-center:not(.wcpg-grid-fit) .wcpg-thumbs-grid-list {\n        width: fit-content;\n        max-width: 100%;\n        margin: 0 auto;\n    }\n    .wcpg-align-right:not(.wcpg-grid-fit) .wcpg-thumbs-grid-list {\n        width: fit-content;\n        max-width: 100%;\n        margin-left: auto;\n    }\n}\n\n// Stacked left/right → horizontal: same as top/bottom for grid.\n.wcpg-stacked.wcpg-thumb-left,\n.wcpg-stacked.wcpg-thumb-right {\n    .wcpg-align-center:not(.wcpg-grid-fit) .wcpg-thumbs-grid-list {\n        width: fit-content;\n        max-width: 100%;\n        margin: 0 auto;\n    }\n    .wcpg-align-right:not(.wcpg-grid-fit) .wcpg-thumbs-grid-list {\n        width: fit-content;\n        max-width: 100%;\n        margin-left: auto;\n    }\n}\n\n/* ── Thumbnail Item Flow Direction ── */\n// When items are fewer than the track, they should emanate from the aligned edge.\n// Right-aligned horizontal strip: item 0 at rightmost → row-reverse / rtl.\n// Bottom-aligned vertical strip: item 0 at bottom → column-reverse.\n\n// Horizontal slider (top/bottom + stacked): right → row-reverse\n.wcpg-thumb-top,\n.wcpg-thumb-bottom,\n.wcpg-stacked.wcpg-thumb-left,\n.wcpg-stacked.wcpg-thumb-right {\n    .wcpg-align-right.wcpg-align-active .wcpg-thumbnails-list {\n        flex-direction: row-reverse;\n    }\n    // Grid right: rtl makes columns fill right→left; reset ltr on items to protect content\n    .wcpg-align-right:not(.wcpg-grid-fit) .wcpg-thumbs-grid-list {\n        direction: rtl;\n    }\n    .wcpg-align-right:not(.wcpg-grid-fit) .wcpg-thumb-item {\n        direction: ltr;\n    }\n}\n\n// Vertical (left/right, not stacked): bottom → column-reverse\n.wcpg-thumb-left:not(.wcpg-stacked),\n.wcpg-thumb-right:not(.wcpg-stacked) {\n    // Slider bottom: items flow bottom→top\n    .wcpg-thumbs-slider.wcpg-align-right.wcpg-align-active\n        .wcpg-thumbnails-list {\n        flex-direction: column-reverse;\n    }\n    // Grid bottom: switch grid to flex so column-reverse is straightforward\n    // (JS checks thumbnailLayout option not CSS display — safe to override here)\n    .wcpg-thumbs-grid.wcpg-align-right:not(.wcpg-grid-fit)\n        .wcpg-thumbs-grid-list {\n        display: flex;\n        flex-direction: column-reverse;\n        align-items: flex-start;\n    }\n}\n\n/* ── Overlay Arrow Mode ── */\n// Arrows are position:absolute so they float over the track edges.\n// The track fills the full wrap dimension since buttons are out of flow.\n.wcpg-arrows-overlay {\n    .wcpg-thumb-btn {\n        position: absolute;\n        z-index: 3;\n        flex-shrink: 0;\n    }\n}\n\n// Horizontal (top/bottom): arrows on left/right, vertically centered\n.wcpg-thumb-top,\n.wcpg-thumb-bottom {\n    .wcpg-arrows-overlay {\n        .wcpg-thumb-btn {\n            top: 50%;\n            transform: translateY(-50%);\n        }\n        .wcpg-thumb-prev {\n            left: 6px;\n        }\n        .wcpg-thumb-next {\n            right: 6px;\n        }\n    }\n}\n\n// Vertical (left/right): arrows on top/bottom, horizontally centered\n.wcpg-thumb-left,\n.wcpg-thumb-right {\n    .wcpg-arrows-overlay {\n        .wcpg-thumb-btn {\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        .wcpg-thumb-prev {\n            top: 6px;\n        }\n        .wcpg-thumb-next {\n            bottom: 6px;\n        }\n    }\n}\n\n/* ── Lightbox ────────────────────────────────── */\n.wcpg-lightbox {\n    position: fixed;\n    inset: 0;\n    z-index: 999999;\n    display: none;\n    align-items: stretch;\n    justify-content: stretch;\n\n    &.wcpg-lb-active {\n        display: flex;\n    }\n    &.wcpg-lb-visible .wcpg-lb-overlay {\n        opacity: 1;\n    }\n    &.wcpg-lb-closing .wcpg-lb-overlay {\n        opacity: 0;\n    }\n\n    &.wcpg-lb-closing .wcpg-lb-img {\n        box-shadow: unset !important; // disable shadow during close animation for better performance\n    }\n}\n\n.wcpg-lb-overlay {\n    position: absolute;\n    inset: 0;\n    background: var(--wcpg-lb-overlay-bg, rgba(5, 5, 8, 0.95));\n    opacity: 0;\n    transition: opacity 0.4s ease;\n    backdrop-filter: blur(12px);\n}\n\n.wcpg-lb-container {\n    position: relative;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    display: grid;\n    grid-template-rows: 52px 1fr auto auto;\n    grid-template-columns: 52px 1fr 52px;\n    pointer-events: none;\n    will-change: opacity, transform;\n}\n\n/* ── Lightbox Toolbar ── */\n.wcpg-lb-toolbar {\n    grid-row: 1;\n    grid-column: 1 / -1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 12px;\n    pointer-events: all;\n    opacity: 0;\n    transform: translateY(-8px);\n    transition:\n        opacity 0.35s ease 0.1s,\n        transform 0.35s ease 0.1s;\n    gap: 8px;\n    background: linear-gradient(\n        to bottom,\n        rgba(0, 0, 0, 0.55) 0%,\n        transparent 100%\n    );\n    position: relative;\n    z-index: 2; // above .wcpg-lb-media-wrap (DOM-order sibling) so share dropdown is clickable\n\n    .wcpg-lightbox.wcpg-lb-visible & {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n/* ── Lightbox Image Tools (center transform toolbar) ── */\n.wcpg-lb-image-tools {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    align-items: center;\n    gap: 1px;\n    pointer-events: all;\n    background: rgba(255, 255, 255, 0.07);\n    border-radius: 10px;\n    padding: 2px;\n    // Prevent overlap with the right-side tools on smaller screens\n    max-width: calc(100vw - 320px);\n}\n\n.wcpg-lb-tools-sep {\n    display: block;\n    width: 1px;\n    height: 18px;\n    background: rgba(255, 255, 255, 0.14);\n    margin: 0 3px;\n    flex-shrink: 0;\n    border-radius: 1px;\n}\n\n.wcpg-lb-tool.wcpg-lb-tool-active {\n    background: rgba(255, 255, 255, 0.18);\n    color: #fff;\n\n    &:hover {\n        background: rgba(255, 255, 255, 0.26);\n        color: #fff;\n    }\n\n    &:focus-visible {\n        background: rgba(255, 255, 255, 0.22);\n        color: #fff;\n    }\n}\n\n.wcpg-lb-zoom-1to1 {\n    font-size: 0.6875rem;\n    font-weight: 700;\n    font-family: ui-monospace, \"SF Mono\", \"Roboto Mono\", monospace;\n    letter-spacing: 0.02em;\n    min-width: 34px;\n    width: auto !important;\n    padding: 0 9px !important;\n}\n\n.wcpg-lb-counter {\n    color: rgba(255, 255, 255, 0.5);\n    font-size: 0.8125rem;\n    font-family: -apple-system, sans-serif;\n    letter-spacing: 0.05em;\n}\n\n.wcpg-lb-tools {\n    display: flex;\n    align-items: center;\n    gap: 2px;\n}\n\n.wcpg-lb-tool {\n    width: 36px;\n    height: 36px;\n    padding: 8px;\n    border: none;\n    border-radius: 8px;\n    background: transparent;\n    color: rgba(255, 255, 255, 0.75);\n    cursor: pointer;\n    @include flex-center;\n    transition: all 0.15s ease;\n\n    &:hover {\n        background: rgba(255, 255, 255, 0.1);\n        color: #fff;\n        transform: scale(1.08);\n    }\n\n    &:focus-visible {\n        outline: 2px solid rgba(255, 255, 255, 0.85);\n        outline-offset: 1px;\n        background: rgba(255, 255, 255, 0.1);\n        color: #fff;\n    }\n\n    &.wcpg-lb-close:hover {\n        background: rgba(255, 60, 60, 0.22);\n        color: #ff6b6b;\n    }\n\n    &.wcpg-lb-close:focus-visible {\n        outline-color: rgba(255, 110, 110, 0.85);\n        background: rgba(255, 60, 60, 0.18);\n        color: #ff8080;\n    }\n\n    svg {\n        width: 100%;\n        height: 100%;\n        display: block;\n    }\n}\n\n/* ── Lightbox Share ── */\n.wcpg-lb-share-wrap {\n    position: relative;\n    pointer-events: all;\n}\n\n.wcpg-lb-share-dropdown {\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    background: #fff;\n    border-radius: 10px;\n    box-shadow:\n        0 8px 24px rgba(0, 0, 0, 0.22),\n        0 2px 8px rgba(0, 0, 0, 0.12);\n    min-width: 190px;\n    padding: 6px;\n    z-index: 1000;\n    pointer-events: all;\n\n    &::before {\n        content: \"\";\n        position: absolute;\n        top: -5px;\n        right: 11px;\n        width: 10px;\n        height: 10px;\n        background: #fff;\n        transform: rotate(45deg);\n        border-radius: 2px;\n        box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.07);\n        pointer-events: none;\n    }\n}\n\n.wcpg-lb-share-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    width: 100%;\n    padding: 10px 14px;\n    border: none;\n    background: transparent;\n    color: #222;\n    font-size: 14px;\n    font-family: inherit;\n    font-weight: 400;\n    line-height: 1.4;\n    text-align: left;\n    text-decoration: none;\n    cursor: pointer;\n    border-radius: 7px;\n    transition: background 0.14s ease;\n    white-space: nowrap;\n    box-sizing: border-box;\n    pointer-events: all;\n\n    svg {\n        flex-shrink: 0;\n        display: block;\n        pointer-events: none;\n    }\n\n    &:hover {\n        background: rgba(0, 0, 0, 0.06);\n        color: #111;\n    }\n\n    &:focus-visible {\n        outline: 2px solid rgba(0, 0, 0, 0.3);\n        outline-offset: -1px;\n    }\n}\n\n/* ── Lightbox Nav ── */\n.wcpg-lb-arrow {\n    grid-row: 2;\n    width: 52px;\n    @include flex-center;\n    border: none;\n    background: transparent;\n    color: rgba(255, 255, 255, 0.55);\n    cursor: pointer;\n    pointer-events: all;\n    opacity: 0;\n    transition:\n        opacity 0.35s ease 0.15s,\n        color 0.18s ease,\n        background 0.18s ease;\n\n    .wcpg-lightbox.wcpg-lb-visible & {\n        opacity: 1;\n    }\n\n    &.wcpg-lb-prev {\n        grid-column: 1;\n        &:hover svg {\n            transform: translateX(-2px);\n        }\n    }\n    &.wcpg-lb-next {\n        grid-column: 3;\n        &:hover svg {\n            transform: translateX(2px);\n        }\n    }\n\n    &:hover {\n        color: #fff;\n        background: rgba(255, 255, 255, 0.06);\n    }\n\n    &:focus-visible {\n        outline: 2px solid rgba(255, 255, 255, 0.65);\n        outline-offset: -6px;\n        background: rgba(255, 255, 255, 0.08);\n        color: #fff;\n    }\n\n    svg {\n        width: 28px;\n        height: 28px;\n        display: block;\n        // Override any theme stylesheet that sets fill:currentColor on SVG elements\n        fill: none !important;\n        stroke: currentColor !important;\n        overflow: visible;\n        transition: transform 0.18s ease;\n    }\n}\n\n/* ── Lightbox Media & Thumbnails ── */\n.wcpg-lb-media-wrap {\n    grid-row: 2;\n    grid-column: 2;\n    @include flex-center;\n    pointer-events: all;\n    position: relative;\n    overflow: hidden;\n}\n\n.wcpg-lb-img,\n.wcpg-lb-video {\n    display: block;\n    max-width: 100%;\n    max-height: calc(100vh - 175px);\n    border-radius: var(--wcpg-lb-img-radius, 6px);\n    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);\n    object-fit: contain;\n}\n\n.wcpg-lb-caption-wrap {\n    grid-row: 3;\n    grid-column: 1 / -1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 8px 60px 4px;\n    pointer-events: none;\n    opacity: 0;\n    transform: translateY(4px);\n    transition:\n        opacity 0.3s ease 0.18s,\n        transform 0.3s ease 0.18s;\n    min-height: 28px;\n\n    .wcpg-lightbox.wcpg-lb-visible & {\n        opacity: 1;\n        transform: translateY(0);\n    }\n\n    .wcpg-lb-caption {\n        color: rgba(255, 255, 255, 0.65);\n        font-size: 0.875rem;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n        text-align: center;\n        max-width: 600px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n}\n\n.wcpg-lb-thumbs-strip {\n    grid-row: 4;\n    grid-column: 1 / -1;\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n    overflow-x: auto;\n    padding: 6px 16px 12px;\n    pointer-events: all;\n    opacity: 0;\n    transform: translateY(8px);\n    transition:\n        opacity 0.3s ease 0.22s,\n        transform 0.3s ease 0.22s;\n    scrollbar-width: none;\n\n    .wcpg-lightbox.wcpg-lb-visible & {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.wcpg-lb-thumb-item {\n    width: 50px;\n    height: 50px;\n    flex-shrink: 0;\n    border-radius: var(--wcpg-lb-thumb-radius, 5px);\n    overflow: hidden;\n    cursor: pointer;\n    border: 2px solid transparent;\n    transition: all 0.18s;\n    opacity: 0.38;\n    position: relative; // needed for play-badge and no-thumb ::before\n\n    &:hover {\n        opacity: 0.75;\n        transform: translateY(-2px) scale(1.06);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n    }\n\n    &:focus-visible {\n        outline: 2px solid rgba(255, 255, 255, 0.85);\n        outline-offset: 2px;\n        opacity: 0.9;\n        transform: translateY(-2px);\n    }\n\n    &.wcpg-lb-thumb-active {\n        border-color: #fff;\n        opacity: 1;\n        transform: translateY(-1px);\n    }\n\n    img {\n        width: 100% !important;\n        height: 100% !important;\n        object-fit: cover !important;\n        object-position: center !important;\n    }\n\n    .wcpg-thumb-play-badge {\n        position: absolute;\n        inset: 0;\n        @include flex-center;\n        background: rgba(0, 0, 0, 0.35);\n        transition: background 0.15s ease;\n\n        svg {\n            width: 14px;\n            height: 14px;\n            color: #fff;\n            filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));\n            transition:\n                transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),\n                filter 0.2s ease;\n        }\n    }\n\n    &:hover .wcpg-thumb-play-badge {\n        background: rgba(0, 0, 0, 0.5);\n\n        svg {\n            transform: scale(1.22);\n            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));\n        }\n    }\n\n    &.wcpg-thumb-no-thumb {\n        background: #e0e0e0;\n\n        &::before {\n            content: \"\";\n            position: absolute;\n            inset: 0;\n            background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(0%2C0%2C0%2C0.3)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E\");\n            background-repeat: no-repeat;\n            background-position: center;\n            background-size: 44%;\n            z-index: 0;\n        }\n    }\n}\n\n/* ── Lightbox Dot Pagination ── */\n.wcpg-lb-dots-strip {\n    gap: 10px;\n    padding: 8px 16px 14px;\n}\n\n.wcpg-lb-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: rgba(255, 255, 255, 0.35);\n    border: none;\n    padding: 0;\n    cursor: pointer;\n    transition:\n        background 0.2s ease,\n        transform 0.2s ease;\n    flex-shrink: 0;\n\n    &:hover {\n        background: rgba(255, 255, 255, 0.7);\n        transform: scale(1.25);\n    }\n\n    &:focus-visible {\n        outline: 2px solid rgba(255, 255, 255, 0.8);\n        outline-offset: 3px;\n        background: rgba(255, 255, 255, 0.6);\n    }\n\n    &.wcpg-lb-dot-active {\n        background: #fff;\n        transform: scale(1.4);\n    }\n}\n\n/* ── Responsive stacking (left/right → bottom) ── */\n// Applied by JS via matchMedia when viewport width < thumbnailBreakpoint setting.\n.wcpg-wrapper.wcpg-stacked {\n    // left: DOM order is [thumbsWrap, stage] — column-reverse puts thumbs at bottom\n    &.wcpg-thumb-left .wcpg-row {\n        flex-direction: column-reverse;\n    }\n    // right: DOM order is [stage, thumbsWrap] — column keeps thumbs at bottom\n    &.wcpg-thumb-right .wcpg-row {\n        flex-direction: column;\n    }\n\n    &.wcpg-thumb-left,\n    &.wcpg-thumb-right {\n        .wcpg-thumbnails-wrap {\n            flex-direction: row;\n            width: 100%;\n            height: auto !important; // override fit-to-image inline height\n            align-self: auto;\n        }\n        .wcpg-thumbnails-list {\n            flex-direction: row;\n        }\n        // Rotate vertical (up/down) arrow SVGs to point left/right\n        .wcpg-thumb-prev svg {\n            transform: rotate(-90deg);\n        }\n        .wcpg-thumb-next svg {\n            transform: rotate(-90deg);\n        }\n        // Overlay arrows: reposition from top/bottom-centred to left/right-centred\n        .wcpg-arrows-overlay {\n            .wcpg-thumb-btn {\n                top: 50%;\n                left: auto;\n                transform: translateY(-50%);\n            }\n            .wcpg-thumb-prev {\n                left: 6px;\n                top: 50%;\n                bottom: auto;\n            }\n            .wcpg-thumb-next {\n                right: 6px;\n                left: auto;\n                top: 50%;\n                bottom: auto;\n            }\n        }\n    }\n}\n\n/* ── Responsive & Accessibility ── */\n\n// ── Mobile lightbox — tablet / large phone ──────────────────────────────────\n@media (max-width: 768px) {\n    // Compact grid: narrower arrow columns, shorter toolbar\n    .wcpg-lb-container {\n        grid-template-rows: 52px 1fr auto auto;\n        grid-template-columns: 44px 1fr 44px;\n    }\n\n    // Image fills more vertical space — use svh for browsers with floating chrome\n    .wcpg-lb-img,\n    .wcpg-lb-video {\n        max-width: calc(100vw - 88px); // leave room for arrow columns\n        max-height: calc(100svh - 145px);\n        border-radius: 10px;\n    }\n\n    // Nav arrows: narrower, more translucent (swipe is primary on touch)\n    .wcpg-lb-arrow {\n        width: 44px;\n        color: rgba(255, 255, 255, 0.45);\n        &:active {\n            background: rgba(255, 255, 255, 0.08);\n            color: #fff;\n        }\n    }\n\n    // Toolbar tools: minimum 44px tap target\n    .wcpg-lb-tool {\n        width: 40px;\n        height: 44px;\n        border-radius: 10px;\n        &:active {\n            background: rgba(255, 255, 255, 0.12);\n            color: #fff;\n        }\n        &.wcpg-lb-close:active {\n            background: rgba(255, 60, 60, 0.22);\n            color: #ff6b6b;\n        }\n    }\n\n    // Counter text slightly smaller\n    .wcpg-lb-counter {\n        font-size: 0.75rem;\n        letter-spacing: 0.04em;\n    }\n\n    // Thumbnail strip: smaller items, more padding for scrollability\n    .wcpg-lb-thumbs-strip {\n        gap: 5px;\n        padding: 5px 12px 14px;\n        // Always show on mobile (not hidden at 480px any more)\n    }\n    .wcpg-lb-thumb-item {\n        width: 44px;\n        height: 44px;\n        border-width: 2px;\n        &:active {\n            opacity: 0.9;\n            transform: scale(0.95);\n        }\n    }\n\n    // Lightbox dots: larger + :active feedback\n    .wcpg-lb-dot {\n        width: 7px;\n        height: 7px;\n        &:active {\n            background: rgba(255, 255, 255, 0.8);\n            transform: scale(1.3);\n        }\n        &.wcpg-lb-dot-active {\n            transform: scale(1.5);\n        }\n    }\n}\n\n// ── Mobile lightbox — small phone ───────────────────────────────────────────\n@media (max-width: 480px) {\n    // Even narrower arrow columns so image gets maximum width\n    .wcpg-lb-container {\n        grid-template-columns: 38px 1fr 38px;\n    }\n\n    .wcpg-lb-arrow {\n        width: 38px;\n        svg {\n            width: 22px;\n            height: 22px;\n        }\n    }\n\n    // Image: full bleed width, max height\n    .wcpg-lb-img,\n    .wcpg-lb-video {\n        max-width: calc(100vw - 76px);\n        max-height: calc(100svh - 130px);\n        border-radius: 8px;\n    }\n\n    // Toolbar: tighter padding\n    .wcpg-lb-toolbar {\n        padding: 0 6px;\n        gap: 4px;\n    }\n    .wcpg-lb-tool {\n        width: 38px;\n        height: 44px;\n    }\n    // Hide center image tools on very small screens — no room\n    .wcpg-lb-image-tools {\n        display: none;\n    }\n\n    // Thumb strip visible with compact thumbs\n    .wcpg-lb-thumbs-strip {\n        padding: 4px 10px 16px;\n        gap: 4px;\n    }\n    .wcpg-lb-thumb-item {\n        width: 38px;\n        height: 38px;\n    }\n\n    // Grid thumbnails: 3 columns on very small screens\n    .wcpg-thumbs-grid .wcpg-thumbs-grid-list {\n        grid-template-columns: repeat(3, 1fr) !important;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    * {\n        transition: none !important;\n        animation: none !important;\n    }\n}\n\n/* ── Sticky Split layout ────────────────────────────────────────────────── */\n\n.wcpg-layout-sticky-split {\n    display: block;\n    width: 100%;\n}\n\n.wcpg-ss-row {\n    display: flex;\n    gap: var(--wcpg-ss-gap, 32px);\n    align-items: flex-start;\n    width: 100%;\n}\n\n// Sticky (main viewer) column\n.wcpg-ss-sticky-col {\n    flex: 0 0 var(--wcpg-ss-main-w, 55%);\n    width: var(--wcpg-ss-main-w, 55%);\n    position: sticky;\n    top: var(--wcpg-ss-sticky-top, 40px);\n    align-self: flex-start;\n\n    // Reuse existing stage / mainWrap structure\n    .wcpg-stage,\n    .wcpg-main-wrap {\n        width: 100%;\n    }\n}\n\n// Scroll column\n.wcpg-ss-scroll-col {\n    flex: 1 1 0;\n    min-width: 0;\n}\n\n.wcpg-ss-wrap {\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcpg-ss-item-gap, 16px);\n}\n\n// Each full-size scroll item\n.wcpg-ss-item {\n    display: block;\n    width: 100%;\n    border-radius: var(--wcpg-ss-item-radius, 0px);\n    overflow: hidden;\n    isolation: isolate;\n    position: relative;\n    cursor: default;\n    background: var(--wcpg-ss-item-bg);\n\n    &.wcpg-ss-clickable {\n        cursor: zoom-in;\n    }\n}\n\n.wcpg-ss-img {\n    display: block;\n    width: 100% !important;\n    height: auto !important;\n    object-fit: var(--wcpg-ss-item-fit, cover);\n    aspect-ratio: var(--wcpg-ss-item-aspect, auto);\n    border-radius: inherit;\n    mix-blend-mode: darken;\n}\n\n// Caption below each scroll item\n.wcpg-ss-caption {\n    padding: 6px 4px 2px;\n    font-size: 0.8125rem;\n    color: rgba(0, 0, 0, 0.55);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    text-align: center;\n    line-height: 1.45;\n}\n\n// Video/embed item with no poster thumbnail.\n// min-height is used as a pre-JS fallback; JS (_syncSSNoThumbHeight) overwrites\n// it with the actual offsetHeight of a sibling image item.\n.wcpg-ss-item.wcpg-ss-no-thumb {\n    min-height: 200px;\n    background: var(--wcpg-ss-item-bg, #f0f0f0);\n}\n\n// Play badge overlaid on video/embed scroll items\n.wcpg-ss-play-badge {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 52px;\n    height: 52px;\n    border-radius: 50%;\n    background: rgba(0, 0, 0, 0.45);\n    @include flex-center;\n    pointer-events: none;\n    transition:\n        background 0.18s ease,\n        transform 0.18s ease;\n\n    svg {\n        width: 22px;\n        height: 22px;\n        color: #fff;\n        fill: none;\n        stroke: currentColor;\n        display: block;\n        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));\n    }\n\n    .wcpg-ss-item:hover & {\n        background: rgba(0, 0, 0, 0.6);\n        transform: translate(-50%, -50%) scale(1.08);\n    }\n}\n\n// Mobile: collapse to standard carousel below mobileBreakpoint.\n// The wcpg-mobile-layout class is present while the carousel fallback is active.\n// This hides any leftover sticky-split structural elements if they briefly remain\n// in the DOM during the reinit cycle.\n.wcpg-layout-sticky-split.wcpg-mobile-layout {\n    .wcpg-ss-row {\n        display: none;\n    }\n}\n\n/* ── Hierarchy Grid layout ───────────────────────────────────────────────── */\n\n.wcpg-layout-hierarchy-grid {\n    display: block;\n    width: 100%;\n}\n\n.wcpg-hg-wrap {\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcpg-hg-gap, 16px);\n    width: 100%;\n}\n\n// Hero item — first image at full width\n.wcpg-hg-hero {\n    position: relative;\n    width: 100%;\n    line-height: 0;\n    overflow: hidden;\n    border-radius: var(--wcpg-hg-item-radius, 6px);\n    cursor: default;\n}\n\n// Grid container for remaining items\n.wcpg-hg-grid {\n    display: grid;\n    grid-template-columns: repeat(var(--wcpg-hg-cols, 2), 1fr);\n    gap: var(--wcpg-hg-gap, 16px);\n    width: 100%;\n}\n\n// All HG items share these base styles\n.wcpg-hg-item {\n    position: relative;\n    line-height: 0;\n    overflow: hidden;\n    border-radius: var(--wcpg-hg-item-radius, 6px);\n    cursor: default;\n\n    &.wcpg-zooming {\n        cursor: crosshair;\n    }\n\n    // Show lb-trigger on hover\n    &:hover .wcpg-lb-trigger,\n    &.wcpg-lb-always .wcpg-lb-trigger {\n        opacity: 1;\n        transform: scale(1);\n        pointer-events: auto;\n    }\n}\n\n// Inner display wrapper — provides zoom target context\n.wcpg-hg-display {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    isolation: isolate;\n    line-height: 0;\n    background: var(--wcpg-img-bg);\n\n    .wcpg-hg-img {\n        mix-blend-mode: darken;\n    }\n}\n\n// Hero image: full width, natural ratio, uses mainImageFit (set inline by JS)\n.wcpg-hg-hero .wcpg-hg-img {\n    display: block;\n    width: 100%;\n    height: auto;\n    pointer-events: none;\n}\n\n// ── Grid items: uniform height via aspect-ratio on the container ──────────────\n// The aspect-ratio is applied to the item div (not the image) so every cell\n// in every row is the same shape. The image fills the container absolutely\n// with object-fit:cover so it is center-cropped regardless of its natural ratio.\n\n.wcpg-hg-grid .wcpg-hg-item {\n    aspect-ratio: var(--wcpg-hg-item-aspect, auto);\n    min-height: 160px; // fallback height when 'auto' is selected\n}\n\n.wcpg-hg-grid .wcpg-hg-display {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    isolation: isolate;\n}\n\n.wcpg-hg-grid .wcpg-hg-img {\n    // Basic selector and WooCommerce nested selector bundled together\n    &,\n    .woocommerce-js div.product div.images & {\n        display: block;\n        width: 100%;\n        height: 100%;\n        object-fit: var(--wcpg-hg-item-fit, cover);\n        object-position: center;\n        pointer-events: none;\n        aspect-ratio: unset; /* container handles ratio; don't apply to img itself */\n    }\n}\n\n// ── Auto-aspect mode: natural dimensions ──────────────────────────────────────\n// When hierarchyGridItemAspect === \"auto\", JS adds .wcpg-hg-aspect-auto to the\n// grid. Items have no fixed height — content (image/video) defines it.\n// The display wrapper must be in-flow (not absolute) so the image height drives\n// the cell height instead of collapsing to min-height.\n.wcpg-hg-grid.wcpg-hg-aspect-auto {\n    .wcpg-hg-item {\n        min-height: 0;\n    }\n\n    .wcpg-hg-display {\n        position: relative;\n        height: auto;\n        inset: unset;\n    }\n\n    .wcpg-hg-img {\n        &,\n        .woocommerce-js div.product div.images & {\n            height: auto;\n            object-fit: initial;\n        }\n    }\n}\n\n// Blur-up placeholder\n.wcpg-hg-placeholder {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: inherit;\n    filter: blur(12px);\n    transform: scale(1.06);\n    z-index: 1;\n    transition: opacity 0.3s ease;\n\n    &.wcpg-hg-ph-hide {\n        opacity: 0;\n    }\n}\n\n// Inline hosted video in a grid cell\n.wcpg-hg-video {\n    display: block;\n    width: 100%;\n    height: auto;\n    aspect-ratio: 16 / 9;\n}\n\n// Inline embed (YouTube/Vimeo) in a grid cell\n.wcpg-hg-iframe {\n    display: block;\n    width: 100%;\n    aspect-ratio: 16 / 9;\n    border: none;\n}\n\n// Fit-container mode — video/iframe fills the cell absolutely (crop to fit)\n// Applied by JS when videoHostedFitContainer / videoEmbedFitContainer is true\n.wcpg-hg-video.wcpg-fit {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    aspect-ratio: unset;\n}\n\n.wcpg-hg-iframe.wcpg-fit {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: unset;\n}\n\n// Mobile: collapse to standard carousel below mobileBreakpoint\n.wcpg-layout-hierarchy-grid.wcpg-mobile-layout {\n    .wcpg-hg-wrap {\n        display: none;\n    }\n}\n\n// Mobile left/right thumbnail position: keep the strip as a vertical slider.\n// Guards against wcpg-stacked or any other desktop class flipping the layout.\n.wcpg-mobile-layout.wcpg-thumb-left,\n.wcpg-mobile-layout.wcpg-thumb-right {\n    .wcpg-thumbnails-wrap {\n        flex-direction: column !important;\n        width: var(--wcpg-thumb-w) !important;\n    }\n    // When fit-to-image is off, let the strip size to its content naturally.\n    // When fit-to-image is on (.wcpg-slider-fit), the fit observer sets an\n    // explicit inline height — do not override it with auto here.\n    .wcpg-thumbnails-wrap:not(.wcpg-slider-fit) {\n        height: auto !important;\n    }\n    .wcpg-thumbnails-list {\n        flex-direction: column !important;\n    }\n}\n\n/* ── RTL (Right-to-Left) support ────────────────────────────────────────── */\n[dir=\"rtl\"] {\n    // Main gallery arrows: swap physical positions & flip icons\n    .wcpg-main-prev {\n        left: auto;\n        right: 12px;\n    }\n    .wcpg-main-next {\n        right: auto;\n        left: 12px;\n    }\n    .wcpg-main-prev svg,\n    .wcpg-main-next svg {\n        transform: scaleX(-1);\n    }\n\n    // Horizontal thumbnail nav buttons: flip icons\n    // (Vertical top/bottom icons for left/right positioned thumbs are excluded)\n    .wcpg-thumb-top,\n    .wcpg-thumb-bottom,\n    .wcpg-stacked {\n        .wcpg-thumb-prev svg,\n        .wcpg-thumb-next svg {\n            transform: scaleX(-1);\n        }\n        // Overlay mode: swap physical positions\n        .wcpg-arrows-overlay {\n            .wcpg-thumb-prev {\n                left: auto;\n                right: 6px;\n            }\n            .wcpg-thumb-next {\n                right: auto;\n                left: 6px;\n            }\n        }\n    }\n\n    // Lightbox arrows: swap grid columns & flip icons\n    .wcpg-lb-prev {\n        grid-column: 3;\n        svg {\n            transform: scaleX(-1);\n        }\n        &:hover svg {\n            transform: scaleX(-1) translateX(-2px);\n        }\n    }\n    .wcpg-lb-next {\n        grid-column: 1;\n        svg {\n            transform: scaleX(-1);\n        }\n        &:hover svg {\n            transform: scaleX(-1) translateX(2px);\n        }\n    }\n}\n\n// ── Tiles layout ──────────────────────────────────────────────────────────────\n\n.wcpg-layout-tiles {\n    display: block;\n    width: 100%;\n}\n\n.wcpg-tiles-wrap {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n.wcpg-tiles-grid {\n    display: grid;\n    grid-template-columns: repeat(var(--wcpg-tiles-cols, 2), 1fr);\n    gap: var(--wcpg-tiles-gap, 8px);\n    width: 100%;\n}\n\n// Each tile\n.wcpg-tiles-item {\n    position: relative;\n    overflow: hidden;\n    border-radius: var(--wcpg-tiles-item-radius, 0px);\n    aspect-ratio: var(--wcpg-tiles-item-aspect, 3/2);\n    line-height: 0;\n    cursor: default;\n\n    &.wcpg-tiles-hidden {\n        display: none;\n    }\n\n    &.wcpg-zooming {\n        cursor: crosshair;\n    }\n\n    &:hover .wcpg-lb-trigger,\n    &.wcpg-lb-always .wcpg-lb-trigger {\n        opacity: 1;\n        transform: scale(1);\n        pointer-events: auto;\n    }\n}\n\n// Inner display wrapper — provides zoom target context\n.wcpg-tiles-display {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    isolation: isolate;\n    line-height: 0;\n    background: var(--wcpg-img-bg);\n\n    .wcpg-tiles-img {\n        mix-blend-mode: darken;\n    }\n}\n\n.wcpg-tiles-img {\n    &,\n    .woocommerce-js div.product div.images & {\n        display: block;\n        width: 100%;\n        height: 100%;\n        object-fit: var(--wcpg-tiles-item-fit, cover);\n        object-position: center;\n        pointer-events: none;\n        aspect-ratio: unset;\n    }\n}\n\n// Auto-aspect mode: natural image dimensions drive tile height\n.wcpg-tiles-grid.wcpg-tiles-aspect-auto {\n    .wcpg-tiles-item {\n        aspect-ratio: auto;\n    }\n\n    .wcpg-tiles-display {\n        position: relative;\n        height: auto;\n        inset: unset;\n    }\n\n    .wcpg-tiles-img {\n        &,\n        .woocommerce-js div.product div.images & {\n            height: auto;\n            object-fit: initial;\n        }\n    }\n}\n\n// Blur-up placeholder\n.wcpg-tiles-placeholder {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: inherit;\n    filter: blur(12px);\n    transform: scale(1.06);\n    z-index: 1;\n    transition: opacity 0.3s ease;\n\n    &.wcpg-tiles-ph-hide {\n        opacity: 0;\n    }\n}\n\n// Inline video in a tile\n.wcpg-tiles-video {\n    display: block;\n    width: 100%;\n    height: auto;\n    aspect-ratio: 16 / 9;\n\n    &.wcpg-fit {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        aspect-ratio: unset;\n    }\n}\n\n// Inline embed in a tile\n.wcpg-tiles-iframe {\n    display: block;\n    width: 100%;\n    aspect-ratio: 16 / 9;\n    border: none;\n\n    &.wcpg-fit {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        aspect-ratio: unset;\n    }\n}\n\n// Show More / Show Less button area\n.wcpg-tiles-show-more-wrap {\n    display: flex;\n    justify-content: center;\n    padding-top: var(--wcpg-tiles-gap, 8px);\n}\n\n.wcpg-tiles-show-more-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 10px 24px;\n    border: 1.5px solid currentColor;\n    background: transparent;\n    cursor: pointer;\n    font-size: 0.85rem;\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    color: inherit;\n    border-radius: 3px;\n    transition: opacity 0.15s ease;\n\n    svg {\n        width: 14px;\n        height: 14px;\n        flex-shrink: 0;\n        transition: transform 0.2s ease;\n    }\n\n    &:hover {\n        opacity: 0.7;\n    }\n}\n"],"names":[],"sourceRoot":""}