.aclg-gallery {
    --aclg-gap: 12px;
    --aclg-zoom-scale: 1.6;
    --aclg-thumb-width: 84px;
    --aclg-thumb-ratio: 1 / 1;
    position: relative;
    display: flex;
    gap: var(--aclg-gap);
    width: 100%;
    min-width: 0;
    outline: none;
}

.aclg-gallery--bottom { flex-direction: column; }
.aclg-gallery--left { flex-direction: row; }
.aclg-gallery--right { flex-direction: row-reverse; }

.aclg-stage-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.aclg-stage {
    position: relative;
    width: 100%;
    min-height: 220px;
    overflow: hidden;
    isolation: isolate;
}

.aclg-gallery.has-stage-ratio .aclg-stage {
    height: auto !important;
    min-height: 0;
    aspect-ratio: var(--aclg-stage-ratio);
}

.aclg-slide {
    position: absolute;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
}

.aclg-slide.is-active { display: block; }

.aclg-image-wrap,
.aclg-video-player,
.aclg-video,
.aclg-media-visual {
    width: 100%;
    height: 100%;
}

.aclg-image-wrap {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}

.aclg-media-visual,
.aclg-video {
    display: block;
    object-fit: contain;
}

.aclg-media-visual {
    transition: transform .28s ease;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

@media (hover: hover) and (pointer: fine) {
    .aclg-gallery.has-hover-zoom .aclg-image-wrap:hover .aclg-media-visual {
        transform: scale(var(--aclg-zoom-scale));
    }
}

.aclg-caption {
    position: absolute;
    z-index: 4;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: fit-content;
    max-width: calc(100% - 24px);
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(0,0,0,.62);
    color: #fff;
    font-size: 13px;
    pointer-events: none;
}

.aclg-video-player {
    position: relative;
    background: #000;
    overflow: hidden;
}

.aclg-video { cursor: pointer; }

.aclg-big-play {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(0,0,0,.64);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.aclg-big-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.aclg-big-play.is-playing { opacity: 0; pointer-events: none; }

.aclg-video-controls {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    min-height: 52px;
    padding: 8px 12px;
    background: rgba(0,0,0,.72);
    color: #fff;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease;
}

.aclg-video-controls--bottom { bottom: 0; }
.aclg-video-controls--top { top: 0; }

.aclg-video-player.controls-hidden .aclg-video-controls--bottom {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
}

.aclg-video-player.controls-hidden .aclg-video-controls--top {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
}

.aclg-control-group {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.aclg-progress-group { flex: 1 1 140px; }
.aclg-volume-group { gap: 4px; }

.aclg-control-btn,
.aclg-zoom-btn,
.aclg-nav,
.aclg-lightbox-btn {
    display: inline-grid;
    place-items: center;
}

.aclg-control-btn {
    appearance: none;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
    font-size: 18px;
    cursor: pointer;
    padding: 7px;
}

.aclg-control-btn svg,
.aclg-big-play svg,
.aclg-nav svg,
.aclg-zoom-btn svg,
.aclg-lightbox-btn svg,
.aclg-video-badge svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.is-hidden { display: none !important; }

.aclg-time {
    white-space: nowrap;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.aclg-range {
    --aclg-accent: #fff;
    --aclg-track-bg: rgba(255,255,255,.32);
    --aclg-track-height: 5px;
    --aclg-thumb-size: 14px;
    --aclg-fill: 0%;
    appearance: none;
    width: 100%;
    height: var(--aclg-track-height);
    border: 0;
    border-radius: 999px;
    background: linear-gradient(to right, var(--aclg-accent) 0 var(--aclg-fill), var(--aclg-track-bg) var(--aclg-fill) 100%);
    cursor: pointer;
}

.aclg-range::-webkit-slider-runnable-track {
    height: var(--aclg-track-height);
    border-radius: 999px;
    background: transparent;
}

.aclg-range::-webkit-slider-thumb {
    appearance: none;
    width: var(--aclg-thumb-size);
    height: var(--aclg-thumb-size);
    margin-top: calc((var(--aclg-track-height) - var(--aclg-thumb-size)) / 2);
    border: 0;
    border-radius: 50%;
    background: var(--aclg-accent);
    box-shadow: 0 0 0 2px rgba(0,0,0,.08);
}

.aclg-range::-moz-range-track {
    height: var(--aclg-track-height);
    border-radius: 999px;
    background: transparent;
}

.aclg-range::-moz-range-progress {
    height: var(--aclg-track-height);
    border-radius: 999px;
    background: var(--aclg-accent);
}

.aclg-range::-moz-range-thumb {
    width: var(--aclg-thumb-size);
    height: var(--aclg-thumb-size);
    border: 0;
    border-radius: 50%;
    background: var(--aclg-accent);
}

.aclg-progress { min-width: 60px; }
.aclg-volume { width: 90px; }

.aclg-speed {
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 6px;
    background: rgba(0,0,0,.24);
    color: inherit;
    font: inherit;
    padding: 4px 6px;
}

.aclg-nav {
    position: absolute;
    z-index: 6;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
    color: #111;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: transform .18s ease, opacity .18s ease;
}

.aclg-nav:hover { transform: translateY(-50%) scale(1.05); }
.aclg-prev { left: 12px; }
.aclg-next { right: 12px; }

.aclg-counter {
    position: absolute;
    z-index: 6;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(0,0,0,.58);
    color: #fff;
    font: 600 12px/1 sans-serif;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.aclg-zoom-btn {
    position: absolute;
    z-index: 5;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #111;
    font-size: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.16);
    cursor: pointer;
}

.aclg-thumbs {
    display: flex;
    gap: var(--aclg-gap);
    overflow: auto;
    scrollbar-width: thin;
    flex: 0 0 auto;
    scroll-behavior: smooth;
}

.aclg-gallery--bottom .aclg-thumbs { flex-direction: row; }
.aclg-gallery--left .aclg-thumbs,
.aclg-gallery--right .aclg-thumbs { flex-direction: column; max-height: 100%; }

.aclg-thumb {
    position: relative;
    flex: 0 0 auto;
    width: var(--aclg-thumb-width, 84px);
    height: auto;
    aspect-ratio: var(--aclg-thumb-ratio, 1 / 1);
    padding: 0;
    overflow: hidden;
    border: 2px solid #d9d9d9;
    background: #f4f4f4;
    cursor: pointer;
    opacity: .74;
    transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}

.aclg-thumb:hover { opacity: 1; transform: translateY(-1px); }
.aclg-thumb.is-active { opacity: 1; border-color: #111; }

.aclg-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.aclg-video-badge {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    background: rgba(0,0,0,.66);
    font-size: 12px;
}

.aclg-video-thumb-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: #181818;
    color: #aaa;
    font: 700 10px/1 sans-serif;
    letter-spacing: .08em;
}

.aclg-empty {
    padding: 18px;
    border: 1px dashed #bbb;
    background: #fafafa;
    color: #666;
    text-align: center;
}

/* Lightbox */
html.aclg-lightbox-open { overflow: hidden; }

.aclg-lightbox {
    position: fixed;
    z-index: 999999;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.94);
    color: #fff;
}

.aclg-lightbox.is-open { display: flex; }

.aclg-lightbox-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    overflow: hidden;
    cursor: zoom-out;
}

.aclg-lightbox-image {
    display: block;
    max-width: 92%;
    max-height: 92%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform .22s ease;
    transform-origin: center;
}

.aclg-lightbox-image.is-zoomed {
    transform: scale(1.8);
    cursor: zoom-out;
}

.aclg-lightbox-btn {
    position: absolute;
    z-index: 3;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(0,0,0,.38);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

.aclg-lightbox-close { top: 18px; right: 18px; }
.aclg-lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.aclg-lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }

.aclg-lightbox-caption {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    max-width: min(760px, calc(100% - 120px));
    padding: 7px 12px;
    border-radius: 7px;
    background: rgba(0,0,0,.58);
    color: #fff;
    text-align: center;
    font-size: 13px;
}

.aclg-lightbox-caption.is-empty { display: none; }

@media (max-width: 767px) {
    .aclg-gallery--left,
    .aclg-gallery--right {
        flex-direction: column;
    }

    .aclg-gallery--left .aclg-thumbs,
    .aclg-gallery--right .aclg-thumbs {
        width: 100% !important;
        max-height: none;
        flex-direction: row;
    }

    .aclg-video-controls {
        gap: 4px;
        padding-inline: 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .aclg-video-controls::-webkit-scrollbar { display: none; }
    .aclg-time-sep,
    .aclg-duration { display: none; }
    .aclg-volume { width: 58px; }
    .aclg-speed { padding-inline: 3px; }

    .aclg-lightbox-stage { padding: 36px 10px; }
    .aclg-lightbox-prev { left: 8px; }
    .aclg-lightbox-next { right: 8px; }
    .aclg-lightbox-close { top: 8px; right: 8px; }
    .aclg-lightbox-caption { max-width: calc(100% - 80px); bottom: 8px; }
}