/*!
Theme Name: Kulimsnab
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kulimsnab
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Kulimsnab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Подключение шрифтов (как мы исправляки ранее) */
@font-face {
  font-family: "Gilroy";
  src: url("/wp-content/themes/kulimsnab/assets/fonts/Gilroy-Regular.woff")
    format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "Gilroy";
  src: url("/wp-content/themes/kulimsnab/assets/fonts/Gilroy-Semibold.woff")
    format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "Gilroy";
  src: url("/wp-content/themes/kulimsnab/assets/fonts/Gilroy-Bold.woff")
    format("woff");
  font-weight: 700;
}

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --primary-color: #3e9fff;
  --text-color: #000000;
  --font-main: "Gilroy", "Montserrat", sans-serif;
  --btn-radius: 100px;
  --btn-padding: 13px 40px;
  --transition: 0.2s linear;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a{
  text-decoration: none;
  color: inherit;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  color: var(--text-color);
}

body.no-scroll {
  overflow: hidden;
}

input,
button {
  font-family: inherit;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"] {
  border: 1px solid transparent;
  padding: 20px 40px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 25px;
  background: #ffffff;
  box-shadow: 2px 1px 10px rgba(0, 0, 0, 0.06);
  border-radius: 30px;
  transition: border-color 0.3s ease;
}

input::placeholder {
  color: #8e8e8e;
}

.input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.container {
  max-width: 1130px;
  margin: 0 auto;
  padding: 0 15px;
}

/* --- HEADER --- */
.header {
  background: #fff;
  padding: 13px 0;
}

.section {
  padding: 100px 0 0;
}

.map{
  margin-bottom: 90px;
}

.map__widget iframe{
  border-radius: 12px;
}

.section--brands,
.section--about {
  padding-bottom: 100px;
}

.section__title {
  font-size: 48px;
  font-weight: 500;
  margin-bottom: 50px;
}

@media (max-width: 768px) {
  .section {
    padding: 60px 0 0;
  }

  .section--brands,
  .section--about {
    padding-bottom: 60px;
  }

  .section__title {
    font-size: 30px;
    margin-bottom: 30px;
  }
}

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header .logo img {
  height: 46px;
}

.nav__list {
  display: flex;
  list-style: none;
  gap: 50px;
}

.nav__link {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 500;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: 0.2s linear;
}

.nav__link:hover {
  color: var(--primary-color);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Фокус на всем блоке, когда мы печатаем */
.search-bar:focus-within {
  background: #eeeeee;
  box-shadow: 0 0 0 1px #e0e0e0;
}

.search-bar input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: var(--font-main);
  flex-grow: 1; /* Растягиваем на всю ширину */
  color: var(--text-color);
}
.search-btn {
  background: var(--primary-color);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  font-size: 19px;
}

.action-icon {
  width: 34px;
  height: 34px;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
  font-size: 19px;
  font-weight: 400;
}

/* --- HERO SECTION --- */
.hero {
  position: relative;
  padding: 90px 0 142px;
  background-color: #f9f9f9; /* Светлый фон как на макете */
  overflow: hidden;

  align-items: center;
}

.hero__content {
  position: relative;
  z-index: 2;
}

.hero__title {
  font-size: 58px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 25px;
  max-width: 1000px;
}

.hero__subtitle {
  font-size: 20px;
  color: #000;
  margin-bottom: 40px;
  line-height: 1.4;
  max-width: 560px;
}

.hero__btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* --- КНОПКИ --- */
.btn {
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 600;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  text-decoration: none;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 270px;
}

.btn:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.btn--primary {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
}

.btn--small{
  min-width: auto;
  font-size: 14px;
}

.btn--outline {
  background-color: rgba(255, 255, 255, 0.5);
  color: var(--text-color);
  border: 1px solid #000;
  font-weight: 400;
}

