/** Shopify CDN: Minification failed

Line 310:0 Unexpected "@media"

**/
/* Загальні стилі для обгортки слайдера */
.custom-hero-slider-wrapper {
  position: relative;
  width: 100%;
}

.custom-hero-banner-container { /* Тепер це Swiper контейнер */
  overflow: hidden; 
  position: relative; 
}

.custom-hero-slide-inner-wrapper {
  position: relative;
  width: 100%;
  height: var(--slide-height-desktop, 70vh);
  overflow: hidden;
}

.custom-hero-banner__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-hero-banner__image--mobile {
  display: none; 
}

/* --- ПОЗИЦІОНУВАННЯ ВМІСТУ - ПОЧАТОК --- */
.custom-hero-banner__content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex; 
  padding: 40px; /* Відступи від країв слайду для контенту - налаштуйте за потреби */
  box-sizing: border-box;
  pointer-events: none; 
}

.custom-hero-banner__content {
  margin: 0; 
  pointer-events: auto; 
  z-index: 2;
  max-width: 90%; 
  display: flex; 
  flex-direction: column; 
}

/* Desktop Positioning - ці класи додаються до .custom-hero-banner__content */
.custom-hero-banner__content.custom-hero-banner__content--desktop-bottom-center {
  margin-top: auto; margin-bottom: 0; margin-left: auto; margin-right: auto;
  text-align: center; align-items: center; 
}
.custom-hero-banner__content.custom-hero-banner__content--desktop-bottom-left {
  margin-top: auto; margin-bottom: 0; margin-left: 0; margin-right: auto;
  text-align: left; align-items: flex-start; 
}
.custom-hero-banner__content.custom-hero-banner__content--desktop-bottom-right {
  margin-top: auto; margin-bottom: 0; margin-left: auto; margin-right: 0;
  text-align: right; align-items: flex-end; 
}
.custom-hero-banner__content.custom-hero-banner__content--desktop-middle-center {
  margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;
  text-align: center; align-items: center;
}
.custom-hero-banner__content.custom-hero-banner__content--desktop-middle-left {
  margin-top: auto; margin-bottom: auto; margin-left: 0; margin-right: auto;
  text-align: left; align-items: flex-start;
}
.custom-hero-banner__content.custom-hero-banner__content--desktop-middle-right {
  margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: 0;
  text-align: right; align-items: flex-end;
}
/* --- ПОЗИЦІОНУВАННЯ ВМІСТУ - КІНЕЦЬ --- */


/* Текст (заголовок, підзаголовок) */
.custom-hero-banner__heading {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 15px; 
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
  width: auto; 
  max-width: 100%;
}

.custom-hero-banner__subheading {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 25px; 
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  width: auto;
  max-width: 100%;
}

/* Кнопка - стилі мають братися з глобальних налаштувань теми для .btn.btn-primary */
.custom-hero-banner__content .btn.btn-primary {
  /* Тут можна додати мінімальні корекції, якщо глобальні стилі потребують підлаштування */
  /* margin-top: 10px; */ 
}


/* Swiper Navigation Buttons - Текстові символи стрілок, з'являються при наведенні */
.swiper-button-next,
.swiper-button-prev {
  background-color: transparent !important; 
  border-radius: 0;
  color: #333333 !important;/* Базовий темносірий колір для стрілки */
  /* Для чорного: color: #000000; */
  font-family: Arial, sans-serif; 
  font-size: 50px;   /* РОЗМІР СТРІЛКИ - Налаштуйте */
  font-weight: 200;  /* ТОНКА СТРІЛКА - Налаштуйте (100-300) */
  line-height: 1;    
  width: auto; 
  height: auto; 
  padding: 5px 10px; 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  display: flex; 
  align-items: center;
  justify-content: center;
  opacity: 0; /* Початково невидимі */
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, color 0.2s ease; 
  box-shadow: none !important; 
}

.custom-hero-banner-container:hover .swiper-button-next,
.custom-hero-banner-container:hover .swiper-button-prev {
  opacity: 0.7; /* ПРОЗОРІСТЬ ПРИ НАВЕДЕННІ НА КОНТЕЙНЕР - Налаштуйте (0.1 - 1) */
  visibility: visible;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 1; /* ПОВНА НЕПРОЗОРІСТЬ ПРИ НАВЕДЕННІ НА САМУ КНОПКУ */
  color: #000000 !important; /* Можна змінити колір на більш насичений, наприклад, чорний */
}

.swiper-button-next::after,
.swiper-button-prev::after {
  display: none !important; /* Ховаємо стандартні стрілки Swiper */
}

.swiper-button-prev {
  left: 25px; 
}

.swiper-button-next {
  right: 25px; 
}

