/* CSS переменная для правильной работы 100vh на мобильных */
:root {
  --vh: 1vh;
}

/* Плавная прокрутка для якорных ссылок */
html {
  scroll-behavior: smooth;
}

/* Глобальные правила для мобильного меню - всегда поверх всего */
.product-heade-mobile {
  z-index: 2147483647 !important; /* Ниже cart-modal (2147483648) */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  /* НЕ МЕШАЕМ cart-modal с position: fixed */
}

/* Обновляем переменную при изменении размера окна */
@media (max-width: 768px) {
  :root {
    --vh: 1vh;
  }
}

  /* Убираем стандартные отступы браузера */
  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  
  /* Основной контейнер страницы */
  .home-page-main {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

/* Скрываем новый баннер на ПК по умолчанию */
.banner-main {
  display: none;
}

/* Показываем старый баннер на ПК по умолчанию */
.banner-desktop {
  display: block;
  width: 100%;
}

/* Стили для старого баннера на ПК */
@media (min-width: 769px) {
  .banner-desktop {
    display: block;
  }
  
  .banner-main {
    display: none;
  }
}

.banner-main {
  position: relative;
  width: 100%;
  height: 100vh; /* fallback */
  height: calc(var(--vh, 1vh) * 100);
  min-height: 600px;
  max-height: 655px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  z-index: 1;
  top: 0;
}

.banner-main__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.banner-main__content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--spacing-xl);
  color: white;
}

/* ===================================
   ШАПКА БАННЕРА
   =================================== */
.banner-main__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px 0;
}

.banner-main__logo {
  font-family: "Akrobat-ExtraBold", "Inter", sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.banner-main__header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.banner-main__cart-btn {
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--border-radius-5px);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: var(--spacing-base);
  cursor: pointer;
  transition: all 0.3s ease;
}

.banner-main__cart-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-2px);
}

.banner-main__cart-text {
  color: #272727;
  font-family: "Inter-Medium", "Inter", sans-serif;
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 145%;
}

.banner-main__cart-icon-wrapper {
  position: relative;
  width: 26px;
  height: 26px;
}

.banner-main__cart-icon {
  width: 26px;
  height: 26px;
}

.banner-main__cart-number {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 14px;
  height: 14px;
}

.banner-main__cart-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  background: #ec4e0f;
  border: 1px solid white;
  border-radius: 50%;
}

.banner-main__cart-count {
  position: absolute;
  top: 2px;
  left: 4px;
  color: white;
  font-family: "Inter-Medium", "Inter", sans-serif;
  font-size: var(--font-size-8px);
  font-weight: 500;
  line-height: 100%;
}

.banner-main__burger-icon {
  width: 36px;
  height: 30px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.banner-main__burger-icon:hover {
  transform: scale(1.1);
}

/* ===================================
   ОСНОВНОЙ КОНТЕНТ
   =================================== */
.banner-main__main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: var(--spacing-3xl);
  padding: 40px 0;
}

.banner-main__title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-15px);
  margin-top: 60px;
}

.banner-main__title {
  font-family: "Inter-Medium", "Inter", sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 100%;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  max-width: 400px;
}

.banner-main__discount-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-5px);
}

.banner-main__discount-badge {
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--border-radius-full);
  padding: 4px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-main__discount-text {
  color: #ec4e0f;
  font-family: "Inter-Medium", "Inter", sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 500;
  line-height: 145%;
}

.banner-main__discount-subtitle {
  color: white;
  font-family: "Inter-Medium", "Inter", sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 500;
  line-height: 145%;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* ===================================
   НИЖНИЙ БЛОК
   =================================== */
.banner-main__bottom-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-10px);
  width: 100%;
  max-width: 400px;
  margin-top: auto;
  margin-bottom: 60px;
}

.banner-main__prices {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sm);
}

