/*
 * Mega Woo Gallery (KJ Addons) — WooCommerce product gallery.
 *
 * Layout mechanics follow Rey Core's PDP galleries (reference only, never
 * enqueued): grid/cascade-grid use a CSS grid with a `span min(cols, colspan)`
 * trick, grid-pattern uses flex-basis driven by a per-item --kj-mwg-basis, and
 * the slider layouts are scroll-snap tracks rather than transform sliders.
 *
 * Desktop rules live above 1025px so mobile is the default state; that way a
 * failed media query degrades to the swipeable carousel, not to a broken grid.
 */

.kj-mwg {
    /* Geometry */
    --kj-mwg-gap: 20px;
    --kj-mwg-cols: 2;
    --kj-mwg-mobile-cols: 2;
    --kj-mwg-pattern-gap: 8px;
    --kj-mwg-pattern-grow: 0;
    --kj-mwg-item-mb: 0px;
    --kj-mwg-radius: 0px;
    --kj-mwg-img-fit: cover;
    --kj-mwg-item-bg: transparent;
    --kj-mwg-peek: 0px;
    --kj-mwg-snap-align: center;
    --kj-mwg-zoom: 2;

    /* Thumbs */
    --kj-mwg-thumbs-size: 90px;
    --kj-mwg-thumbs-distance: 10px;
    --kj-mwg-thumbs-gap: 10px;
    --kj-mwg-thumbs-radius: 0px;
    --kj-mwg-thumbs-fit: cover;
    --kj-mwg-thumbs-arr-size: 30px;
    --kj-mwg-thumbs-arr-color: currentColor;
    --kj-mwg-thumb-opacity: 1;
    --kj-mwg-thumb-opacity-active: 1;
    --kj-mwg-thumb-border: transparent;
    --kj-mwg-thumb-border-active: currentColor;
    --kj-mwg-thumb-border-width: 0px;

    /* Navigation */
    --kj-mwg-nav-color: rgba(0, 0, 0, 0.2);
    --kj-mwg-nav-color-active: rgba(0, 0, 0, 0.8);
    --kj-mwg-nav-size: 2px;
    --kj-mwg-nav-spacing: 10px;
    --kj-mwg-arr-color: #fff;
    --kj-mwg-arr-bg: rgba(0, 0, 0, 0.35);
    --kj-mwg-arr-size: 40px;
    --kj-mwg-arr-offset: 10px;

    /* Counter + lightbox button */
    --kj-mwg-counter-color: #fff;
    --kj-mwg-counter-bg: rgba(0, 0, 0, 0.45);
    --kj-mwg-lb-color: #fff;
    --kj-mwg-lb-bg: rgba(0, 0, 0, 0.35);
    --kj-mwg-lb-size: 40px;
    --kj-mwg-lb-offset: 10px;

    position: relative;
    width: 100%;
}

.kj-mwg *,
.kj-mwg *::before,
.kj-mwg *::after {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * ISOLATION RESET
 *
 * The gallery's controls are real <button>/<a>/<figure> elements, so an
 * Elementor kit's global button and link styles land on them — the kit's
 * padding on `button` was inflating every thumbnail.
 *
 * Two things make this reset work without a specificity war:
 *
 *   `.kj-mwg` scopes it, so nothing outside the widget is touched.
 *
 *   `:where(…)` contributes ZERO specificity, so each rule below weighs only
 *   the (0,1,0) of `.kj-mwg`. That is deliberate in both directions: it still
 *   overrides a kit's bare `button {}` / `.elementor-widget button {}` by
 *   losing only to higher-specificity kit rules, while every component rule in
 *   this file — plain single classes like `.kj-mwg-thumb` — automatically wins
 *   against it on source order. Without :where() the reset would be (0,1,1)
 *   and would silently beat the widget's own styling.
 *
 * Anything a kit sets with `!important` still wins; that is out of scope here.
 * ------------------------------------------------------------------------ */

.kj-mwg :where(button, a, figure, img, span, div, p, h1, h2, h3, h4, h5, h6) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    min-width: 0;
    min-height: 0;
    border-radius: 0;
    float: none;
}

