/* 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.
 */

:where(.is-vertically-aligned-top, .ff-product-info, main, body):has(.aieo-pdp-vg-bridge) .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;
}