.banner-main__price-current {
  color: white;
  font-family: "Inter-Medium", "Inter", sans-serif;
  font-size: 22px;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.banner-main__price-old {
  color: #c9c9c9;
  font-family: "Inter-Medium", "Inter", sans-serif;
  font-size: 22px;
  font-weight: 500;
  text-decoration: line-through;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.banner-main__buttons {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-base);
  width: 100%;
}

.banner-main__btn-video {
  background: white;
  border-radius: var(--border-radius-full);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: var(--spacing-10px);
  flex: 1;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 50px;
  box-sizing: border-box;
}

.banner-main__btn-video:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
}

.banner-main__play-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-main__play-icon-img {
  width: 26px;
  height: 26px;
}

.banner-main__btn-video-text {
  color: #272727;
  font-family: "Inter-Medium", "Inter", sans-serif;
  font-size: var(--font-size-lg);
  font-weight: 500;
  line-height: 145%;
  white-space: nowrap;
}

.banner-main__btn-select {
  background: #ec4e0f;
  border-radius: var(--border-radius-full);
  padding: 12px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 50px;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
}

.banner-main__btn-select:hover {
  background: #d13d00;
  transform: translateY(-2px);
}

.banner-main__btn-select-text {
  color: white;
  font-family: "Inter-Medium", "Inter", sans-serif;
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 145%;
}

/* ===================================
   ДОСТАВКА
   =================================== */
