/* DL Product Gallery styles */

.dl-product-gallery {
    display: flex;
    gap: var(--dl-gallery-gap, 16px);
    position: relative;
}

.dl-gallery-main {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    overflow: hidden;
}

.dl-gallery-main-link {
    display: block;
    position: relative;
}

.dl-gallery-main-image {
    display: block;
    width: 100%;
    height: auto;
}

.dl-gallery-main[data-fit]:not([data-fit=""]) .dl-gallery-main-link,
.dl-gallery-main[data-fit]:not([data-fit=""]) .dl-gallery-main-image {
    height: 100%;
}

.dl-gallery-main[data-fit]:not([data-fit=""]) .dl-gallery-main-image {
    object-fit: var(--dl-main-image-fit, cover);
    object-position: var(--dl-main-image-position, center center);
}

/* Thumbnails - shared */
.dl-gallery-thumbs {
    display: flex;
    gap: var(--dl-thumb-gap, 10px);
}

.dl-gallery-thumb {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 0;
    overflow: hidden;
}

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

/* Layout: vertical */
.dl-product-gallery[data-layout="vertical"] {
    flex-direction: row-reverse;
}

.dl-product-gallery[data-layout="vertical"] .dl-gallery-thumbs {
    flex-direction: column;
    flex: 0 1 30%;
    max-height: 100%;
    overflow-y: auto;
}

.dl-product-gallery[data-layout="vertical"] .dl-gallery-thumbs .dl-gallery-thumb {
    width: 100%;
}

.dl-product-gallery[data-layout="vertical"][data-thumb-position="right"] {
    flex-direction: row;
}

/* Layout: horizontal */
.dl-product-gallery[data-layout="horizontal"] {
    flex-direction: column;
}

.dl-product-gallery[data-layout="horizontal"] .dl-gallery-thumbs {
    flex-direction: row;
    overflow-x: auto;
}

.dl-product-gallery[data-layout="horizontal"] .dl-gallery-thumb {
    width: var(--dl-thumb-size, 80px);
}

/* Layout: grid */
.dl-product-gallery[data-layout="grid"] {
    flex-direction: column;
}

.dl-product-gallery[data-layout="grid"] .dl-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}

/* Nav arrows */
.dl-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    z-index: 5;
}

.dl-gallery-nav-prev {
    left: 10px;
}

.dl-gallery-nav-next {
    right: 10px;
}

/* Badge */
.dl-gallery-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
}

/* Hover zoom */
.dl-gallery-zoom-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: calc(100% * var(--dl-zoom-level, 2));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.dl-gallery-main.is-zooming .dl-gallery-zoom-pane {
    opacity: 1;
}

/* Compact mobile view ("Compact Mobile View" control): hide thumbnails, force a 1:1 main image with nav arrows. */
@media (max-width: 767px) {
    .dl-product-gallery.dl-mobile-compact .dl-gallery-thumbs {
        display: none !important;
    }

    .dl-product-gallery.dl-mobile-compact .dl-gallery-main {
        width: 100% !important;
        flex: 1 1 100% !important;
        aspect-ratio: 1 / 1 !important;
    }

    .dl-product-gallery.dl-mobile-compact .dl-gallery-main-link,
    .dl-product-gallery.dl-mobile-compact .dl-gallery-main-image {
        height: 100% !important;
    }

    .dl-product-gallery.dl-mobile-compact .dl-gallery-main-image {
        object-fit: cover !important;
        object-position: center center !important;
    }

    .dl-product-gallery.dl-mobile-compact .dl-gallery-nav {
        display: flex !important;
    }
}