.kj-mwg :where(button) {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: auto;
    height: auto;
    font: inherit;
    color: inherit;
    line-height: normal;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/*
 * HARD RESET for the widget's own control elements.
 *
 * The :where() reset above is (0,1,0) on purpose, but an Elementor kit styles
 * buttons through selectors like `.elementor-widget-button .elementor-button`
 * (0,2,0) or `body:not(.rtl) .elementor-button`, and frequently adds
 * `!important`. Those outrank it, which is why kit padding kept inflating the
 * thumbnails.
 *
 * These are OUR elements, identified by our own classes — nothing in the theme
 * has a legitimate reason to size them — so the box-model properties are
 * locked with !important. Padding/spacing that the user actually wants is
 * applied through the custom properties below, which !important does not
 * block because the properties themselves are what carry the value.
 */
.kj-mwg .kj-mwg-thumb,
.kj-mwg .kj-mwg-dot,
.kj-mwg .kj-mwg-arr,
.kj-mwg .kj-mwg-thumbs-arr {
    padding: var(--kj-mwg-ctl-padding, 0) !important;
    margin: 0 !important;
    border-width: 0;
    border-style: solid;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    letter-spacing: normal !important;
    font-weight: inherit !important;
    text-transform: none !important;
    background-image: none !important;
    filter: none !important;
}

/*
 * The thumb is a frame around an image: its own padding is the inset, and its
 * border is the widget's, not the kit's.
 *
 * border-width/-color/-style carry !important for the same reason the padding
 * does: a kit's `.elementor-widget-image img` or `.elementor-button` border
 * outranks a plain class. The VALUES still come from the controls, so forcing
 * the declaration does not prevent the user from setting a border — it only
 * prevents the kit from setting one.
 */
.kj-mwg .kj-mwg-thumb {
    --kj-mwg-ctl-padding: var(--kj-mwg-thumb-padding, 0px);
    background-color: var(--kj-mwg-thumb-bg, transparent) !important;
    border-style: solid !important;
    border-width: var(--kj-mwg-thumb-border-width, 0px) !important;
    border-color: var(--kj-mwg-thumb-border, transparent) !important;
    border-radius: var(--kj-mwg-thumbs-radius, 0px) !important;
}

.kj-mwg .kj-mwg-thumb.is-active {
    border-color: var(--kj-mwg-thumb-border-active, currentColor) !important;
}

/*
 * The <img> inside a thumb. An Elementor kit styles images globally
 * (`.elementor-widget img { border-radius: … }` and similar), which lands on
 * the thumbnail image and shows up as a border/radius the widget's own thumb
 * controls appear not to change. The image is a passive fill of the frame, so
 * every decoration on it is forced off and the frame owns the look.
 */
.kj-mwg .kj-mwg-thumb-img,
.kj-mwg .kj-mwg-img {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    max-width: none !important;
    max-height: none !important;
}

.kj-mwg .kj-mwg-thumb-img {
    /* Inherit so the image corners follow the frame's radius instead of the
       kit's; the frame is what the radius control targets. */
    border-radius: inherit !important;
}

/* Kits commonly style :hover/:focus on buttons and links too. */
.kj-mwg :where(button, a):where(:hover, :focus) {
    background: none;
    box-shadow: none;
    text-decoration: none;
    transform: none;
}

/* A kit ::before/::after on a button would paint over the thumb image. */
.kj-mwg :where(button)::before,
.kj-mwg :where(button)::after {
    content: none;
}

/* Keyboard focus must stay visible. Not in :where() — this one SHOULD win. */
.kj-mwg button:focus-visible,
.kj-mwg a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.kj-mwg-stage {
    position: relative;
    display: flex;
    flex-direction: column;
}

.kj-mwg-main {
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
 * Items
 * ------------------------------------------------------------------------ */

.kj-mwg-item {
    position: relative;
    margin: 0 0 var(--kj-mwg-item-mb);
    padding: var(--kj-mwg-item-padding, 0px);
    overflow: hidden;
    border-radius: var(--kj-mwg-radius);
    background-color: var(--kj-mwg-item-bg);
}

/* Same reasoning as the control hard-reset: a kit's global `figure`/`img`
   margins would otherwise offset every gallery image. */
.kj-mwg .kj-mwg-item {
    margin-block-start: 0 !important;
    margin-inline: 0 !important;
}

.kj-mwg .kj-mwg-img {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: inherit;
}

.kj-mwg-item:last-child {
    margin-bottom: 0;
}

.kj-mwg-link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    line-height: 0;
    color: inherit;
    text-decoration: none;
}

.kj-mwg-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/*
 * Forced ratio. Elementor writes --kj-mwg-ratio into its own stylesheet rather
 * than an inline style attribute, so the presence of the ratio is signalled by
 * the .kj-mwg--ratio class that render() adds — an attribute selector on
 * [style] would never match.
 *
 * --kj-mwg-ratio is a height multiplier (1 = square, 2 = twice as tall), the
 * inverse of the CSS aspect-ratio axis order, hence `1 / ratio`.
 */
.kj-mwg--ratio .kj-mwg-item {
    aspect-ratio: 1 / var(--kj-mwg-ratio, 1);
}

.kj-mwg--ratio .kj-mwg-link {
    height: 100%;
}

.kj-mwg--ratio .kj-mwg-img {
    height: 100%;
    object-fit: var(--kj-mwg-img-fit);
}

/* ---------------------------------------------------------------------------
 * Notice / placeholder (editor only)
 * ------------------------------------------------------------------------ */

.kj-mwg--notice {
    padding: 2em;
    border: 1px dashed currentColor;
    opacity: 0.6;
    text-align: center;
    font-size: 0.9em;
}

/* ---------------------------------------------------------------------------
 * MOBILE-FIRST: carousel (scroll-snap track)
 * ------------------------------------------------------------------------ */

.kj-mwg-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.kj-mwg-track::-webkit-scrollbar {
    display: none;
}

.kj-mwg-track > .kj-mwg-item {
    flex: 0 0 calc(100% - var(--kj-mwg-peek));
    width: calc(100% - var(--kj-mwg-peek));
    scroll-snap-align: var(--kj-mwg-snap-align);
    margin-bottom: 0;
}

/*
 * Peek. The slide is narrowed by the peek amount so the next one shows at the
 * trailing edge. `scroll-snap-align: start` plus `scroll-padding-inline-start`
 * (not symmetric padding) is what keeps each slide flush with the left gutter
 * as it snaps — padding alone would let the snap point drift by the gutter.
 */
.kj-mwg--peek {
    --kj-mwg-snap-align: start;
}

.kj-mwg--peek .kj-mwg-track {
    gap: var(--kj-mwg-gutter, 8px);
    padding-inline: var(--kj-mwg-gutter, 8px);
    scroll-padding-inline-start: var(--kj-mwg-gutter, 8px);
}

/* The gap and gutters eat into the slide, so it is subtracted here too,
   otherwise the peek grows by the gutter and the last slide cannot align. */
.kj-mwg--peek .kj-mwg-track > .kj-mwg-item {
    flex-basis: calc(100% - var(--kj-mwg-peek) - var(--kj-mwg-gutter, 8px) * 2);
    width: calc(100% - var(--kj-mwg-peek) - var(--kj-mwg-gutter, 8px) * 2);
}

.kj-mwg--single .kj-mwg-track {
    overflow: visible;
}

/* Mobile: stacked */
.kj-mwg--mobile-stacked .kj-mwg-track {
    display: block;
    overflow: visible;
    scroll-snap-type: none;
}

.kj-mwg--mobile-stacked .kj-mwg-track > .kj-mwg-item {
    width: 100%;
    margin-bottom: var(--kj-mwg-item-mb);
}

/* Mobile: grid */
.kj-mwg--mobile-grid .kj-mwg-track {
    display: grid;
    grid-template-columns: repeat(var(--kj-mwg-mobile-cols), minmax(0, 1fr));
    gap: var(--kj-mwg-gap);
    overflow: visible;
    scroll-snap-type: none;
}

.kj-mwg--mobile-grid .kj-mwg-track > .kj-mwg-item {
    width: auto;
    flex: initial;
    margin-bottom: 0;
}

/* Hide on mobile */
@media (max-width: 1024px) {
    .kj-mwg--hide-mobile {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------------
 * Navigation: dots / bars / progress / counter
 * ------------------------------------------------------------------------ */

.kj-mwg-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--kj-mwg-nav-spacing);
}

.kj-mwg--nav-pos-over .kj-mwg-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--kj-mwg-nav-spacing);
    margin-top: 0;
    z-index: 3;
}