.banner-main__delivery {
  color: white;
  font-family: "Inter-Regular", "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 145%;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  padding: 12px 20px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}
/* ===================================
   АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ
   =================================== */
@media (max-width: 768px) {
  /* Показываем новый баннер на мобильных */
  .banner-main {
    display: block;
    height: 100vh; /* fallback */
    height: calc(var(--vh, 1vh) * 100);
    min-height: 600px;
  }
  
  /* Скрываем старый баннер на мобильных */
  .banner-desktop {
    display: none;
  }
  
           .banner-main__content {
      padding: var(--spacing-15px);
    }
  
  .banner-main__title {
    font-size: 40px !important;
    max-width: 340px;
  }
  
  .banner-main__discount-text,
  .banner-main__discount-subtitle {
    font-size: var(--font-size-lg);
  }
  
  .banner-main__price-current,
  .banner-main__price-old {
    font-size: 22px;
  }
  
  .banner-main__btn-video-text {
    font-size: var(--font-size-base);
  }
  
  .banner-main__btn-select-text {
    font-size: var(--font-size-sm);
  }
  
  .banner-main__main-content {
    gap: var(--spacing-3xl);
    padding: var(--spacing-4xl) 0;
  }
  
  /* Стили для текста доставки на мобильных */
  .banner-main__delivery {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 16px !important;
    padding: var(--spacing-10px) var(--spacing-15px) !important;
    margin: var(--spacing-base) 0 0 0 !important;
    text-align: center !important;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Принудительно устанавливаем размер шрифта 16px */
  .banner-main .banner-main__delivery {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .banner-main {
    height: 100vh; /* fallback */
    height: calc(var(--vh, 1vh) * 100);
    min-height: 500px;
  }
  
           .banner-main__content {
      padding: var(--spacing-10px);
    }
  
  .banner-main__title {
    font-size: 40px;
    max-width: 340px;
  }
  
  .banner-main__discount-text,
  .banner-main__discount-subtitle {
    font-size: var(--font-size-base);
  }
  
  .banner-main__price-current,
  .banner-main__price-old {
    font-size: 22px;
  }
  
  .banner-main__buttons {
    flex-direction: row;
    gap: var(--spacing-base);
  }
  
  .banner-main__btn-video,
  .banner-main__btn-select {
    flex: 1;
    justify-content: center;
  }
  
  .banner-main__main-content {
    gap: var(--spacing-200px);
    padding: var(--spacing-xl) 0;
  }
  
  .banner-main__header {
    padding: var(--spacing-10px) 0;
  }
  
  .banner-main__logo {
    font-size: var(--font-size-lg);
  }
  
  .banner-main__cart-text {
    font-size: var(--font-size-sm);
  }
  
  .banner-main__cart-btn {
    padding: var(--spacing-6px) var(--spacing-base);
  }
  
  .banner-main__delivery {
    font-size: 16px !important;
  }
  
  .banner-main__delivery {
    font-size: 16px !important;
  }
}

/* ===================================
   АДАПТИВНОСТЬ ДЛЯ ПЛАНШЕТОВ
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .banner-main {
    height: 80vh;
    min-height: 700px;
  }
  
  .banner-main__title {
    font-size: var(--font-size-5xl);
    max-width: 350px;
  }
  
  .banner-main__content {
    padding: var(--spacing-3xl);
  }
  
  /* Стили для текста доставки на планшетах */
  .banner-main__delivery {
    font-size: var(--font-size-15px);
    padding: var(--spacing-18px) var(--spacing-15px);
    margin: var(--spacing-15px) 0;
  }
}

/* ===================================
   АДАПТИВНОСТЬ ДЛЯ ДЕСКТОПА
   =================================== */
@media (min-width: 1025px) {
  .banner-main {
    height: 90vh;
    min-height: 800px;
  }
  
  .banner-main__title {
    font-size: var(--font-size-5xl);
    max-width: 500px;
  }
  
  .banner-main__content {
    padding: var(--spacing-4xl);
  }
  
  .banner-main__main-content {
    gap: var(--spacing-4xl);
    padding: 50px 0;
  }
}

/* ===================================
   ПРАВИЛА ОТОБРАЖЕНИЯ ДЛЯ РАЗНЫХ УСТРОЙСТВ
   =================================== */

/* На ПК (≥769px) - показываем старый баннер */
@media (min-width: 769px) {
  .banner-desktop {
    display: block !important;
  }
  
  .banner-main {
    display: none !important;
  }
}

/* На мобильных (≤768px) - показываем новый баннер */
@media (max-width: 768px) {
  .banner-desktop {
    display: none !important;
  }
  
  .banner-main {
    display: block !important;
  }
  
     /* Скрываем меню баннера на мобильных - теперь используем единое мобильное меню */
   .banner-main__header {
     display: none !important;
   }
   
   /* Единое мобильное меню с переключением стилей */
   .product-heade-mobile {
     position: relative;
     top: auto;
     left: auto;
     right: auto;
     z-index: 2147483647;
     padding: var(--spacing-15px) var(--spacing-xl);
     transition: all 0.3s ease;
     display: flex;
     justify-content: space-between;
     align-items: center;
     min-height: var(--size-60px);
     pointer-events: auto;
   }
   
   /* Стили для мобильного меню на баннере (белый текст на прозрачном фоне) */
   .product-heade-mobile.banner-style {
     background: transparent !important;
     box-shadow: none !important;
     position: relative !important;
     top: auto !important;
     left: auto !important;
     right: auto !important;
   }
   
   .product-heade-mobile.banner-style .product-heade-mobile__shaggy-luxe {
     color: white !important;
     text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
   }
   
   .product-heade-mobile.banner-style .product-heade-mobile__cart-btn {
     background: rgba(255, 255, 255, 0.9) !important;
     color: #272727 !important;
   }
   
   .product-heade-mobile.banner-style .product-heade-mobile__div {
     color: #272727 !important;
   }
   
   .product-heade-mobile.banner-style .product-heade-mobile__cart-icon {
     filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(100%) !important;
   }
   
   .product-heade-mobile.banner-style .product-heade-mobile__burber-icon {
     filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100) contrast(100%) !important;
   }
   
   /* Стили для мобильного меню вне баннера (темный текст на белом фоне) */
   .product-heade-mobile.page-style {
     background: white !important;
     box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
     position: fixed !important;
     top: 0 !important;
     left: 0 !important;
     right: 0 !important;
   }
   
   .product-heade-mobile.page-style .product-heade-mobile__shaggy-luxe {
     color: #272727 !important;
   }
   
   .product-heade-mobile.page-style .product-heade-mobile__cart-btn {
     background: #ec4e0f !important;
     color: white !important;
   }
   
   .product-heade-mobile.page-style .product-heade-mobile__div {
     color: white !important;
   }
   
   .product-heade-mobile.page-style .product-heade-mobile__cart-icon {
     filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100) contrast(100%) !important;
   }
   
   .product-heade-mobile.page-style .product-heade-mobile__burber-icon {
     filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(100%) !important;
   }
   
                                                                                                                               /* Мобильные стили для текста доставки */
        .banner-main__delivery {
          display: block !important;
          visibility: visible !important;
          opacity: 1 !important;
          font-size: 16px !important;
          padding: var(--spacing-10px) var(--spacing-15px) !important;
          margin: var(--spacing-base) 0 0 0 !important;
          text-align: center !important;
          color: white !important;
          text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
          width: 100% !important;
          box-sizing: border-box !important;
        }
   
}

