/* H3X Product Image Gallery — frontend styles. */

.h3x-pg {
    --h3x-pg-thumb-size: 72px;
    max-width: 100%;
}

.h3x-pg__variations {
    display: none;
}

/* Stage — all images stacked; only the active one occupies layout.
   Shrink-wraps to the (size-capped) image so the chevrons sit inside the
   image edges, not in the whitespace beside it. */
.h3x-pg__stage {
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    touch-action: pan-y;
}

.h3x-pg__slide {
    margin: 0;
    display: none;
}

.h3x-pg__slide.is-active {
    display: block;
    animation: h3x-pg-fade 0.25s ease;
}

@keyframes h3x-pg-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Sizing is driven by the inline style the block outputs per image (so each
   image is capped at its own natural size and never upscales). These are only
   safe fallbacks if the inline style is missing. */
.h3x-pg__img {
    display: block;
    height: auto;
    max-width: 100%;
}

/* Prev / next chevrons over the displayed image. */
.h3x-pg__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}

.h3x-pg__nav:hover,
.h3x-pg__nav:focus-visible {
    background: rgba(0, 0, 0, 0.7);
    outline: none;
}

.h3x-pg__nav--prev { left: 12px; }
.h3x-pg__nav--next { right: 12px; }

.h3x-pg__nav svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* Thumbnail strip — scrollable but with the scrollbar hidden. */
.h3x-pg__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* legacy Edge/IE */
}

.h3x-pg__thumbs::-webkit-scrollbar {
    display: none;                /* Chrome / Safari */
}

.h3x-pg__thumb {
    flex: 0 0 auto;
    width: var(--h3x-pg-thumb-size);
    height: var(--h3x-pg-thumb-size);
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, opacity 0.15s ease;
    opacity: 0.65;
}

.h3x-pg__thumb:hover,
.h3x-pg__thumb:focus-visible {
    opacity: 1;
    outline: none;
}

.h3x-pg__thumb.is-active {
    opacity: 1;
    border-color: currentColor;
}

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

/* Thumbnails to the left of the image (large screens). */
@media ( min-width: 783px ) {
    .h3x-pg--thumbs-left {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .h3x-pg--thumbs-left .h3x-pg__stage {
        order: 2;
        flex: 0 1 auto;
        min-width: 0;
    }

    .h3x-pg--thumbs-left .h3x-pg__thumbs {
        order: 1;
        flex: 0 0 auto;
        flex-direction: column;
        margin-top: 0;
        max-height: 70vh;
    }
}

/* Mobile: keep the strip a single swipeable row under the image. */
@media ( max-width: 782px ) {
    .h3x-pg {
        --h3x-pg-thumb-size: 60px;
    }

    .h3x-pg__thumbs {
        scroll-snap-type: x proximity;
    }

    .h3x-pg__thumb {
        scroll-snap-align: start;
    }
}

/* Editor placeholder. */
.h3x-pg-editor__note {
    margin: 0;
    padding: 24px;
    font-size: 13px;
    font-style: italic;
    text-align: center;
    opacity: 0.7;
    border: 1px dashed currentColor;
    border-radius: 4px;
}