/* ===================================
   МОБИЛЬНАЯ АДАПТАЦИЯ ГЛАВНОЙ СТРАНИЦЫ
   =================================== */

/* Глобальные стили для выравнивания всего сайта на мобильных */
@media (max-width: 768px) {
  /* Основные контейнеры сайта */
  body, html {
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Главный контейнер страницы */
  .container,
  .container-fluid,
  .row,
  .col,
  .col-* {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Все секции с контейнерами */
  [class*="__container"] {
    padding-left: var(--mobile-padding) !important;
    padding-right: var(--mobile-padding) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Исправляем неравномерные отступы */
  .banner-container,
  .frame-150__container,
  .frame-30__container,
  .gallery__container,
  .faq-block__container,
  .frame-65__container,
  .frame-27__container {
    padding-left: var(--mobile-padding) !important;
    padding-right: var(--mobile-padding) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Основной контейнер */
  .home-page-main {
    overflow-x: hidden;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
  }

  .home-content {
    padding: 0 15px;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ===================================
   СЕКЦИЯ FRAME-150 (Преимущества килимов) - МОБИЛЬНЫЕ СТИЛИ
   =================================== */
.frame-150__container {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Убираем отступы у основного контейнера frame-150 */
.frame-150 {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Убираем отступы у внутренних контейнеров */
.frame-150__frame-118,
.frame-150__frame-117,
.frame-150__frame-149 {
  padding: 0 !important;
  margin: 0 !important;
}

/* Мобильная адаптация для frame-150 */
.frame-150 {
  padding: var(--spacing-2xl) var(--spacing-lg);
  border-radius: var(--border-radius-xl);
  background: var(--color-gray-100);
}

.frame-150__shaggy {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-normal);
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.frame-150__frame-117 {
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
}

.frame-150__frame-28,
.frame-150__frame-85,
.frame-150__frame-83,
.frame-150__frame-84,
.frame-150__frame-86 {
  text-align: center;
  padding: var(--spacing-lg);
  background: var(--color-white);
  border-radius: var(--mobile-border-radius);
  box-shadow: var(--shadow-card);
  width: 100%;
  max-width: 350px;
}

.frame-150___04,
.frame-150___05,
.frame-150___03,
.frame-150___02,
.frame-150___01 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--frame-150-number-color);
  margin-bottom: var(--spacing-sm);
}

.frame-150__div,
.frame-150__div2,
.frame-150__div3 {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--frame-150-text-color-light);
}

.frame-150__frame-149 {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.frame-150__frame-147,
.frame-150__frame-148 {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  height: 200px;
}

.frame-150___456254747,
.frame-150___456254750,
.frame-150___4562547502 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame-150__play-icon-product-card,
.frame-150__play-icon-product-card2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.frame-150__div4,
.frame-150__shaggy2 {
  font-size: 16px;
  font-weight: 500;
  color: #272727;
  text-align: center;
  margin-top: 15px;
}
}

/* Дополнительные мобильные адаптации для очень маленьких экранов */
@media (max-width: 480px) {
  .frame-150__container {
    padding: 0 10px;
    margin: 30px 0;
  }

  .frame-150 {
    padding: 20px 15px;
    border-radius: 15px;
  }

  .frame-150__shaggy {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .frame-150__frame-117 {
    gap: 20px;
  }

  .frame-150__frame-28,
  .frame-150__frame-85,
  .frame-150__frame-83,
  .frame-150__frame-84,
  .frame-150__frame-86 {
    padding: 15px;
    border-radius: 12px;
    max-width: 300px;
  }

  .frame-150___04,
  .frame-150___05,
  .frame-150___03,
  .frame-150___02,
  .frame-150___01 {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .frame-150__div,
  .frame-150__div2,
  .frame-150__div3 {
    font-size: 13px;
  }

  .frame-150__frame-149 {
    gap: 15px;
  }

  .frame-150__frame-147,
  .frame-150__frame-148 {
    height: 150px;
  }

  .frame-150__play-icon-product-card,
  .frame-150__play-icon-product-card2 {
    width: 40px;
    height: 40px;
  }

  .frame-150__div4,
  .frame-150__shaggy2 {
    font-size: 14px;
    margin-top: 10px;
  }
}

/* Адаптации для планшетов */
@media (min-width: 769px) and (max-width: 1024px) {
  .frame-150__container {
    padding: 0 20px;
    margin: 50px 0;
  }

  .frame-150 {
    padding: 40px 30px;
    border-radius: 25px;
  }

  .frame-150__shaggy {
    font-size: 28px;
    margin-bottom: 35px;
  }

  .frame-150__frame-117 {
    gap: 30px;
  }

  .frame-150__frame-28,
  .frame-150__frame-85,
  .frame-150__frame-83,
  .frame-150__frame-84,
  .frame-150__frame-86 {
    padding: 25px;
    border-radius: 18px;
    max-width: 400px;
  }

  .frame-150___04,
  .frame-150___05,
  .frame-150___03,
  .frame-150___02,
  .frame-150___01 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .frame-150__div,
  .frame-150__div2,
  .frame-150__div3 {
    font-size: 16px;
  }

  .frame-150__frame-149 {
    gap: 25px;
  }

  .frame-150__frame-147,
  .frame-150__frame-148 {
    height: 250px;
  }

  .frame-150__play-icon-product-card,
  .frame-150__play-icon-product-card2 {
    width: 56px;
    height: 56px;
  }

  .frame-150__div4,
  .frame-150__shaggy2 {
    font-size: 18px;
    margin-top: 20px;
  }
}

/* ===================================
   МОБИЛЬНЫЕ СТИЛИ ДЛЯ FAQ СЕКЦИИ
   =================================== */

@media (max-width: 768px) {
  /* Исправляем отступы для FAQ */
  .faq-block__container {
    padding: 0 15px !important;
    margin: 40px auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Центрирование заголовка FAQ */
  .faq-block__div {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .faq-block__frame-130,
  .faq-block__frame-130 * {
    box-sizing: border-box;
  }

  .faq-block__frame-130 {
  border-radius: var(--mobile-border-radius);
  border-style: solid;
  border-color: var(--faq-border-color);
  border-width: 1px;
  padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-lg) var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

  .faq-block__frame-79 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }

  .faq-block__div4 {
  color: var(--faq-title-color);
  text-align: center;
  font-family: var(--font-family-inter-medium);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium);
  position: relative;
  align-self: stretch;
}

  .faq-block__div5 {
  color: var(--faq-text-color);
  text-align: center;
  font-family: var(--font-family-inter-light);
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  font-weight: var(--font-weight-light);
  position: relative;
  align-self: stretch;
}

  .faq-block__button2 {
  background: var(--faq-button-bg);
  border-radius: var(--border-radius-full);
  padding: var(--spacing-base) var(--spacing-2xl) var(--spacing-base) var(--spacing-2xl);
  display: flex;
  flex-direction: row;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

  .faq-block__div6 {
  color: var(--faq-button-text);
  text-align: left;
  font-family: var(--font-family-inter-medium);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-loose);
  font-weight: var(--font-weight-medium);
  position: relative;
}
}



@media (max-width: 768px) {
  .gallery__container {
    padding: 0 var(--mobile-padding);
    margin: var(--spacing-3xl) auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .gallery__div {
    font-size: 22px;
    font-weight: 500;
    line-height: 130%;
    text-align: center;
    margin-bottom: 30px;
    font-family: "Inter-Medium", sans-serif;
    color: #272727;
  }
  .gallery__slider-container {
    height: 250px;
    border-radius: var(--mobile-border-radius);
  }
  .gallery__slider {
    width: 700%;
  }
  .gallery__slide {
    width: 14.285%;
    padding: 0 10px;
    justify-content: center;
  }
  .gallery__slide:not(.mobile-slide) {
    display: none;
  }
  .gallery__slide.mobile-slide {
    display: flex;
  }
  .gallery__slide img {
    width: 100%;
    height: 200px;
    max-width: none;
  }
}

/* Убираем конфликтующие стили для video-feedback - используем стили из video-feedback-mobile.css */

/* ===================================
   МОБИЛЬНЫЕ СТИЛИ ДЛЯ СЕКЦИИ FRAME-30
   =================================== */

@media (max-width: 768px) {
  .frame-30__container {
    background: var(--gray-bg, #f7f7f7) !important;
    border-radius: 15px !important;
    padding: 20px 15px 40px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .frame-30 {
    border-radius: 20px !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;
  }

  .frame-30__frame-115 {
    display: flex !important;
    flex-direction: column !important;
    gap: 35px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }

  .frame-30__shaggy-luxe {
    color: var(--black, #272727) !important;
    text-align: center !important;
    font-family: var(--h3-mobile-font-family, "Inter-Medium", sans-serif) !important;
    font-size: var(--h3-mobile-font-size, 22px) !important;
    line-height: var(--h3-mobile-line-height, 130%) !important;
    font-weight: var(--h3-mobile-font-weight, 500) !important;
    position: relative !important;
    align-self: stretch !important;
  }

  .frame-30__frame-116 {
    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;
  }

  .frame-30__list-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
    position: relative !important;
    border-left: none !important;
  }

  .frame-30__list,
  .frame-30__list2 {
    display: flex !important;
    flex-direction: row !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;
  }

  .frame-30__icon,
  .frame-30__icon2 {
    flex-shrink: 0 !important;
    width: 30px !important;
    height: 30px !important;
    position: relative !important;
    overflow: visible !important;
  }

  .frame-30___3500,
  .frame-30___3 {
    text-align: left !important;
    font-family: var(--h4-mobile-font-family, "Inter-Regular", sans-serif) !important;
    font-size: var(--h4-mobile-font-size, 18px) !important;
    line-height: var(--h4-mobile-line-height, 130%) !important;
    font-weight: var(--h4-mobile-font-weight, 400) !important;
    position: relative !important;
    flex: 1 !important;
  }

  ._3500-span,
  ._3-span {
    color: var(--red-color, #ec4e0f) !important;
    display: block !important;
    width: 265px !important;
  }

  ._3500-span2,
  ._3-span2 {
    color: var(--gray-text, #454545) !important;
    display: block !important;
    width: 265px !important;
  }

  .frame-30___456254747 {
    border-radius: 15px !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
    height: 223px !important;
    position: relative !important;
    object-fit: cover !important;
  }

  .frame-30__button {
    background: var(--dark-accent, #6e3514) !important;
    border-radius: 100px !important;
    padding: 15px 30px 15px 30px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .frame-30__button:hover {
    background: #5A2A10 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(110, 53, 20, 0.4) !important;
  }

  .frame-30__button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(110, 53, 20, 0.3) !important;
  }

  .frame-30__div {
    color: var(--white, #ffffff) !important;
    text-align: left !important;
    font-family: "Inter-Medium", sans-serif !important;
    font-size: 18px !important;
    line-height: 145% !important;
    font-weight: 500 !important;
    position: relative !important;
    white-space: nowrap !important;
  }

  /* Скрываем оригинальную кнопку на мобильных */
  .frame-30__button {
    display: none !important;
  }

  /* Показываем мобильную кнопку под картинкой */
  .frame-30__button-mobile {
    display: flex !important;
    background: var(--dark-accent, #6e3514) !important;
    border-radius: 100px !important;
    padding: 15px 30px 15px 30px !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 2px 8px rgba(110, 53, 20, 0.3) !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 20px auto 0 auto !important;
  }

  .frame-30__button-mobile:hover {
    background: #5A2A10 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(110, 53, 20, 0.4) !important;
  }

  .frame-30__button-mobile:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(110, 53, 20, 0.3) !important;
  }
}

/* Дополнительные мобильные адаптации для очень маленьких экранов */
@media (max-width: 480px) {
  .frame-30__container {
    width: 100% !important;
    padding: 20px 15px 40px 15px !important;
  }

  .frame-30__shaggy-luxe {
    font-size: 20px !important;
    line-height: 26px !important;
  }

  ._3500-span,
  ._3-span {
    font-size: 16px !important;
    line-height: 21px !important;
    display: block !important;
    width: 265px !important;
  }

  ._3500-span2,
  ._3-span2 {
    font-size: 16px !important;
    line-height: 21px !important;
    display: block !important;
    width: 265px !important;
  }

  .frame-30__list-block {
    border-left: none !important;
  }

  .frame-30___456254747 {
    height: 180px !important;
  }

  .frame-30__button {
    padding: 10px 20px !important;
    max-width: 250px !important;
  }

  .frame-30__div {
    font-size: 16px !important;
    line-height: 21px !important;
  }

  /* Скрываем оригинальную кнопку на мобильных */
  .frame-30__button {
    display: none !important;
  }

  /* Показываем мобильную кнопку под картинкой */
  .frame-30__button-mobile {
    display: flex !important;
    background: var(--dark-accent, #6e3514) !important;
    border-radius: 100px !important;
    padding: 10px 20px !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 2px 8px rgba(110, 53, 20, 0.3) !important;
    width: 100% !important;
    max-width: 250px !important;
    margin: 15px auto 0 auto !important;
  }

  .frame-30__button-mobile:hover {
    background: #5A2A10 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(110, 53, 20, 0.4) !important;
  }

  .frame-30__button-mobile:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(110, 53, 20, 0.3) !important;
  }
}

/* ===================================
   МОБИЛЬНЫЕ СТИЛИ ДЛЯ СЕКЦИИ FRAME-65
   =================================== */

@media (max-width: 768px) {
  .frame-65__container {
    padding: 0 15px !important;
    margin: 40px auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .frame-27__container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Убираем отступы у основного контейнера таймера */
  .frame-27 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Убираем отступы у изображения фона */
  .frame-27__image-1 {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Убираем отступы у внутреннего контента */
  .frame-27__frame-26 {
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ===================================
   ЦЕНТРИРОВАНИЕ ЭЛЕМЕНТОВ FRAME-150
   =================================== */

/* Убираем конфликтующие стили для frame-150 - используем стили из featured-custom.css */

/* Для очень маленьких экранов - ВСЕ РАВНО 2 В РЯД */
@media (max-width: 480px) {
  .frame-150__frame-149 {
    gap: 10px !important; /* Минимальный gap */
    padding: 0 10px !important;
  }

  .frame-150__frame-147,
  .frame-150__frame-148 {
    min-width: 120px !important; /* Минимальная ширина */
    max-width: calc(50% - 5px) !important; /* 50% минус половина gap */
  }

  .frame-150__div4,
  .frame-150__shaggy2 {
    font-size: 12px !important; /* Очень маленький шрифт */
    margin-top: 5px !important;
    padding: 0 3px !important;
  }

  /* Еще меньше иконки */
  .frame-150__play-icon-product-card,
  .frame-150__play-icon-product-card2 {
    width: 40px !important;
    height: 40px !important;
  }
}