/* Изображение кресла */
.hero {
  background-image: url("/wp-content/themes/kulimsnab/assets/images/banner.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- MOBILE ADAPTIVE --- */

/* Прячем кнопку поиска для десктопа (если нужно) и бургер */
.burger-menu {
  z-index: 1000;
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
}

@media (max-width: 768px) {
  /* 1. Хедер */
  .nav {
    display: none; /* Скрываем меню */
  }

  .search-bar {
    display: none; /* Скрываем длинную полосу поиска */
  }

  .burger-menu,
  .search-mobile-btn {
    display: flex; /* Показываем иконки для мобилки */
  }

  .header__actions {
    gap: 10px; /* Сужаем отступы между иконками */
  }

  .action-icon {
    font-size: 18px;
  }

  .burger-menu {
    margin-left: 5px;
    color: #000;
  }

  /* 2. Hero секция */
  .hero {
    padding: 40px 0 60px;
    background-position: 70% center; /* Сдвигаем кресло, чтобы текст был читаем */
  }

  .hero__title {
    font-size: 30px; /* Уменьшаем заголовок для мобилки */
    margin-bottom: 20px;
  }

  .hero__subtitle {
    font-size: 16px;
    margin-bottom: 30px;
    max-width: 100%;
  }

  /* 3. Кнопки */
  .hero__btns {
    width: 100%;
    gap: 10px;
  }

  .btn {
    font-size: 16px;
    padding: 15px 20px;
  }

  /* Полупрозрачная кнопка (Glass effect) */
  .btn--outline {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}

/* Стили для открытого мобильного меню */
.nav.open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 100;
  padding: 100px 20px;
  gap: 30px;
}

.nav.open .nav__list {
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.nav.open .nav__link {
  font-size: 24px;
}

/* Фикс скролла */
.no-scroll {
  overflow: hidden;
}

/* --- ЛОГИКА ПОИСКА --- */
.search-bar {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 50px;
  padding-left: 14px;
  transition: all 0.3s ease;
}

/* На мобилках (до 768px) прячем инпут */
@media (max-width: 768px) {
  .search-bar {
    background: transparent; /* Убираем фон, пока не нажали */
    padding: 0;
  }
  .search-input {
    width: 0;
    opacity: 0;
    padding: 0;
    transition: all 0.3s ease;
    border: none;
    outline: none;
    background: transparent;
  }
  /* Когда добавим класс .active через JS */
  .search-bar.active {
    background: #f5f5f5;
    padding: 4px 4px 4px 15px;
    position: absolute; /* Всплывает поверх всего */
    left: 15px;
    right: 15px;
    z-index: 1001;
  }
  .search-bar.active .search-input {
    opacity: 1;
  }
}

/* --- СТИЛЬ МОБИЛЬНОГО МЕНЮ (ПО СКРИНШОТУ) --- */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%; /* Спрятано справа */
  width: 100%;
  height: 100vh;
  background: #f9f9f9;
  z-index: 999;
  transition: 0.4s ease;
  padding: 40px 20px;
}

.mobile-menu.open {
  right: 0;
}

.mobile-menu__content {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Текст прижат вправо */
  height: 100%;
}

.mobile-menu__logo {
  align-self: center; /* Лого по центру */
  margin-bottom: 40px;
  height: 40px;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 30px; /* Прижимает кнопку к низу */
}

.mobile-nav a {
  text-decoration: none;
  color: #000;
  font-size: 20px;
  font-weight: 400;
}

.mobile-menu__btn {
  width: max-content;
  padding-left: 28px;
  padding-right: 28px;
}

/* Запрет скролла при открытом меню */
body.no-scroll {
  overflow: hidden;
}

/* Настройки самого слайдера */
.categories-swiper {
  padding-bottom: 80px; /* Место для прогресс-бара снизу */
}

.categories-pagination {
  position: relative !important;
  margin-top: 40px;
}

/* --- СТИЛИ КАРТОЧКИ --- */
.category-card {
  background: #f7f7f7; /* Светлый фон как на макете */
  border-radius: 20px;
  overflow: hidden; /* Чтобы картинка не вылезала за округлые края */
  height: 100%; /* Карточки одинаковой высоты */
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.category-card:hover {
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
}

.category-card__image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 4; /* Соотношение сторон картинки */
  object-fit: cover;
}

.category-card__content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Растягивает контент, чтобы кнопка всегда была внизу */
  align-items: flex-start;
}

.category-card__title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 30px;
  color: var(--text-color);
  min-height: 2.6em; /* Резервирует место под 2 строки, чтобы кнопки выравнивались */
}

.category-card__btn {
  margin-top: auto; /* Прижимает кнопку к низу контентной области */
  width: 100%;
}

@media (max-width: 768px) {
  .category-card__btn {
    padding: 7px 30px;
    width: max-content;
    font-size: 12px;
    min-width: max-content;
  }
}

/* --- СТИЛИЗАЦИЯ ПРОГРЕСС-БАРА Swiper --- */
/* Сама полоса (серая траектория) */
.categories-swiper .swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.05);
  height: 3px;
  top: auto;
  bottom: 0;
  border-radius: 2px;
}

/* Заполненная часть (синяя линия) */
.categories-swiper
  .swiper-pagination-progressbar
  .swiper-pagination-progressbar-fill {
  background: var(--primary-color);
  border-radius: 2px;
}

/* --- АДАПТИВ ДЛЯ КАТЕГОРИЙ --- */
@media (max-width: 1024px) {
  .section-title {
    font-size: 38px;
    margin-bottom: 40px;
  }
}

@media (max-width: 768px) {
  .categories {
    padding: 60px 0;
  }

  .section-title {
    font-size: 32px;
  }

  .category-card__content {
    padding: 20px;
  }

  .category-card__title {
    font-size: 18px;
    margin-bottom: 20px;
  }
}

.section--categories .categories-swiper {
  padding-bottom: 0;
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Две колонки */
  gap: 60px 40px; /* Отступы между рядами и колонками */
  align-items: center;
}

/* Статистика */
.about__stats {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 25px;
}

.stat-item__num {
  font-size: 64px;
  font-weight: 700;
  color: var(--primary-color);
  min-width: 190px; /* Чтобы числа стояли ровно */
  text-align: right;
  line-height: 1;
}

.stat-item__text {
  font-size: 16px;
  line-height: 1.4;

  max-width: 280px;
}

/* Изображения */
.about__image img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  object-fit: cover;
  display: block;
}

/* Текстовый блок справа снизу */
.about__subtitle {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 25px;
}

@media (max-width: 768px) {
  .about__subtitle {
    font-size: 18px;
  }
}

.about__text {
  font-size: 18px;
}

.about__location {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.5;
  font-size: 18px;
  font-weight: 500;
}

.about__location i {
  font-size: 24px;
  color: var(--primary-color);
}

/* --- АДАПТИВ --- */
@media (max-width: 1024px) {
  .stat-item__num {
    font-size: 42px;
    min-width: 120px;
  }
  .about__grid {
    gap: 40px 30px;
  }
}

@media (max-width: 768px) {
  .about__grid {
    grid-template-columns: 1fr; /* Все в одну колонку на мобилке */
    gap: 50px;
  }

  .stat-item {
    gap: 20px;
  }

  .stat-item__num {
    font-size: 48px;
    min-width: 141px;
  }

  .about__image {
    order: 5;
  }

  .about__image--second {
    order: 1; /* Меняем порядок, чтобы фото шло после текста или наоборот */
  }

  .about__content {
    order: 4;
  }
}

.steps__list {
  display: flex;
  flex-direction: column;
}

.step-item {
  width: 100%;
  background-color: #f9f9f9;
  border-bottom: 1px solid var(--primary-color);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  overflow: hidden;
}

.step-item__container {
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 20px 15px !important; /* Чуть увеличил базу */
  transition: all 0.5s ease;
}

/* --- КАРТИНКА (Обрезка) --- */
.step-item__image-wrapper {
  width: 260px;
  height: 70px; /* Фиксированная высота в покое (видимая часть) */
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  transition: all 0.5s ease;
}