.kj-mwg-dot {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    background-color: var(--kj-mwg-nav-color);
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.kj-mwg-dot.is-active {
    background-color: var(--kj-mwg-nav-color-active);
}

/* Bars: each item is an equal-width segment of a full-width strip. */
.kj-mwg-nav--bars {
    gap: 4px;
}

.kj-mwg-nav--bars .kj-mwg-dot {
    flex: 1;
    height: var(--kj-mwg-nav-size, 2px);
    border-radius: 0;
}

/* Circles */
.kj-mwg-nav--circle {
    gap: 8px;
    padding: 10px;
    width: fit-content;
    margin-inline: auto;
    border-radius: 6px;
}

.kj-mwg--nav-pos-over .kj-mwg-nav--circle {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.kj-mwg-nav--circle .kj-mwg-dot {
    width: max(var(--kj-mwg-nav-size, 8px), 8px);
    height: max(var(--kj-mwg-nav-size, 8px), 8px);
    border-radius: 50%;
}

.kj-mwg-nav--circle .kj-mwg-dot.is-active {
    transform: scale(1.25);
}

/* Single progress bar: width driven by JS via --kj-mwg-progress (0-1). */
.kj-mwg-progress {
    display: block;
    width: 100%;
    height: var(--kj-mwg-nav-size, 2px);
    background-color: var(--kj-mwg-nav-color);
    overflow: hidden;
}

.kj-mwg-progress-bar {
    display: block;
    height: 100%;
    width: calc(var(--kj-mwg-progress, 0) * 100%);
    background-color: var(--kj-mwg-nav-color-active);
    transition: width 0.25s ease;
}

.kj-mwg-nav--counter {
    font-size: 0.85em;
    color: var(--kj-mwg-nav-color-active);
}

/* ---------------------------------------------------------------------------
 * Counter overlay
 * ------------------------------------------------------------------------ */

.kj-mwg-counter {
    position: absolute;
    z-index: 3;
    padding: 0.35em 0.7em;
    border-radius: 3px;
    font-size: 0.8em;
    line-height: 1;
    color: var(--kj-mwg-counter-color);
    background-color: var(--kj-mwg-counter-bg);
    pointer-events: none;
}

.kj-mwg-counter--top-left { top: 10px; inset-inline-start: 10px; }
.kj-mwg-counter--top-right { top: 10px; inset-inline-end: 10px; }
.kj-mwg-counter--bottom-left { bottom: 10px; inset-inline-start: 10px; }
.kj-mwg-counter--bottom-right { bottom: 10px; inset-inline-end: 10px; }

/* ---------------------------------------------------------------------------
 * Arrows (main image)
 * ------------------------------------------------------------------------ */

.kj-mwg-arrows {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--kj-mwg-arr-offset);
    pointer-events: none;
    z-index: 3;
}

.kj-mwg--mobile-arrows .kj-mwg-arrows {
    display: flex;
}

.kj-mwg-arr {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--kj-mwg-arr-size);
    height: var(--kj-mwg-arr-size);
    border-radius: 50%;
    color: var(--kj-mwg-arr-color);
    background-color: var(--kj-mwg-arr-bg);
    transition: opacity 0.25s ease;
}

