/**
 * Structural styles for the dependency-free slider in js/slider.js.
 *
 * Layout only — no colours, spacing or typography, so each carousel keeps the
 * look it already had. The slider script adds these classes at init.
 */

.vslider {
    position: relative;
    display: block;
    box-sizing: border-box;
}

.vslider-viewport {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
}

.vslider-track {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    will-change: transform;
    /* No transition here: the script sets it per move so it can suppress the
       animation when jumping back over the loop seam. */
}

.vslider-slide {
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
    /* `align-items: stretch` on the track gives every slide the height of the
       tallest one; making the slide a column lets a card inside it fill that
       height (height:100% needs a definite parent) so a row of cards ends
       level regardless of how much text each holds. */
    display: flex;
    flex-direction: column;
}

.vslider-slide > * {
    flex: 1 1 auto;
}

/* Vertical ticker (the header notification bar). */
.vslider-is-vertical .vslider-track {
    flex-direction: column;
}

.vslider-is-vertical .vslider-slide {
    width: 100%;
}

/* ---------------------------------------------------------------------------
   Pre-initialisation layout.

   slider.js is deferred, so the browser paints the markup before the script
   runs. Previously this block hid every slide but the first, which left that
   one slide as a full-width block — a single stretched product card, visible
   on every load until the script took over.

   Instead, lay the un-initialised slider out with CSS exactly as the script
   will: a horizontal row, clipped, with each slide already at its final
   fraction of the width. The slides are sized by the same breakpoints the
   script uses (see --vslider-per-view below), so the first paint matches the
   initialised state and there is nothing to flash.
   --------------------------------------------------------------------------- */
[data-slider]:not([data-slider-ready]) {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    /* Fallback for a slider that declares no per-view breakpoints. */
    --vslider-per-view: 1;
}

[data-slider]:not([data-slider-ready]) > * {
    flex: 0 0 calc(100% / var(--vslider-per-view));
    width: calc(100% / var(--vslider-per-view));
    min-width: 0;
    box-sizing: border-box;
    /* Matches .vslider-slide, so cards are already equal-height on first paint
       rather than settling once the script runs. */
    display: flex;
    flex-direction: column;
}

/* The vertical ticker shows one slide at a time; keep the rest out of the flow
   until the script wraps them in a track. */
[data-slider][data-slider-vertical]:not([data-slider-ready]) {
    display: block;
}

[data-slider][data-slider-vertical]:not([data-slider-ready]) > *:not(:first-child) {
    display: none;
}

/* Pre-init slides-per-view, mirroring what slider.js computes from the same
   attributes. Declared widest-first so a narrower breakpoint later in the file
   overrides it, which is the order the script resolves them in too.

   Only the counts this site actually uses are listed (1-6); a slider asking for
   a count outside that range still renders — it falls back to the single-slide
   default and the script corrects it on init. */
[data-slider][data-slider-per-view='1']:not([data-slider-ready]) { --vslider-per-view: 1; }
[data-slider][data-slider-per-view='2']:not([data-slider-ready]) { --vslider-per-view: 2; }
[data-slider][data-slider-per-view='3']:not([data-slider-ready]) { --vslider-per-view: 3; }
[data-slider][data-slider-per-view='4']:not([data-slider-ready]) { --vslider-per-view: 4; }
[data-slider][data-slider-per-view='5']:not([data-slider-ready]) { --vslider-per-view: 5; }
[data-slider][data-slider-per-view='6']:not([data-slider-ready]) { --vslider-per-view: 6; }

@media (max-width: 1400px) {
    [data-slider][data-slider-per-view-1400='2']:not([data-slider-ready]) { --vslider-per-view: 2; }
    [data-slider][data-slider-per-view-1400='3']:not([data-slider-ready]) { --vslider-per-view: 3; }
    [data-slider][data-slider-per-view-1400='4']:not([data-slider-ready]) { --vslider-per-view: 4; }
    [data-slider][data-slider-per-view-1400='5']:not([data-slider-ready]) { --vslider-per-view: 5; }
}

@media (max-width: 992px) {
    [data-slider][data-slider-per-view-992='1']:not([data-slider-ready]) { --vslider-per-view: 1; }
    [data-slider][data-slider-per-view-992='2']:not([data-slider-ready]) { --vslider-per-view: 2; }
    [data-slider][data-slider-per-view-992='3']:not([data-slider-ready]) { --vslider-per-view: 3; }
    [data-slider][data-slider-per-view-992='4']:not([data-slider-ready]) { --vslider-per-view: 4; }
}

@media (max-width: 768px) {
    [data-slider][data-slider-per-view-768='1']:not([data-slider-ready]) { --vslider-per-view: 1; }
    [data-slider][data-slider-per-view-768='2']:not([data-slider-ready]) { --vslider-per-view: 2; }
    [data-slider][data-slider-per-view-768='3']:not([data-slider-ready]) { --vslider-per-view: 3; }
}

@media (max-width: 480px) {
    [data-slider][data-slider-per-view-480='1']:not([data-slider-ready]) { --vslider-per-view: 1; }
    [data-slider][data-slider-per-view-480='2']:not([data-slider-ready]) { --vslider-per-view: 2; }
}

/* A slider with a single slide is left as plain markup. */
[data-slider-ready='static'] {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .vslider-track {
        transition: none !important;
    }
}