/* P05 desktop product gallery. Scope: only the native gallery row directly
 * after the server-rendered marker, which exists only for eligible PDPs.
 *
 * First paint (before JS): from lg the native is-loading row is laid out as
 * the final grid, so enhancement causes no layout shift. The rules stop as
 * soon as native GallerySlider marks the row initialized (tiny-slider
 * fallback measures a native layout). scripting:enabled keeps the native
 * single-image loading state when JavaScript is off. */
@media (min-width: 992px) and (scripting: enabled) {
    template[data-hookain-desktop-product-gallery] + .gallery-slider-row.is-loading:not(.js-slider-initialized) .gallery-slider-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    template[data-hookain-desktop-product-gallery] + .gallery-slider-row.is-loading:not(.js-slider-initialized) .gallery-slider-container > .gallery-slider-item-container {
        display: block;
        width: auto;
    }

    template[data-hookain-desktop-product-gallery] + .gallery-slider-row.is-loading:not(.js-slider-initialized) .gallery-slider-controls,
    template[data-hookain-desktop-product-gallery] + .gallery-slider-row.is-loading:not(.js-slider-initialized) .gallery-slider-thumbnails-col,
    template[data-hookain-desktop-product-gallery] + .gallery-slider-row.is-loading:not(.js-slider-initialized) .base-slider-dots {
        display: none;
    }
}

/* Enhanced state, set by the JS only on lg/xl/xxl. Not media-scoped, so the
 * grid stays stable until the debounced Viewport/hasChanged rebuild. */
template[data-hookain-desktop-product-gallery] + .gallery-slider-row.hk-desktop-product-gallery--active .gallery-slider-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

template[data-hookain-desktop-product-gallery] + .gallery-slider-row.hk-desktop-product-gallery--active .gallery-slider-container > .gallery-slider-item-container {
    width: auto;
}

template[data-hookain-desktop-product-gallery] + .gallery-slider-row.hk-desktop-product-gallery--active .gallery-slider-controls,
template[data-hookain-desktop-product-gallery] + .gallery-slider-row.hk-desktop-product-gallery--active .gallery-slider-thumbnails-col,
template[data-hookain-desktop-product-gallery] + .gallery-slider-row.hk-desktop-product-gallery--active .base-slider-dots {
    display: none;
}