.infronix-gallery {
    width: 100%;
    max-width: var(--infronix-gallery-max-width, 1200px);
    margin-inline: auto;
    position: relative;
    box-sizing: border-box;
}

.infronix-gallery *,
.infronix-gallery *::before,
.infronix-gallery *::after {
    box-sizing: border-box;
}

.infronix-gallery-track {
    width: 100%;
}

.infronix-gallery-item {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: var(--infronix-gallery-radius, 8px);
    background: #f1f5f9;
}

.infronix-gallery-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.infronix-gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: var(--infronix-gallery-item-fit, var(--infronix-gallery-object-fit, cover));
    object-position: var(--infronix-gallery-item-position, var(--infronix-gallery-object-position, center center));
}

/* Grid-like layouts */
.infronix-gallery-layout-grid .infronix-gallery-track,
.infronix-gallery-layout-square .infronix-gallery-track,
.infronix-gallery-layout-portrait .infronix-gallery-track,
.infronix-gallery-layout-landscape .infronix-gallery-track,
.infronix-gallery-layout-tiles .infronix-gallery-track,
.infronix-gallery-layout-creative .infronix-gallery-track,
.infronix-gallery-layout-album .infronix-gallery-track {
    display: grid;
    grid-template-columns: repeat(var(--infronix-gallery-cols-desktop, 4), minmax(0, 1fr));
    column-gap: var(--infronix-gallery-column-gap, 12px);
    row-gap: var(--infronix-gallery-row-gap, 12px);
}

.infronix-gallery-layout-grid .infronix-gallery-item,
.infronix-gallery-layout-album .infronix-gallery-item {
    aspect-ratio: var(--infronix-gallery-item-ratio, var(--infronix-gallery-ratio, auto));
}

.infronix-gallery-layout-square .infronix-gallery-item {
    aspect-ratio: 1 / 1;
}

.infronix-gallery-layout-portrait .infronix-gallery-item {
    aspect-ratio: 3 / 4;
}

.infronix-gallery-layout-landscape .infronix-gallery-item {
    aspect-ratio: 16 / 9;
}

.infronix-gallery-layout-tiles .infronix-gallery-item,
.infronix-gallery-layout-creative .infronix-gallery-item {
    aspect-ratio: 1 / 1;
}

.infronix-gallery-layout-tiles .infronix-gallery-item:nth-child(7n + 1),
.infronix-gallery-layout-creative .infronix-gallery-item:nth-child(8n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

.infronix-gallery-layout-creative .infronix-gallery-item:nth-child(8n + 4) {
    grid-column: span 2;
}

/* Auto grid */
.infronix-gallery-layout-auto .infronix-gallery-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    column-gap: var(--infronix-gallery-column-gap, 12px);
    row-gap: var(--infronix-gallery-row-gap, 12px);
}

.infronix-gallery-layout-auto .infronix-gallery-item {
    aspect-ratio: var(--infronix-gallery-item-ratio, var(--infronix-gallery-ratio, 1 / 1));
}

/* Masonry */
.infronix-gallery-layout-masonry .infronix-gallery-track {
    columns: var(--infronix-gallery-cols-desktop, 4);
    column-gap: var(--infronix-gallery-column-gap, 12px);
}

.infronix-gallery-layout-masonry .infronix-gallery-item {
    display: inline-block;
    width: 100%;
    margin: 0 0 var(--infronix-gallery-row-gap, 12px);
    break-inside: avoid;
}

.infronix-gallery-layout-masonry .infronix-gallery-image {
    height: auto;
}

/* Justified */
.infronix-gallery-layout-justified .infronix-gallery-track {
    display: flex;
    flex-wrap: wrap;
    gap: var(--infronix-gallery-row-gap, 12px) var(--infronix-gallery-column-gap, 12px);
}

.infronix-gallery-layout-justified .infronix-gallery-item {
    height: var(--infronix-gallery-justified-height, 220px);
    flex: 1 1 260px;
}

/* Slider / slideshow / browser */
.infronix-gallery-layout-slider,
.infronix-gallery-layout-browser,
.infronix-gallery-layout-slideshow {
    overflow: hidden;
}

.infronix-gallery-layout-slider .infronix-gallery-track,
.infronix-gallery-layout-browser .infronix-gallery-track,
.infronix-gallery-layout-slideshow .infronix-gallery-track {
    position: relative;
    height: var(--infronix-gallery-stage-height, 520px);
    overflow: hidden;
}

.infronix-gallery-layout-slider .infronix-gallery-item,
.infronix-gallery-layout-browser .infronix-gallery-item,
.infronix-gallery-layout-slideshow .infronix-gallery-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--infronix-gallery-transition-speed, 450ms) ease, visibility var(--infronix-gallery-transition-speed, 450ms) ease;
}

