﻿/**
 * Builder Slides — core (shared stage, arrows, thumbs chrome, pagination).
 * Model-specific styles live in modules/*/style.css and load per layout.
 */

.bsb-slider {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  position: relative;
}

.bsb-slider__viewport {
  position: relative;
  width: 100%;
  min-width: 0;
}

.bsb-slider__stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #d8dee6;
  border-radius: 4px;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.bsb-slider[data-bsb-swipe="1"] .bsb-slider__stage {
  cursor: grab;
}

.bsb-slider[data-bsb-swipe="1"] .bsb-slider__stage.is-bsb-grabbing,
.bsb-slider[data-bsb-swipe="1"] .bsb-slider__stage.is-bsb-grabbing * {
  cursor: grabbing !important;
}

.bsb-slider[data-bsb-thumbs-swipe="1"] .bsb-slider__nav {
  cursor: grab;
  touch-action: none;
}

.bsb-slider[data-bsb-thumbs-swipe="1"] .bsb-slider__nav.is-bsb-grabbing,
.bsb-slider[data-bsb-thumbs-swipe="1"] .bsb-slider__nav.is-bsb-grabbing * {
  cursor: grabbing !important;
}

.bsb-slider__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  transition: transform var(--bsb-duration, 0.35s) var(--bsb-easing, ease);
  will-change: transform;
  /* Let arrow hits pass through empty track chrome; slides re-enable below. */
  pointer-events: none;
}

.bsb-slider__track a,
.bsb-slider__track button,
.bsb-slider__track input,
.bsb-slider__track textarea,
.bsb-slider__track select,
.bsb-slider__track video,
.bsb-slider__track iframe,
.bsb-slider__track .bsb-slider__slide-link,
.bsb-slider__track .bsb-slider__slide-extra--over > * {
  pointer-events: auto;
}

/* Hide thumbnails */
.bsb-slider[data-bsb-thumbs="0"] .bsb-slider__nav,
.bsb-slider[data-bsb-thumbs="0"] .bsb-slider__nav-dots {
  display: none !important;
}

/* Hide empty nav-wrap unless numbers sit in the thumbs slot */
.bsb-slider[data-bsb-thumbs="0"]:not([data-bsb-pagination="numbers"]) .bsb-slider__nav-wrap {
  display: none !important;
}

.bsb-slider[data-bsb-thumbs="0"][data-bsb-pagination="numbers"]:not([data-bsb-pagination-pos^="thumbs"]) .bsb-slider__nav-wrap {
  display: none !important;
}

.bsb-slider[data-bsb-thumbs="0"] .bsb-slider__nav-row {
  display: none !important;
}

/* Fade / zoom: stack panes (active stays in-flow so stage keeps height) */
.bsb-slider[data-bsb-transition="fade"] .bsb-slider__track,
.bsb-slider[data-bsb-transition="fade_slide"] .bsb-slider__track,
.bsb-slider[data-bsb-transition="zoom"] .bsb-slider__track,
.bsb-slider[data-bsb-transition="none"] .bsb-slider__track {
  display: block;
  position: relative;
  width: 100%;
  transform: none !important;
  transition: none;
}

.bsb-slider[data-bsb-transition="fade"] .bsb-slider__track > *,
.bsb-slider[data-bsb-transition="fade_slide"] .bsb-slider__track > *,
.bsb-slider[data-bsb-transition="zoom"] .bsb-slider__track > *,
.bsb-slider[data-bsb-transition="none"] .bsb-slider__track > * {
  position: absolute !important;
  left: 0;
  top: 0;
  right: 0;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  flex: none !important;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition:
    opacity var(--bsb-duration, 0.45s) var(--bsb-easing, ease),
    transform var(--bsb-duration, 0.45s) var(--bsb-easing, ease);
}

