/* aieo/product-variations-gallery — companion CSS.
 *
 * The bridge block's job is to swap ONE image src in place when a
 * variation is selected. For that to look right, the gallery must
 * only show ONE slide at a time — otherwise the WC gallery's stacked
 * layout (Botiga theme default for products with many gallery
 * images) shows EVERY slide vertically, hiding our bridge's effect
 * under a wall of color charts.
 *
 * Scope: when our bridge wrapper exists in the same column ancestor
 * as the WC gallery, hide gallery slides 2+. The first slide stays
 * the only visible one — and that's the one our view.js mutates on
 * found_variation.
 *
 * The thumbnail strip (`.flex-control-nav .flex-control-thumbs`) is
 * a different element and is NOT hidden by this rule, so shoppers
 * can still tap individual thumbs to preview alternates.
 *
 * ONLY WHILE THERE IS NO SLIDER. Once FlexSlider has started (it wraps the
 * slides in `.flex-viewport`) it already shows one slide at a time, and every
 * slide must stay rendered for it to move to one. Hiding slides 2+ under a
 * running slider made a thumbnail click slide to an element with no size:
 * the viewport animated to height 0 and the whole gallery vanished
 * (femme-fatale.gr, 2026-10-02, any variable product with gallery images).
 * Before the slider starts, and in themes that never start it, slides 2+
 * are still hidden exactly as before.
 */

:where(.is-vertically-aligned-top, .ff-product-info, main, body):has(.aieo-pdp-vg-bridge) .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image:not(:first-child) {
    display: none !important;
}

/* Belt-and-braces: when the bridge is on the page, also force the
 * gallery wrapper to a fixed first-child layout so the FlexSlider /
 * carousel JS doesn't accidentally re-show siblings on init. */
:where(body):has(.aieo-pdp-vg-bridge) .woocommerce-product-gallery__wrapper {
    display: block;
}

/* The gallery wrapper sometimes paints opacity:0 pre-FlexSlider-init
 * with a transition. If the FlexSlider script never inits (which is
 * common when only one slide is visible — FlexSlider needs ≥2 to
 * activate), the wrapper stays invisible. Force opacity:1 so the
 * single visible slide always shows. */
:where(body):has(.aieo-pdp-vg-bridge) .woocommerce-product-gallery {
    opacity: 1 !important;
}