/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 523:2 Unexpected "{"
Line 523:3 Expected identifier but found "%"
Line 525:15 Unexpected "{"
Line 525:24 Expected ":"
Line 526:15 Unexpected "{"
Line 526:24 Expected ":"
Line 527:15 Unexpected "{"
Line 527:24 Expected ":"
... and 28 more hidden warnings

**/
{%- style -%}
  /* --- Custom Styles Start --- */
  /* Make slideshow component relative for absolute positioning of arrows */
  .slideshow-component {
    position: relative;
  }

  /* Style for the link wrapping the entire slide */
  .slideshow__slide-link {
    display: block;
    position: relative; /* Needed for z-index stacking */
    z-index: 1; /* Base layer for the link */
    color: inherit; /* Inherit text color */
    text-decoration: none; /* Remove underline */
  }

  /* Ensure text wrapper is above the main link layer */
  .slideshow__slide-link .slideshow__text-wrapper {
     position: relative; /* Needed for z-index */
     z-index: 2; /* Text/button layer above link */
     /* Allow clicks to pass through the text wrapper unless it's the button */
     pointer-events: none;
  }

   /* Make sure the actual button inside the text wrapper is clickable */
   .slideshow__slide-link .banner__buttons,
   .slideshow__slide-link .banner__buttons .button {
     pointer-events: auto;
   }

  /* Style for the new middle navigation arrows */
  .slider-button--middle {
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    z-index: 3; /* Ensure arrows are above slide content and link */
    background-color: rgba(var(--color-background), 0.75); /* Use theme color variables with transparency */
    color: rgba(var(--color-foreground), 0.75);
    border: 0.1rem solid rgba(var(--color-foreground), 0.1);
    border-radius: 50%; /* Make them circular */
    width: 4.5rem; /* Adjust size as needed */
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; /* Added transform to transition */
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
    pointer-events: auto; /* Explicitly ensure clickable */
  }
  .slider-button--middle:hover {
    background-color: rgba(var(--color-background), 0.9);
    color: rgb(var(--color-foreground));
    box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.15);
    /* Optional: slight scale on hover */
    /* transform: translateY(-50%) scale(1.05); */
  }
  .slider-button--middle .svg-wrapper {
    width: 1.5rem; /* Adjust icon size */
    height: 1.5rem;
    transition: transform 0.3s ease; /* Smooth rotation */
  }

  /* Position previous arrow on the left */
  .slider-button--middle.slider-button--prev {
    left: 2rem; /* Adjust spacing from edge */
  }
  /* Rotate the caret icon for the previous button (assuming base icon points right >) */
  .slider-button--middle.slider-button--prev .svg-wrapper {
     transform: rotate(180deg); /* Pointing left */
  }

  /* Position next arrow on the right */
  .slider-button--middle.slider-button--next {
    right: 2rem; /* Adjust spacing from edge */
  }
  /* Rotate the caret icon for the next button (assuming base icon points right >) */
  .slider-button--middle.slider-button--next .svg-wrapper {
     transform: rotate(0deg); /* Pointing right */
  }

  /* Responsive adjustments for smaller screens */
  @media screen and (max-width: 749px) {
    .slider-button--middle {
      width: 3.8rem;
      height: 3.8rem;
    }
    .slider-button--middle.slider-button--prev {
       left: 1rem;
    }
    .slider-button--middle.slider-button--next {
       right: 1rem;
    }
    /* Optional: Adjust vertical position slightly on mobile if text is below image */
    .mobile-text-below .slider-button--middle {
       /* Example: top: 45%; */
    }
    
    /* Hide slideshow arrows when mobile menu is open */
    /* Target all slider buttons when menu drawer is open */
    body:has(#Details-menu-drawer-container[open]) .slider-button--middle {
      display: none !important;
    }
    
    /* Fallback for browsers without :has() support */
    #Details-menu-drawer-container[open] ~ main .slider-button--middle,
    #Details-menu-drawer-container[open] ~ * .slider-button--middle,
    details.menu-drawer-container[open] ~ * .slider-button--middle {
      display: none !important;
    }
    
    /* Additional fallback - hide when menu drawer details is expanded */
    details[id*="menu-drawer"][open] ~ * .slider-button--middle,
    header-drawer details[open] ~ * .slider-button--middle {
      display: none !important;
    }
  }
  /* --- Custom Styles End --- */


  /* --- General Slider Component Styles Start (from input) --- */
  slider-component {
    --desktop-margin-left-first-item: max(
      5rem,
      calc((100vw - var(--page-width) + 10rem - var(--grid-desktop-horizontal-spacing)) / 2)
    );
    position: relative;
    display: block;
  }

  slider-component.slider-component-full-width {
    --desktop-margin-left-first-item: 1.5rem;
  }

  @media screen and (max-width: 749px) {
    slider-component.page-width {
      padding: 0 1.5rem;
    }
  }

  @media screen and (min-width: 749px) and (max-width: 990px) {
    slider-component.page-width {
      padding: 0 5rem;
    }
  }

  .slider__slide {
    --focus-outline-padding: 0.5rem;
    --shadow-padding-top: calc((var(--shadow-vertical-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible));
    --shadow-padding-bottom: calc((var(--shadow-vertical-offset) + var(--shadow-blur-radius)) * var(--shadow-visible));
    scroll-snap-align: start;
    flex-shrink: 0;
    padding-bottom: 0;
  }

  @media screen and (max-width: 749px) {
    .slider.slider--mobile {
      position: relative;
      flex-wrap: inherit;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scroll-padding-left: 1.5rem;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 1rem;
    }

    /* Fix to show some space at the end of our sliders in all browsers */
    .slider--mobile:after {
      content: '';
      width: 0;
      padding-left: 1.5rem;
    }

    .slider.slider--mobile .slider__slide {
      margin-bottom: 0;
      padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
      padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
    }

    .slider.slider--mobile.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
      padding-bottom: var(--focus-outline-padding);
    }

    .slider.slider--mobile.contains-content-container .slider__slide {
      --focus-outline-padding: 0rem;
    }
  }

  @media screen and (min-width: 750px) {
    .slider.slider--tablet-up {
      position: relative;
      flex-wrap: inherit;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scroll-padding-left: 1rem;
      -webkit-overflow-scrolling: touch;
    }

    .slider.slider--tablet-up .slider__slide {
      margin-bottom: 0;
    }
  }

  @media screen and (max-width: 989px) {
    .slider.slider--tablet {
      position: relative;
      flex-wrap: inherit;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scroll-padding-left: 1.5rem;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 1rem;
    }

    /* Fix to show some space at the end of our sliders in all browsers */
    .slider--tablet:after {
      content: '';
      width: 0;
      padding-left: 1.5rem;
      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
    }

    .slider.slider--tablet .slider__slide {
      margin-bottom: 0;
      padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
      padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
    }

    .slider.slider--tablet.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
      padding-bottom: var(--focus-outline-padding);
    }

    .slider.slider--tablet.contains-content-container .slider__slide {
      --focus-outline-padding: 0rem;
    }
  }

  .slider--everywhere {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  .slider.slider--everywhere .slider__slide {
    margin-bottom: 0;
    scroll-snap-align: center; /* Note: Slideshow uses start, this uses center */
  }

  @media screen and (min-width: 990px) {
    .slider-component-desktop.page-width {
      max-width: none;
    }

    .slider--desktop {
      position: relative;
      flex-wrap: inherit;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 1rem;
      scroll-padding-left: var(--desktop-margin-left-first-item);
    }

    /* Fix to show some space at the end of our sliders in all browsers */
    .slider--desktop:after {
      content: '';
      width: 0;
      padding-left: 5rem;
      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
    }

    .slider.slider--desktop .slider__slide {
      margin-bottom: 0;
      padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
      padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
    }

    .slider--desktop .slider__slide:first-child {
      margin-left: var(--desktop-margin-left-first-item);
      scroll-margin-left: var(--desktop-margin-left-first-item);
    }

    .slider-component-full-width .slider--desktop {
      scroll-padding-left: 1.5rem;
    }

    .slider-component-full-width .slider--desktop .slider__slide:first-child {
      margin-left: 1.5rem;
      scroll-margin-left: 1.5rem;
    }

    /* Fix to show some space at the end of our sliders in all browsers */
    .slider-component-full-width .slider--desktop:after {
      padding-left: 1.5rem;
    }

    .slider--desktop.grid--5-col-desktop .grid__item {
      width: calc((100% - var(--desktop-margin-left-first-item)) / 5 - var(--grid-desktop-horizontal-spacing) * 2);
    }

    .slider--desktop.grid--4-col-desktop .grid__item {
      width: calc((100% - var(--desktop-margin-left-first-item)) / 4 - var(--grid-desktop-horizontal-spacing) * 3);
    }

    .slider--desktop.grid--3-col-desktop .grid__item {
      width: calc((100% - var(--desktop-margin-left-first-item)) / 3 - var(--grid-desktop-horizontal-spacing) * 4);
    }

    .slider--desktop.grid--2-col-desktop .grid__item {
      width: calc((100% - var(--desktop-margin-left-first-item)) / 2 - var(--grid-desktop-horizontal-spacing) * 5);
    }

    .slider--desktop.grid--1-col-desktop .grid__item {
      width: calc((100% - var(--desktop-margin-left-first-item)) - var(--grid-desktop-horizontal-spacing) * 9);
    }

    .slider.slider--desktop.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
      padding-bottom: var(--focus-outline-padding);
    }

    .slider.slider--desktop.contains-content-container .slider__slide {
      --focus-outline-padding: 0rem;
    }
  }

  @media (prefers-reduced-motion) {
    .slider {
      scroll-behavior: auto;
    }
  }

  /* Scrollbar */

  .slider {
    scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .slider::-webkit-scrollbar {
    height: 0.4rem;
    width: 0.4rem;
    display: none;
  }

  .slider::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-foreground));
    border-radius: 0.4rem;
    border: 0;
  }

  .slider::-webkit-scrollbar-track {
    background: rgba(var(--color-foreground), 0.04);
    border-radius: 0.4rem;
  }

  .slider-counter {
    display: flex;
    display:none;
    justify-content: center;
    min-width: 4.4rem;
  }

  @media screen and (min-width: 750px) {
    .slider-counter--dots {
      margin: 0 1.2rem;
    }
  }

  .slider-counter__link {
    padding: 1rem;
  }

  @media screen and (max-width: 749px) {
    .slider-counter__link {
      padding: 0.7rem;
    }
  }

  .slider-counter__link--dots .dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 0.1rem solid rgba(var(--color-foreground), 0.5);
    padding: 0;
    display: block;
  }

  .slider-counter__link--active.slider-counter__link--dots .dot {
    background-color: rgb(var(--color-foreground));
  }

  @media screen and (forced-colors: active) {
    .slider-counter__link--active.slider-counter__link--dots .dot {
      background-color: CanvasText;
    }
  }

  .slider-counter__link--dots:not(.slider-counter__link--active):hover .dot {
    border-color: rgb(var(--color-foreground));
  }

  .slider-counter__link--dots .dot,
  .slider-counter__link--numbers {
    transition: transform 0.2s ease-in-out;
  }

  .slider-counter__link--active.slider-counter__link--numbers,
  .slider-counter__link--dots:not(.slider-counter__link--active):hover .dot,
  .slider-counter__link--numbers:hover {
    transform: scale(1.1);
  }

  .slider-counter__link--numbers {
    color: rgba(var(--color-foreground), 0.5);
    text-decoration: none;
  }

  .slider-counter__link--numbers:hover {
    color: rgb(var(--color-foreground));
  }

  .slider-counter__link--active.slider-counter__link--numbers {
    text-decoration: underline;
    color: rgb(var(--color-foreground));
  }

  .slider-buttons {
    
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  @media screen and (min-width: 990px) {
    .slider:not(.slider--everywhere):not(.slider--desktop) + .slider-buttons {
      display: none;
    }
  }

  @media screen and (max-width: 989px) {
    .slider--desktop:not(.slider--tablet) + .slider-buttons {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .slider--mobile + .slider-buttons {
      display: none;
    }
  }

  .slider-button { /* Styles for the default top/bottom buttons */
    color: white;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .slider-button:not([disabled]):hover {
    color: rgb(var(--color-foreground));
  }

  /* Note: The theme might use '.svg-wrapper' or '.icon' inside buttons.
     The styles below target '.icon'. Adjust if your theme uses '.svg-wrapper'
     for the default buttons as well. */
  .slider-button .icon {
    height: 4rem;
  }

  .slider-button[disabled] .icon {
    color: rgba(var(--color-foreground), 0.3);
    cursor: not-allowed;
  }

  .slider-button--next .icon {
    transform: rotate(-90deg);
  }

  .slider-button--prev .icon {
    transform: rotate(90deg);
  }

  .slider-button--next:not([disabled]):hover .icon {
    transform: rotate(-90deg) scale(1.1);
  }

  .slider-button--prev:not([disabled]):hover .icon {
    transform: rotate(90deg) scale(1.1);
  }
  /* --- General Slider Component Styles End --- */


  /* --- Original Liquid Styles Start --- */
  {%- if section.settings.slide_height == 'adapt_image' and section.blocks.first.settings.image != blank -%}
    @media screen and (max-width: 749px) {
      #Slider-{{ section.id }}::before,
      #Slider-{{ section.id }} .media::before,
      #Slider-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
        padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }

    @media screen and (min-width: 750px) {
      #Slider-{{ section.id }}::before,
      #Slider-{{ section.id }} .media::before {
        padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }
  {%- endif -%}

  {%- for block in section.blocks -%}
    #Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after {
      opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }};
    }
  {%- endfor -%}
  /* --- Original Liquid Styles End --- */
{%- endstyle -%}