.bsb-slider[data-bsb-transition="fade"] .bsb-slider__track > *.is-active-pane,
.bsb-slider[data-bsb-transition="fade_slide"] .bsb-slider__track > *.is-active-pane,
.bsb-slider[data-bsb-transition="zoom"] .bsb-slider__track > *.is-active-pane,
.bsb-slider[data-bsb-transition="none"] .bsb-slider__track > *.is-active-pane,
.bsb-slider[data-bsb-transition="fade"] .bsb-slider__track:not(:has(> .is-active-pane)) > *:first-child,
.bsb-slider[data-bsb-transition="fade_slide"] .bsb-slider__track:not(:has(> .is-active-pane)) > *:first-child,
.bsb-slider[data-bsb-transition="zoom"] .bsb-slider__track:not(:has(> .is-active-pane)) > *:first-child,
.bsb-slider[data-bsb-transition="none"] .bsb-slider__track:not(:has(> .is-active-pane)) > *:first-child {
  position: relative !important;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
  height: auto !important;
}

/* height:100% would collapse to 0 while panes are absolute â€” force content height */
.bsb-slider[data-bsb-transition="fade"] .bsb-slider__stage .bsb-slider__slide,
.bsb-slider[data-bsb-transition="fade"] .bsb-slider__stage .bsb-el-slide,
.bsb-slider[data-bsb-transition="fade"] .bsb-slider__stage .bsb-slider__pane,
.bsb-slider[data-bsb-transition="fade_slide"] .bsb-slider__stage .bsb-slider__slide,
.bsb-slider[data-bsb-transition="fade_slide"] .bsb-slider__stage .bsb-el-slide,
.bsb-slider[data-bsb-transition="fade_slide"] .bsb-slider__stage .bsb-slider__pane,
.bsb-slider[data-bsb-transition="zoom"] .bsb-slider__stage .bsb-slider__slide,
.bsb-slider[data-bsb-transition="zoom"] .bsb-slider__stage .bsb-el-slide,
.bsb-slider[data-bsb-transition="zoom"] .bsb-slider__stage .bsb-slider__pane,
.bsb-slider[data-bsb-transition="none"] .bsb-slider__stage .bsb-slider__slide,
.bsb-slider[data-bsb-transition="none"] .bsb-slider__stage .bsb-el-slide,
.bsb-slider[data-bsb-transition="none"] .bsb-slider__stage .bsb-slider__pane {
  height: auto !important;
  min-height: 0;
}

.bsb-slider[data-bsb-transition="fade_slide"] .bsb-slider__track > * {
  transform: translate3d(24px, 0, 0);
}

.bsb-slider[data-bsb-transition="fade_slide"] .bsb-slider__track > *.is-active-pane,
.bsb-slider[data-bsb-transition="fade_slide"] .bsb-slider__track:not(:has(> .is-active-pane)) > *:first-child {
  transform: translate3d(0, 0, 0);
}

.bsb-slider[data-bsb-transition="zoom"] .bsb-slider__track > * {
  transform: scale(1.06);
}

.bsb-slider[data-bsb-transition="zoom"] .bsb-slider__track > *.is-active-pane,
.bsb-slider[data-bsb-transition="zoom"] .bsb-slider__track:not(:has(> .is-active-pane)) > *:first-child {
  transform: scale(1);
}

.bsb-slider[data-bsb-transition="none"] .bsb-slider__track > * {
  transition: none;
}

/* Parallax â€” media layer slightly larger for room to move */
.bsb-slider[data-bsb-parallax="1"] .bsb-slider__media--layer {
  transition: transform 0.12s ease-out;
  will-change: transform;
  transform-origin: center center;
}

.bsb-slider[data-bsb-parallax="1"] .bsb-slider__media--layer .bsb-slider__slide-image,
.bsb-slider[data-bsb-parallax="1"] .bsb-slider__media--layer img,
.bsb-slider[data-bsb-parallax="1"] .bsb-slider__media--layer video {
  transform: scale(var(--bsb-parallax-scale, 1.08));
}

/* Breakdance wraps each Builder Slide â€” size the WRAPPER, not only inner .bsb-slider__slide */
.bsb-slider__track > * {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  align-self: flex-start;
}

.bsb-slider__slide {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.bsb-slider__slide-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: cover;
  vertical-align: top;
}

.bsb-slider__stage .bsb-slider__slide,
.bsb-slider__stage .bsb-el-slide,
.bsb-slider__stage .bsb-slider__pane {
  height: 100%;
}