.step-item__image-wrapper img {
  width: 100%;
  height: 178px; /* Полная высота картинки всегда */
  object-fit: cover;
  /* Центрируем картинку, чтобы при обрезке был виден верх или центр */
  object-position: top;
  transition: all 0.5s ease;
}

.step-item__number {
  font-size: 28px;
  color: var(--primary-color);
  font-weight: 600;
}

.step-item__info {
  flex-grow: 1;
}

.step-item__title {
  font-size: 26px;
  color: var(--primary-color);
  font-weight: 500;
  transition: all 0.4s ease;
}

.step-item__content {
  max-height: 0;
  opacity: 0;
  transition: all 0.4s ease;
}

/* --- АКТИВНОЕ СОСТОЯНИЕ --- */
.step-item.active {
  background-color: var(--primary-color);
}

.step-item.active .step-item__container {
  padding: 40px 0; /* Красивое расширение контента */
}

.step-item.active .step-item__number,
.step-item.active .step-item__title {
  color: #fff;
}

.step-item.active .step-item__image-wrapper {
  height: 178px; /* Раскрываем на полную высоту */
}

.step-item.active .step-item__title {
  margin-bottom: 15px;
}

.step-item.active .step-item__content {
  max-height: 200px; /* С запасом для текста */
  opacity: 1;
}

.step-item__descr {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
  max-width: 550px;
}

@media (max-width: 768px) {
  /* Оставляем элементы в ряд */
  .step-item__container {
    flex-direction: row;
    align-items: center; /* Центрируем по вертикали в покое */
    gap: 15px; /* Уменьшаем зазор для экономии места */
    padding: 15px 10px !important;
    flex-wrap: nowrap; /* Запрещаем перенос на новую строку */
  }

  .step-item.active .step-item__container {
    align-items: flex-start; /* В активном состоянии выравниваем по верху */
    padding: 25px 10px !important;
  }

  /* Номер делаем компактнее */
  .step-item__number {
    font-size: 18px;
    min-width: 25px; /* Чтобы номер не сжимался */
  }

  /* Картинка на мобилке */
  .step-item__image-wrapper {
    width: 80px; /* Маленькая превью в покое */
    height: 45px;
    border-radius: 8px;
  }

  .step-item.active .step-item__image-wrapper {
    width: 115px; /* Расширяется, но не на весь экран, чтобы оставить место тексту */
    height: 80px;
  }

  /* Текстовый блок */
  .step-item__title {
    font-size: 16px; /* Уменьшаем шрифт заголовка */
    line-height: 1.2;
    margin-bottom: 0;
  }

  .step-item.active .step-item__title {
    margin-bottom: 10px;
  }

  .step-item__descr {
    font-size: 13px; /* Мелкий, но читаемый шрифт для описания */
    line-height: 1.3;
    max-width: 100%; /* Занимает всё оставшееся пространство */
  }

  /* Чтобы картинка внутри wrapper всегда была корректной */
  .step-item__image-wrapper img {
    height: 80px;
  }

  .step-item.active .step-item__image-wrapper img {
    height: 100%;
  }
}

/* Совсем для маленьких экранов (iPhone SE и т.д.) */
@media (max-width: 380px) {
  .step-item__container {
    gap: 10px;
  }

  .step-item__image-wrapper {
    display: none; /* Скрываем картинку на очень узких экранах, чтобы текст влез */
  }
}

.service {
  padding: 80px 0;
  background-color: #fff;
}

.service__grid {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr 1.7fr; /* Соотношение колонок как на макете */

  align-items: start;
}

/* Изображение */
.service__image {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.service__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-height: 293px;
}

/* Карточки преимуществ (центр) */
.service__features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-right: 20px;
  margin-left: 20px;
}

.feature-item {
  background-color: #f9f9f9; /* Светло-серый фон как в макете */
  padding: 32px 20px;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.feature-item:hover {
  transform: translateX(10px);
}

.feature-item__text {
  font-size: 17px;
  font-weight: 500;
  color: #000;
}

/* Инфо-блок (право) */
.service__subtitle {
  font-size: 23px;
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 35px;
  color: #000;
}

.conditions-label {
  margin-bottom: 20px;
}

.conditions-sublabel {
  font-weight: 500;
  margin-bottom: 5px;
}

.conditions-list {
  list-style: none;
  padding: 0;
}

.conditions-list li {
  line-height: 1.4;

  position: relative;
  padding-left: 20px;
}

.conditions-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: #333;
}

/* --- АДАПТИВ --- */

@media (max-width: 1100px) {
  .service__grid {
    grid-template-columns: 1fr 1fr; /* Переходим на 2 колонки */
  }
  .service__info {
    grid-column: span 2; /* Текст на всю ширину снизу */
  }
}

@media (max-width: 768px) {
  .service {
    padding-bottom: 0;
  }

  .service__grid {
    grid-template-columns: 1fr 1.5fr; /* Все в одну колонку */
    gap: 0;
  }

  .service__features {
    margin-right: 0;
  }

  .service__image {
    height: 100%;
  }

  .service__subtitle {
    font-size: 22px;
  }

  .feature-item {
    padding: 15px 10px;
  }

  .service__info {
    margin-top: 30px;
  }
}

.brands__slider-wrapper {
  position: relative;
  padding: 0 50px; /* Отступы для стрелок */
}

.brands-slider {
  padding: 20px 0;
}

.brands-slider .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* Высота зоны логотипа */
}

.brands-slider .swiper-slide img {
  max-width: 180px;
  max-height: 60px;
  object-fit: contain;

  transition: all 0.3s ease;
}

.brands-slider .swiper-slide:hover img {
  opacity: 1;
}

/* Стилизация стрелок как на макете */
.brands-prev,
.brands-next {
  width: 40px !important;
  height: 40px !important;
  background-color: #f9f9f9;
  border-radius: 50%;
  color: #000 !important;
  transition: all 0.3s ease;
}

