/** Shopify CDN: Minification failed

Line 16:18 Unexpected "{"
Line 16:27 Expected ":"
Line 16:34 Unexpected "{"
Line 17:21 Expected identifier but found whitespace
Line 17:23 Unexpected "{"
Line 17:32 Expected ":"
Line 19:12 Unexpected "{"
Line 19:21 Expected ":"
Line 24:14 Unexpected "{"
Line 24:23 Expected ":"
... and 8 more hidden warnings

**/
#shopify-section-{{ section.id }} {
    --image-position: {{ section.settings.image_position }};
  }
  .section-{{ section.id }}-padding {
    padding-top: calc({{ section.settings.padding_top }}px * 0.75);
    padding-bottom: calc({{ section.settings.padding_bottom }}px * 0.75);
  }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  .slider {
    -webkit-overflow-scrolling: touch;
  }

  .grid__item {
    min-width: 0;
  }
  /* --- FIX: ALLOW LABELS TO ESCAPE CLIPPING --- */
  slider-component.slider-mobile-gutter {
    display: block;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Let labels pop out the top/bottom */
    position: relative;
  }

  /* Overwrite Be Yours theme default that hides vertical overflow */
  .slider.slider--desktop,
  .slider.slider--tablet-up,
  .slider.slider--mobile {
    overflow-y: visible !important;
    overflow-x: auto !important; /* Allow internal scrolling */
    scrollbar-width: none;
  }
  .slider::-webkit-scrollbar { display: none; }

  /* Ensure card wrappers don't clip their own content */
  .grid__item, .card-wrapper, .product-card, .card__inner {
    overflow: visible !important;
  }

  .view-all.center {
    margin-top: 20px;
  }
  a.button {
    border-radius: 2.5rem;
    font-family: 'Encode Sans';
    text-transform: uppercase !important;
  }

  /* Desktop Slider Logic */
  @media screen and (min-width: 990px) {
    .slider--desktop.grid--4-col-desktop {
      display: flex !important;
      flex-wrap: nowrap !important;
      scroll-snap-type: x mandatory;
      column-gap: 0;
      padding-top: 20px; /* Space for the translated label */
    }
    .slider--desktop.grid--4-col-desktop .grid__item {
      width: 23% !important;
      max-width: 23% !important;
      flex-shrink: 0 !important;
      scroll-snap-align: start;
    }
  }
  /* Tablet: 2 columns + swipe slider */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .slider--tablet {
      display: flex !important;
      flex-wrap: nowrap !important;
      scroll-snap-type: x mandatory;
      overflow-x: auto;
      overflow-y: visible;
    }

    .slider--tablet .grid__item {
      width: 50% !important;
      max-width: 50% !important;
      flex-shrink: 0 !important;
      scroll-snap-align: start;
    }
    .custom-card-container {
      padding-top: 14px;
    }
  }

  /* Mobile: 1 column + swipe slider */
   @media screen and (max-width: 749px) {
  .slider--tablet {
    display: flex !important;
    flex-wrap: nowrap !important;
    scroll-snap-type: x mandatory;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .slider--tablet .grid__item {
    width: 85% !important; /* peek next card */
    max-width: 85% !important;
    flex-shrink: 0 !important;
    scroll-snap-align: center;
  }
}



  /* Label Translation */
  @media only screen and (min-width: 750px) {
    .card-information__button {
       transform: translateY(-75px);
       position: relative;
       z-index: 10;
    }
  }

  /* Custom UI Styles */
  .slider-controls-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    position: relative;
    min-height: 40px;
  }
  .slider-pagination-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-grow: 1;
  }
  .dot-item {
    width: 10px !important;
    height: 12px;
    border-radius: 50%;
    background-color: #d1d1d1;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  .dot-item.active {
    background-color: #cc522f;
  }
  .slider-navigation-right {
    position: absolute;
    right: 0;
    display: flex;
    gap: 15px;
  }
  .nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-btn svg { width: 18px; height: 18px; }