/* Принудительно устанавливаем размер шрифта 16px для доставки на всех мобильных устройствах */
@media (max-width: 768px) {
  .banner-main .banner-main__delivery,
  .banner-main__delivery {
    font-size: 16px !important;
  }
}

/* ===================================
   СТИЛИ ДЛЯ БЛОКА КАТАЛОГА (МОБИЛЬНАЯ ВЕРСИЯ)
   =================================== */
@media (max-width: 768px) {
  .CatalogTitleBlock,
  [data-layer="catalog-title-block"] {
    align-self: stretch !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 20px !important;
    display: inline-flex !important;
  }

  /* Заголовок "Каталог" */
  .CatalogTitleBlock > div:first-child,
  [data-layer="Каталог"],
  .frame-52__div {
    align-self: flex-start !important;
    color: #272727 !important;
    font-size: 34px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    line-height: 37.4px !important;
    word-wrap: break-word !important;
    text-align: left !important;
    margin-right: auto !important;
    width: auto !important;
  }

  /* Навигация */
  .Navigation,
  [data-layer="navigation"],
  .frame-52__navigation {
    align-self: stretch !important;
    padding: 4px !important;
    background: white !important;
    overflow: hidden !important;
    border-radius: 100px !important;
    outline: 1px #BBBBBB solid !important;
    outline-offset: -1px !important;
    justify-content: center !important;
    align-items: center !important;
    display: inline-flex !important;
  }

  /* Стили для list-group внутри навигации */
  .frame-52__navigation .list-group {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .frame-52__navigation .list-group-item {
    flex: 1 !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #272727 !important;
    font-size: 13px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    line-height: 15.6px !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
  }

  .frame-52__navigation .list-group-item.active {
    background: #6E3514 !important;
    color: white !important;
    font-weight: 500 !important;
    border-radius: 100px !important;
  }


  /* Скрываем количество товаров на мобильных */
  .frame-52__navigation .list-group-item::after {
    content: "" !important;
  }

  /* Убираем количество товаров на мобильных */
  .frame-52__navigation .list-group-item {
    position: relative !important;
    font-size: 13px !important;
  }

  /* Скрываем текст в скобках с помощью CSS */
  .frame-52__navigation .list-group-item {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Активная вкладка "Всі килими" */
  .Frame40,
  [data-layer="Frame 40"] {
    flex: 1 1 0 !important;
    padding: 8px 10px !important;
    background: #6E3514 !important;
    overflow: hidden !important;
    border-radius: 100px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    display: flex !important;
  }

  .Frame40 > div {
    color: white;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    line-height: 15.6px;
    word-wrap: break-word;
  }

  /* Вкладка "Shaggy Lux" */
  .Frame41 {
    flex: 1 1 0;
    padding: 8px 10px;
    overflow: hidden;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .ShaggyLux {
    color: #272727;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 15.6px;
    word-wrap: break-word;
  }

  /* Вкладка "Super Shaggy" */
  .Frame42 {
    padding: 8px 10px;
    overflow: hidden;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .SuperShaggy {
    color: #272727;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 15.6px;
    word-wrap: break-word;
  }
}

/* ===================================
   СТИЛИ ДЛЯ БЛОКА КАТАЛОГА (ДЕСКТОПНАЯ ВЕРСИЯ)
   =================================== */
@media (min-width: 769px) {
  .CatalogTitleBlock {
    /* Скрываем на десктопе или используем другие стили */
    display: none;
  }
}



/* ===================================
   JAVASCRIPT ДЛЯ УДАЛЕНИЯ КОЛИЧЕСТВА ТОВАРОВ НА МОБИЛЬНЫХ
   =================================== */
@media (max-width: 768px) {
  /* CSS правило для скрытия текста в скобках */
  .frame-52__navigation .list-group-item {
    position: relative !important;
  }
  
  /* Добавляем стили для скрытия количества */
  .frame-52__navigation .list-group-item::after {
    display: none !important;
  }
}

/* ===================================
   СТИЛИ ДЛЯ КАРТОЧКИ ТОВАРА (МОБИЛЬНАЯ ВЕРСИЯ)
   =================================== */
@media (max-width: 768px) {
  .product,
  .product * {
    box-sizing: border-box !important;
  }
  
  /* Стили для изображения товара на мобильных */
  .frame-52__img-box {
    position: relative !important;
    width: 100% !important;
    height: 326px !important;
    overflow: hidden !important;
  }
  
  .frame-52__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }
  
    .frame-52__rectangle-11 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.02) 100%
    ) !important;
  }
  
  /* Стили для кнопки на мобильных */
  .frame-52__button {
    width: 305px !important;
    max-width: 305px !important;
    min-width: 305px !important;
    padding: 4px !important;
    font-size: 16px !important;
    line-height: 120% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  
  /* Принудительно переопределяем все стили для кнопки */
  .product .frame-52__button,
  .frame-52__product .frame-52__button,
  [class*="frame-52"] .frame-52__button {
    width: 305px !important;
    max-width: 305px !important;
    min-width: 305px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  
  /* Центрируем форму и кнопку */
  .product-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }
  
  .product-form .frame-52__button {
    width: 305px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
  }
  
  /* Максимально агрессивные стили для центрирования */
  .product-form .frame-52__button,
  .frame-52__button,
  div[class*="frame-52__button"] {
    width: 305px !important;
    max-width: 305px !important;
    min-width: 305px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    text-align: center !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  
  /* Стили для формы на мобильных */
  .product-form {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }
  
  /* Стили для тегов товара на мобильных */
  .frame-52__tags {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    width: 127px !important;
    position: absolute !important;
    left: 198px !important;
    top: 10px !important;
    z-index: 10 !important;
  }
  
  .frame-52__tag {
    background: var(--white, #ffffff) !important;
    border-radius: 100px !important;
    padding: 4px 12px 4px 12px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .frame-52__div3 {
    color: var(--black, #272727) !important;
    text-align: left !important;
    font-family: "Inter-Medium", sans-serif !important;
    font-size: 14px !important;
    line-height: 145% !important;
    font-weight: 500 !important;
    position: relative !important;
  }
  
  .frame-52__tag2 {
    background: var(--red-color, #ec4e0f) !important;
    border-radius: 100px !important;
    padding: 4px 12px 4px 12px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .frame-52__div4 {
    color: var(--white, #ffffff) !important;
    text-align: left !important;
    font-family: "Inter-Medium", sans-serif !important;
    font-size: 14px !important;
    line-height: 145% !important;
    font-weight: 500 !important;
    position: relative !important;
  }
  
  @media (max-width: 480px) {
    .frame-52__tags {
      gap: var(--spacing-sm) !important;
      margin-top: 0 !important;
    }
  }
  
  /* Стили для текста "Відео-відгуки покупців" */
  .video-feedback__div {
    color: #272727 !important;
    font-family: "Inter-Medium", sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 130% !important;
    text-align: center !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }
  
  .product,
  .product * {
    box-sizing: border-box !important;
  }
  
  .product {
    background: var(--white, #ffffff) !important;
    border-radius: 20px !important;
    padding: 0px 0px 20px 0px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .img-box {
    align-self: stretch !important;
    flex-shrink: 0 !important;
    height: 326px !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .image {
    width: 335px !important;
    height: 326px !important;
    position: absolute !important;
    left: 0px !important;
    top: 0px !important;
    object-fit: cover !important;
  }
  
  .rectangle-11 {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.02) 100%
    ) !important;
    width: 335px !important;
    height: 326px !important;
    position: absolute !important;
    left: 0px !important;
    top: 0px !important;
  }
  
  .info-block {
    padding: 0px 15px 0px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }
  
  .info {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }
  
  .beige {
    color: var(--black, #272727) !important;
    text-align: left !important;
    font-family: "Inter-Regular", sans-serif !important;
    font-size: 18px !important;
    line-height: 130% !important;
    font-weight: 400 !important;
    position: relative !important;
    align-self: stretch !important;
  }
  
  .summ {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }
  
  ._900-2 {
    color: var(--gray-text, #454545) !important;
    text-align: left !important;
    font-family: "Inter-Medium", sans-serif !important;
    font-size: 20px !important;
    line-height: 110% !important;
    font-weight: 500 !important;
    position: relative !important;
  }
  
  ._900-2-span {
  }
  
  ._1350-2 {
    color: var(--black, #272727) !important;
    text-align: left !important;
    font-family: "Inter-Regular", sans-serif !important;
    font-size: 16px !important;
    line-height: 110% !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    opacity: 0.4 !important;
    position: relative !important;
  }
  
  ._1350-2-span {
  }
  
  .button {
    background: var(--black, #272727) !important;
    border-radius: 100px !important;
    padding: 15px 25px 15px 25px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .div {
    color: var(--white, #ffffff) !important;
    text-align: left !important;
    font-family: var(--body-medium-font-family, "Inter-Medium", sans-serif) !important;
    font-size: var(--body-medium-font-size, 16px) !important;
    line-height: var(--body-medium-line-height, 145%) !important;
    font-weight: var(--body-medium-font-weight, 500) !important;
    position: relative !important;
  }
  
  .tags {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    width: 127px !important;
    position: absolute !important;
    left: 198px !important;
    top: 10px !important;
  }
  
  .tag {
    background: var(--white, #ffffff) !important;
    border-radius: 100px !important;
    padding: 4px 12px 4px 12px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .div2 {
    color: var(--black, #272727) !important;
    text-align: left !important;
    font-family: "Inter-Medium", sans-serif !important;
    font-size: 14px !important;
    line-height: 145% !important;
    font-weight: 500 !important;
    position: relative !important;
  }
  
  .tag2 {
    background: var(--red-color, #ec4e0f) !important;
    border-radius: 100px !important;
    padding: 4px 12px 4px 12px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .div3 {
    color: var(--white, #ffffff) !important;
    text-align: left !important;
    font-family: "Inter-Medium", sans-serif !important;
    font-size: 14px !important;
    line-height: 145% !important;
    font-weight: 500 !important;
    position: relative !important;
  }
  
  .play-icon-product-card {
    flex-shrink: 0 !important;
    width: 43px !important;
    height: 43px !important;
    position: absolute !important;
    left: 10px !important;
    top: 10px !important;
    overflow: visible !important;
  }

  /* Стили для OpenCart классов - цены в одну строку */
  .frame-52__summ {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }

  .frame-52___900-2 {
    color: var(--gray-text, #454545) !important;
    text-align: left !important;
    font-family: "Inter-Medium", sans-serif !important;
    font-size: 20px !important;
    line-height: 110% !important;
    font-weight: 500 !important;
    position: relative !important;
  }

  .frame-52___1350-2 {
    color: var(--black, #272727) !important;
    text-align: left !important;
    font-family: "Inter-Regular", sans-serif !important;
    font-size: 16px !important;
    line-height: 110% !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    opacity: 0.4 !important;
    position: relative !important;
  }

  /* Стили для блока с названием товара */
  .frame-52__beige {
    color: var(--black, #272727) !important;
    text-align: left !important;
    font-family: "Inter-Regular", sans-serif !important;
    font-size: 18px !important;
    line-height: 130% !important;
    font-weight: 400 !important;
    position: relative !important;
    align-self: stretch !important;
  }

  .frame-52__beige a {
    color: var(--black, #272727) !important;
    text-decoration: none !important;
    text-align: left !important;
    font-family: "Inter-Regular", sans-serif !important;
    font-size: 18px !important;
    line-height: 130% !important;
    font-weight: 400 !important;
  }

  .frame-52__beige a:hover {
    text-decoration: underline !important;
  }
}

/* Стили для оверлея видео-обзора удалены - теперь используется динамический popup */