.brands-prev:after,
.brands-next:after {
  font-size: 16px !important;
  font-weight: bold;
}

.brands-prev:hover,
.brands-next:hover {
  background-color: var(--primary-color);
  color: #fff !important;
}

.brands-prev {
  left: 0 !important;
}
.brands-next {
  right: 0 !important;
}

.reviews {
  background-color: #fcfcfc; /* Очень легкий серый фон как на скрине */
  overflow: hidden;
  padding-bottom: 100px;
}

.reviews__inner {
  display: flex;
  align-items: flex-start;
  gap: 50px;
}

/* --- ЛЕВАЯ ЧАСТЬ --- */
.reviews__left {
  flex: 0 0 342px; /* Фиксированная ширина для левого блока */
}

/* --- ПРАВАЯ ЧАСТЬ (СЛАЙДЕР) --- */
.reviews__right {
  flex: 1;
  min-width: 0;
  margin-right: calc(-1 * (100vw - 100%) / 2);
}

.review-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  height: 100%; /* Карточки одной высоты */
  display: flex;
  flex-direction: column;
}

.review-card__video {
  position: relative;
  height: 260px;
}

.review-card__video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px; /* Выравнивание треугольника визуально по центру */
  transition: transform 0.3s ease;
}

.review-card__play:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.review-card__content {
  position: relative;
  z-index: 2;
  background: #fff;
  margin-top: -30px; /* Наползает на видео */
  border-radius: 20px 20px 16px 16px; /* Округление сверху */
  padding: 25px 20px 20px;
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.05); /* Легкая тень для объема */
  flex-grow: 1;
}
.review-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.review-card__author img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.review-card__name {
  font-weight: 500;
  font-size: 15px;
}

.review-card__text-wrap {
  min-height: 104px;
  max-height: 104px; /* Высота для скролла */
  overflow-y: auto;
  padding-right: 8px;
}

/* Стилизация скроллбара внутри отзыва */
.review-card__text-wrap::-webkit-scrollbar {
  width: 3px;
}
.review-card__text-wrap::-webkit-scrollbar-thumb {
  background: #d1d1d1;
  border-radius: 10px;
}

.review-card__text {
  font-size: 14px;
  line-height: 1.5;

  margin: 0;
}

/* --- ПАГИНАЦИЯ --- */
.reviews-pagination {
  margin-top: 30px;
  position: relative !important;
  height: 3px !important;
  background: #eaeaea !important;
  border-radius: 3px;
}

.reviews-pagination .swiper-pagination-progressbar-fill {
  background: var(--primary-color) !important;
  border-radius: 3px;
}

/* --- АДАПТИВ --- */
@media (max-width: 1024px) {
  .reviews__inner {
    flex-direction: column;
    gap: 30px;
  }
  .reviews__left {
    flex: none;
    width: 100%;
  }
  .reviews__right {
    margin-right: 0;
    width: 100%;
  }
}

@media (max-width: 768px) {
  /* Удалены !important и исправлены селекторы */
  .reviews-slider .swiper-slide {
    height: auto;
  }

  .reviews {
    padding-bottom: 60px;
  }

  .reviews .btn {
    display: none;
  }

  .reviews__inner {
    gap: 0;
  }
}

.faq__inner {
  display: flex;
  gap: 50px;
}

.faq__left {
  flex: 0 0 467px;
}

.faq__right {
  flex: 1;
}

/* Базовый стиль элемента - теперь без общего фона */
.faq__item {
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

/* Фон переносим сюда */
.faq__header {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #f7f7f7; /* Светло-серый для неактивных */
  border-radius: 12px; /* Скругляем сам заголовок */
  transition: all 0.3s ease;
  cursor: pointer;
}

.faq__question {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  color: #000;
  transition: color 0.3s ease;
}

.faq__icon {
  font-size: 24px;
  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

/* --- СОСТОЯНИЕ ACTIVE --- */

/* Синим закрашиваем ТОЛЬКО header */
.faq__item.active .faq__header {
  background: var(--primary-color);
}

.faq__item.active .faq__question {
  color: #fff;
}

.faq__item.active .faq__icon {
  color: #fff;
  transform: rotate(90deg); /* Стрелка вниз */
}

/* Контент теперь на обычном фоне */
.faq__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-out;
}

.faq__item.active .faq__content {
  max-height: 500px;
}

.faq__answer {
  padding: 20px 30px; /* Отступ текста от синего заголовка */
  margin: 0;
}

.feedback {
  background-color: #f9f9f9; /* Светлый фон секции */
  padding: 40px 50px;
  border-radius: 10px;
  overflow: hidden;
}

.feedback__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
}

.feedback__title {
  margin-bottom: 20px;
}

.feedback__content {
  flex: 0 1 500px;
  position: relative;
  z-index: 2;
}

.feedback__subtitle {
  font-size: 16px;
  line-height: 1.5;

  margin-bottom: 40px;
  max-width: 540px;
}

.feedback__btn {
  width: 100%;
  padding: 18px;
  border-radius: 50px;
  margin-top: 10px;
  margin-bottom: 20px;
}

/* Чекбокс */
.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.checkbox__text {
  font-size: 14px;

  line-height: 1.3;
}

/* Изображение */
.feedback__image {
  flex: 0 0 540px;
}

.feedback__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Адаптив */

@media (max-width: 1024px) {
  .feedback__inner {
    flex-direction: column;
    gap: 30px;
  }
  .feedback__image {
    width: 100%;
    margin-right: 0;
  }
  .feedback__subtitle {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .faq__inner {
    flex-direction: column;
    gap: 0;
  }
  .faq__left {
    flex: 1;
  }

  .feedback {
    padding: 30px 10px;
  }

  .feedback__inner {
    flex-direction: column;
  }
  .feedback__image {
    display: none;
    width: 100%;
    margin-right: 0;
    order: -1; /* Картинка сверху на мобилках */
  }
  .feedback__subtitle {
    margin-left: auto;
    margin-right: auto;
  }
  .checkbox {
    justify-content: center;
  }
}

/* Базовые стили секции */
.footer {
  background-color: #f8f9fa; /* Светло-серый фон как на макете */
  padding-top: 60px;
  padding-bottom: 20px;
  margin-top: -3px;
}

/* Верхняя часть (сетка 4 колонки) */
.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr; /* Пропорции колонок */
  gap: 40px;
  margin-bottom: 40px;
}