.bsb-slider__stage .bsb-slider__slide-image {
  width: 100%;
}

.bsb-slider__slide-placeholder {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  background: #c5ced8;
}

.bsb-slider__slide-extra:empty {
  display: none !important;
}

.bsb-slider__slide {
  position: relative;
  display: block;
}

/* Overlay layer â€” top-left like a normal div, zero padding */
.bsb-slider__slide > .bsb-slider__slide-extra--over,
.bsb-slider__slide > .bsb-slider__slide-extra--over:not(:empty) {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 2;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-sizing: border-box;
  pointer-events: none;
  justify-content: unset !important;
  align-items: unset !important;
}

.bsb-slider__slide > .bsb-slider__slide-extra--over:not(:empty) > * {
  pointer-events: auto;
}

.bsb-slider__slide[hidden] {
  display: none !important;
}

.bsb-slider__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.bsb-slider__nav-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
  /* Allow Thumbnails / Caption margin to create visible space */
  box-sizing: border-box;
}

.bsb-slider__nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.bsb-slider__nav-row .bsb-slider__nav {
  flex: 1 1 auto;
  min-width: 0;
}

.bsb-slider__thumbs-arrow {
  appearance: none;
  border: 0;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}

.bsb-slider__thumbs-arrow.is-disabled,
.bsb-slider__thumbs-arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

.bsb-slider[data-bsb-thumbs-scroll="arrows"] .bsb-slider__thumbs-arrow:not([hidden]) {
  display: inline-flex;
}

.bsb-slider__nav-dots {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bsb-slider[data-bsb-thumbs-scroll="dots"] .bsb-slider__nav-dots:not([hidden]) {
  display: flex;
}

.bsb-slider__nav-dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, width 0.2s ease;
}

.bsb-slider__nav-dot.is-active {
  background: #111;
  width: 18px;
}

.bsb-slider__nav-dot:hover {
  background: rgba(0, 0, 0, 0.45);
}

.bsb-slider__thumb {
  appearance: none;
  border: 0 solid transparent;
  background: #e8edf2;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  color: inherit;
  font: inherit;
  box-sizing: border-box;
  transition:
    transform var(--bsb-thumbs-hover-duration, 250ms) ease,
    box-shadow var(--bsb-thumbs-hover-duration, 250ms) ease,
    opacity var(--bsb-thumbs-hover-duration, 250ms) ease,
    filter var(--bsb-thumbs-hover-duration, 250ms) ease,
    border-color var(--bsb-thumbs-hover-duration, 250ms) ease;
}

.bsb-slider__thumb-media-shell {
  display: block;
  overflow: hidden;
  line-height: 0;
  flex: 0 0 auto;
}

.bsb-slider__thumb-media {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  background: #c5ced8;
  transition:
    transform var(--bsb-thumbs-hover-duration, 250ms) ease,
    filter var(--bsb-thumbs-hover-duration, 250ms) ease;
}

/* Thumb hover animations */
.bsb-slider[data-bsb-thumbs-hover="zoom"] .bsb-slider__thumb:hover .bsb-slider__thumb-media {
  transform: scale(1.08);
}

.bsb-slider[data-bsb-thumbs-hover="lift"] .bsb-slider__thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.bsb-slider[data-bsb-thumbs-hover="brighten"] .bsb-slider__thumb:hover .bsb-slider__thumb-media {
  filter: brightness(1.12);
}

.bsb-slider[data-bsb-thumbs-hover="dim_others"] .bsb-slider__nav:hover .bsb-slider__thumb {
  opacity: 0.45;
}

.bsb-slider[data-bsb-thumbs-hover="dim_others"] .bsb-slider__nav:hover .bsb-slider__thumb:hover,
.bsb-slider[data-bsb-thumbs-hover="dim_others"] .bsb-slider__nav:hover .bsb-slider__thumb.is-active {
  opacity: 1;
}

.bsb-slider[data-bsb-thumbs-hover="colorize"] .bsb-slider__thumb .bsb-slider__thumb-media {
  filter: grayscale(1);
}

