/**
 * MHM2-718 — Sticky PDP image gallery (CSS only, no JS, CLS-safe).
 * Sub-task of MHM2-716. SCOPE: add ONLY the sticky-scroll behaviour to the two
 * top columns (left = image gallery, right = buy box). Nothing else is restyled.
 *
 * Mechanism (per ticket + approved mockup "Mediband Product Page Grouped Full.html"):
 *   - the two-column wrapper (.custom-product-info-container) becomes a grid with
 *     `align-items:start` so the shorter gallery column is free to be shorter than
 *     the buy box (a stretched column can't pin);
 *   - the gallery column gets `position:sticky; top:<header+gap>` — native sticky
 *     pins it under the header while the taller buy box scrolls, and releases it at
 *     the container bottom (never overlaps the tabs below);
 *   - disabled ≤960px (stacked layout) so the gallery scrolls away normally.
 *
 * Column widths (64% / 35%) are the theme's existing float widths, preserved as-is;
 * the only real change is grid + sticky. top:94px = revealed sticky nav (80px) + gap.
 */
@media (min-width: 961px) {
    .catalog-product-view .custom-product-info-container {
        display: grid;
        grid-template-columns: 64% 35%;
        column-gap: 1%;
        align-items: start;
    }

    /* Neutralise the theme's float inside the grid; let the grid track size the
       columns (the theme's width:64%/35% would otherwise be % of the cell).
       Explicit grid-column + order:0 so placement is deterministic — the buy box
       CSS sets `order:` on flex children and the theme floats the columns, either
       of which can otherwise flip the two columns in a grid context. */
    .catalog-product-view .custom-product-info-container > .product.media,
    .catalog-product-view .custom-product-info-container > .product-info-main {
        float: none;
        width: auto;
        order: 0;
    }
    .catalog-product-view .custom-product-info-container > .product.media {
        grid-column: 1;
    }
    .catalog-product-view .custom-product-info-container > .product-info-main {
        grid-column: 2;
    }

    .catalog-product-view .custom-product-info-container > .product.media {
        position: sticky;
        top: 22px; /* mockup value — smart sticky header removed 2026-07-11, nothing overlays */
        align-self: start;
    }
}