/* Колонка бренда */
.footer__logo img {
  height: 40px; /* Настройте под размер вашего логотипа */
  margin-bottom: 20px;
}

.footer__desc {
  font-size: 14px;
  line-height: 1.5;

  margin-bottom: 24px;
  max-width: 280px;
}

/* Соцсети */
.footer__socials {
  display: flex;
  gap: 12px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--primary-color, #439dff); /* Синий цвет */
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
  text-decoration: none;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}

.social-link:hover {
  transform: translateY(-3px);
  background-color: #3182ce;
}

/* Навигация (меню) */
.footer__menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__menu a {
  text-decoration: none;
  color: inherit;
  font-size: 16px;
  transition: color 0.3s ease;
}

.footer__menu a:hover {
  color: var(--primary-color, #439dff);
}

/* Контакты */
.footer__subtitle {
  display: block;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 20px;
  color: #333;
}

.footer__address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 20px;
}

.address-icon {
  color: var(--primary-color, #439dff);
  font-size: 18px;
  margin-top: 2px;
}

.footer__schedule p {
  margin: 0 0 6px 0;
  font-size: 14px;
}

/* Нижняя часть (Копирайт) */
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--primary-color, #439dff); /* Синяя линия */
  font-size: 12px;
}

.footer__policy {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

.footer__policy:hover {
  color: var(--primary-color, #439dff);
}

/* Адаптив */
/* Адаптив для планшетов и мобильных */
@media (max-width: 992px) {
  .footer__inner {
    /* Переключаемся на сетку из двух колонок */
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px;
  }

  /* Растягиваем бренд на всю ширину, если нужно акцентировать */
  .footer__col--brand {
    grid-column: span 2;
    margin-bottom: 20px;
  }
}

.menu-item {
  list-style-type: none;
}

/* --- БАЗОВЫЕ И ДЕСКТОПНЫЕ СТИЛИ --- */
.catalog-menu {
  display: none;
  position: fixed; /* Чтобы не зависеть от относительных родителей */
  top: 105px; /* Отрегулируй под высоту своей шапки */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1200px;
  max-height: calc(100vh - 145px);
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  z-index: 1005;
  border-radius: 15px;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f5f5f5;
}

/* Стили скроллбара для Chrome/Safari */
.catalog-menu::-webkit-scrollbar {
  width: 8px;
}

.catalog-menu::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 15px;
}

.catalog-menu::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.catalog-menu::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.catalog-menu.is-open {
  display: block;
}

.catalog-menu__container {
  display: flex;
  min-height: 500px;
}

.catalog-menu__sidebar {
  width: 300px;
  background: #fcfcfc;
  padding: 10px 0;
  border-right: 1px solid #eee;
  border-radius: 15px 0 0 15px;
}

.catalog-menu__item {
  position: relative;
}

.catalog-menu__link {
  display: block;
  padding: 12px 25px;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  flex-grow: 1;
}

.catalog-menu__toggle {
  padding: 12px 20px;
  cursor: pointer;
  color: #ccc;
  display: flex;
  align-items: center;
}

.catalog-menu__title {
  margin-bottom: 20px;
}

.catalog-sublist li {
  list-style-type: none;
}

.catalog-sublist {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
}

.catalog-sublist li a {
  text-decoration: none;
  color: inherit;
  transition: 0.2s linear;
}

.catalog-sublist li a:hover {
  color: var(--primary-color);
}

.catalog-menu__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.catalog-menu__item.is-active {
  color: #007bff;
  background: #fff;
}

.catalog-menu__content {
  flex: 1;
  padding: 30px;
}

.catalog-menu__subcats {
  display: none;
}
.catalog-menu__subcats:first-child {
  display: block;
}

.catalog-menu__mobile-top,
.catalog-menu__mobile-subcats {
  display: none;
}

/* --- МОБИЛЬНЫЕ СТИЛИ (Аккордеон и Оверлей) --- */
@media (max-width: 991px) {
  .catalog-menu {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100vh;
    border-radius: 0;
    overflow-y: auto;
  }

  .catalog-menu__mobile-top {
    display: flex;
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  #backToMobileMenu {
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #007bff;
  }

  .catalog-menu__container {
    flex-direction: column;
    min-height: auto;
  }
  .catalog-menu__sidebar {
    width: 100%;
    border: none;
  }
  .catalog-menu__content {
    display: none;
  } /* Скрываем десктопную правую часть */

  .catalog-menu__item {
    flex-wrap: wrap;
    border-bottom: 1px solid #f5f5f5;
  }

  .catalog-menu__toggle {
    border-left: 1px solid #f0f0f0;
    transition: 0.3s;
  }

  /* Раскрывающийся список на мобилке */
  .catalog-menu__mobile-subcats {
    display: none;
    width: 100%;
    background: #f9f9f9;
    padding: 10px 25px 20px;
  }

  .catalog-menu__mobile-subcats ul {
    list-style: none;
  }
  .catalog-menu__mobile-subcats li a {
    display: block;
    padding: 8px 0;
    color: inherit;
    text-decoration: none;
    font-size: 15px;
  }

  /* Состояние раскрытого аккордеона */
  .catalog-menu__item.is-expanded .catalog-menu__mobile-subcats {
    display: block;
  }

  .catalog-menu__item.is-expanded .catalog-menu__toggle {
    transform: rotate(90deg);
    color: #007bff;
  }
}

.catalog-container {
  display: flex;
  gap: 40px;
  margin-top: 30px;
  align-items: flex-start;
}
.catalog-sidebar {
  width: 250x;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
}

/* Кастомный ползунок */
.sidebar-inner-scroll {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 15px;
}
.sidebar-inner-scroll::-webkit-scrollbar {
  width: 4px;
}
.sidebar-inner-scroll::-webkit-scrollbar-thumb {
  background: #00a3ff;
  border-radius: 10px;
}
.sidebar-inner-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Аккордеон */
.acc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: .2s linear;
}
.acc-header a {
  text-decoration: none;
  transition: .2s linear;
  font-weight: 500;
  font-size: 15px;
}