.bsb-slider[data-bsb-thumbs-hover="colorize"] .bsb-slider__thumb:hover .bsb-slider__thumb-media,
.bsb-slider[data-bsb-thumbs-hover="colorize"] .bsb-slider__thumb.is-active .bsb-slider__thumb-media {
  filter: grayscale(0);
}

.bsb-slider[data-bsb-caption-align="center"] .bsb-slider__thumb-caption {
  text-align: center;
}

.bsb-slider[data-bsb-caption-align="right"] .bsb-slider__thumb-caption {
  text-align: right;
}

.bsb-slider__thumb-caption {
  display: block;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.3;
}

.bsb-slider__thumb-title {
  display: block;
  font-weight: 600;
  font-size: 13px;
}

.bsb-slider__thumb-text {
  display: block;
  font-size: 11px;
  opacity: 0.85;
}

.bsb-slider__arrows {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 50;
  pointer-events: none;
  gap: 8px;
}

.bsb-slider[data-bsb-arrows="0"] .bsb-slider__arrows,
.bsb-slider__arrows[hidden] {
  display: none !important;
}

.bsb-slider[data-bsb-arrows="1"] .bsb-slider__arrows:not([hidden]) {
  display: flex !important;
}

/* Navigation mode wins over a stale breakpoint rule that hides arrows until a control is edited. */
.breakdance .bsb-slider[data-bsb-nav-mode="arrows"]:not([data-bsb-nav="fixed_size"]):not([data-bsb-nav="left_list"]):not([data-bsb-nav="left_simple"]) .bsb-slider__arrows,
.breakdance .bsb-slider[data-bsb-nav-mode="arrows_thumbs"]:not([data-bsb-nav="fixed_size"]):not([data-bsb-nav="left_list"]):not([data-bsb-nav="left_simple"]) .bsb-slider__arrows {
  display: flex !important;
}

.breakdance .bsb-slider[data-bsb-nav-mode="thumbs"] .bsb-slider__arrows {
  display: none !important;
}

/* Arrows-only: hide nav-wrap unless numbers pagination sits in the thumbs slot */
.bsb-slider[data-bsb-nav-mode="arrows"]:not([data-bsb-pagination="numbers"]) .bsb-slider__nav-wrap,
.bsb-slider[data-bsb-nav-mode="arrows"][data-bsb-pagination="numbers"]:not([data-bsb-pagination-pos^="thumbs"]) .bsb-slider__nav-wrap {
  display: none !important;
}

/* Bottom positions — fleet-style cluster */
.bsb-slider[data-bsb-arrow-pos="bottom_center"] .bsb-slider__arrows,
.bsb-slider[data-bsb-arrow-pos="bottom_left"] .bsb-slider__arrows,
.bsb-slider[data-bsb-arrow-pos="bottom_right"] .bsb-slider__arrows {
  inset: auto;
  top: auto;
  bottom: 16px;
  left: 16px;
  right: 16px;
  width: auto;
  height: auto;
  align-items: center;
}

.bsb-slider[data-bsb-arrow-pos="bottom_center"] .bsb-slider__arrows {
  justify-content: center;
}

.bsb-slider[data-bsb-arrow-pos="bottom_left"] .bsb-slider__arrows {
  justify-content: flex-start;
}

.bsb-slider[data-bsb-arrow-pos="bottom_right"] .bsb-slider__arrows {
  justify-content: flex-end;
}

.bsb-slider__arrow {
  appearance: none;
  border: 0;
  background: #fff;
  color: #111;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  pointer-events: auto !important;
  flex: 0 0 auto;
  position: relative;
  z-index: 41;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    width var(--bsb-arrow-hover-duration, 250ms) ease,
    height var(--bsb-arrow-hover-duration, 250ms) ease,
    border-radius var(--bsb-arrow-hover-duration, 250ms) ease,
    background var(--bsb-arrow-hover-duration, 250ms) ease,
    background-color var(--bsb-arrow-hover-duration, 250ms) ease,
    color var(--bsb-arrow-hover-duration, 250ms) ease,
    opacity var(--bsb-arrow-hover-duration, 250ms) ease,
    transform var(--bsb-arrow-hover-duration, 250ms) ease,
    box-shadow var(--bsb-arrow-hover-duration, 250ms) ease,
    filter var(--bsb-arrow-hover-duration, 250ms) ease;
}

