/* docara-shell-source: runtime/component/swiper/css/swiper.css */
/* In the components layer, as every other component: outside it these rules
   outranked every utility, whatever its layer. */
@layer sf.components {
  .swiper {
    contain: inline-size;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    overflow: hidden;
    position: relative;
  }
  .swiper-wrapper {
    display: flex;
    width: 100%;
    inline-size: 100%;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-timing-function: ease;
  }
  /* The slide still changes; it arrives without travelling. */
  @media (prefers-reduced-motion: reduce) {
    .swiper-wrapper {
      transition-duration: 0s;
    }
  }
  .swiper-slide {
    flex: 0 0 100%;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
  }
  .swiper-button-disabled {
    cursor: default;
    opacity: 0.38;
    opacity: var(--sf-opacity-disabled, 0.38);
    pointer-events: none;
  }
}

/* docara-shell-source: runtime/component/slider/css/slider.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
/*
* _var__component_name.scss
* 
* SCSS file containing variables for component styling.
* 
* Used to define default parameters (color, size, etc.)
* that can be overridden in other parts of the project.
* 
* Example usage:
* --sf-icon--fill: 0; // Fill for icon
*/
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
/* In the components layer, as every other component: outside it these rules
   outranked every utility, whatever its layer. */
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider-dots {
    padding-left: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    padding-left: max(var(--sf-slider-dots--padding-inline-start, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-slider-dots {
    padding-left: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    padding-left: max(var(--sf-slider-dots--padding-inline-start, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    }
  }
  .sf-slider-dots:where(:dir(ltr)) {
    padding-left: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    padding-left: max(var(--sf-slider-dots--padding-inline-start, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider-dots {
    padding-right: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    padding-right: max(var(--sf-slider-dots--padding-inline-start, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-slider-dots {
    padding-right: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    padding-right: max(var(--sf-slider-dots--padding-inline-start, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    }
  }
  .sf-slider-dots:where(:dir(rtl)) {
    padding-right: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    padding-right: max(var(--sf-slider-dots--padding-inline-start, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider-dots {
    padding-right: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    padding-right: max(var(--sf-slider-dots--padding-inline-end, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-slider-dots {
    padding-right: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    padding-right: max(var(--sf-slider-dots--padding-inline-end, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    }
  }
  .sf-slider-dots:where(:dir(ltr)) {
    padding-right: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    padding-right: max(var(--sf-slider-dots--padding-inline-end, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider-dots {
    padding-left: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    padding-left: max(var(--sf-slider-dots--padding-inline-end, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-slider-dots {
    padding-left: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    padding-left: max(var(--sf-slider-dots--padding-inline-end, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    }
  }
  .sf-slider-dots:where(:dir(rtl)) {
    padding-left: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    padding-left: max(var(--sf-slider-dots--padding-inline-end, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider-dots {
    border-top-left-radius: var(--sf-slider-dots--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-slider-dots {
    border-top-left-radius: var(--sf-slider-dots--border-start-start-radius);
    }
  }
  .sf-slider-dots:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-slider-dots--border-start-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider-dots {
    border-top-right-radius: var(--sf-slider-dots--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-slider-dots {
    border-top-right-radius: var(--sf-slider-dots--border-start-start-radius);
    }
  }
  .sf-slider-dots:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-slider-dots--border-start-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider-dots {
    border-top-right-radius: var(--sf-slider-dots--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-slider-dots {
    border-top-right-radius: var(--sf-slider-dots--border-start-end-radius);
    }
  }
  .sf-slider-dots:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-slider-dots--border-start-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider-dots {
    border-top-left-radius: var(--sf-slider-dots--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-slider-dots {
    border-top-left-radius: var(--sf-slider-dots--border-start-end-radius);
    }
  }
  .sf-slider-dots:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-slider-dots--border-start-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider-dots {
    border-bottom-left-radius: var(--sf-slider-dots--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-slider-dots {
    border-bottom-left-radius: var(--sf-slider-dots--border-end-start-radius);
    }
  }
  .sf-slider-dots:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-slider-dots--border-end-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider-dots {
    border-bottom-right-radius: var(--sf-slider-dots--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-slider-dots {
    border-bottom-right-radius: var(--sf-slider-dots--border-end-start-radius);
    }
  }
  .sf-slider-dots:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-slider-dots--border-end-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider-dots {
    border-bottom-right-radius: var(--sf-slider-dots--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-slider-dots {
    border-bottom-right-radius: var(--sf-slider-dots--border-end-end-radius);
    }
  }
  .sf-slider-dots:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-slider-dots--border-end-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider-dots {
    border-bottom-left-radius: var(--sf-slider-dots--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-slider-dots {
    border-bottom-left-radius: var(--sf-slider-dots--border-end-end-radius);
    }
  }
  .sf-slider-dots:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-slider-dots--border-end-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider-dots {
    padding-left: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-slider-dots {
    padding-left: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    }
  }
  .sf-slider-dots:where(:dir(ltr)) {
    padding-left: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider-dots {
    padding-right: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-slider-dots {
    padding-right: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    }
  }
  .sf-slider-dots:where(:dir(rtl)) {
    padding-right: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider-dots {
    padding-right: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-slider-dots {
    padding-right: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    }
  }
  .sf-slider-dots:where(:dir(ltr)) {
    padding-right: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider-dots {
    padding-left: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-slider-dots {
    padding-left: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    }
  }
  .sf-slider-dots:where(:dir(rtl)) {
    padding-left: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
  }
  .sf-slider-dots {
    --sf-slider-dots-dot--color: var(--sf-on-surface);
    --sf-slider-dots-dot--target-size: var(--sf-ui-1\/3--control-height);
    gap: max(var(--sf-slider-dots--gap), var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width) + var(--sf-space-1\/4));
    -webkit-padding-start: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
            padding-inline-start: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    -webkit-padding-start: max(var(--sf-slider-dots--padding-inline-start, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
            padding-inline-start: max(var(--sf-slider-dots--padding-inline-start, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    padding-top: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--height)) / 2);
    padding-top: max(var(--sf-slider-dots--padding-top, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--height)) / 2);
    -webkit-padding-end: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
            padding-inline-end: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    -webkit-padding-end: max(var(--sf-slider-dots--padding-inline-end, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
            padding-inline-end: max(var(--sf-slider-dots--padding-inline-end, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--width)) / 2);
    padding-bottom: max(0px, (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--height)) / 2);
    padding-bottom: max(var(--sf-slider-dots--padding-bottom, 0px), (var(--sf-slider-dots-dot--target-size) - var(--sf-slider-dots-dot--height)) / 2);
    border-start-start-radius: var(--sf-slider-dots--border-start-start-radius);
    border-start-end-radius: var(--sf-slider-dots--border-start-end-radius);
    border-end-start-radius: var(--sf-slider-dots--border-end-start-radius);
    border-end-end-radius: var(--sf-slider-dots--border-end-end-radius);
    background-color: var(--sf-slider-dots--background-color);
    box-shadow: var(--sf-slider-dots--box-shadow);
    -webkit-backdrop-filter: var(--sf-slider-dots--backdrop-filter);
            backdrop-filter: var(--sf-slider-dots--backdrop-filter);
  }
  .sf-slider-dots--primary {
    --sf-slider-dots-dot--color: var(--sf-primary);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider-dots .sf-slider-dots-dot {
    border-bottom-right-radius: var(--sf-slider-dots-dot--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-slider-dots .sf-slider-dots-dot {
    border-bottom-right-radius: var(--sf-slider-dots-dot--border-end-end-radius);
    }
  }
  .sf-slider-dots .sf-slider-dots-dot:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-slider-dots-dot--border-end-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider-dots .sf-slider-dots-dot {
    border-bottom-left-radius: var(--sf-slider-dots-dot--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-slider-dots .sf-slider-dots-dot {
    border-bottom-left-radius: var(--sf-slider-dots-dot--border-end-end-radius);
    }
  }
  .sf-slider-dots .sf-slider-dots-dot:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-slider-dots-dot--border-end-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider-dots .sf-slider-dots-dot {
    border-bottom-left-radius: var(--sf-slider-dots-dot--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-slider-dots .sf-slider-dots-dot {
    border-bottom-left-radius: var(--sf-slider-dots-dot--border-end-start-radius);
    }
  }
  .sf-slider-dots .sf-slider-dots-dot:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-slider-dots-dot--border-end-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider-dots .sf-slider-dots-dot {
    border-bottom-right-radius: var(--sf-slider-dots-dot--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-slider-dots .sf-slider-dots-dot {
    border-bottom-right-radius: var(--sf-slider-dots-dot--border-end-start-radius);
    }
  }
  .sf-slider-dots .sf-slider-dots-dot:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-slider-dots-dot--border-end-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider-dots .sf-slider-dots-dot {
    border-top-right-radius: var(--sf-slider-dots-dot--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-slider-dots .sf-slider-dots-dot {
    border-top-right-radius: var(--sf-slider-dots-dot--border-start-end-radius);
    }
  }
  .sf-slider-dots .sf-slider-dots-dot:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-slider-dots-dot--border-start-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider-dots .sf-slider-dots-dot {
    border-top-left-radius: var(--sf-slider-dots-dot--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-slider-dots .sf-slider-dots-dot {
    border-top-left-radius: var(--sf-slider-dots-dot--border-start-end-radius);
    }
  }
  .sf-slider-dots .sf-slider-dots-dot:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-slider-dots-dot--border-start-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider-dots .sf-slider-dots-dot {
    border-top-left-radius: var(--sf-slider-dots-dot--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-slider-dots .sf-slider-dots-dot {
    border-top-left-radius: var(--sf-slider-dots-dot--border-start-start-radius);
    }
  }
  .sf-slider-dots .sf-slider-dots-dot:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-slider-dots-dot--border-start-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider-dots .sf-slider-dots-dot {
    border-top-right-radius: var(--sf-slider-dots-dot--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-slider-dots .sf-slider-dots-dot {
    border-top-right-radius: var(--sf-slider-dots-dot--border-start-start-radius);
    }
  }
  .sf-slider-dots .sf-slider-dots-dot:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-slider-dots-dot--border-start-start-radius);
  }
  .sf-slider-dots .sf-slider-dots-dot {
    position: relative;
    flex-shrink: 0;
    --sf-slider-dots-dot--background-color: transparent;
    --sf-slider-dots-dot--border-end-end-radius: var(--sf-radius-circle);
    --sf-slider-dots-dot--border-end-start-radius: var(--sf-radius-circle);
    --sf-slider-dots-dot--border-start-end-radius: var(--sf-radius-circle);
    --sf-slider-dots-dot--border-start-start-radius: var(--sf-radius-circle);
    background-color: var(--sf-slider-dots-dot--background-color);
    color: var(--sf-slider-dots-dot--color);
    border: var(--sf-px) solid currentColor;
    border: var(--sf-slider-dots-dot--stroke-width, var(--sf-px)) solid currentColor;
    outline: none;
    border-end-end-radius: var(--sf-slider-dots-dot--border-end-end-radius);
    border-end-start-radius: var(--sf-slider-dots-dot--border-end-start-radius);
    border-start-end-radius: var(--sf-slider-dots-dot--border-start-end-radius);
    border-start-start-radius: var(--sf-slider-dots-dot--border-start-start-radius);
    height: var(--sf-slider-dots-dot--height);
    width: var(--sf-slider-dots-dot--width);
  }
  .sf-slider-dots .sf-slider-dots-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: max(100%, var(--sf-slider-dots-dot--target-size));
    height: max(100%, var(--sf-slider-dots-dot--target-size));
  }
  .sf-slider-dots .sf-slider-dots-dot.active {
    --sf-slider-dots-dot--background-color: var(--sf-slider-dots-dot--color);
  }
  .sf-slider-dots .sf-slider-dots-dot.focus-visible {
    /* The dots are small and close together, so the ring is clamped to half the gap
       between them. Colour and style stay the shared ones. */
    outline: min(var(--sf-focus--width), var(--sf-slider-dots--gap) / 2) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: 0;
  }
  .sf-slider-dots .sf-slider-dots-dot:focus-visible {
    /* The dots are small and close together, so the ring is clamped to half the gap
       between them. Colour and style stay the shared ones. */
    outline: min(var(--sf-focus--width), var(--sf-slider-dots--gap) / 2) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: 0;
  }
  @media (forced-colors: active) {
    .sf-slider-dots .sf-slider-dots-dot {
      forced-color-adjust: none;
      color: ButtonText;
      border-color: ButtonText;
      background-color: ButtonFace;
    }
    .sf-slider-dots .sf-slider-dots-dot.active {
      border-color: Highlight;
      background-color: Highlight;
    }
    .sf-slider-dots .sf-slider-dots-dot.focus-visible {
      outline-color: Highlight;
    }
    .sf-slider-dots .sf-slider-dots-dot:focus-visible {
      outline-color: Highlight;
    }
  }
  .sf-slider-dots.sf-slider-dots--size-1.sf-slider-dots--primary.sf-slider-dots--framed.sf-slider-dots--light {
    --sf-slider-dots--background-color: var(--sf-primary);
    --sf-slider-dots--padding-bottom: var(--sf-ui-1--space-y);
    --sf-slider-dots--padding-inline-end: var(--sf-ui-1--space-y);
    --sf-slider-dots--padding-inline-start: var(--sf-ui-1--space-y);
    --sf-slider-dots--padding-top: var(--sf-ui-1--space-y);
  }
  .sf-slider-dots.sf-slider-dots--primary.sf-slider-dots--framed.sf-slider-dots--light {
    --sf-slider-dots-dot--color: var(--sf-on-primary);
  }
  .sf-slider-dots.sf-slider-dots--size-1.sf-slider-dots--primary.sf-slider-dots--framed.sf-slider-dots--dark {
    --sf-slider-dots--background-color: var(--sf-primary-container);
    --sf-slider-dots--padding-bottom: var(--sf-ui-1--space-y);
    --sf-slider-dots--padding-inline-end: var(--sf-ui-1--space-y);
    --sf-slider-dots--padding-inline-start: var(--sf-ui-1--space-y);
    --sf-slider-dots--padding-top: var(--sf-ui-1--space-y);
  }
  .sf-slider-dots.sf-slider-dots--primary.sf-slider-dots--framed.sf-slider-dots--dark {
    --sf-slider-dots-dot--color: var(--sf-on-primary-container);
  }
  .sf-slider-dots.sf-slider-dots--size-1.sf-slider-dots--clear.sf-slider-dots--framed.sf-slider-dots--dark {
    --sf-slider-dots--backdrop-filter: var(--sf-ui-blur-medium);
    --sf-slider-dots--background-color: var(--sf-surface-inverse);
    --sf-slider-dots--box-shadow: var(--sf-blur-medium);
    --sf-slider-dots--padding-bottom: var(--sf-ui-1--space-y);
    --sf-slider-dots--padding-inline-end: var(--sf-ui-1--space-y);
    --sf-slider-dots--padding-inline-start: var(--sf-ui-1--space-y);
    --sf-slider-dots--padding-top: var(--sf-ui-1--space-y);
  }
  .sf-slider-dots.sf-slider-dots--clear.sf-slider-dots--dark {
    --sf-slider-dots-dot--color: var(--sf-on-surface-inverse);
  }
  .sf-slider-dots.sf-slider-dots--size-1.sf-slider-dots--clear.sf-slider-dots--framed.sf-slider-dots--light {
    --sf-slider-dots--backdrop-filter: var(--sf-ui-blur-medium);
    --sf-slider-dots--background-color: var(--sf-surface-container);
    --sf-slider-dots--box-shadow: var(--sf-blur-medium);
    --sf-slider-dots--padding-bottom: var(--sf-ui-1--space-y);
    --sf-slider-dots--padding-inline-end: var(--sf-ui-1--space-y);
    --sf-slider-dots--padding-inline-start: var(--sf-ui-1--space-y);
    --sf-slider-dots--padding-top: var(--sf-ui-1--space-y);
  }
  .sf-slider-dots.sf-slider-dots--clear.sf-slider-dots--light {
    --sf-slider-dots-dot--color: var(--sf-on-surface);
  }
  .sf-slider-dots.sf-slider-dots--size-2.sf-slider-dots--primary.sf-slider-dots--framed.sf-slider-dots--light {
    --sf-slider-dots--background-color: var(--sf-primary);
    --sf-slider-dots--padding-bottom: var(--sf-ui-2--space-y);
    --sf-slider-dots--padding-inline-end: var(--sf-ui-2--space-y);
    --sf-slider-dots--padding-inline-start: var(--sf-ui-2--space-y);
    --sf-slider-dots--padding-top: var(--sf-ui-2--space-y);
  }
  .sf-slider-dots.sf-slider-dots--size-2.sf-slider-dots--primary.sf-slider-dots--framed.sf-slider-dots--dark {
    --sf-slider-dots--background-color: var(--sf-primary-container);
    --sf-slider-dots--padding-bottom: var(--sf-ui-2--space-y);
    --sf-slider-dots--padding-inline-end: var(--sf-ui-2--space-y);
    --sf-slider-dots--padding-inline-start: var(--sf-ui-2--space-y);
    --sf-slider-dots--padding-top: var(--sf-ui-2--space-y);
  }
  .sf-slider-dots.sf-slider-dots--size-2.sf-slider-dots--clear.sf-slider-dots--framed.sf-slider-dots--dark {
    --sf-slider-dots--backdrop-filter: var(--sf-ui-blur-medium);
    --sf-slider-dots--background-color: var(--sf-surface-inverse);
    --sf-slider-dots--box-shadow: var(--sf-blur-medium);
    --sf-slider-dots--padding-bottom: var(--sf-ui-2--space-y);
    --sf-slider-dots--padding-inline-end: var(--sf-ui-2--space-y);
    --sf-slider-dots--padding-inline-start: var(--sf-ui-2--space-y);
    --sf-slider-dots--padding-top: var(--sf-ui-2--space-y);
  }
  .sf-slider-dots.sf-slider-dots--size-2.sf-slider-dots--clear.sf-slider-dots--framed.sf-slider-dots--light {
    --sf-slider-dots--backdrop-filter: var(--sf-ui-blur-medium);
    --sf-slider-dots--background-color: var(--sf-surface-container);
    --sf-slider-dots--box-shadow: var(--sf-blur-medium);
    --sf-slider-dots--padding-bottom: var(--sf-ui-2--space-y);
    --sf-slider-dots--padding-inline-end: var(--sf-ui-2--space-y);
    --sf-slider-dots--padding-inline-start: var(--sf-ui-2--space-y);
    --sf-slider-dots--padding-top: var(--sf-ui-2--space-y);
  }
  .sf-slider-dots--size-1 {
    --sf-slider-dots--gap: var(--sf-space-1\/2);
    --sf-slider-dots-dot--height: var(--sf-a8);
    --sf-slider-dots-dot--width: var(--sf-a8);
  }
  .sf-slider-dots--size-2 {
    --sf-slider-dots--gap: var(--sf-space-1);
    --sf-slider-dots-dot--height: var(--sf-b2);
    --sf-slider-dots-dot--width: var(--sf-b2);
  }
  .sf-slider-dots--framed {
    --sf-slider-dots--border-end-end-radius: var(--sf-radius-3);
    --sf-slider-dots--border-end-start-radius: var(--sf-radius-3);
    --sf-slider-dots--border-start-end-radius: var(--sf-radius-3);
    --sf-slider-dots--border-start-start-radius: var(--sf-radius-3);
  }
}
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
/* In the components layer, as every other component: outside it these rules
   outranked every utility, whatever its layer. */
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  .sf-slider-arrows {
    background-color: transparent;
    background-color: var(--sf-slider-arrows--background-color, transparent);
    box-shadow: var(--sf-slider-arrows--box-shadow);
    -webkit-backdrop-filter: var(--sf-slider-arrows--backdrop-filter);
            backdrop-filter: var(--sf-slider-arrows--backdrop-filter);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider-arrows .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-slider-arrows .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--border-end-end-radius);
    }
  }
  .sf-slider-arrows .sf-icon-button:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-icon-button--border-end-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider-arrows .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-slider-arrows .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--border-end-end-radius);
    }
  }
  .sf-slider-arrows .sf-icon-button:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-icon-button--border-end-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider-arrows .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-slider-arrows .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--border-end-start-radius);
    }
  }
  .sf-slider-arrows .sf-icon-button:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-icon-button--border-end-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider-arrows .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-slider-arrows .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--border-end-start-radius);
    }
  }
  .sf-slider-arrows .sf-icon-button:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-icon-button--border-end-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider-arrows .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-slider-arrows .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--border-start-end-radius);
    }
  }
  .sf-slider-arrows .sf-icon-button:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-icon-button--border-start-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider-arrows .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-slider-arrows .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--border-start-end-radius);
    }
  }
  .sf-slider-arrows .sf-icon-button:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-icon-button--border-start-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider-arrows .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-slider-arrows .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--border-start-start-radius);
    }
  }
  .sf-slider-arrows .sf-icon-button:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-icon-button--border-start-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider-arrows .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-slider-arrows .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--border-start-start-radius);
    }
  }
  .sf-slider-arrows .sf-icon-button:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-icon-button--border-start-start-radius);
  }
  .sf-slider-arrows .sf-icon-button {
    --sf-icon-button--border-end-end-radius: var(--sf-radius-rounded);
    --sf-icon-button--border-end-start-radius: var(--sf-radius-rounded);
    --sf-icon-button--border-start-end-radius: var(--sf-radius-rounded);
    --sf-icon-button--border-start-start-radius: var(--sf-radius-rounded);
    background-color: var(--sf-icon-button--background-color);
    border-end-end-radius: var(--sf-icon-button--border-end-end-radius);
    border-end-start-radius: var(--sf-icon-button--border-end-start-radius);
    border-start-end-radius: var(--sf-icon-button--border-start-end-radius);
    border-start-start-radius: var(--sf-icon-button--border-start-start-radius);
  }
  .sf-slider-arrows.sf-slider-arrows--light .sf-icon-button.sf-icon-button--link.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-surface-0);
  }
  .sf-slider-arrows--light, .sf-slider-arrows--dark {
    --sf-slider-arrows--backdrop-filter: var(--sf-ui-blur-medium);
    --sf-slider-arrows--box-shadow: var(--sf-blur-medium);
  }
}
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
/* In the components layer, as every other component: outside it these rules
   outranked every utility, whatever its layer. */
@layer sf.components {
  .sf-slider {
    --sf-slider--duration: var(--sf-duration-normal);
    --sf-slider--space-between: var(--sf-space-1);
    --sf-slider-thumbnails--space-between: var(--sf-space-1\/2);
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-1);
    gap: var(--sf-slider--gap, var(--sf-space-1));
    min-width: 0;
    position: relative;
    width: 100%;
  }
  .sf-slider .sf-slider-main.swiper,
  .sf-slider .swiper {
    display: block;
    min-width: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  .sf-slider .sf-slider-thumbnails.swiper {
    margin-left: auto;
    margin-right: auto;
    margin-inline: auto;
    max-width: 100%;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    /* The strip is as wide as its thumbnails. The base .swiper rule contains its
       inline size, and a fit-content box under inline-size containment is zero
       wide: every thumbnail drew 0px and could not be pressed. */
    contain: none;
  }
  .sf-slider .swiper-wrapper {
    box-sizing: border-box;
    display: flex;
  }
  .sf-slider .sf-slider-thumbnails .swiper-wrapper {
    align-items: center;
    justify-content: center;
  }
  .sf-slider .swiper-slide {
    display: block;
    flex-shrink: 0;
    min-width: 0;
    width: 100%;
  }
  .sf-slider .sf-slider-slide {
    width: 100%;
    width: var(--sf-slider-slide--width, 100%);
    height: 100%;
    height: var(--sf-slider-slide--height, 100%);
    display: block;
    min-height: var(--sf-f2);
    min-height: var(--sf-slider-slide--min-height, var(--sf-f2));
  }
  .sf-slider .sf-slider-slide img {
    width: 100%;
    width: var(--sf-slider-slide-img--width, 100%);
    height: 100%;
    height: var(--sf-slider-slide-img--height, 100%);
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-fit: var(--sf-slider-slide-img--object-fit, cover);
       object-fit: var(--sf-slider-slide-img--object-fit, cover);
  }
  .sf-slider .sf-slider-thumbnail {
    height: var(--sf-d2);
    block-size: var(--sf-d2);
    height: var(--sf-d2);
    height: var(--sf-slider-thumbnail--block-size, var(--sf-d2));
    block-size: var(--sf-slider-thumbnail--block-size, var(--sf-d2));
    border-radius: var(--sf-radius-square);
    border-radius: var(--sf-slider-thumbnail--border-radius, var(--sf-radius-square));
    display: block;
    width: var(--sf-d2);
    inline-size: var(--sf-d2);
    width: var(--sf-d2);
    width: var(--sf-slider-thumbnail--inline-size, var(--sf-d2));
    inline-size: var(--sf-slider-thumbnail--inline-size, var(--sf-d2));
    min-height: 0;
    overflow: hidden;
  }
  .sf-slider .sf-slider-thumbnail > img,
  .sf-slider .sf-slider-thumbnail img {
    height: 100%;
    block-size: 100%;
    display: block;
    width: 100%;
    inline-size: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .sf-slider .sf-slider-controls {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 2;
  }
  .sf-slider .sf-slider-controls .sf-slider-arrows {
    top: 50%;
    inset-block-start: 50%;
    left: 0;
    right: 0;
    inset-inline: 0;
    pointer-events: none;
    position: absolute;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .sf-slider .sf-slider-controls .sf-slider-arrows .sf-icon-button {
    top: 50%;
    inset-block-start: 50%;
    pointer-events: auto;
    position: absolute;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider .sf-slider-controls .sf-slider-button-prev {
    left: var(--sf-space-1);
    left: var(--sf-slider-arrow-offset-inline, var(--sf-space-1));
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-slider .sf-slider-controls .sf-slider-button-prev {
    left: var(--sf-space-1);
    left: var(--sf-slider-arrow-offset-inline, var(--sf-space-1));
    }
  }
  .sf-slider .sf-slider-controls .sf-slider-button-prev:where(:dir(ltr)) {
    left: var(--sf-space-1);
    left: var(--sf-slider-arrow-offset-inline, var(--sf-space-1));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider .sf-slider-controls .sf-slider-button-prev {
    right: var(--sf-space-1);
    right: var(--sf-slider-arrow-offset-inline, var(--sf-space-1));
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-slider .sf-slider-controls .sf-slider-button-prev {
    right: var(--sf-space-1);
    right: var(--sf-slider-arrow-offset-inline, var(--sf-space-1));
    }
  }
  .sf-slider .sf-slider-controls .sf-slider-button-prev:where(:dir(rtl)) {
    right: var(--sf-space-1);
    right: var(--sf-slider-arrow-offset-inline, var(--sf-space-1));
  }
  .sf-slider .sf-slider-controls .sf-slider-button-prev {
    inset-inline-start: var(--sf-space-1);
    inset-inline-start: var(--sf-slider-arrow-offset-inline, var(--sf-space-1));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider .sf-slider-controls .sf-slider-button-next {
    right: var(--sf-space-1);
    right: var(--sf-slider-arrow-offset-inline, var(--sf-space-1));
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-slider .sf-slider-controls .sf-slider-button-next {
    right: var(--sf-space-1);
    right: var(--sf-slider-arrow-offset-inline, var(--sf-space-1));
    }
  }
  .sf-slider .sf-slider-controls .sf-slider-button-next:where(:dir(ltr)) {
    right: var(--sf-space-1);
    right: var(--sf-slider-arrow-offset-inline, var(--sf-space-1));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider .sf-slider-controls .sf-slider-button-next {
    left: var(--sf-space-1);
    left: var(--sf-slider-arrow-offset-inline, var(--sf-space-1));
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-slider .sf-slider-controls .sf-slider-button-next {
    left: var(--sf-space-1);
    left: var(--sf-slider-arrow-offset-inline, var(--sf-space-1));
    }
  }
  .sf-slider .sf-slider-controls .sf-slider-button-next:where(:dir(rtl)) {
    left: var(--sf-space-1);
    left: var(--sf-slider-arrow-offset-inline, var(--sf-space-1));
  }
  .sf-slider .sf-slider-controls .sf-slider-button-next {
    inset-inline-end: var(--sf-space-1);
    inset-inline-end: var(--sf-slider-arrow-offset-inline, var(--sf-space-1));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-slider .sf-slider-controls .sf-slider-dots,html:not([dir="rtl"])
  .sf-slider .sf-slider-controls .sf-slider-pagination {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-slider .sf-slider-controls .sf-slider-dots,html:not([dir="rtl"])
  .sf-slider .sf-slider-controls .sf-slider-pagination {
    left: 50%;
    }
  }
  .sf-slider .sf-slider-controls .sf-slider-dots:where(:dir(ltr)),
  .sf-slider .sf-slider-controls .sf-slider-pagination:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-slider .sf-slider-controls .sf-slider-dots,[dir="rtl"]
  .sf-slider .sf-slider-controls .sf-slider-pagination {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-slider .sf-slider-controls .sf-slider-dots,[dir="rtl"]
  .sf-slider .sf-slider-controls .sf-slider-pagination {
    right: 50%;
    }
  }
  .sf-slider .sf-slider-controls .sf-slider-dots:where(:dir(rtl)),
  .sf-slider .sf-slider-controls .sf-slider-pagination:where(:dir(rtl)) {
    right: 50%;
  }
  .sf-slider .sf-slider-controls .sf-slider-dots,
  .sf-slider .sf-slider-controls .sf-slider-pagination {
    bottom: var(--sf-space-1);
    inset-block-end: var(--sf-space-1);
    bottom: var(--sf-space-1);
    bottom: var(--sf-slider-dots-offset-block, var(--sf-space-1));
    inset-block-end: var(--sf-slider-dots-offset-block, var(--sf-space-1));
    inset-inline-start: 50%;
    pointer-events: auto;
    position: absolute;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .sf-slider .sf-slider-dots.swiper-pagination-lock,
  .sf-slider .sf-slider-arrows .sf-icon-button.swiper-button-lock {
    display: none;
  }
  .sf-slider--content .sf-slider-slide {
    height: auto;
    height: var(--sf-slider-slide--height, auto);
    min-height: 0;
    min-height: var(--sf-slider-slide--min-height, 0);
  }
  .sf-slider--content .sf-slider-controls {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sf-space-1);
    gap: var(--sf-slider--gap, var(--sf-space-1));
  }
  .sf-slider--content .sf-slider-controls .sf-slider-arrows {
    display: flex;
    align-items: center;
    gap: var(--sf-space-1);
  }
  .sf-slider--content .sf-slider-controls .sf-slider-arrows,
  .sf-slider--content .sf-slider-controls .sf-slider-arrows .sf-icon-button,
  .sf-slider--content .sf-slider-controls .sf-slider-dots,
  .sf-slider--content .sf-slider-controls .sf-slider-pagination {
    position: static;
    -webkit-transform: none;
            transform: none;
  }
  .sf-slider .sf-slider-arrows .sf-icon-button.swiper-button-disabled {
    opacity: 0.4;
    pointer-events: none;
  }
  .sf-slider .sf-slider-thumbnails .swiper-slide {
    cursor: pointer;
    flex: 0 0 auto;
    /* The slider writes each slide's flex-basis inline (100% / slides per view);
       a thumbnail is its own size. */
    flex-basis: auto !important;
    opacity: 0.72;
    opacity: var(--sf-slider-thumbnails-slide--opacity, 0.72);
    width: var(--sf-d2) !important;
    width: var(--sf-slider-thumbnail--inline-size, var(--sf-d2)) !important;
  }
  .sf-slider .sf-slider-thumbnails .swiper-slide-thumb-active {
    opacity: 1;
    opacity: var(--sf-slider-thumbnails-slide-active--opacity, 1);
  }
}