.acc-header a:hover {
  color: var(--primary-color);
}

.acc-header a.active {
  color: var(--primary-color);
}
.toggle-arrow {
  cursor: pointer;
  transition: 0.3s;

  font-size: 18px;
  padding: 5px;
}
.acc-item.is-open .toggle-arrow {
  transform: rotate(180deg);
}

.catalog-archive-page,.wishlist-page{
  padding-top: 50px;
}

.acc-submenu {
  display: none;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 10px 0 10px 15px;
}
.acc-submenu a {
  font-size: 14px;

  text-decoration: none;
  transition: 0.2s;
}

.acc-submenu a:hover {
  color: var(--primary-color);
}

.acc-submenu a.active {
  color: var(--primary-color);
  font-weight: 700;
}

/* --- Сетка --- */
.catalog-grid, .related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  gap: 20px;
  width: 100%;
}

/* Одинаковая высота карточек в ряду */
.product-card {
  background: #fff;
  border-radius: 15px;
  /* Важно: padding сверху 0, чтобы картинка прижималась к краям */
  padding: 0 20px 20px 20px; 
  border: 1px solid #f0f0f0;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  width: 100%; 
  box-sizing: border-box;
  overflow: hidden; /* Чтобы скругление карточки обрезало углы картинки */
  height: 100%; /* Заставляет карточку тянуться на всю высоту Grid-строки */
}

/* Картинка без padding */
.product-card__image {
  position: relative;
  /* Выталкиваем картинку влево и вправо на величину боковых паддингов карточки (20px) */
  margin: 0 -20px 20px -20px; 
  width: calc(100% + 40px); 
  aspect-ratio: 4 / 3; /* Фиксированная пропорция для идеального выравнивания */
  background-color: #fff; /* Фон, если картинка contain */
}

.product-card__image img {
  width: 100%;    
  height: 220px;   
  /* object-fit: contain гарантирует, что оборудование впишется целиком без обрезки, 
     а одинаковый aspect-ratio контейнера сделает все блоки картинок равными */
  object-fit: cover; 
  display: block;
}

/* Контентная часть, которая заполнит всё оставшееся пространство */
.product-card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Растягивается и выталкивает футер вниз */
}

.product-card__title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.product-card__price {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 700;
  color: #111;
  /* Если цена идет перед футером, маргин-боттом можно не увеличивать, 
     так как футер прижмется к низу за счет margin-top: auto */
}

/* Кнопка "Подробнее" всегда прижата к нижнему краю карточки */
.product-card__footer {
  margin-top: auto; 
  width: 100%;
}

.product-card__footer .btn {
  width: 100%;
  text-align: center;
}

/* Кнопка Избранного (аккуратно сдвигаем внутрь от края картинки) */
.wishlist-btn {
  position: absolute;
  right: 15px;
  top: 15px;
  background: #fff; /* Белая подложка, чтобы сердце хорошо читалось на любом фоне */
  border: none;
  font-size: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s;
}

.wishlist-btn:hover {
  transform: scale(1.05);
}

.wishlist-btn i {
  transition: color 0.3s ease;
}

.wishlist-btn.active i {
  color: #ff4747;
}

.product-card__title a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}

.product-card__title a:hover {
  color: #00A3FF;
}

.wishlist-page h1 {
  margin-bottom: 30px;
}

#wishlist-empty p {
  margin-bottom: 20px;
}

/* --- Адаптив --- */
@media (max-width: 1024px) {
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .catalog-sidebar {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .catalog-container {
    flex-direction: column;
    gap: 20px;
  }

  .product-card__image img{
    height: 175px;
  }

  .catalog-sidebar {
    width: 100%;
    position: static;
  }

  .sidebar-inner-scroll {
    max-height: 300px;
    background: #fcfcfc;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #eee;
  }

  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .product-card {
    /* На мобилках уменьшаем боковые отступы до 15px */
    padding: 0 15px 15px 15px; 
  }

  .product-card__image {
    /* Пересчитываем отрицательный маргин под новые паддинги */
    margin: 0 -15px 15px -15px;
    width: calc(100% + 30px);
    aspect-ratio: 4 / 3; /* Пропорция остается железной */
  }

  .catalog-main-title {
    font-size: 22px;
  }
}



.catalog-main-title{
  margin-bottom: 50px;
}


.product-single-page {
    padding: 60px 0 0;
}

.product-single-page .swiper-slide{
  width: 100% !important;
}

.breadcrumbs {
    font-size: 14px;
    color: #888;
    margin-bottom: 30px;
}
.breadcrumbs a {
    color: inherit;
    text-decoration: none;
    transition: 0.2s;
}
.breadcrumbs a:hover {
    color: #00A3FF;
}

/* --- ОСНОВНАЯ СЕТКА (DESKTOP) --- */
.product-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Галерея чуть шире инфо-блока */
    gap: 50px;
    margin-bottom: 60px;
    align-items: start;
}

/* ФИКС ГАЛЕРЕИ (чтобы не вылезала) */
.product-gallery {
    min-width: 0; /* Важно для работы Swiper внутри Grid/Flex */
    width: 100%;
}

.product-main-slider {
    width: 100%;
    max-width: 100%;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid #f0f0f0;
    position: relative;
}

.product-main-slider img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3; /* Сохраняем пропорцию */
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