.infronix-gallery-layout-slider .infronix-gallery-item.is-active,
.infronix-gallery-layout-browser .infronix-gallery-item.is-active,
.infronix-gallery-layout-slideshow .infronix-gallery-item.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Carousel */
.infronix-gallery-layout-carousel {
    overflow: hidden;
}

.infronix-gallery-layout-carousel .infronix-gallery-track {
    display: flex;
    gap: var(--infronix-gallery-column-gap, 12px);
    transition: transform var(--infronix-gallery-transition-speed, 450ms) ease;
    will-change: transform;
}

.infronix-gallery-layout-carousel .infronix-gallery-item {
    flex: 0 0 calc((100% - (var(--infronix-gallery-cols-desktop, 4) - 1) * var(--infronix-gallery-column-gap, 12px)) / var(--infronix-gallery-cols-desktop, 4));
    aspect-ratio: var(--infronix-gallery-item-ratio, var(--infronix-gallery-ratio, 1 / 1));
}

/* Navigation */
.infronix-gallery-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.infronix-gallery-arrow {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--infronix-gallery-arrow-size, 22px) + 20px);
    height: calc(var(--infronix-gallery-arrow-size, 22px) + 20px);
    padding: 0;
    border: 0;
    border-radius: var(--infronix-gallery-arrow-radius, 50%);
    color: var(--infronix-gallery-arrow-color, #fff);
    background: var(--infronix-gallery-arrow-bg, #111827);
    cursor: pointer;
    transition: transform .18s ease, opacity .18s ease;
}

.infronix-gallery-arrow:hover,
.infronix-gallery-arrow:focus-visible {
    transform: translateY(-1px);
    opacity: .9;
}

.infronix-gallery-arrow:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
}

.infronix-gallery-arrow-icon {
    display: block;
    width: var(--infronix-gallery-arrow-size, 22px);
    height: var(--infronix-gallery-arrow-size, 22px);
}

.infronix-gallery-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.infronix-gallery-dot {
    appearance: none;
    width: var(--infronix-gallery-dot-size, 10px);
    height: var(--infronix-gallery-dot-size, 10px);
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--infronix-gallery-dot-color, #cbd5e1);
    cursor: pointer;
    transition: transform .18s ease, background .18s ease;
}

.infronix-gallery-dots-square .infronix-gallery-dot {
    border-radius: 2px;
}

.infronix-gallery-dots-line .infronix-gallery-dot {
    width: calc(var(--infronix-gallery-dot-size, 10px) * 2.4);
    border-radius: 999px;
}