/* Hover animation (Design → Arrows → Hover animation) */
.bsb-slider[data-bsb-arrow-hover="scale"] .bsb-slider__arrow:hover:not(:disabled):not(.is-disabled) {
  transform: scale(1.1);
}

.bsb-slider[data-bsb-arrow-hover="lift"] .bsb-slider__arrow:hover:not(:disabled):not(.is-disabled) {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.bsb-slider[data-bsb-arrow-hover="nudge"] .bsb-slider__arrow--prev:hover:not(:disabled):not(.is-disabled) {
  transform: translateX(-4px);
}

.bsb-slider[data-bsb-arrow-hover="nudge"] .bsb-slider__arrow--next:hover:not(:disabled):not(.is-disabled) {
  transform: translateX(4px);
}

.bsb-slider[data-bsb-arrow-hover="brighten"] .bsb-slider__arrow:hover:not(:disabled):not(.is-disabled) {
  filter: brightness(1.14);
}

.bsb-slider[data-bsb-arrow-hover="fade"] .bsb-slider__arrow {
  opacity: 0.72;
}

.bsb-slider[data-bsb-arrow-hover="fade"] .bsb-slider__arrow:hover:not(:disabled):not(.is-disabled) {
  opacity: 1;
}

.bsb-slider__arrow-label {
  /* Fill the button — background stays on the button so offset never shrinks the fill */
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  font-size: inherit;
  color: inherit;
  pointer-events: none;
  border-radius: inherit;
  box-sizing: border-box;
  background: transparent;
}

.bsb-slider__arrow-glyph {
  display: block;
  line-height: 0;
  color: inherit;
  /* Design → Arrows → Icon offset Y (moves glyph only, not the fill) */
  --bsb-arrow-icon-y: -1px;
  transform: translateY(var(--bsb-arrow-icon-y));
  transition: color 0.2s ease;
}

/* Shape presets (Design → Arrows → Shape) */
.bsb-slider[data-bsb-arrow-shape="circle"] .bsb-slider__arrow {
  border-radius: 999px;
}

.bsb-slider[data-bsb-arrow-shape="rounded"] .bsb-slider__arrow {
  border-radius: 10px;
}

.bsb-slider[data-bsb-arrow-shape="soft"] .bsb-slider__arrow {
  border-radius: 4px;
}

.bsb-slider[data-bsb-arrow-shape="square"] .bsb-slider__arrow {
  border-radius: 0;
}

.bsb-slider__arrow-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  transition: opacity 0.2s ease;
  background: #111;
}