/* --- АДАПТИВ ПОД ПЛАНШЕТЫ (до 992px) --- */
@media (max-width: 992px) {
    .product-grid {
        grid-template-columns: 1fr; /* Переход в одну колонку */
        gap: 40px;
    }

    .product-single-page {
        padding: 40px 0 0;
    }

    .product-info {
        max-width: 100%;
    }

    .product-title {
        font-size: 28px;
    }
}

/* --- АДАПТИВ ПОД ТЕЛЕФОНЫ (до 768px) --- */
@media (max-width: 768px) {
    .product-grid {
        gap: 30px;
    }

    .product-main-slider img {
        aspect-ratio: 4/3; /* На мобилках квадрат выглядит лучше */
    }

    .product-price-block {
        margin-bottom: 30px;
        flex-wrap: wrap;
    }

    /* Делаем кнопки удобными для нажатия пальцем */
    .product-actions {
        flex-direction: column; 
        gap: 12px;
    }

    .product-actions .btn {
        width: 100%;
        padding: 18px;
        order: 1; /* Кнопка заявки сверху */
    }

    .single-wishlist {
        width: 100%;
        height: 54px;
        border-radius: 10px;
        order: 2;
    }

    /* Табы на мобилках */
    .tabs-header {
        gap: 20px;
        overflow-x: auto; /* Скролл, если табы не влезают */
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn {
        font-size: 16px;
        white-space: nowrap;
    }
}


/* Общий фикс для всех Swiper слайдов, чтобы не ломали ширину */
.swiper-slide {
    box-sizing: border-box;
}


.product-thumbs-slider .swiper-slide {
    width: auto !important;
    opacity: 0.5;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: 0.3s;
    border: 1px solid #eee;
}
.product-thumbs-slider .swiper-slide-thumb-active {
    opacity: 1;
    border-color: #00A3FF;
}

/* Инфо блок */
.product-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
}
.product-meta {
    margin-bottom: 30px;
    font-size: 16px;
    color: #555;
}
.product-price-block {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 40px;
}
.price-label {
    font-size: 18px;
    color: #888;
}
.price-value {
    font-size: 36px;
    font-weight: 700;
    color: #111;
}

/* Кнопки */
.product-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}
.single-wishlist {
    position: static;
    border: 1px solid #eee;
    border-radius: 80px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}
.single-wishlist:hover {
    border-color: #ff4747;
}

/* Табы */
.tabs-header {
    display: flex;
    gap: 30px;
    border-bottom: 2px solid #eee;
    margin-bottom: 30px;
}
.tab-btn {
    background: none;
    border: none;
    padding: 0 0 15px 0;
    font-size: 18px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    position: relative;
}
.tab-btn.active {
    color: #111;
}
.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #00A3FF;
}
.tab-pane {
    display: none;
    animation: fadeIn 0.4s ease;
}
.tab-pane.active {
    display: block;
}

/* Таблица характеристик
.chars-table {
    width: 100%;
    max-width: 600px;
    border-collapse: collapse;
}
.chars-table td {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
} */


/* Модалки (Общие стили) */
.modal-overlay, .lightbox-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 9999;
}
.modal-overlay.active, .lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}
.modal-window {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    position: relative;
    transform: translateY(20px);
    transition: 0.3s;
}
.modal-overlay.active .modal-window {
    transform: translateY(0);
}
.modal-close, .lightbox-close {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 30px;
    background: none; border: none; cursor: pointer; color: #888;
}
.lightbox-close { color: #fff; right: 40px; top: 30px; }
.lightbox-overlay img {
    max-width: 90%; max-height: 90vh;
    border-radius: 10px;
}

/* Форма */
.input-group { margin-bottom: 15px; }
.input-group input {
    width: 100%; padding: 15px; border: 1px solid #eee; border-radius: 8px; font-family: inherit; box-sizing: border-box;
}
.full-width { width: 100%; padding: 15px; }
.form-response { margin-top: 15px; text-align: center; font-size: 14px; }

/* Адаптив */
@media (max-width: 768px) {
    .product-grid { grid-template-columns: 1fr; gap: 30px; }
    .product-title { font-size: 24px; }
}


/* Контейнер описания и табов */
.content-formatted {
    line-height: 1.7;
  
    font-size: 16px;
}

/* Заголовки внутри описания */
.content-formatted h2, 
.content-formatted h3 {
    margin: 30px 0 15px;
    color: #111;
    font-weight: 600;
}

.content-formatted h2 { font-size: 24px; }
.content-formatted h3 { font-size: 20px; }

/* Текст и абзацы */
.content-formatted p {
    margin-bottom: 20px;
}

/* Списки (Блок врача, Гидроблок и т.д.) */
.content-formatted ul {
    margin-bottom: 25px;
    padding-left: 0;
    list-style: none;
}

.content-formatted ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 0;
}

/* Кастомный маркер списка (синяя точка) */
.content-formatted ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background-color: #00A3FF;
    border-radius: 50%;
}

/* Стилизация таблицы характеристик */
.chars-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.chars-table tr {
    transition: background 0.2s;
}

.chars-table tr:nth-child(2n) {
    background-color: #f9f9f9;
}

/* Эффект зебры или подсвечивание при наведении */
.chars-table tr:hover {
    background-color: #fcfcfc;
}

.chars-table td {
    padding-left: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
}

/* Левая колонка (название параметра) */
.chars-table td:first-child {
  
    font-weight: 400;
    width: 40%;
}

/* Правая колонка (значение) */
.chars-table td:last-child {
    color: #111;
    font-weight: 500;
    text-align: right; /* Значения прижимаем к правому краю для чистоты */
}

/* Оформление акцентов в тексте */
.content-formatted strong {
    color: #111;
    font-weight: 600;
}

/* Адаптив для таблиц на мобилках */
@media (max-width: 480px) {
    .chars-table td {
        padding: 12px 10px;
        font-size: 14px;
    }
    
    .chars-table td:first-child {
        width: 50%;
    }
}





