:root {
  --vh: 1vh; /* fallback на всяк випадок */
}

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}


.main-hero-banner-or-section,
.info-banner-img-lazy {
  position: relative;
  width: 100vw;
  height: calc(var(--vh) * 100);
  overflow: hidden; /* щоб обрізати зайве */
}



/* Основний блок */
main {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Лейзі-завантаження */
.lazy {
  filter: blur(1px);
  transition: filter 0.5s ease-out;
}

.lazy.loaded {
  filter: blur(0);
}

/* Карусель */
.carousel {
  position: relative;
  width: 100%;
  height: calc(var(--vh) * 100);
  overflow: hidden;
}

.carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.45s ease;
}

.slide {
  position: relative;
  min-width: 100vw;
  height: 100%;
  user-select: none;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Курсор під час drag */
.carousel-track.dragging {
  cursor: grabbing;
}

/* Лейзі-відео */
.lazy-video-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.lazy-video-wrapper img.lazy-video-poster,
.lazy-video-wrapper video.lazy-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  display: block;
}

/* Кнопки */
.btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  border: none;
  padding: 0.35vw; /* 5px -> 0.35vw */
  cursor: pointer;
  border-radius: 0.56vw; /* 8px -> 0.56vw */
  color: var(--main-font-color);
  background-color: transparent;
}

.btn:hover {
  color: var(--main-font-color-active);
}

.btn svg {
  width: 2.08vw; /* 30px -> 2.08vw */
  height: 2.08vw;
}

.prev { left: 0; }
.next { right: 0; }

/* Пагінація */
.dots {
  position: absolute;
  bottom: 2.08vw; /* 30px -> 2.08vw */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.83vw; /* 12px -> 0.83vw */
  z-index: 6;
}

.dot {
  width: 2.36vw; /* 34px -> 2.36vw */
  height: 0.28vw; /* 4px -> 0.28vw */
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0.14vw; /* приблизно */
  cursor: pointer;
  transition: 0.25s;
}

.dot.active {
  background: #fff;
  transform: scale(1.1);
}

/* Кнопки категорій */
.button-head-category-container {
  position: absolute;
  bottom: 4.17vw; /* 60px -> 4.17vw */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.39vw; /* 20px -> 1.39vw */
  transition: all 0.3s ease-in-out;
  color: red;
  width: 100%;
}

.button-head-category-container h3 {
  font-family: var(--main-font-family);
  text-transform: uppercase;
  font-size: 3.19vw; /* 46px -> 3.19vw */
  font-weight: 700;
  color: var(--main-white-font-color);
  transition: all 0.3s ease-in-out;
}

.button-head-category-container button {
  font-family: var(--main-font-family);
  text-transform: uppercase;
  font-size: 1.39vw; /* 20px -> 1.39vw */
  font-weight: 500;
  color: var(--main-white-font-color);
  transition: all 0.3s ease-in-out;
  background-color: transparent;
  border: solid 0.14vw var(--main-white-font-color); /* 2px -> 0.14vw */
  padding: 1.39vw 2.43vw; /* 20px 35px -> 1.39vw 2.43vw */
}

.button-head-category-container button:hover {
  background-color: var(--main-white-font-color);
  color: var(--main-font-color);
}

/* ============================
   1280px – середні монітори
   (трошки зменшуємо все)
============================ */
@media (max-width: 1280px) {

  .btn svg {
    width: 2.8vw;
    height: 2.8vw;
  }

  .dots {
    bottom: 3vw;
    gap: 1.2vw;
  }

  .dot {
    width: 3vw;
    height: 0.35vw;
  }

  .button-head-category-container h3 {
    font-size: 3.8vw;
  }

  .button-head-category-container button {
    font-size: 1.6vw;
    padding: 1.6vw 2.8vw;
  }
}



/* ============================
   1024px – планшет горизонтально
============================ */
@media (max-width: 1024px) {

  .btn svg {
    width: 4vw;
    height: 4vw;
  }

  .btn {
    padding: 1vw;
  }

  .dots {
    bottom: 5vw;
    gap: 2vw;
  }

  .dot {
    width: 5vw;
    height: 0.6vw;
  }

  .button-head-category-container {
    bottom: 12vw;
    gap: 3vw;
  }

  .button-head-category-container h3 {
    font-size: 6vw;
  }

  .button-head-category-container button {
    font-size: 2.8vw;
    padding: 2.5vw 4vw;
    border-width: 0.4vw;
  }
}



/* ============================
   768px — вертикальні планшети / великі телефони
============================ */
@media (max-width: 768px) {

  .btn svg {
    width: 5.5vw;
    height: 5.5vw;
  }

  .btn {
    padding: 1.5vw;
  }

  .dots {
    bottom: 6vw;
    gap: 2.2vw;
  }

  .dot {
    width: 6vw;
    height: 1vw;
    border-radius: 0.6vw;
  }

  .button-head-category-container {
    bottom: 12vw;
    gap: 4vw;
  }

  .button-head-category-container h3 {
    font-size: 7vw;   /* було 10vw */
    line-height: 1.05;
  }

  .button-head-category-container button {
    font-size: 3vw;   /* було 4vw */
    padding: 3vw 6vw; /* було значно більше */
    border-width: 0.5vw;
  }
}


