/**
 * Product gallery: thumbnails in a rail to the left of the main image.
 *
 * WooCommerce lays the thumbnail strip out below the image as floated <li>s at
 * a hardcoded `width: 25%`, which is why only four ever fit per row. A coat can
 * have more looks than that, plus the video slide, so the strip is turned into
 * a vertical rail instead — it takes any number of items without wrapping.
 *
 * THE RAIL IS NOT A FLEX SIBLING, and that is the whole design of this file.
 * FlexSlider builds the thumbnail <ol> itself, and only AFTER it has measured
 * the gallery and sized every slide to that width. Put the rail in a flex row
 * and it appears a moment later and steals ~96px from the viewport: the slides
 * keep their original width while the track scrolls by the new one, so each
 * slide sits progressively further off. Slide 0 looks right and slide 3 is
 * half off-screen — which is what a `?package=` deep link lands on.
 *
 * So the gutter is reserved with padding on the gallery and the rail is
 * absolutely positioned into it. jQuery's .width() reports the content box, so
 * FlexSlider's very first measurement already excludes the gutter and nothing
 * depends on when the <ol> shows up.
 *
 * Beyond that, nothing here knows about FlexSlider except the class names it
 * generates: `.flex-viewport` (its clipping box) and `ol.flex-control-thumbs`.
 * Before it initialises — or on a site with gallery JS off — there is no <ol>
 * at all and the figure is a direct child, so the rules degrade to a plain
 * single-column gallery with an unused gutter.
 *
 * Everything hangs off `.woocommerce-product-gallery`, the one class the
 * gallery template always emits. The sibling `images` class is deliberately
 * not used, and neither is the `.woocommerce div.product` ancestor
 * WooCommerce's own rules are written against: Elementor's Product Images
 * widget renders the gallery template on its own, so that ancestor may not be
 * there. The cost is that WooCommerce's four-class selectors outrank these,
 * which is why the handful of properties it actually sets on these elements —
 * and only those — carry !important.
 */

.woocommerce-product-gallery {
    /* The two numbers worth changing here. */
    --sarno-thumb-rail: 84px;
    --sarno-thumb-gap: 12px;

    /* The rail's gutter, reserved before any script measures the gallery.
       !important because a single class loses to WooCommerce's four-deep
       selectors and to Elementor's widget resets, either of which may zero the
       padding — and this one silently takes the whole layout with it. The rail
       is absolutely positioned against the PADDING box, so with no padding
       `left: 0` puts it on top of the image rather than beside it. */
    padding-left: calc(var(--sarno-thumb-rail) + var(--sarno-thumb-gap)) !important;
    /* Keeps the gutter inside the gallery's existing width instead of adding to
       it, whatever box model the theme sets. */
    box-sizing: border-box;
    /* WooCommerce already relies on this for the zoom trigger; stated anyway,
       because the rail below is positioned against it — and if something else
       forces `static`, the rail escapes to a random ancestor. */
    position: relative !important;
}

.woocommerce-product-gallery .flex-control-thumbs {
    position: absolute;
    left: 0;
    top: 0;
    /* Bounded by the image beside it rather than by a guess: past the bottom
       the rail scrolls instead of stretching the gallery. */
    bottom: 0;
    width: var(--sarno-thumb-rail);

    display: grid;
    grid-template-columns: 1fr;
    /* Thumbnails keep their own height instead of stretching to share the
       column between them. */
    grid-auto-rows: max-content;
    gap: var(--sarno-thumb-gap);

    margin: 0;
    padding: 0;
    /* !important because WooCommerce sets the `overflow` shorthand to hidden
       here, which would win and clip the scroll away silently. */
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

.woocommerce-product-gallery .flex-control-thumbs li {
    /* The two that make it a row of four. */
    width: auto !important;
    float: none !important;
    /* Newer WooCommerce adds `margin-right: 1em` via a `--columns-4`-scoped
       rule (plus an :nth-child(4n) that zeroes it on every fourth item) to
       gutter its floated grid. The rail spaces itself with `gap`, so that
       margin is pure interference — and both of those selectors outrank this
       one. */
    margin: 0 !important;
    list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs li img {
    display: block;
    width: 100%;
    height: auto;
}

/* Phones: no room for a rail beside the image, so the strip goes back below —
   five across rather than WooCommerce's four, since the items are grid tracks
   now and no longer bound to a 25% float.

   Crossing this breakpoint by resizing is safe: FlexSlider re-measures on
   window resize, which is the one moment it is willing to change its mind. */
@media (max-width: 768px) {
    .woocommerce-product-gallery {
        padding-left: 0 !important;
    }

    .woocommerce-product-gallery .flex-control-thumbs {
        position: static;
        width: auto;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        overflow: visible !important;
        margin-top: 10px;
    }
}