/* --- АРХИВ КЕЙСОВ --- */
.cases-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    margin-top: 40px;
}
.case-card {
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    transition: 0.3s;
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
}
.case-card:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    transform: translateY(-5px);
}
.case-card__img img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}
.case-card__content {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.case-card__content h3 { margin-bottom: 15px; font-size: 22px; }
.case-card__content p { color: #666; margin-bottom: 20px; flex-grow: 1; line-height: 1.6; }
.btn-link { color: #00A3FF; font-weight: 600; display: flex; align-items: center; gap: 5px; }

/* --- СИНГЛ КЕЙСА --- */
.single-case-page { padding: 60px 0; }
.case-main-title { font-size: 42px; margin-bottom: 60px; font-weight: 700; }

/* Блоки: картинка слева, текст справа */
.case-block {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}
.case-block__image {
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
}
.case-block__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.case-block__text {
    flex: 1;
}

/* РЕВЕРС (Четные блоки меняются местами) */
.case-block:nth-child(even) {
    flex-direction: row-reverse;
}

/* Секция Отзыва */
.case-review-section {
    display: flex;
    gap: 60px;
    margin-top: 100px;
    padding-top: 60px;
    border-top: 1px solid #eee;
}
.case-review__info {
    flex: 1;
    max-width: 400px;
}
.review-title { font-size: 24px; margin-bottom: 20px; font-weight: 700; }
.review-name { font-size: 18px; font-weight: 600; margin-bottom: 15px; }
.review-quote {
    font-style: italic;
    color: #555;
    line-height: 1.8;
    position: relative;
}

.case-review__gallery {
    flex: 2; /* Галерея занимает больше места */
    min-width: 0; /* Обязательно для Swiper внутри Flex */
}
.review-gallery-slider .swiper-slide img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 15px;
}

/* Адаптив */
@media (max-width: 992px) {
    .case-block, .case-block:nth-child(even) {
        flex-direction: column; /* На планшетах все друг под другом */
        gap: 30px;
        margin-bottom: 50px;
    }
    .case-review-section {
        flex-direction: column;
    }
    .case-review__info { max-width: 100%; }
}

@media (max-width: 768px) {
    .cases-grid { grid-template-columns: 1fr; }
    .case-main-title { font-size: 32px; }
    .review-gallery-slider .swiper-slide img { height: 220px; }
}

/* --- MOBILE ADAPTATION --- */

@media (max-width: 992px) {
    .product-grid {
        grid-template-columns: 1fr; /* Стак колонок: фото сверху, инфо снизу */
        gap: 30px;
    }

    .product-title {
        font-size: 26px; /* Чуть меньше заголовок */
        margin-bottom: 15px;
    }

    .price-value {
        font-size: 28px; /* Уменьшаем цену для мобилок */
    }

    .product-actions {
        flex-direction: column; /* Кнопки в ряд могут не влезть, ставим друг под друга */
        align-items: stretch;
    }

    .product-actions .btn { /* Предполагаю, что у кнопки заказа есть класс .btn */
        width: 100%;
        justify-content: center;
        order: 1; /* Кнопка заказа первая */
    }

    .single-wishlist {
        order: 2; /* Избранное под кнопку */
        width: 100%;
        height: 50px;
        border-radius: 12px; /* На мобилках лучше смотрятся прямоугольные кнопки */
    }

    /* Табы на мобилках */
    .tabs-header {
        gap: 20px;
        overflow-x: auto; /* Позволяем табам скроллиться горизонтально, если их много */
        white-space: nowrap;
        padding-bottom: 5px;
    }

    .tab-btn {
        font-size: 16px;
        flex-shrink: 0;
    }
}

@media (max-width: 576px) {
    .product-grid {
        gap: 20px;
        margin-bottom: 40px;
    }

    .product-main-slider img {
        aspect-ratio: 1/1; /* На маленьких экранах квадратные фото экономят место */
    }

    .product-thumbs-slider .swiper-slide {
        width: 60px !important; /* Делаем превьюшки поменьше */
        height: 60px;
    }

        .product-thumbs-slider .swiper-slide img{
          width: 60px;
          height: 60px;
        }

    .product-price-block {
        flex-direction: column;
        gap: 5px;
        margin-bottom: 25px;
    }

    .product-meta {
        font-size: 14px;
    }
}

/* Анимация появления табов */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


.video-mute-btn:hover {
    transform: scale(1.1);
    
    color:#007bff;
}

/* Скрываем кнопку, если видео не загрузилось */
.hero__video-wrapper video:not([src]) + #videoMuteBtn {
    display: none;
}

@media (max-width: 768px) {
    .video-mute-btn {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}


/* --- Плавающие виджеты слева --- */
.floating-widgets {
    position: fixed;
    left: 30px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 99;
}

#floatingCallbackForm input[type="text"],#floatingCallbackForm input[type="email"],#floatingCallbackForm input[type="password"],#floatingCallbackForm input[type="tel"]{
  margin-bottom: 0;
}

.floating-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #00A3FF;
    color: #fff;
    border: none;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 163, 255, 0.4);
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
}

.floating-btn:hover {
    transform: scale(1.1);
    background: #008be0;
}

/* Пульсация для кнопки звонка */
.callback-btn {
    background: #25D366; /* Зеленая для звонка, можно поменять на свой бренд-цвет */
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    animation: pulse-green 2s infinite;
}
.callback-btn:hover {
    background: #1ebc5a;
    animation: none;
}

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Раскрывающийся список соцсетей */
.floating-socials-wrapper {
    position: relative;
}

.floating-socials-list {
    position: absolute;
    bottom: 75px;
    left: 5px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-socials-wrapper:hover .floating-socials-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.floating-sub-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.floating-sub-btn:hover {
    transform: scale(1.15);
    color: #fff;
}

/* Адаптив для телефонов */
@media (max-width: 768px) {
    .floating-widgets {
        left: 20px;
        bottom: 20px;
        gap: 10px;
    }
    .floating-btn {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
    .floating-socials-list {
        bottom: 60px;
    }
    .floating-sub-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}