.kj-mwg-arr svg {
    width: 45%;
    height: 45%;
}

.kj-mwg-arr--prev svg {
    transform: rotate(180deg);
}

.kj-mwg-arr[disabled] {
    opacity: 0.3;
    pointer-events: none;
}

/* RTL: the chevrons mirror with the document direction. */
[dir="rtl"] .kj-mwg-arr--prev svg { transform: rotate(0deg); }
[dir="rtl"] .kj-mwg-arr--next svg { transform: rotate(180deg); }

/* ---------------------------------------------------------------------------
 * Lightbox button
 * ------------------------------------------------------------------------ */

.kj-mwg-lightbox-btn {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-width: var(--kj-mwg-lb-size);
    height: var(--kj-mwg-lb-size);
    padding-inline: calc(var(--kj-mwg-lb-size) * 0.28);
    border-radius: calc(var(--kj-mwg-lb-size) / 2);
    color: var(--kj-mwg-lb-color);
    background-color: var(--kj-mwg-lb-bg);
    font-size: 0.8em;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.kj-mwg-item:hover .kj-mwg-lightbox-btn,
.kj-mwg-item:focus-within .kj-mwg-lightbox-btn {
    opacity: 1;
}

/* Touch devices get no hover, so the button stays visible there. */
@media (hover: none) {
    .kj-mwg-lightbox-btn {
        opacity: 1;
    }
}

.kj-mwg-lightbox-btn .kj-mwg-icon {
    display: flex;
    width: calc(var(--kj-mwg-lb-size) * 0.45);
    height: calc(var(--kj-mwg-lb-size) * 0.45);
}

.kj-mwg-lightbox-btn svg {
    width: 100%;
    height: 100%;
}

.kj-mwg-lightbox-btn--top-left { top: var(--kj-mwg-lb-offset); inset-inline-start: var(--kj-mwg-lb-offset); }
.kj-mwg-lightbox-btn--top-right { top: var(--kj-mwg-lb-offset); inset-inline-end: var(--kj-mwg-lb-offset); }
.kj-mwg-lightbox-btn--bottom-left { bottom: var(--kj-mwg-lb-offset); inset-inline-start: var(--kj-mwg-lb-offset); }
.kj-mwg-lightbox-btn--bottom-right { bottom: var(--kj-mwg-lb-offset); inset-inline-end: var(--kj-mwg-lb-offset); }

/* Packed pattern rows: shrink the affordance, matching Rey's --small-item. */
.kj-mwg-item[data-small-item] .kj-mwg-lightbox-btn {
    --kj-mwg-lb-size: 24px;
    font-size: 0;
    gap: 0;
}

/* ---------------------------------------------------------------------------
 * Thumbnails
 * ------------------------------------------------------------------------ */

.kj-mwg-thumbs {
    display: flex;
    align-items: center;
    gap: var(--kj-mwg-thumbs-distance);
    margin-top: var(--kj-mwg-thumbs-distance);
    min-width: 0;
}

.kj-mwg-thumbs-track {
    display: flex;
    flex-direction: row;
    gap: var(--kj-mwg-thumbs-gap);
    overflow: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    flex: 1 1 auto;
    min-width: 0;
    scroll-snap-type: x proximity;
}

.kj-mwg-thumbs-track::-webkit-scrollbar {
    display: none;
}

.kj-mwg-thumb {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
    line-height: 0;
    scroll-snap-align: start;
    /* Border, radius and background are set in the hard-reset block above,
       where they carry !important so the Elementor kit cannot override them. */
    opacity: var(--kj-mwg-thumb-opacity);
    transition: opacity 0.25s ease, border-color 0.25s ease;
}

.kj-mwg-thumb.is-active {
    opacity: var(--kj-mwg-thumb-opacity-active);
    border-color: var(--kj-mwg-thumb-border-active);
}

.kj-mwg-thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--kj-mwg-thumbs-fit);
}