.bsb-slider__arrow-tip {
  position: absolute;
  z-index: 6;
  width: max-content;
  max-width: min(240px, 42vw);
  padding: 6px 10px;
  border-radius: 4px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Outside — away from the stage */
.bsb-slider[data-bsb-arrow-tip-pos="outside"] .bsb-slider__arrow--prev .bsb-slider__arrow-tip {
  top: 50%;
  bottom: auto;
  left: auto;
  right: calc(100% + 8px);
  transform: translateY(-50%);
  text-align: right;
}

.bsb-slider[data-bsb-arrow-tip-pos="outside"] .bsb-slider__arrow--next .bsb-slider__arrow-tip {
  top: 50%;
  bottom: auto;
  left: calc(100% + 8px);
  right: auto;
  transform: translateY(-50%);
  text-align: left;
}

.bsb-slider[data-bsb-arrow-tip-pos="top"] .bsb-slider__arrow-tip {
  top: auto;
  bottom: calc(100% + 8px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  text-align: center;
}

.bsb-slider[data-bsb-arrow-tip-pos="bottom"] .bsb-slider__arrow-tip {
  top: calc(100% + 8px);
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  text-align: center;
}

.bsb-slider[data-bsb-arrow-tip="1"] .bsb-slider__arrow:hover:not(:disabled):not(.is-disabled) .bsb-slider__arrow-tip:not(:empty):not([hidden]) {
  opacity: 1;
  visibility: visible;
}

.bsb-slider__arrow-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bsb-slider__arrow:disabled,
.bsb-slider__arrow.is-disabled,
.bsb-slider__arrow[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

/* Hover preview: arrow morphs into neighbor slide thumbnail */
.bsb-slider[data-bsb-arrow-preview="hover_preview"] .bsb-slider__arrow:hover:not(:disabled),
.bsb-slider[data-bsb-arrow-preview="1"] .bsb-slider__arrow:hover:not(:disabled) {
  width: var(--bsb-arrow-preview-w, 120px);
  height: var(--bsb-arrow-preview-h, 80px);
  /* Beat Shape radius so the preview can grow into a thumbnail */
  border-radius: 8px !important;
  color: #fff;
}

.bsb-slider[data-bsb-arrow-preview="hover_preview"] .bsb-slider__arrow:hover:not(:disabled) .bsb-slider__arrow-preview,
.bsb-slider[data-bsb-arrow-preview="1"] .bsb-slider__arrow:hover:not(:disabled) .bsb-slider__arrow-preview {
  opacity: 1;
}

.bsb-slider[data-bsb-arrow-preview="hover_preview"] .bsb-slider__arrow:hover:not(:disabled) .bsb-slider__arrow-label,
.bsb-slider[data-bsb-arrow-preview="1"] .bsb-slider__arrow:hover:not(:disabled) .bsb-slider__arrow-label {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

/* Image preview fills the arrow; Shape and Background stay on the button */
.bsb-slider[data-bsb-arrow-preview="image"] .bsb-slider__arrow {
  color: #fff;
}

.bsb-slider[data-bsb-arrow-preview="image"] .bsb-slider__arrow-preview {
  opacity: 1;
}

.bsb-slider[data-bsb-arrow-preview="image"] .bsb-slider__arrow.is-preview-empty .bsb-slider__arrow-preview {
  opacity: 0;
}

.bsb-slider[data-bsb-arrow-preview="image"] .bsb-slider__arrow-label {
  opacity: 0;
}

.bsb-slider[data-bsb-arrow-preview="image"] .bsb-slider__arrow.is-preview-empty .bsb-slider__arrow-label {
  opacity: 1;
}

.bsb-slider[data-bsb-arrow-preview="image"][data-bsb-arrow-icon="1"] .bsb-slider__arrow-label {
  opacity: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

/* Number pagination */
.bsb-slider__pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.bsb-slider__pagination[hidden] {
  display: none !important;
}

/* Overlay on stage */
.bsb-slider__pagination--overlay {
  position: absolute;
  z-index: 30;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.bsb-slider[data-bsb-pagination-pos="bottom_left"] .bsb-slider__pagination--overlay {
  left: 16px;
  right: auto;
  transform: none;
}

.bsb-slider[data-bsb-pagination-pos="bottom_right"] .bsb-slider__pagination--overlay {
  left: auto;
  right: 16px;
  transform: none;
}

.bsb-slider[data-bsb-pagination-pos="bottom_center"] .bsb-slider__pagination--overlay {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* Numbers in thumbs strip slot (replaces miniatures) */
.bsb-slider__pagination--thumbs {
  position: static;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  transform: none;
}

.bsb-slider[data-bsb-pagination-pos="thumbs_left"] .bsb-slider__pagination--thumbs {
  justify-content: flex-start;
}

.bsb-slider[data-bsb-pagination-pos="thumbs_right"] .bsb-slider__pagination--thumbs {
  justify-content: flex-end;
}

.bsb-slider[data-bsb-pagination-pos="thumbs"] .bsb-slider__pagination--thumbs {
  justify-content: center;
}

.bsb-slider__page {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bsb-slider__page.is-active {
  background: #111;
  color: #fff;
  border-color: #111;
}

@media (max-width: 1119px) {
  .bsb-slider {
    --bsb-thumbs-visible: var(--bsb-thumbs-visible-t, 3);
  }
}

@media (max-width: 767px) {
  .bsb-slider {
    --bsb-thumbs-visible: var(--bsb-thumbs-visible-m, 2);
  }
}

