/**
 * vsk-swiper.css
 *
 * VOSKA Swiper module styles.
 * Vendor Swiper CSS (swiper.min.css) must be loaded before this file.
 *
 * Structure:
 *   1. Design variables (:root)  — visual tokens, reference VOSKA vars as defaults
 *   2. Slider wrapper            — sizing variables + layout
 *   3. Navigation buttons        — base + states
 *   4. Progress bar              — fill, label, animations
 *   5. Counter                   — swap spans, animations
 *   6. Thumbnail navigation      — thumbs bar + active state
 *   7. Scrubber                  — reset + base styling
 *
 * Override any --vsk-sw-* variable on a parent element to re-theme a specific
 * slider section without affecting others:
 *   .my-section { --vsk-sw-fill-color: red; }
 *
 * @package VOSKA
 * @since   0.1.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. DESIGN VARIABLES
   ─────────────────────────────────────────────────────────────────────────
   All --vsk-sw-* variables fall back to VOSKA theme tokens where possible.
   Override on :root to change globally, or on a parent selector for
   per-section theming.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

	/* ── Transitions ─────────────────────────────────────────────────── */
	--vsk-sw-duration:  var(--vsk-trns--duration, 0.35s);
	--vsk-sw-easing:    var(--vsk-trns--ease, cubic-bezier(0.66, 0, 0.34, 1));

	/* ── Track (progress bar + scrubber background) ──────────────────── */
	--vsk-sw-track-bg:     #e3e3e3;
	--vsk-sw-track-size:   2px;    /* height of horizontal bar / width of vertical bar */
	--vsk-sw-track-radius: 999px;

	/* ── Fill + thumb (progress fill + scrubber thumb) ───────────────── */
	--vsk-sw-fill-color:       var(--vsk-clr--text, #171717);
	--vsk-sw-fill-radius:      inherit; /* inherits track-radius by default */
	--vsk-sw-thumb-size:       16px;
	--vsk-sw-thumb-color:      var(--vsk-clr--text, #171717);
	--vsk-sw-thumb-radius:     50%;
	--vsk-sw-thumb-border:     none;

	/* ── Navigation buttons ──────────────────────────────────────────── */
	--vsk-sw-btn-size:          44px;
	--vsk-sw-btn-bg:            transparent;
	--vsk-sw-btn-bg-hover:      transparent;
	--vsk-sw-btn-color:         var(--vsk-clr--text, #171717);
	--vsk-sw-btn-color-hover:   var(--vsk-clr--accent, #F47D2C);
	--vsk-sw-btn-radius:        var(--vsk-btn--radius, 0px);
	--vsk-sw-btn-border-width:  var(--vsk-bdr--wgt, 1px);
	--vsk-sw-btn-border-style:  var(--vsk-bdr--style, solid);
	--vsk-sw-btn-border-color:  var(--vsk-clr--border, #464646);
	--vsk-sw-btn-border:        var(--vsk-sw-btn-border-width)
	                            var(--vsk-sw-btn-border-style)
	                            var(--vsk-sw-btn-border-color);
	--vsk-sw-btn-disabled-opacity: 0.3;

	/* ── Label (progress bar label) ──────────────────────────────────── */
	--vsk-sw-label-bg:          transparent;
	--vsk-sw-label-color:       var(--vsk-clr--text, #171717);
	--vsk-sw-label-font-size:   var(--vsk-font--size-text-s, 0.85rem);
	--vsk-sw-label-font-weight: var(--vsk-font--wgt-text, 300);
	--vsk-sw-label-padding:     0.3em 0.6em;
	--vsk-sw-label-radius:      var(--vsk-btn--radius, 0px);
	--vsk-sw-label-gap:         var(--vsk-sp--s, 12px); /* distance from track */

	/* Label fixed position — used with --label-fixed modifier */
	--vsk-sw-label-top:    auto;
	--vsk-sw-label-right:  auto;
	--vsk-sw-label-bottom: auto;
	--vsk-sw-label-left:   auto;

	/* ── Counter ─────────────────────────────────────────────────────── */
	--vsk-sw-counter-bg:          transparent;
	--vsk-sw-counter-color:       var(--vsk-clr--text, #171717);
	--vsk-sw-counter-font-size:   var(--vsk-font--size-text-s, 0.85rem);
	--vsk-sw-counter-font-weight: var(--vsk-font--wgt-text, 300);
	--vsk-sw-counter-sep-color:   var(--vsk-clr--text-faded, rgba(33,33,33,0.6));

	/* ── Scrubber hit area ───────────────────────────────────────────── */
	--vsk-sw-scrubber-height: 20px; /* full clickable height */

	/* ── Thumbnail navigation ────────────────────────────────────────── */
	--vsk-sw-thumbs-gap:                 var(--vsk-sp--s, 12px);
	--vsk-sw-thumbs-opacity:             0.45;
	--vsk-sw-thumbs-opacity-active:      1;
	--vsk-sw-thumbs-radius:              0px;
	--vsk-sw-thumbs-border-width:        var(--vsk-bdr--wgt, 1px);
	--vsk-sw-thumbs-border-style:        var(--vsk-bdr--style, solid);
	--vsk-sw-thumbs-border-color:        transparent;
	--vsk-sw-thumbs-border-color-active: var(--vsk-clr--text, #171717);
	--vsk-sw-thumbs-transition:          opacity var(--vsk-trns--duration, 0.35s) var(--vsk-trns--ease, ease),
	                                     border-color var(--vsk-trns--duration, 0.35s) var(--vsk-trns--ease, ease);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. SLIDER WRAPPER
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Sizing variables (scoped per-instance) ───────────────────────────────
   These live on .vsk-swiper (not :root) so each slider can have independent
   values. Override via style="" or a scoped class on the slider element.

   --_slide-per-view       How many full slides are visible at once.
   --_slide-visible-offset Fraction of the next slide peeking in (0–1).
   --_space-between        CSS-side gap. Accepts clamp(), vw, px — anything.
                           Do NOT combine with data-vsk-space-between.
   --_slide-width          Computed width (override to use a fixed width).
   --_slide-height         Slide height. Default: 100%.
   --_swiper-height        Wrapper height. Required for vertical sliders.
   ──────────────────────────────────────────────────────────────────────── */

.vsk-swiper {
	--_slide-per-view:       1;
	--_slide-visible-offset: 0;
	--_space-between:        0px;
	--_slide-height:         100%;
	--_swiper-height:        auto;

	--_slide-width: calc(
		( 100% - var(--_space-between) * (var(--_slide-per-view) + var(--_slide-visible-offset) - 1) )
		/ ( var(--_slide-per-view) + var(--_slide-visible-offset) )
	);

	width: 100%;
	height: var(--_swiper-height);
	overflow: hidden;
}

.vsk-swiper .swiper-wrapper {
	display: flex;
	gap: var(--_space-between);
}

.vsk-swiper .swiper-slide {
	flex-shrink: 0;
	width: var(--_slide-width);
	height: var(--_slide-height);
	box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. NAVIGATION BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * .vsk-swiper-button is the shared class on both next and prev buttons.
 * Use it to style both from one place.
 * .vsk-swiper-btn--next / .vsk-swiper-btn--prev for directional overrides.
 *
 * Full browser <button> reset is required — browsers add padding, font,
 * border, background, and appearance that fight our styles.
 */

.vsk-swiper-button {
	/* ── Browser reset ─────────────────────────────────────────────── */
	-webkit-appearance: none;
	appearance:         none;
	font-family:        inherit;
	font-size:          inherit;
	font-weight:        inherit;
	line-height:        1;
	letter-spacing:     inherit;
	text-align:         center;
	white-space:        nowrap;
	text-decoration:    none;
	margin:             0;
	padding:            0;

	/* ── Perfect square ────────────────────────────────────────────── */
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           var(--vsk-sw-btn-size);
	height:          var(--vsk-sw-btn-size);
	aspect-ratio:    1;
	flex-shrink:     0;
	box-sizing:      border-box;

	/* ── Visual ────────────────────────────────────────────────────── */
	background:    var(--vsk-sw-btn-bg);
	color:         var(--vsk-sw-btn-color);
	border:        var(--vsk-sw-btn-border);
	border-radius: var(--vsk-sw-btn-radius);
	outline:       none;
	-webkit-tap-highlight-color: transparent;

	/* ── Behaviour ─────────────────────────────────────────────────── */
	cursor:      pointer;
	user-select: none;
	transition:
		background    var(--vsk-sw-duration) var(--vsk-sw-easing),
		color         var(--vsk-sw-duration) var(--vsk-sw-easing),
		border-color  var(--vsk-sw-duration) var(--vsk-sw-easing),
		opacity       var(--vsk-sw-duration) var(--vsk-sw-easing);
}

.vsk-swiper-button:hover {
	background: var(--vsk-sw-btn-bg-hover);
	color:      var(--vsk-sw-btn-color-hover);
}

/* Focus visible — keyboard nav only, not on click */
.vsk-swiper-button:focus-visible {
	outline:        var(--vsk-sw-btn-border-width) var(--vsk-sw-btn-border-style) var(--vsk-sw-btn-border-color);
	outline-offset: 3px;
}

/* Disabled state — set by Swiper when loop=false and at boundary */
.vsk-swiper-btn--disabled {
	opacity:        var(--vsk-sw-btn-disabled-opacity);
	pointer-events: none;
	cursor:         default;
}

/* Prevent Swiper's watchOverflow from hiding our custom buttons via
   swiper-button-lock. We disable watchOverflow in JS and also remove the
   class programmatically after init, but this rule is a final safety net
   against vendor CSS (swiper.min.css) setting display:none on this class. */
.vsk-swiper-button.swiper-button-lock {
	display:        inline-flex !important;
	pointer-events: auto        !important;
	opacity:        1           !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. PROGRESS BAR
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Wrapper ─────────────────────────────────────────────────────────── */

.vsk-swiper-progress {
	--_progress: 0;

	position:      relative;
	overflow:      visible; /* label must never be clipped */
	width:         100%;
	height:        var(--vsk-sw-track-size);
	background:    var(--vsk-sw-track-bg);
	border-radius: var(--vsk-sw-track-radius);
}

/* ─── Fill ────────────────────────────────────────────────────────────── */

.vsk-swiper-progress__fill {
	display:       block;
	height:        100%;
	width:         calc( var(--_progress) * 100% );
	background:    var(--vsk-sw-fill-color);
	border-radius: var(--vsk-sw-fill-radius);
	transition:    width var(--vsk-sw-duration) var(--vsk-sw-easing);
}

/* Vertical orientation */
.vsk-swiper-progress--vertical {
	width:  var(--vsk-sw-track-size);
	height: 100%;
}

.vsk-swiper-progress--vertical .vsk-swiper-progress__fill {
	width:      100%;
	height:     calc( var(--_progress) * 100% );
	transition: height var(--vsk-sw-duration) var(--vsk-sw-easing);
}

/* ─── Label wrapper ───────────────────────────────────────────────────── */

.vsk-swiper-progress__label {
	position:    absolute;
	white-space: nowrap;

	/* Horizontal: above current progress point */
	left:       calc( var(--_progress) * 100% );
	bottom:     calc( 100% + var(--vsk-sw-label-gap) );
	transform:  translateX( -50% );
	transition: left var(--vsk-sw-duration) var(--vsk-sw-easing);
}

/* Vertical: to the right of current progress point */
.vsk-swiper-progress--vertical .vsk-swiper-progress__label {
	left:       calc( 100% + var(--vsk-sw-label-gap) );
	bottom:     auto;
	top:        calc( var(--_progress) * 100% );
	transform:  translateY( -50% );
	transition: top var(--vsk-sw-duration) var(--vsk-sw-easing);
}

/* Vertical — label on left side */
.vsk-swiper-progress--label-left .vsk-swiper-progress__label {
	left:       auto;
	right:      calc( 100% + var(--vsk-sw-label-gap) );
	text-align: right;
}

/* Fixed — project-defined position, tracking disabled */
.vsk-swiper-progress.vsk-swiper-progress--label-fixed .vsk-swiper-progress__label {
	top:       var(--vsk-sw-label-top);
	right:     var(--vsk-sw-label-right);
	bottom:    var(--vsk-sw-label-bottom);
	left:      var(--vsk-sw-label-left);
	transform: none;
	transition: none;
}

/* ─── Label inner spans (swap targets) ───────────────────────────────── */

/*
 * display: grid + grid-area: 1/1 places both spans in the same cell.
 * The cell is always as wide as the WIDEST span currently in the DOM —
 * so the wrapper never changes size when text swaps, eliminating jumps.
 * No position toggling needed. Only opacity (and optional transform)
 * control visibility.
 */

.vsk-swiper-progress__label {
	display: grid; /* makes both spans overlay in one cell */
}

.vsk-swiper-progress__label-a,
.vsk-swiper-progress__label-b {
	grid-area: 1 / 1; /* same cell — wrapper = widest content */
	white-space: nowrap;

	/* Visual */
	background:    var(--vsk-sw-label-bg);
	color:         var(--vsk-sw-label-color);
	font-size:     var(--vsk-sw-label-font-size);
	font-weight:   var(--vsk-sw-label-font-weight);
	padding:       var(--vsk-sw-label-padding);
	border-radius: var(--vsk-sw-label-radius);

	/* Default: invisible, no transition */
	opacity: 0;
}

.vsk-swiper-progress__label-a.is-active,
.vsk-swiper-progress__label-b.is-active {
	opacity: 1;
}

/* ─── Label animations ────────────────────────────────────────────────── */

/* fade */
.vsk-swiper-progress--anim-fade .vsk-swiper-progress__label-a,
.vsk-swiper-progress--anim-fade .vsk-swiper-progress__label-b {
	transition: opacity var(--vsk-sw-duration) var(--vsk-sw-easing);
}
.vsk-swiper-progress--anim-fade .vsk-swiper-progress__label-a.is-active,
.vsk-swiper-progress--anim-fade .vsk-swiper-progress__label-b.is-active  { opacity: 1; }
.vsk-swiper-progress--anim-fade .vsk-swiper-progress__label-a.is-leaving,
.vsk-swiper-progress--anim-fade .vsk-swiper-progress__label-b.is-leaving { opacity: 0; }

/* slide-up */
.vsk-swiper-progress--anim-slide-up .vsk-swiper-progress__label { overflow: hidden; }
.vsk-swiper-progress--anim-slide-up .vsk-swiper-progress__label-a,
.vsk-swiper-progress--anim-slide-up .vsk-swiper-progress__label-b {
	transform:  translateY( 100% );
	transition: transform var(--vsk-sw-duration) var(--vsk-sw-easing),
	            opacity   var(--vsk-sw-duration) var(--vsk-sw-easing);
}
.vsk-swiper-progress--anim-slide-up .vsk-swiper-progress__label-a.is-active,
.vsk-swiper-progress--anim-slide-up .vsk-swiper-progress__label-b.is-active  { opacity: 1; transform: translateY( 0 ); }
.vsk-swiper-progress--anim-slide-up .vsk-swiper-progress__label-a.is-leaving,
.vsk-swiper-progress--anim-slide-up .vsk-swiper-progress__label-b.is-leaving { opacity: 0; transform: translateY( -100% ); }

/* slide-down */
.vsk-swiper-progress--anim-slide-down .vsk-swiper-progress__label { overflow: hidden; }
.vsk-swiper-progress--anim-slide-down .vsk-swiper-progress__label-a,
.vsk-swiper-progress--anim-slide-down .vsk-swiper-progress__label-b {
	transform:  translateY( -100% );
	transition: transform var(--vsk-sw-duration) var(--vsk-sw-easing),
	            opacity   var(--vsk-sw-duration) var(--vsk-sw-easing);
}
.vsk-swiper-progress--anim-slide-down .vsk-swiper-progress__label-a.is-active,
.vsk-swiper-progress--anim-slide-down .vsk-swiper-progress__label-b.is-active  { opacity: 1; transform: translateY( 0 ); }
.vsk-swiper-progress--anim-slide-down .vsk-swiper-progress__label-a.is-leaving,
.vsk-swiper-progress--anim-slide-down .vsk-swiper-progress__label-b.is-leaving { opacity: 0; transform: translateY( 100% ); }

/* cube-up */
.vsk-swiper-progress--anim-cube-up .vsk-swiper-progress__label,
.vsk-swiper-progress--anim-cube-down .vsk-swiper-progress__label {
	perspective: 400px;
	overflow:    visible;
}
.vsk-swiper-progress--anim-cube-up .vsk-swiper-progress__label-a,
.vsk-swiper-progress--anim-cube-up .vsk-swiper-progress__label-b {
	transform:           perspective( 400px ) rotateX( 90deg );
	transform-origin:    center top;
	transition:          transform var(--vsk-sw-duration) var(--vsk-sw-easing),
	                     opacity 0.3s var(--vsk-sw-easing);
	backface-visibility: hidden;
}
.vsk-swiper-progress--anim-cube-up .vsk-swiper-progress__label-a.is-active,
.vsk-swiper-progress--anim-cube-up .vsk-swiper-progress__label-b.is-active  { opacity: 1; transform: perspective( 400px ) rotateX( 0deg ); }
.vsk-swiper-progress--anim-cube-up .vsk-swiper-progress__label-a.is-leaving,
.vsk-swiper-progress--anim-cube-up .vsk-swiper-progress__label-b.is-leaving { opacity: 0; transform: perspective( 400px ) rotateX( -90deg ); }

/* cube-down */
.vsk-swiper-progress--anim-cube-down .vsk-swiper-progress__label-a,
.vsk-swiper-progress--anim-cube-down .vsk-swiper-progress__label-b {
	transform:           perspective( 400px ) rotateX( -90deg );
	transform-origin:    center bottom;
	transition:          transform var(--vsk-sw-duration) var(--vsk-sw-easing),
	                     opacity 0.3s var(--vsk-sw-easing);
	backface-visibility: hidden;
}
.vsk-swiper-progress--anim-cube-down .vsk-swiper-progress__label-a.is-active,
.vsk-swiper-progress--anim-cube-down .vsk-swiper-progress__label-b.is-active  { opacity: 1; transform: perspective( 400px ) rotateX( 0deg ); }
.vsk-swiper-progress--anim-cube-down .vsk-swiper-progress__label-a.is-leaving,
.vsk-swiper-progress--anim-cube-down .vsk-swiper-progress__label-b.is-leaving { opacity: 0; transform: perspective( 400px ) rotateX( 90deg ); }

/* ═══════════════════════════════════════════════════════════════════════════
   5. COUNTER
   ═══════════════════════════════════════════════════════════════════════════ */

.vsk-swiper-counter {
	display:     inline-flex;
	align-items: baseline;
	gap:         0.25em;

	background:  var(--vsk-sw-counter-bg);
	color:       var(--vsk-sw-counter-color);
	font-size:   var(--vsk-sw-counter-font-size);
	font-weight: var(--vsk-sw-counter-font-weight);
}

.vsk-swiper-counter__sep {
	color: var(--vsk-sw-counter-sep-color);
}

/* __current needs a positioning context for the swap spans */
.vsk-swiper-counter__current {
	position: relative;
	display:  inline-block;
}

/* ─── Inner spans (swap targets) ─────────────────────────────────────── */

.vsk-swiper-counter__current-a,
.vsk-swiper-counter__current-b {
	display:         inline-flex;
	justify-content: flex-end;
	min-width:       3ch;
	text-align:      right;
	position:        absolute;
	top:             0;
	left:            0;
	visibility:      hidden;
}

.vsk-swiper-counter__current-a.is-active,
.vsk-swiper-counter__current-b.is-active {
	position:   relative;
	display:    inline-flex;
	visibility: visible;
}

.vsk-swiper-counter__current-a.is-leaving,
.vsk-swiper-counter__current-b.is-leaving {
	position:   absolute;
	display:    inline-flex;
	visibility: hidden;
}

/* ─── Counter animations ──────────────────────────────────────────────── */

/* fade */
.vsk-swiper-counter--anim-fade .vsk-swiper-counter__current-a,
.vsk-swiper-counter--anim-fade .vsk-swiper-counter__current-b {
	visibility: visible;
	opacity:    0;
	transition: opacity var(--vsk-sw-duration) var(--vsk-sw-easing);
}
.vsk-swiper-counter--anim-fade .vsk-swiper-counter__current-a.is-active,
.vsk-swiper-counter--anim-fade .vsk-swiper-counter__current-b.is-active  { opacity: 1; }
.vsk-swiper-counter--anim-fade .vsk-swiper-counter__current-a.is-leaving,
.vsk-swiper-counter--anim-fade .vsk-swiper-counter__current-b.is-leaving { opacity: 0; }

/* slide-up */
.vsk-swiper-counter--anim-slide-up .vsk-swiper-counter__current { overflow: hidden; }

.vsk-swiper-counter--anim-slide-up .vsk-swiper-counter__current-a,
.vsk-swiper-counter--anim-slide-up .vsk-swiper-counter__current-b {
	visibility: visible;
	opacity:    0;
	transform:  translateY( 100% );
	transition: transform var(--vsk-sw-duration) var(--vsk-sw-easing),
	            opacity   var(--vsk-sw-duration) var(--vsk-sw-easing);
}
.vsk-swiper-counter--anim-slide-up .vsk-swiper-counter__current-a.is-active,
.vsk-swiper-counter--anim-slide-up .vsk-swiper-counter__current-b.is-active  { opacity: 1; transform: translateY( 0 ); }
.vsk-swiper-counter--anim-slide-up .vsk-swiper-counter__current-a.is-leaving,
.vsk-swiper-counter--anim-slide-up .vsk-swiper-counter__current-b.is-leaving { opacity: 0; transform: translateY( -100% ); }

/* slide-down */
.vsk-swiper-counter--anim-slide-down .vsk-swiper-counter__current { overflow: hidden; }

.vsk-swiper-counter--anim-slide-down .vsk-swiper-counter__current-a,
.vsk-swiper-counter--anim-slide-down .vsk-swiper-counter__current-b {
	visibility: visible;
	opacity:    0;
	transform:  translateY( -100% );
	transition: transform var(--vsk-sw-duration) var(--vsk-sw-easing),
	            opacity   var(--vsk-sw-duration) var(--vsk-sw-easing);
}
.vsk-swiper-counter--anim-slide-down .vsk-swiper-counter__current-a.is-active,
.vsk-swiper-counter--anim-slide-down .vsk-swiper-counter__current-b.is-active  { opacity: 1; transform: translateY( 0 ); }
.vsk-swiper-counter--anim-slide-down .vsk-swiper-counter__current-a.is-leaving,
.vsk-swiper-counter--anim-slide-down .vsk-swiper-counter__current-b.is-leaving { opacity: 0; transform: translateY( 100% ); }

/* cube-up */
.vsk-swiper-counter--anim-cube-up .vsk-swiper-counter__current {
	perspective: 400px;
	overflow:    visible;
}
.vsk-swiper-counter--anim-cube-up .vsk-swiper-counter__current-a,
.vsk-swiper-counter--anim-cube-up .vsk-swiper-counter__current-b {
	visibility:          visible;
	opacity:             0;
	transform:           perspective( 400px ) rotateX( 90deg );
	transform-origin:    center top;
	transition:          transform var(--vsk-sw-duration) var(--vsk-sw-easing),
	                     opacity 0.3s var(--vsk-sw-easing);
	backface-visibility: hidden;
}
.vsk-swiper-counter--anim-cube-up .vsk-swiper-counter__current-a.is-active,
.vsk-swiper-counter--anim-cube-up .vsk-swiper-counter__current-b.is-active  { opacity: 1; transform: perspective( 400px ) rotateX( 0deg ); }
.vsk-swiper-counter--anim-cube-up .vsk-swiper-counter__current-a.is-leaving,
.vsk-swiper-counter--anim-cube-up .vsk-swiper-counter__current-b.is-leaving { opacity: 0; transform: perspective( 400px ) rotateX( -90deg ); }

/* cube-down */
.vsk-swiper-counter--anim-cube-down .vsk-swiper-counter__current {
	perspective: 400px;
	overflow:    visible;
}
.vsk-swiper-counter--anim-cube-down .vsk-swiper-counter__current-a,
.vsk-swiper-counter--anim-cube-down .vsk-swiper-counter__current-b {
	visibility:          visible;
	opacity:             0;
	transform:           perspective( 400px ) rotateX( -90deg );
	transform-origin:    center bottom;
	transition:          transform var(--vsk-sw-duration) var(--vsk-sw-easing),
	                     opacity 0.3s var(--vsk-sw-easing);
	backface-visibility: hidden;
}
.vsk-swiper-counter--anim-cube-down .vsk-swiper-counter__current-a.is-active,
.vsk-swiper-counter--anim-cube-down .vsk-swiper-counter__current-b.is-active  { opacity: 1; transform: perspective( 400px ) rotateX( 0deg ); }
.vsk-swiper-counter--anim-cube-down .vsk-swiper-counter__current-a.is-leaving,
.vsk-swiper-counter--anim-cube-down .vsk-swiper-counter__current-b.is-leaving { opacity: 0; transform: perspective( 400px ) rotateX( 90deg ); }

/* ═══════════════════════════════════════════════════════════════════════════
   6. THUMBNAIL NAVIGATION
   ─────────────────────────────────────────────────────────────────────────
   The thumbs bar is a regular .vsk-swiper with the additional class
   .vsk-swiper--thumbs.  It is linked to the main slider via:
     data-vsk-thumbs-id on the main .vsk-swiper
     data-vsk-swiper-id on the thumbs bar

   Horizontal (default):
     Place anywhere in DOM; typically below the main slider.
     Slide width controlled by --_slide-width CSS variable.

   Vertical:
     Add data-vsk-direction="vertical" to the thumbs bar and set
     --_swiper-height so Swiper can calculate offsets.

   Gap between thumbs:
     Use --_space-between CSS variable or data-vsk-space-between attribute.

   Active thumb: JS adds .swiper-slide-thumb-active on slideChange.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Each thumbnail slide */
.vsk-swiper--thumbs .swiper-slide {
	cursor:         pointer;
	opacity:        var(--vsk-sw-thumbs-opacity);
	border-radius:  var(--vsk-sw-thumbs-radius);
	border:         var(--vsk-sw-thumbs-border-width)
	                var(--vsk-sw-thumbs-border-style)
	                var(--vsk-sw-thumbs-border-color);
	overflow:       hidden;
	transition:     var(--vsk-sw-thumbs-transition);
	box-sizing:     border-box;
}

/* Active thumbnail */
.vsk-swiper--thumbs .swiper-slide-thumb-active {
	opacity:      var(--vsk-sw-thumbs-opacity-active);
	border-color: var(--vsk-sw-thumbs-border-color-active);
}

/* Thumbnail image — fills the slide */
.vsk-swiper--thumbs .swiper-slide img {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. SCRUBBER
   ─────────────────────────────────────────────────────────────────────────
   <input type="range"> with full browser reset.
   Style the track and thumb via CSS custom properties.
   JS sets type, min, max, step — do not set them in HTML.
   ═══════════════════════════════════════════════════════════════════════════ */

.vsk-swiper-scrubber {
	-webkit-appearance: none;
	appearance:         none;
	background:         transparent;
	border:             none;
	outline:            none;
	padding:            0;
	margin:             0;
	cursor:             pointer;
	display:            block;
	width:              100%;
	height:             var(--vsk-sw-scrubber-height);
}

.vsk-swiper-scrubber::-moz-focus-outer { border: 0; }

/* Track */
.vsk-swiper-scrubber::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	height:             var(--vsk-sw-track-size);
	background:         var(--vsk-sw-track-bg);
	border-radius:      var(--vsk-sw-track-radius);
	border:             none;
}

.vsk-swiper-scrubber::-moz-range-track {
	height:             var(--vsk-sw-track-size);
	background:         var(--vsk-sw-track-bg);
	border-radius:      var(--vsk-sw-track-radius);
	border:             none;
}

/* Thumb */
.vsk-swiper-scrubber::-webkit-slider-thumb {
	-webkit-appearance: none;
	width:              var(--vsk-sw-thumb-size);
	height:             var(--vsk-sw-thumb-size);
	border-radius:      var(--vsk-sw-thumb-radius);
	background:         var(--vsk-sw-thumb-color);
	border:             var(--vsk-sw-thumb-border);
	cursor:             grab;
	/* vertically centre the thumb on the track */
	margin-top:         calc( (var(--vsk-sw-track-size) - var(--vsk-sw-thumb-size)) / 2 );
}

.vsk-swiper-scrubber::-moz-range-thumb {
	width:         var(--vsk-sw-thumb-size);
	height:        var(--vsk-sw-thumb-size);
	border-radius: var(--vsk-sw-thumb-radius);
	background:    var(--vsk-sw-thumb-color);
	border:        var(--vsk-sw-thumb-border);
	cursor:        grab;
	box-sizing:    border-box;
}

.vsk-swiper-scrubber:active::-webkit-slider-thumb,
.vsk-swiper-scrubber:active::-moz-range-thumb {
	cursor: grabbing;
}