.kj-mwg-thumbs-arr {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--kj-mwg-thumbs-arr-size);
    height: var(--kj-mwg-thumbs-arr-size);
    color: var(--kj-mwg-thumbs-arr-color);
    opacity: 0.7;
    transition: opacity 0.25s ease;
    border-radius: var(--kj-mwg-thumbs-radius);
}

.kj-mwg-thumbs-arr:hover {
    opacity: 1;
}

.kj-mwg-thumbs-arr[disabled] {
    opacity: 0.25;
    pointer-events: none;
}

.kj-mwg-thumbs-arr svg {
    width: 40%;
    height: 40%;
}

.kj-mwg-thumbs-arr--prev svg {
    transform: rotate(180deg);
}

/* Boxed / minimal / edges arrow treatments (Rey parity). */
.kj-mwg--thumbs-arr-boxed .kj-mwg-thumbs-arr {
    border: 1px solid currentColor;
}

.kj-mwg--thumbs-arr-minimal .kj-mwg-thumbs-arr {
    border: 0;
}

.kj-mwg--thumbs-arr-edges .kj-mwg-thumbs-arr {
    position: absolute;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid currentColor;
}

/* Mobile thumbs nav for non-slider layouts: hidden on desktop. */
.kj-mwg-thumbs--mobile-only {
    display: flex;
}

@media (min-width: 1025px) {
    .kj-mwg-thumbs--mobile-only {
        display: none;
    }
}

/*
 * Below the breakpoint the mobile controls own the gallery, so the desktop
 * thumbs rail is hidden unless the mobile nav is explicitly "thumbs". Without
 * this the vertical/horizontal layouts showed their rail AND the mobile dots
 * or bars at the same time.
 */
@media (max-width: 1024px) {
    .kj-mwg-thumbs:not(.kj-mwg-thumbs--mobile-only) {
        display: none;
    }

    .kj-mwg--nav-thumbs .kj-mwg-thumbs {
        display: flex;
    }

    /* The rail's own paging arrows are a desktop affordance: on mobile the
       rail is swiped directly. */
    .kj-mwg-thumbs-arr {
        display: none;
    }
}

/* Mobile thumbs placement */
@media (max-width: 1024px) {
    /* Base size for the mobile rail. Without this the thumb buttons have no
       intrinsic dimensions and collapse onto the image's aspect ratio. */
    .kj-mwg-thumb {
        width: var(--kj-mwg-thumbs-size);
        height: var(--kj-mwg-thumbs-size);
    }

    .kj-mwg--mthumbs-vertical-left .kj-mwg-stage,
    .kj-mwg--mthumbs-vertical-right .kj-mwg-stage {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--kj-mwg-thumbs-distance);
    }

    .kj-mwg--mthumbs-vertical-right .kj-mwg-stage {
        flex-direction: row-reverse;
    }

    .kj-mwg--mthumbs-vertical-left .kj-mwg-thumbs,
    .kj-mwg--mthumbs-vertical-right .kj-mwg-thumbs {
        order: -1;
        flex: 0 0 var(--kj-mwg-thumbs-size);
        width: var(--kj-mwg-thumbs-size);
        margin-top: 0;
        flex-direction: column;
        align-self: stretch;
    }

    .kj-mwg--mthumbs-vertical-left .kj-mwg-thumbs-track,
    .kj-mwg--mthumbs-vertical-right .kj-mwg-thumbs-track {
        flex-direction: column;
        scroll-snap-type: y proximity;
        max-height: 100%;
    }

    .kj-mwg--mthumbs-vertical-left .kj-mwg-thumb,
    .kj-mwg--mthumbs-vertical-right .kj-mwg-thumb {
        width: 100%;
        height: var(--kj-mwg-thumbs-size);
    }

    .kj-mwg--mthumbs-horizontal .kj-mwg-thumb {
        width: var(--kj-mwg-thumbs-size);
        height: var(--kj-mwg-thumbs-size);
    }
}

/* ===========================================================================
 * DESKTOP (>= 1025px)
 * ======================================================================== */