.infronix-gallery-dot.is-active {
    background: var(--infronix-gallery-dot-active, #2563eb);
    transform: scale(1.16);
}

@media (max-width: 1024px) {
    .infronix-gallery-layout-grid .infronix-gallery-track,
    .infronix-gallery-layout-square .infronix-gallery-track,
    .infronix-gallery-layout-portrait .infronix-gallery-track,
    .infronix-gallery-layout-landscape .infronix-gallery-track,
    .infronix-gallery-layout-tiles .infronix-gallery-track,
    .infronix-gallery-layout-creative .infronix-gallery-track,
    .infronix-gallery-layout-album .infronix-gallery-track {
        grid-template-columns: repeat(var(--infronix-gallery-cols-tablet, 3), minmax(0, 1fr));
    }

    .infronix-gallery-layout-masonry .infronix-gallery-track {
        columns: var(--infronix-gallery-cols-tablet, 3);
    }

    .infronix-gallery-layout-carousel .infronix-gallery-item {
        flex-basis: calc((100% - (var(--infronix-gallery-cols-tablet, 3) - 1) * var(--infronix-gallery-column-gap, 12px)) / var(--infronix-gallery-cols-tablet, 3));
    }
}

@media (max-width: 767px) {
    .infronix-gallery-layout-grid .infronix-gallery-track,
    .infronix-gallery-layout-square .infronix-gallery-track,
    .infronix-gallery-layout-portrait .infronix-gallery-track,
    .infronix-gallery-layout-landscape .infronix-gallery-track,
    .infronix-gallery-layout-tiles .infronix-gallery-track,
    .infronix-gallery-layout-creative .infronix-gallery-track,
    .infronix-gallery-layout-album .infronix-gallery-track {
        grid-template-columns: repeat(var(--infronix-gallery-cols-mobile, 2), minmax(0, 1fr));
    }

    .infronix-gallery-layout-masonry .infronix-gallery-track {
        columns: var(--infronix-gallery-cols-mobile, 2);
    }

    .infronix-gallery-layout-carousel .infronix-gallery-item {
        flex-basis: calc((100% - (var(--infronix-gallery-cols-mobile, 2) - 1) * var(--infronix-gallery-column-gap, 12px)) / var(--infronix-gallery-cols-mobile, 2));
    }

    .infronix-gallery-layout-slider .infronix-gallery-track,
    .infronix-gallery-layout-browser .infronix-gallery-track,
    .infronix-gallery-layout-slideshow .infronix-gallery-track {
        height: min(var(--infronix-gallery-stage-height, 520px), 72vh);
    }
}

@media (max-width: 767px) {
    .infronix-gallery-layout-tiles .infronix-gallery-item:nth-child(7n + 1),
    .infronix-gallery-layout-creative .infronix-gallery-item:nth-child(8n + 1),
    .infronix-gallery-layout-creative .infronix-gallery-item:nth-child(8n + 4) {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* Per-image ratios override forced layout ratios when explicitly set. */
.infronix-gallery-item[data-infronix-gallery-explicit-ratio="1"] { aspect-ratio: var(--infronix-gallery-item-ratio, var(--infronix-gallery-ratio, auto)); }
.infronix-gallery-image:focus-visible, .infronix-gallery-link:focus-visible, .infronix-gallery-arrow:focus-visible, .infronix-gallery-dot:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .infronix-gallery *, .infronix-gallery *::before, .infronix-gallery *::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }

/* === v1.5 layout engine parity and advanced controls === */
.infronix-gallery-layout-grid .infronix-gallery-track,
.infronix-gallery-layout-square .infronix-gallery-track,
.infronix-gallery-layout-portrait .infronix-gallery-track,
.infronix-gallery-layout-landscape .infronix-gallery-track,
.infronix-gallery-layout-tiles .infronix-gallery-track,
.infronix-gallery-layout-creative .infronix-gallery-track,
.infronix-gallery-layout-album .infronix-gallery-track,
.infronix-gallery-layout-auto .infronix-gallery-track {
    align-items: var(--infronix-gallery-align-items, stretch);
    justify-items: var(--infronix-gallery-justify-items, stretch);
    align-content: var(--infronix-gallery-align-content, start);
    justify-content: var(--infronix-gallery-justify-content, start);
}

.infronix-gallery-layout-grid .infronix-gallery-item,
.infronix-gallery-layout-square .infronix-gallery-item,
.infronix-gallery-layout-portrait .infronix-gallery-item,
.infronix-gallery-layout-landscape .infronix-gallery-item,
.infronix-gallery-layout-tiles .infronix-gallery-item,
.infronix-gallery-layout-creative .infronix-gallery-item,
.infronix-gallery-layout-album .infronix-gallery-item,
.infronix-gallery-layout-auto .infronix-gallery-item {
    grid-column: span var(--infronix-gallery-item-col-span, 1);
    grid-row: span var(--infronix-gallery-item-row-span, 1);
    align-self: var(--infronix-gallery-item-align-self, auto);
    justify-self: var(--infronix-gallery-item-justify-self, auto);
}

/* Keep Creative Grid identical to the admin preview cadence. */
.infronix-gallery-layout-creative .infronix-gallery-item {
    grid-column: span var(--infronix-gallery-item-col-span, 1);
    grid-row: span var(--infronix-gallery-item-row-span, 1);
}
.infronix-gallery-layout-creative .infronix-gallery-item:nth-child(7n + 1) {
    grid-column: span max(2, var(--infronix-gallery-item-col-span, 1));
    grid-row: span max(2, var(--infronix-gallery-item-row-span, 1));
}
.infronix-gallery-layout-creative .infronix-gallery-item:nth-child(8n + 4) {
    grid-column: span var(--infronix-gallery-item-col-span, 1);
}

/* Match the admin feature cadence exactly; explicit per-image spans always win. */
.infronix-gallery-layout-tiles .infronix-gallery-item:nth-child(7n + 1),
.infronix-gallery-layout-creative .infronix-gallery-item:nth-child(8n + 1),
.infronix-gallery-layout-creative .infronix-gallery-item:nth-child(8n + 4) {
    grid-column: span var(--infronix-gallery-item-col-span, 1);
    grid-row: span var(--infronix-gallery-item-row-span, 1);
}
.infronix-gallery-layout-tiles .infronix-gallery-item:nth-child(6n + 1):not([data-infronix-gallery-custom-span="1"]),
.infronix-gallery-layout-creative .infronix-gallery-item:nth-child(7n + 1):not([data-infronix-gallery-custom-span="1"]) {
    grid-column: span 2;
    grid-row: span 2;
}

/* JavaScript-assisted masonry: always fills the available width. */
.infronix-gallery-layout-masonry .infronix-gallery-track {
    display: grid;
    columns: initial;
    grid-template-columns: repeat(var(--infronix-gallery-cols-desktop, 4), minmax(0, 1fr));
    grid-auto-rows: 8px;
    column-gap: var(--infronix-gallery-column-gap, 12px);
    row-gap: 0;
    width: 100%;
    align-items: start;
}
.infronix-gallery-layout-masonry .infronix-gallery-item {
    display: block;
    width: 100%;
    margin: 0 0 var(--infronix-gallery-row-gap, 12px);
    break-inside: auto;
    align-self: start;
}
.infronix-gallery-layout-masonry .infronix-gallery-item[data-infronix-gallery-explicit-ratio="1"] {
    aspect-ratio: var(--infronix-gallery-item-ratio, var(--infronix-gallery-ratio, 1 / 1));
}
.infronix-gallery-layout-masonry .infronix-gallery-item[data-infronix-gallery-explicit-ratio="1"] .infronix-gallery-image { height: 100%; }
.infronix-gallery-layout-masonry .infronix-gallery-item:not([data-infronix-gallery-explicit-ratio="1"]) .infronix-gallery-image { height: auto; }

/* True justified rows are calculated by frontend.js. */
.infronix-gallery-layout-justified .infronix-gallery-track {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: stretch;
    align-content: flex-start;
    justify-content: flex-start;
    gap: var(--infronix-gallery-row-gap, 12px) var(--infronix-gallery-column-gap, 12px);
}
.infronix-gallery-layout-justified .infronix-gallery-item {
    height: var(--infronix-gallery-justified-height, 220px);
    flex: 0 0 auto;
}

/* Carousel uses dedicated slides-per-view controls rather than grid columns. */
.infronix-gallery-layout-carousel .infronix-gallery-item {
    flex-basis: calc((100% - (var(--infronix-gallery-carousel-desktop, 4) - 1) * var(--infronix-gallery-column-gap, 12px)) / var(--infronix-gallery-carousel-desktop, 4));
}

/* Navigation can be below, overlayed, or outside the gallery. */
.infronix-gallery-controls { position: static; }
.infronix-gallery-arrows-position-overlay-center .infronix-gallery-controls,
.infronix-gallery-arrows-position-overlay-top .infronix-gallery-controls,
.infronix-gallery-arrows-position-overlay-bottom .infronix-gallery-controls,
.infronix-gallery-arrows-position-outside .infronix-gallery-controls,
.infronix-gallery-dots-position-overlay-top .infronix-gallery-controls,
.infronix-gallery-dots-position-overlay-bottom .infronix-gallery-controls { margin-top: 0; }

.infronix-gallery-arrows-position-overlay-center .infronix-gallery-arrow,
.infronix-gallery-arrows-position-overlay-top .infronix-gallery-arrow,
.infronix-gallery-arrows-position-overlay-bottom .infronix-gallery-arrow,
.infronix-gallery-arrows-position-outside .infronix-gallery-arrow {
    position: absolute;
    z-index: 8;
}
.infronix-gallery-arrows-position-overlay-center .infronix-gallery-arrow,
.infronix-gallery-arrows-position-outside .infronix-gallery-arrow {
    top: calc(50% + var(--infronix-gallery-arrow-offset-y, 0px));
    transform: translateY(-50%);
}
.infronix-gallery-arrows-position-overlay-top .infronix-gallery-arrow { top: calc(12px + var(--infronix-gallery-arrow-offset-y, 0px)); }
.infronix-gallery-arrows-position-overlay-bottom .infronix-gallery-arrow { bottom: calc(12px + var(--infronix-gallery-arrow-offset-y, 0px)); }
.infronix-gallery-arrows-position-overlay-center .infronix-gallery-arrow-prev,
.infronix-gallery-arrows-position-overlay-top .infronix-gallery-arrow-prev,
.infronix-gallery-arrows-position-overlay-bottom .infronix-gallery-arrow-prev { left: calc(12px + var(--infronix-gallery-arrow-offset-x, 0px)); }
.infronix-gallery-arrows-position-overlay-center .infronix-gallery-arrow-next,
.infronix-gallery-arrows-position-overlay-top .infronix-gallery-arrow-next,
.infronix-gallery-arrows-position-overlay-bottom .infronix-gallery-arrow-next { right: calc(12px + var(--infronix-gallery-arrow-offset-x, 0px)); }
.infronix-gallery-arrows-position-outside .infronix-gallery-arrow-prev { left: calc(-22px + var(--infronix-gallery-arrow-offset-x, 0px)); }
.infronix-gallery-arrows-position-outside .infronix-gallery-arrow-next { right: calc(-22px + var(--infronix-gallery-arrow-offset-x, 0px)); }

.infronix-gallery-dots-position-overlay-top .infronix-gallery-dots,
.infronix-gallery-dots-position-overlay-bottom .infronix-gallery-dots {
    position: absolute;
    left: 50%;
    z-index: 8;
    transform: translateX(-50%);
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(15,23,42,.18);
    backdrop-filter: blur(6px);
}
.infronix-gallery-dots-position-overlay-top .infronix-gallery-dots { top: calc(12px + var(--infronix-gallery-dots-offset-y, 0px)); }
.infronix-gallery-dots-position-overlay-bottom .infronix-gallery-dots { bottom: calc(12px + var(--infronix-gallery-dots-offset-y, 0px)); }

@media (max-width: 1024px) {
    .infronix-gallery-layout-masonry .infronix-gallery-track { grid-template-columns: repeat(var(--infronix-gallery-cols-tablet, 3), minmax(0, 1fr)); }
    .infronix-gallery-layout-carousel .infronix-gallery-item {
        flex-basis: calc((100% - (var(--infronix-gallery-carousel-tablet, 3) - 1) * var(--infronix-gallery-column-gap, 12px)) / var(--infronix-gallery-carousel-tablet, 3));
    }
}
@media (max-width: 767px) {
    .infronix-gallery-layout-masonry .infronix-gallery-track { grid-template-columns: repeat(var(--infronix-gallery-cols-mobile, 2), minmax(0, 1fr)); }
    .infronix-gallery-layout-carousel .infronix-gallery-item {
        flex-basis: calc((100% - (var(--infronix-gallery-carousel-mobile, 1) - 1) * var(--infronix-gallery-column-gap, 12px)) / var(--infronix-gallery-carousel-mobile, 1));
    }
    .infronix-gallery-arrows-position-outside .infronix-gallery-arrow-prev { left: calc(4px + var(--infronix-gallery-arrow-offset-x, 0px)); }
    .infronix-gallery-arrows-position-outside .infronix-gallery-arrow-next { right: calc(4px + var(--infronix-gallery-arrow-offset-x, 0px)); }
}

/* === v1.6 unified layout engine === */
/* Masonry uses a 1px grid row with the real row gap. JS calculates spans from
 * the same row-gap value, so changing Row Gap is visible and deterministic. */
.infronix-gallery-layout-masonry .infronix-gallery-track {
    display: grid;
    columns: initial;
    grid-template-columns: repeat(var(--infronix-gallery-cols-desktop, 4), minmax(0, 1fr));
    grid-auto-rows: 1px;
    column-gap: var(--infronix-gallery-column-gap, 12px);
    row-gap: var(--infronix-gallery-row-gap, 12px);
    width: 100%;
    align-items: start;
}
.infronix-gallery-layout-masonry .infronix-gallery-item {
    display: block;
    width: 100%;
    margin: 0;
    align-self: start;
}

/* Album always owns a visible frame. Original/Auto falls back to 4:3, while
 * explicit gallery/per-image ratios still win. */
.infronix-gallery-layout-album .infronix-gallery-item {
    aspect-ratio: var(--infronix-gallery-item-ratio, var(--infronix-gallery-album-ratio, 4 / 3));
    min-height: 1px;
}
.infronix-gallery-layout-album .infronix-gallery-image,
.infronix-gallery-layout-album .infronix-gallery-link {
    width: 100%;
    height: 100%;
}

/* Slider is page based. Unlike Carousel it advances by a whole visible page. */
.infronix-gallery-layout-slider {
    overflow: hidden;
}
.infronix-gallery-layout-slider .infronix-gallery-track {
    display: flex;
    position: relative;
    height: auto;
    overflow: visible;
    gap: var(--infronix-gallery-column-gap, 12px);
    transition: transform var(--infronix-gallery-transition-speed, 450ms) ease;
    will-change: transform;
}
.infronix-gallery-layout-slider .infronix-gallery-item {
    position: relative;
    inset: auto;
    flex: 0 0 calc((100% - (var(--infronix-gallery-slider-desktop, 1) - 1) * var(--infronix-gallery-column-gap, 12px)) / var(--infronix-gallery-slider-desktop, 1));
    width: auto;
    height: auto;
    aspect-ratio: var(--infronix-gallery-item-ratio, var(--infronix-gallery-stage-ratio, 16 / 9));
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.infronix-gallery-layout-slider[data-infronix-gallery-stage-sizing="fixed"] .infronix-gallery-track {
    height: var(--infronix-gallery-stage-height, 520px);
}
.infronix-gallery-layout-slider[data-infronix-gallery-stage-sizing="fixed"] .infronix-gallery-item {
    height: 100%;
    aspect-ratio: auto;
}

/* Browser and Slideshow are single-stage layouts. Ratio mode follows the
 * selected gallery ratio; Fixed mode follows Stage Height. */
.infronix-gallery-layout-browser .infronix-gallery-track,
.infronix-gallery-layout-slideshow .infronix-gallery-track {
    position: relative;
    overflow: hidden;
}
.infronix-gallery-layout-browser[data-infronix-gallery-stage-sizing="ratio"] .infronix-gallery-track,
.infronix-gallery-layout-slideshow[data-infronix-gallery-stage-sizing="ratio"] .infronix-gallery-track {
    height: auto;
    aspect-ratio: var(--infronix-gallery-stage-ratio, 16 / 9);
}
.infronix-gallery-layout-browser[data-infronix-gallery-stage-sizing="fixed"] .infronix-gallery-track,
.infronix-gallery-layout-slideshow[data-infronix-gallery-stage-sizing="fixed"] .infronix-gallery-track {
    height: var(--infronix-gallery-stage-height, 520px);
    aspect-ratio: auto;
}
.infronix-gallery-layout-browser .infronix-gallery-item,
.infronix-gallery-layout-slideshow .infronix-gallery-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--infronix-gallery-transition-speed, 450ms) ease, visibility var(--infronix-gallery-transition-speed, 450ms) ease;
}
.infronix-gallery-layout-browser .infronix-gallery-item.is-active,
.infronix-gallery-layout-slideshow .infronix-gallery-item.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Browser = one main stage + a direct-select thumbnail rail. */
.infronix-gallery-browser-thumbs {
    display: flex;
    align-items: center;
    gap: var(--infronix-gallery-browser-thumb-gap, 8px);
    width: 100%;
    overflow-x: auto;
    padding: 8px 2px;
    scrollbar-width: thin;
}
.infronix-gallery-browser-thumb {
    appearance: none;
    flex: 0 0 var(--infronix-gallery-browser-thumb-size, 72px);
    width: var(--infronix-gallery-browser-thumb-size, 72px);
    height: var(--infronix-gallery-browser-thumb-size, 72px);
    padding: 0;
    border: 2px solid transparent;
    border-radius: min(var(--infronix-gallery-radius, 8px), 12px);
    overflow: hidden;
    background: #e2e8f0;
    cursor: pointer;
    opacity: .72;
}
.infronix-gallery-browser-thumb.is-active { border-color: var(--infronix-gallery-dot-active, #2563eb); opacity: 1; }
.infronix-gallery-browser-thumb-image { display:block; width:100%; height:100%; object-fit:cover; }

/* Independent navigation positioning. Shared offsets are preserved for
 * backward compatibility; Prev/Next offsets add fine control. */
.infronix-gallery-arrow-prev {
    --infronix-gallery-arrow-own-x: var(--infronix-gallery-prev-offset-x, 0px);
    --infronix-gallery-arrow-own-y: var(--infronix-gallery-prev-offset-y, 0px);
}
.infronix-gallery-arrow-next {
    --infronix-gallery-arrow-own-x: var(--infronix-gallery-next-offset-x, 0px);
    --infronix-gallery-arrow-own-y: var(--infronix-gallery-next-offset-y, 0px);
}
.infronix-gallery-arrows-position-below .infronix-gallery-arrow {
    transform: translate(calc(var(--infronix-gallery-arrow-offset-x, 0px) + var(--infronix-gallery-arrow-own-x)), calc(var(--infronix-gallery-arrow-offset-y, 0px) + var(--infronix-gallery-arrow-own-y)));
}
.infronix-gallery-arrows-position-overlay-center .infronix-gallery-arrow,
.infronix-gallery-arrows-position-outside .infronix-gallery-arrow {
    top: calc(50% + var(--infronix-gallery-arrow-offset-y, 0px) + var(--infronix-gallery-arrow-own-y));
}
.infronix-gallery-arrows-position-overlay-top .infronix-gallery-arrow {
    top: calc(12px + var(--infronix-gallery-arrow-offset-y, 0px) + var(--infronix-gallery-arrow-own-y));
}
.infronix-gallery-arrows-position-overlay-bottom .infronix-gallery-arrow {
    bottom: calc(12px - var(--infronix-gallery-arrow-offset-y, 0px) - var(--infronix-gallery-arrow-own-y));
}
.infronix-gallery-arrows-position-overlay-center .infronix-gallery-arrow-prev,
.infronix-gallery-arrows-position-overlay-top .infronix-gallery-arrow-prev,
.infronix-gallery-arrows-position-overlay-bottom .infronix-gallery-arrow-prev {
    left: calc(12px + var(--infronix-gallery-arrow-offset-x, 0px) + var(--infronix-gallery-prev-offset-x, 0px));
}
.infronix-gallery-arrows-position-overlay-center .infronix-gallery-arrow-next,
.infronix-gallery-arrows-position-overlay-top .infronix-gallery-arrow-next,
.infronix-gallery-arrows-position-overlay-bottom .infronix-gallery-arrow-next {
    right: calc(12px - var(--infronix-gallery-arrow-offset-x, 0px) - var(--infronix-gallery-next-offset-x, 0px));
}
.infronix-gallery-arrows-position-outside .infronix-gallery-arrow-prev {
    left: calc(-22px + var(--infronix-gallery-arrow-offset-x, 0px) + var(--infronix-gallery-prev-offset-x, 0px));
}
.infronix-gallery-arrows-position-outside .infronix-gallery-arrow-next {
    right: calc(-22px - var(--infronix-gallery-arrow-offset-x, 0px) - var(--infronix-gallery-next-offset-x, 0px));
}

.infronix-gallery-dots-position-below .infronix-gallery-dots {
    transform: translate(var(--infronix-gallery-dots-offset-x, 0px), var(--infronix-gallery-dots-offset-y, 0px));
}
.infronix-gallery-dots-align-left .infronix-gallery-controls { justify-content: flex-start; }
.infronix-gallery-dots-align-center .infronix-gallery-controls { justify-content: center; }
.infronix-gallery-dots-align-right .infronix-gallery-controls { justify-content: flex-end; }
.infronix-gallery-dots-position-overlay-top .infronix-gallery-dots,
.infronix-gallery-dots-position-overlay-center .infronix-gallery-dots,
.infronix-gallery-dots-position-overlay-bottom .infronix-gallery-dots {
    position: absolute;
    z-index: 8;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(15,23,42,.18);
    backdrop-filter: blur(6px);
}
.infronix-gallery-dots-align-left.infronix-gallery-dots-position-overlay-top .infronix-gallery-dots,
.infronix-gallery-dots-align-left.infronix-gallery-dots-position-overlay-center .infronix-gallery-dots,
.infronix-gallery-dots-align-left.infronix-gallery-dots-position-overlay-bottom .infronix-gallery-dots {
    left: calc(12px + var(--infronix-gallery-dots-offset-x, 0px)); right:auto; transform:none;
}
.infronix-gallery-dots-align-center.infronix-gallery-dots-position-overlay-top .infronix-gallery-dots,
.infronix-gallery-dots-align-center.infronix-gallery-dots-position-overlay-center .infronix-gallery-dots,
.infronix-gallery-dots-align-center.infronix-gallery-dots-position-overlay-bottom .infronix-gallery-dots {
    left: calc(50% + var(--infronix-gallery-dots-offset-x, 0px)); right:auto; transform:translateX(-50%);
}
.infronix-gallery-dots-align-right.infronix-gallery-dots-position-overlay-top .infronix-gallery-dots,
.infronix-gallery-dots-align-right.infronix-gallery-dots-position-overlay-center .infronix-gallery-dots,
.infronix-gallery-dots-align-right.infronix-gallery-dots-position-overlay-bottom .infronix-gallery-dots {
    right: calc(12px - var(--infronix-gallery-dots-offset-x, 0px)); left:auto; transform:none;
}
.infronix-gallery-dots-position-overlay-top .infronix-gallery-dots { top: calc(12px + var(--infronix-gallery-dots-offset-y, 0px)); bottom:auto; }
.infronix-gallery-dots-position-overlay-center .infronix-gallery-dots { top: calc(50% + var(--infronix-gallery-dots-offset-y, 0px)); bottom:auto; transform:translate(-50%,-50%); }
.infronix-gallery-dots-align-left.infronix-gallery-dots-position-overlay-center .infronix-gallery-dots,
.infronix-gallery-dots-align-right.infronix-gallery-dots-position-overlay-center .infronix-gallery-dots { transform:translateY(-50%); }
.infronix-gallery-dots-position-overlay-bottom .infronix-gallery-dots { bottom: calc(12px - var(--infronix-gallery-dots-offset-y, 0px)); top:auto; }

@media (max-width: 1024px) {
    .infronix-gallery-layout-slider .infronix-gallery-item {
        flex-basis: calc((100% - (var(--infronix-gallery-slider-tablet, 1) - 1) * var(--infronix-gallery-column-gap, 12px)) / var(--infronix-gallery-slider-tablet, 1));
    }
}
@media (max-width: 767px) {
    .infronix-gallery-layout-slider .infronix-gallery-item {
        flex-basis: calc((100% - (var(--infronix-gallery-slider-mobile, 1) - 1) * var(--infronix-gallery-column-gap, 12px)) / var(--infronix-gallery-slider-mobile, 1));
    }
}


/* === v1.7 slider navigation controls === */
.infronix-gallery-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.infronix-gallery-arrows-position-outside { overflow: visible !important; }
.infronix-gallery-arrows-position-outside .infronix-gallery-viewport { overflow: hidden; }
.infronix-gallery-arrow-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1em;
    font-size: var(--infronix-gallery-arrow-size, 22px);
    line-height: 1;
    font-weight: 700;
}
/* A true outside position must not be pulled back inside on mobile. */
@media (max-width: 767px) {
    .infronix-gallery-arrows-position-outside .infronix-gallery-arrow-prev { left: calc(-22px + var(--infronix-gallery-arrow-offset-x, 0px) + var(--infronix-gallery-prev-offset-x, 0px)); }
    .infronix-gallery-arrows-position-outside .infronix-gallery-arrow-next { right: calc(-22px - var(--infronix-gallery-arrow-offset-x, 0px) - var(--infronix-gallery-next-offset-x, 0px)); }
}

/* Accessible text that remains available to screen readers. */
.infronix-gallery-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* === v1.12.2 Elementor image sizing compatibility ===
 * Elementor/theme image rules commonly set `img { height:auto; max-width:100%; }`
 * with higher specificity than the base Infronix Gallery image rule. Framed gallery
 * layouts must own the image box so object-fit/object-position can work reliably.
 */
.infronix-gallery.infronix-gallery-layout-square .infronix-gallery-item > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-square .infronix-gallery-link > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-portrait .infronix-gallery-item > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-portrait .infronix-gallery-link > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-landscape .infronix-gallery-item > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-landscape .infronix-gallery-link > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-tiles .infronix-gallery-item > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-tiles .infronix-gallery-link > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-creative .infronix-gallery-item > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-creative .infronix-gallery-link > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-auto .infronix-gallery-item > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-auto .infronix-gallery-link > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-justified .infronix-gallery-item > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-justified .infronix-gallery-link > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-album .infronix-gallery-item > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-album .infronix-gallery-link > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-carousel .infronix-gallery-item > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-carousel .infronix-gallery-link > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-slider .infronix-gallery-item > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-slider .infronix-gallery-link > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-browser .infronix-gallery-item > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-browser .infronix-gallery-link > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-slideshow .infronix-gallery-item > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-slideshow .infronix-gallery-link > .infronix-gallery-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: var(--infronix-gallery-item-fit, var(--infronix-gallery-object-fit, cover)) !important;
    object-position: var(--infronix-gallery-item-position, var(--infronix-gallery-object-position, center center)) !important;
}

/* Keep Masonry's natural-height behavior unless an image explicitly opts into
 * a framed ratio. */
.infronix-gallery.infronix-gallery-layout-masonry .infronix-gallery-item:not([data-infronix-gallery-explicit-ratio="1"]) > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-masonry .infronix-gallery-item:not([data-infronix-gallery-explicit-ratio="1"]) .infronix-gallery-link > .infronix-gallery-image {
    height: auto !important;
    max-width: 100% !important;
}


/* === v1.14 rendering consistency fixes === */
/* A gallery-level ratio is a real masonry frame too; cover/contain therefore
 * have a height box to work against instead of falling back to natural height. */
.infronix-gallery-layout-masonry .infronix-gallery-item[data-infronix-gallery-explicit-ratio="1"] {
    aspect-ratio: var(--infronix-gallery-item-ratio, var(--infronix-gallery-ratio, 1 / 1));
    overflow: hidden;
}
.infronix-gallery-layout-masonry .infronix-gallery-item[data-infronix-gallery-explicit-ratio="1"] > .infronix-gallery-link {
    display:block; width:100%; height:100%;
}
.infronix-gallery.infronix-gallery-layout-masonry .infronix-gallery-item[data-infronix-gallery-explicit-ratio="1"] > .infronix-gallery-image,
.infronix-gallery.infronix-gallery-layout-masonry .infronix-gallery-item[data-infronix-gallery-explicit-ratio="1"] .infronix-gallery-link > .infronix-gallery-image {
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:var(--infronix-gallery-item-fit,var(--infronix-gallery-object-fit,cover)) !important;
    object-position:var(--infronix-gallery-item-position,var(--infronix-gallery-object-position,center center)) !important;
}
.infronix-gallery-lightbox-download svg{width:.95em;height:.95em;display:block;fill:currentColor}