/* ============================
   480px — смартфони
============================ */
@media (max-width: 480px) {

  .btn svg {
    width: 7vw;
    height: 7vw;
  }

  .btn {
    padding: 2vw;
  }

  .dots {
    bottom: 10vw;
    gap: 3vw;
  }

  .dot {
    width: 7vw;
    height: 1.2vw;
    border-radius: 1vw;
  }

  .button-head-category-container {
    bottom: 16vw;  /* було 24vw */
    gap: 5vw;      /* було 8vw */
  }

  .button-head-category-container h3 {
    font-size: 8vw;  /* було 12vw — значно менше */
  }

  .button-head-category-container button {
    font-size: 3.5vw;     /* було 5vw */
    padding: 3.5vw 7vw;   /* було 5vw 10vw */
    border-width: 0.6vw;  /* було 1vw */
  }
}
































/* Хедер */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent; /* Повністю прозорий фон */
  border-bottom: none; /* Без лінії */
  z-index: 999;
  box-shadow: none; /* Без тіні */
  backdrop-filter: none; /* Без блюру */
  transition: background-color 0.3s ease, transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.header-logo a {
  color: var(--main-white-font-color);
  transition: color 0.3s ease;
}

.header-logo span {
  color: var(--main-white-font-color);
  transition: color 0.3s ease;
}

.header-nav-link {
  color: var(--main-white-font-color);
  transition: color 0.3s ease;
}

.header-submenu a {
  color: var(--main-white-font-color);
  transition: color 0.3s ease;
}

.header-action-btn {
  color: var(--main-white-font-color);
  transition: transform 0.3s ease, color 0.3s ease;
}

.header-cart-count {
  background: var(--main-white-font-color);
  color: var(--main-font-color);
  transition: color 0.3s ease, background 0.3s ease;
}

.mobile-menu-button span {
  background: var(--main-white-font-color);
  transition: background 0.3s ease, all 0.35s ease;
}

/* Хедер при ховері */
header:hover {
  background: var(--main-background-color);
}

header:hover .header-logo a {
  color: var(--main-font-color);
}

header:hover .header-logo span {
  color: var(--main-font-color-active);
}

header:hover .header-nav-link {
  color: var(--main-font-color);
}

header:hover .header-submenu a {
  color: var(--main-font-color);
}

header:hover .header-action-btn {
  color: var(--main-font-color);
}

header:hover .header-cart-count {
  background: var(--main-font-color);
  color: var(--main-white-font-color);
}

header:hover .mobile-menu-button span {
  background: var(--main-font-color);
}

/* Активний хедер */
header.active-header {
  background: var(--main-background-color);
}

header.active-header .header-logo a {
  color: var(--main-font-color);
}

header.active-header .header-logo span {
  color: var(--main-font-color-active);
}

header.active-header .header-nav-link {
  color: var(--main-font-color);
}

header.active-header .header-submenu a {
  color: var(--main-font-color);
}

header.active-header .header-action-btn {
  color: var(--main-font-color);
}

header.active-header .header-cart-count {
  background: var(--main-font-color);
  color: var(--main-white-font-color);
}

header.active-header .mobile-menu-button span {
  background: var(--main-font-color);
}

/* Хедер */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent; /* Повністю прозорий фон */
  border-bottom: none; /* Без лінії */
  z-index: 999;
  box-shadow: none; /* Без тіні */
  backdrop-filter: none; /* Без блюру */
}

.header-logo a {
  color: var(--main-white-font-color);
  transition: color 0.3s ease;
}

.header-logo span {
  color: var(--main-white-font-color);
  transition: color 0.3s ease;
}

.header-nav-link {
  color: var(--main-white-font-color);
  transition: color 0.3s ease;
}

.header-submenu a {
  color: var(--main-white-font-color);
  transition: color 0.3s ease;
}

.header-action-btn {
  color: var(--main-white-font-color);
  transition: transform 0.3s ease, color 0.3s ease;
}

.header-cart-count {
  background: var(--main-white-font-color);
  color: var(--main-font-color);
  transition: color 0.3s ease, background 0.3s ease;
}

.mobile-menu-button span {
  background: var(--main-white-font-color);
  transition: background 0.3s ease, all 0.35s ease;
}

/* Хедер при ховері */
header:hover {
  background: var(--main-background-color);
}

header:hover .header-logo a {
  color: var(--main-font-color);
}

header:hover .header-logo span {
  color: var(--main-font-color-active);
}

header:hover .header-nav-link {
  color: var(--main-font-color);
}

header:hover .header-submenu a {
  color: var(--main-font-color);
}

header:hover .header-action-btn {
  color: var(--main-font-color);
}

header:hover .header-cart-count {
  background: var(--main-font-color);
  color: var(--main-white-font-color);
}

header:hover .mobile-menu-button span {
  background: var(--main-font-color);
}

/* Активний хедер */
header.active-header {
  background: var(--main-background-color);
}

header.active-header .header-logo a {
  color: var(--main-font-color);
}

header.active-header .header-logo span {
  color: var(--main-font-color-active);
}

header.active-header .header-nav-link {
  color: var(--main-font-color);
}

header.active-header .header-submenu a {
  color: var(--main-font-color);
}

header.active-header .header-action-btn {
  color: var(--main-font-color);
}

header.active-header .header-cart-count {
  background: var(--main-font-color);
  color: var(--main-white-font-color);
}

header.active-header .mobile-menu-button span {
  background: var(--main-font-color);
}