@media (min-width: 1025px) {

    /* The desktop layouts are not swipe tracks. */
    .kj-mwg:not(.kj-mwg--slider) .kj-mwg-track {
        overflow: visible;
        scroll-snap-type: none;
    }

    .kj-mwg:not(.kj-mwg--slider) .kj-mwg-arrows {
        display: none;
    }

    /* -------------------------------------------------------------------
     * Grid + Grid (1st large)
     * ------------------------------------------------------------------- */
    .kj-mwg--grid .kj-mwg-track,
    .kj-mwg--cascade-grid .kj-mwg-track {
        display: grid;
        grid-template-columns: repeat(var(--kj-mwg-cols), minmax(0, 1fr));
        gap: var(--kj-mwg-gap);
        align-self: flex-start;
    }

    .kj-mwg--grid .kj-mwg-track > .kj-mwg-item,
    .kj-mwg--cascade-grid .kj-mwg-track > .kj-mwg-item {
        width: auto;
        flex: initial;
        margin-bottom: 0;
        /* min() keeps a colspan from exceeding the column count. */
        grid-column: span min(var(--kj-mwg-cols), var(--kj-mwg-colspan, 1));
    }

    .kj-mwg--grid .kj-mwg-item:only-child {
        --kj-mwg-colspan: var(--kj-mwg-cols);
    }

    /* Cascade-grid: the first image spans the full row. */
    .kj-mwg--cascade-grid .kj-mwg-item[data-main-item] {
        --kj-mwg-colspan: var(--kj-mwg-cols);
    }

    .kj-mwg--stretch-uneven .kj-mwg-item:last-of-type {
        --kj-mwg-colspan: var(--kj-mwg-cols);
    }

    /* -------------------------------------------------------------------
     * Grid Pattern — flex-basis from the per-item --kj-mwg-basis
     * ------------------------------------------------------------------- */
    .kj-mwg--grid-pattern .kj-mwg-track {
        display: flex;
        flex-wrap: wrap;
        gap: var(--kj-mwg-pattern-gap);
        align-self: flex-start;
        overflow: visible;
    }

    .kj-mwg--grid-pattern .kj-mwg-track > .kj-mwg-item {
        flex-grow: var(--kj-mwg-pattern-grow, 0);
        flex-shrink: 0;
        margin-bottom: 0;
        flex-basis: calc(
            100% / var(--kj-mwg-basis, 1)
            - var(--kj-mwg-pattern-gap) * (var(--kj-mwg-basis, 1) - 1) / var(--kj-mwg-basis, 1)
        );
        width: auto;
    }

    /* -------------------------------------------------------------------
     * Vertical — thumbs column beside a snap track
     * ------------------------------------------------------------------- */
    .kj-mwg--vertical .kj-mwg-stage {
        flex-direction: row;
        align-items: stretch;
        gap: var(--kj-mwg-thumbs-distance);
    }

    .kj-mwg--vertical .kj-mwg-main {
        flex: 1 1 auto;
        min-width: 0;
    }

    .kj-mwg--vertical .kj-mwg-thumbs {
        order: -1;
        flex: 0 0 var(--kj-mwg-thumbs-size);
        width: var(--kj-mwg-thumbs-size);
        margin-top: 0;
        flex-direction: column;
        align-items: stretch;
    }

    /* Thumbs on the right: flip the row, not the DOM, so tab order holds. */
    .kj-mwg--thumbs-right .kj-mwg-stage {
        flex-direction: row-reverse;
    }

    .kj-mwg--vertical .kj-mwg-thumbs-track {
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        overscroll-behavior-y: none;
        /* With a max-thumbs cap the track is exactly N thumbs tall, so the
           N+1th peeks and the rail reads as scrollable. */
        max-height: var(--kj-mwg-thumbs-max-height, 100%);
    }

    .kj-mwg--vertical .kj-mwg-thumb {
        width: 100%;
        height: var(--kj-mwg-thumbs-size);
    }

    .kj-mwg--vertical .kj-mwg-thumbs-arr {
        width: 100%;
    }

    .kj-mwg--vertical.kj-mwg--thumbs-arr-edges .kj-mwg-thumbs {
        position: relative;
    }

    .kj-mwg--vertical.kj-mwg--thumbs-arr-edges .kj-mwg-thumbs-arr--prev {
        top: 0;
        inset-inline-start: 0;
        width: 100%;
    }

    .kj-mwg--vertical.kj-mwg--thumbs-arr-edges .kj-mwg-thumbs-arr--next {
        bottom: 0;
        inset-inline-start: 0;
        width: 100%;
    }

    /* -------------------------------------------------------------------
     * Horizontal — thumbs row above/below
     * ------------------------------------------------------------------- */
    .kj-mwg--horizontal .kj-mwg-stage {
        flex-direction: column;
    }

    .kj-mwg--horizontal .kj-mwg-thumbs {
        flex-direction: row;
    }

    .kj-mwg--thumbs-top .kj-mwg-thumbs {
        order: -1;
        margin-top: 0;
        margin-bottom: var(--kj-mwg-thumbs-distance);
    }

    .kj-mwg--horizontal .kj-mwg-thumb {
        width: var(--kj-mwg-thumbs-size);
        height: var(--kj-mwg-thumbs-size);
    }

    /* Max-thumbs cap: centre the rail so the N+1th thumb peeks on both sides. */
    .kj-mwg--horizontal .kj-mwg-thumbs-track {
        max-width: var(--kj-mwg-thumbs-max-width, 100%);
        margin-inline: auto;
    }

    .kj-mwg--horizontal.kj-mwg--thumbs-arr-edges .kj-mwg-thumbs {
        position: relative;
    }

    .kj-mwg--horizontal.kj-mwg--thumbs-arr-edges .kj-mwg-thumbs-arr--prev {
        inset-inline-start: 0;
    }

    .kj-mwg--horizontal.kj-mwg--thumbs-arr-edges .kj-mwg-thumbs-arr--next {
        inset-inline-end: 0;
    }

    /* -------------------------------------------------------------------
     * Slider shared
     * ------------------------------------------------------------------- */
    .kj-mwg--slider .kj-mwg-track > .kj-mwg-item {
        flex: 0 0 100%;
        width: 100%;
        scroll-snap-align: center;
    }

    .kj-mwg--slider .kj-mwg-track {
        /* No smooth scroll while JS drives it, to avoid fighting the sync. */
        scroll-snap-type: x mandatory;
    }

    .kj-mwg--has-arrows .kj-mwg-arrows {
        display: flex;
    }

    /* Fixed main-image height: contain the image inside the box. */
    .kj-mwg--fixed-height .kj-mwg-track > .kj-mwg-item {
        height: var(--kj-mwg-main-height, 540px);
        aspect-ratio: auto;
    }

    .kj-mwg--fixed-height .kj-mwg-link {
        height: 100%;
    }

    .kj-mwg--fixed-height .kj-mwg-img {
        width: auto;
        max-width: 100%;
        height: 100%;
        margin-inline: auto;
        object-fit: contain;
    }

    /* Desktop hover zoom. The transform origin is set from JS on mousemove. */
    .kj-mwg--zoom .kj-mwg-item:not([data-no-zoom]):not([data-small-item]) .kj-mwg-img {
        transition: transform 0.35s ease;
    }

    .kj-mwg--zoom .kj-mwg-item:not([data-no-zoom]):not([data-small-item]):hover .kj-mwg-img {
        transform: scale(var(--kj-mwg-zoom));
    }

    /* Mobile-only affordances stay off on desktop. */
    .kj-mwg .kj-mwg-nav {
        display: none;
    }

    .kj-mwg--slider.kj-mwg--nav-keep .kj-mwg-nav {
        display: flex;
    }
}