.swiper-button-disabled {
  /* Колір неактивної стрілки залишається базовим (#333 або #000) */
  opacity: 0.3 !important; 
  visibility: visible !important; 
  cursor: default !important; 
  pointer-events: none !important;
}
.custom-hero-banner-container:hover .swiper-button-disabled {
    opacity: 0.3 !important; 
    visibility: visible !important;
}

/* Swiper Pagination стилі */
.swiper-pagination-bullet {
  background: rgba(255,255,255,0.7); 
  opacity: 1; 
  width: 10px;
  height: 10px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.swiper-pagination-bullet-active {
  background: #fff; 
  transform: scale(1.2);
}
.swiper-pagination {
  bottom: 20px !important;
  z-index: 1; 
}

/* Адаптація для мобільних */
@media (max-width: 991px) { /* <-- ОСЬ ТУТ ЗМІНА */
  .custom-hero-slide-inner-wrapper {
    height: var(--slide-height-mobile, 50vh);
  }

  .custom-hero-banner__image--desktop.has-separate-mobile-img {
    display: none;
  }
  .custom-hero-banner__image--mobile {
    display: block;
  }
  
  .custom-hero-banner__image--desktop:not(.has-separate-mobile-img) {
     object-position: var(--obj-pos-mobile) !important; 
  }

  .custom-hero-banner__content-wrapper {
    padding: 20px; 
  }

  /* Mobile Positioning */
  .custom-hero-banner__content.custom-hero-banner__content--bottom-center {
    margin-top: auto !important; margin-bottom: 0 !important; margin-left: auto !important; margin-right: auto !important;
    text-align: center !important; align-items: center !important;
  }
  .custom-hero-banner__content.custom-hero-banner__content--bottom-left {
    margin-top: auto !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: auto !important;
    text-align: left !important; align-items: flex-start !important;
  }
  .custom-hero-banner__content.custom-hero-banner__content--bottom-right {
    margin-top: auto !important; margin-bottom: 0 !important; margin-left: auto !important; margin-right: 0 !important;
    text-align: right !important; align-items: flex-end !important;
  }
  .custom-hero-banner__content.custom-hero-banner__content--middle-center {
    margin-top: auto !important; margin-bottom: auto !important; margin-left: auto !important; margin-right: auto !important;
    text-align: center !important; align-items: center !important;
  }

  .custom-hero-banner__heading { font-size: 1.8rem; }
  .custom-hero-banner__subheading { font-size: 1rem; }

  /* Мобільні стрілки - завжди видимі */
  .swiper-button-next,
  .swiper-button-prev {
    font-size: 40px; 
    padding: 5px;
    opacity: 0.85; /* Базова видимість/прозорість на мобільних - налаштуйте */
    visibility: visible;
    color: #333333; /* Базовий колір стрілки */
  }
  .custom-hero-banner-container:hover .swiper-button-next,
  .custom-hero-banner-container:hover .swiper-button-prev {
    opacity: 0.85; /* Залишаємо таким же або можна 1, якщо потрібно яскравіше при "дотику" */
  }
  .swiper-button-next:hover, 
  .swiper-button-prev:hover {
    opacity: 1; /* Повністю непрозорі при "наведенні/натисканні" на мобільному */
  }

  .swiper-button-disabled { 
      opacity: 0.25 !important; 
      visibility: visible !important;
  }
  .custom-hero-banner-container:hover .swiper-button-disabled {
    opacity: 0.25 !important;
    visibility: visible !important;
  }
  .swiper-button-prev { left: 15px; }
  .swiper-button-next { right: 15px; }

  .swiper-pagination { bottom: 15px !important; }
  .swiper-pagination-bullet { width: 8px; height: 8px; }
}

/*
  Стилі для кастомної кнопки в Hero Slider
*/
.custom-hero-slider__button {
  /* Основні стилі */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 26px; /* Можете налаштувати відступи */
  text-decoration: none;
  cursor: pointer;
  border-radius: 50px; /* Робить кнопку овальною */
  font-family: Helvetica, Arial, sans-serif; /* Вкажіть потрібний шрифт */
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;

  /* Ваші кольори та стилі */
  color: #ffffff;
  background-color: #ed3737;
  border: 1px solid #ed3737; /* Додаємо рамку того ж кольору */
  letter-spacing: 0px;

  /* Плавний перехід для ефекту при наведенні */
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/*
  Стилі для кастомної кнопки при наведенні курсору
*/
.custom-hero-slider__button:hover {
  color: #ffffff;
  background-color: #d32f2f; /* Трохи темніший відтінок червоного */
  border-color: #d32f2f;
}
me

@media (max-width: 769px) {
.custom-hero-banner__content--desktop-bottom-right {
transform: translate(-30px, -10px);
}
}