/* Motion-sensitive users get no smooth scrolling or zoom animation. */
@media (prefers-reduced-motion: reduce) {
    .kj-mwg-track,
    .kj-mwg-thumbs-track {
        scroll-behavior: auto;
    }

    .kj-mwg-img,
    .kj-mwg-dot,
    .kj-mwg-progress-bar {
        transition: none !important;
    }

    .kj-mwg--zoom .kj-mwg-item:hover .kj-mwg-img {
        transform: none;
    }
}

/* ===========================================================================
 * TABLET (768–1024px)
 *
 * Written as a BAND, not `max-width: 1024px`. Elementor's tablet range
 * (<=1024) contains its mobile range (<=767), so a plain max-width rule here
 * would also apply on phones and outrank the mobile rules that follow it.
 * Everything below is opt-in: with "Same as desktop" no class is emitted and
 * this whole section is inert.
 * ======================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

    .kj-mwg--hide-tablet {
        display: none !important;
    }

    /* --- Tablet layout overrides --- */
    .kj-mwg--tablet-carousel .kj-mwg-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .kj-mwg--tablet-carousel .kj-mwg-track > .kj-mwg-item {
        flex: 0 0 calc(100% - var(--kj-mwg-peek, 0px));
        width: calc(100% - var(--kj-mwg-peek, 0px));
        scroll-snap-align: var(--kj-mwg-snap-align);
        margin-bottom: 0;
    }

    .kj-mwg--tablet-peek {
        --kj-mwg-snap-align: start;
    }

    .kj-mwg--tablet-stacked .kj-mwg-track {
        display: block;
        overflow: visible;
        scroll-snap-type: none;
    }

    .kj-mwg--tablet-stacked .kj-mwg-track > .kj-mwg-item {
        width: 100%;
        margin-bottom: var(--kj-mwg-item-mb);
    }

    .kj-mwg--tablet-grid .kj-mwg-track {
        display: grid;
        grid-template-columns: repeat(var(--kj-mwg-tablet-cols, 2), minmax(0, 1fr));
        gap: var(--kj-mwg-gap);
        overflow: visible;
        scroll-snap-type: none;
    }

    .kj-mwg--tablet-grid .kj-mwg-track > .kj-mwg-item {
        width: auto;
        flex: initial;
        margin-bottom: 0;
    }

    /* --- Tablet thumbs placement --- */
    .kj-mwg--tthumbs-hidden .kj-mwg-thumbs {
        display: none;
    }

    .kj-mwg--tthumbs-left .kj-mwg-thumbs,
    .kj-mwg--tthumbs-right .kj-mwg-thumbs,
    .kj-mwg--tthumbs-top .kj-mwg-thumbs,
    .kj-mwg--tthumbs-bottom .kj-mwg-thumbs {
        display: flex;
    }

    .kj-mwg--tthumbs-left .kj-mwg-stage,
    .kj-mwg--tthumbs-right .kj-mwg-stage {
        flex-direction: row;
        align-items: stretch;
        gap: var(--kj-mwg-thumbs-distance);
    }

    .kj-mwg--tthumbs-right .kj-mwg-stage {
        flex-direction: row-reverse;
    }

    .kj-mwg--tthumbs-left .kj-mwg-thumbs,
    .kj-mwg--tthumbs-right .kj-mwg-thumbs {
        order: -1;
        flex: 0 0 var(--kj-mwg-thumbs-size);
        width: var(--kj-mwg-thumbs-size);
        margin-top: 0;
        flex-direction: column;
    }

    .kj-mwg--tthumbs-left .kj-mwg-thumbs-track,
    .kj-mwg--tthumbs-right .kj-mwg-thumbs-track {
        flex-direction: column;
        scroll-snap-type: y proximity;
    }

    .kj-mwg--tthumbs-left .kj-mwg-thumb,
    .kj-mwg--tthumbs-right .kj-mwg-thumb {
        width: 100%;
        height: var(--kj-mwg-thumbs-size);
    }

    .kj-mwg--tthumbs-top .kj-mwg-stage,
    .kj-mwg--tthumbs-bottom .kj-mwg-stage {
        flex-direction: column;
    }

    .kj-mwg--tthumbs-top .kj-mwg-thumbs {
        order: -1;
        margin-top: 0;
        margin-bottom: var(--kj-mwg-thumbs-distance);
    }

    .kj-mwg--tthumbs-top .kj-mwg-thumbs,
    .kj-mwg--tthumbs-bottom .kj-mwg-thumbs {
        flex-direction: row;
    }

    .kj-mwg--tthumbs-top .kj-mwg-thumb,
    .kj-mwg--tthumbs-bottom .kj-mwg-thumb {
        width: var(--kj-mwg-thumbs-size);
        height: var(--kj-mwg-thumbs-size);
    }

    /* --- Tablet navigation --- */
    .kj-mwg--tnav-none .kj-mwg-nav {
        display: none;
    }

    .kj-mwg--tnav-bars .kj-mwg-nav,
    .kj-mwg--tnav-circle .kj-mwg-nav,
    .kj-mwg--tnav-progress .kj-mwg-nav,
    .kj-mwg--tnav-counter .kj-mwg-nav {
        display: flex;
    }

    /* --- Tablet arrows --- */
    .kj-mwg--tablet-arrows .kj-mwg-arrows {
        display: flex;
    }

    .kj-mwg--tablet-no-arrows .kj-mwg-arrows {
        display: none;
    }
}

/* ===========================================================================
 * Lightbox button options
 * ======================================================================== */

/* "Always" reveal: the button does not wait for hover. */
.kj-mwg--lb-always .kj-mwg-lightbox-btn {
    opacity: 1;
}

/* Centered button. translate is safe here: the reset never touches it. */
.kj-mwg .kj-mwg-lightbox-btn--center {
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
}

[dir="rtl"] .kj-mwg .kj-mwg-lightbox-btn--center {
    transform: translate(50%, -50%);
}

/*
 * Button-only trigger. The anchor is kept so Elementor still groups the
 * slideshow, but pointer events are taken off the image and given back to the
 * button, so only the button opens the lightbox.
 */
.kj-mwg-link--btn-only {
    pointer-events: none;
}

.kj-mwg-item:has(> .kj-mwg-link--btn-only) .kj-mwg-lightbox-btn {
    pointer-events: auto;
    cursor: pointer;
}

/*
 * Hide the lightbox close button. Unlike the counter/zoom/fullscreen toggles —
 * which Elementor exposes in its per-link options blob — there is no option for
 * the close button, so it is hidden with CSS. Esc still closes the lightbox,
 * and overlay-click does too unless that was switched off, so the viewer is
 * never trapped.
 *
 * Unscoped for the same reason as the other lightbox rules: Elementor renders
 * the lightbox outside the widget.
 */
body.kj-mwg-lb-no-close .elementor-lightbox .eicon-close {
    display: none !important;
}

/* The lightbox link when disabled for the current width: it stays in the tab
   order as a plain image link, but nothing about it invites a click. */
.kj-mwg .kj-mwg-link--lb-off {
    cursor: default;
}