/* Общие настройки для сброса лишних отступов браузера */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* ==========================================
   ГЛОБАЛЬНАЯ ТИПОГРАФИКА
========================================== */

body {
  font-family: "Montserrat", sans-serif;
  color: #572d0a;
  background-color: #eee4d6;
  font-size: 16px;
  line-height: 1.6;
}

/* Все заголовки */

h1,
h2,
h3,
h4,
h5 {
  font-family: "Cormorant Garamond", serif;
  color: #572d0a;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.4em;
}

h1 {
  font-size: clamp(32px, 5vw, 52px);
}

h2 {
  font-size: clamp(28px, 4vw, 42px);
}

h3 {
  font-size: clamp(22px, 3vw, 30px);
}

h4 {
  font-size: clamp(18px, 2vw, 24px);
}

h5 {
  font-size: clamp(16px, 1.5vw, 20px);
}

/* Обычный текст */

p,
a,
span,
li,
button,
input,
textarea,
label {
  font-family: "Montserrat", sans-serif;
}
/* 1. Делаем всю шапку гибкой строкой (Flexbox) */
.site-header {
  background-color: #eee4d6;
  padding: 15px 40px;

  display: flex; /* Включает режим строки для элементов внутри */
  justify-content: space-between; /* Логотип уходит влево, главное меню — вправо */
  align-items: center; /* Выравнивает логотип и ссылки строго по центру высоты */
  position: relative;
}
.menu-title {
  color: #572d0a;
  font-family: "Cormorant Garamond";
  font-size: 3rem;
}
.menu-btn {
  text-decoration: none;
}
/* 2. Стили для логотипа (теперь он в одной строке с меню) */
.logo img {
  width: 100%;
  max-width: 200px;
  height: auto;
}

/* 3. Главная навигация (тег <nav>) */
.site-header nav ul {
  list-style-type: none; /* Полностью убираем маркеры (точки) */
  display: flex; /* Пункты меню выстраиваются в ряд */
  gap: 15px; /* Красивое расстояние между пунктами */
}

/* Настройка текста и отступов для ссылок главного меню */
.site-header nav ul li a {
  text-decoration: none; /* Убираем подчеркивание */
  font-size: 16px;
  font-family: Arial, sans-serif;
  color: #0066cc;
  padding: 8px 16px; /* Внутренние отступы */
  display: inline-block;
  transition: all 0.3s ease; /* Плавный переход цвета при наведении */
}

.site-header nav ul li a:hover {
  color: #003366;
  background-color: #e0e0e0;
  border-radius: 4px;
}
/* ---------- ЛЕВОЕ МЕНЮ ---------- */

.side-menu {
  position: fixed;
  top: 0;
  left: 0;

  width: 320px;
  height: 100vh;

  display: flex;
  flex-direction: column;

  padding-top: 120px;
  gap: 16px;

  z-index: 1000;

  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);

  pointer-events: none;
}
.side-menu.active {
  transform: translateX(0);

  pointer-events: auto;
}
.menu-item {
  display: flex;
  align-items: center;

  width: 18rem;
  height: 4rem;

  padding-left: 4rem;

  border-radius: 9999px;

  background: #aa927b;

  color: #572d0a;
  text-decoration: none;

  font-family: "Cormorant Garamond", serif;
  font-size: 1.8rem;
  font-weight: 600;

  transform: translateX(-120%);
  opacity: 0;

  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;

  pointer-events: auto;
}

.side-menu.active .menu-item {
  transform: translateX(0);
  opacity: 1;
}

.side-menu.active .menu-item:nth-child(1) {
  transition-delay: 0.05s;
}

.side-menu.active .menu-item:nth-child(2) {
  transition-delay: 0.15s;
}

.side-menu.active .menu-item:nth-child(3) {
  transition-delay: 0.25s;
}

.side-menu.active .menu-item:nth-child(4) {
  transition-delay: 0.35s;
}

.side-menu.active .menu-item:nth-child(5) {
  transition-delay: 0.45s;
}

.menu-item:hover {
  background: #d2b595;
}
.hero {
  width: 100%;
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 4. БОКОВОЕ МЕНЮ (aside) — Фиксируем справа, чтобы оно выглядывало */
.side-nav {
  position: fixed; /* Закрепляем на экране при прокрутке */
  right: -60px; /* Прячем большую часть меню за правый край экрана */
  top: 50%; /* Размещаем по центру вертикали */
  transform: translateY(-50%); /* Точное выравнивание по центру */

  background-color: #572d0a; /* Темный фон для контраста */
  padding: 20px;
  border-radius: 8px 0 0 8px; /* Скругляем только левые углы, которые выглядывают */
  width: 160px; /* Ширина панели (40px будет выглядывать наружу) */
  transition: right 0.3s ease; /* Эффект плавного выдвижения при наведении */
  z-index: 1000; /* Поверх всех остальных элементов */
}

/* Эффект: когда наводим мышку на выглядывающий край, меню плавно выезжает полностью */
.side-nav:hover {
  right: 0; /* Прижимаем полностью к правому краю */
}

/* Пункты бокового меню строго в столбик */
.side-nav ul {
  list-style-type: none; /* Убираем точки */
  display: flex;
  flex-direction: column; /* Строго в столбик (один под другим) */
  gap: 12px; /* Расстояние между пунктами по вертикали */
}

/* Ссылки внутри бокового меню */
.side-nav ul li a {
  text-decoration: none;
  font-size: 15px;
  font-family: Arial, sans-serif;
  color: #ffffff; /* Белый текст на темном фоне */
  display: block;
}

.side-nav ul li a:hover {
  color: #ffcc00; /* Желтый цвет при наведении в боковом меню */
}
/* ==========================================
   СЕКЦИЯ КАРТОЧЕК МЕБЕЛИ (ФАБРИКА СЕЙШЕЛЫ)
   ========================================== */

#cards {
  margin-top: 0;
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #eee4d6; /* Ваш алебастрово-бежевый фон */
  width: 100%;
  overflow: hidden;
}

/* ЗАГОЛОВОК СЕКЦИИ */
.section-title {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  color: #572d0a;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.title-container {
  max-width: 1200px;
  margin: 0 auto 45px;
}

/* Обертка для контроля стрелок */
.carousel-wrapper {
  position: relative;
  width: 100%;
}

/* Флекс-строка для карточек */
.cards-full-row {
  display: flex;
  width: 100%;
  gap: 15px;
  padding: 0;
  box-sizing: border-box;
  overflow-x: auto;
  scroll-behavior: smooth;

  /* Полностью прячем стандартный ползунок */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.cards-full-row::-webkit-scrollbar {
  display: none;
}

/* САМА КАРТОЧКА — СТРОГО КВАДРАТНАЯ ФЛЕКС-СИСТЕМА */
.card-item {
  flex: 1 0 240px; /* На весь экран ноутбука, минимум 240px */
  aspect-ratio: 1 / 1; /* Идеальный квадрат для квадратных фото */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(87, 45, 10, 0.04);

  /* Внутренний флекс */
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;

  /* Анимация увеличения карточки */
  transition:
    flex-grow 0.4s ease,
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

/* ЭФФЕКТ НАВЕДЕНИЯ №2: КАРТОЧКА ПЛАВНО РАСШИРЯЕТСЯ И ПРИПОДНИМАЕТСЯ */
@media (hover: hover) {
  .card-item:hover {
    flex-grow: 3; /* Карточка становится шире, расталкивая соседей */
    transform: translateY(-5px); /* Слегка приподнимается вверх */
    box-shadow: 0 15px 35px rgba(87, 45, 10, 0.15); /* Тень становится глубже */
  }

  /* Картинка внутри этой карточки тоже увеличивается */
  .card-item:hover .card-img-adaptive {
    transform: scale(1.06); /* Мягкий, дорогой зум фото */
  }
}

/* АДАПТИВНАЯ КАРТИНКА ВНУТРИ ФЛЕКСА */
.card-img-adaptive {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  flex: 1 1 auto;

  /* Анимация для зума картинки */
  transition: transform 0.5s ease;
}

/* Шоколадное наложение поверх фото */
.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(87, 45, 10, 0.9) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  z-index: 2;
}

/* Текст внутри карточек */
.card-overlay h3 {
  font-family: "Montserrat", sans-serif;
  color: #ffffff;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex: 0 1 auto;
}

/* ==========================================
   ЭФФЕКТ НАВЕДЕНИЯ №1: СТРЕЛОЧКИ АВТО-ВЫПОЛЗАНИЯ
   ========================================== */

/* Полупрозрачные зоны по бокам */
.nav-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    background 0.3s ease;
  pointer-events: none;
}

/* Показываем стрелки, только если карточки ушли за экран */
.carousel-wrapper.has-scroll .nav-zone {
  opacity: 0.4; /* Изначально они очень тонкие и полупрозрачные */
  pointer-events: auto;
}

/* При наведении мышки на саму стрелку зона загорается */
.nav-zone:hover {
  opacity: 1 !important;
}

/* Размытие краев в цвет вашего бежевого фона #EEE4D6 */
.zone-left {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(238, 228, 214, 0.95) 0%,
    rgba(238, 228, 214, 0) 100%
  );
}

.zone-right {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(238, 228, 214, 0.95) 0%,
    rgba(238, 228, 214, 0) 100%
  );
}

/* Сами символы стрелок в вашем цвете Тауп */
.arrow {
  font-size: 50px;
  color: #aa927b; /* Ваш благородный тауп */
  font-weight: 300;
  user-select: none;
  transition: transform 0.2s ease;
}

/* Эффект покачивания стрелочек при наведении */
.zone-left:hover .arrow {
  transform: scale(1.2) translateX(-3px);
}
.zone-right:hover .arrow {
  transform: scale(1.2) translateX(3px);
}

/* ===================================================
   СТИЛИ ДЛЯ 5 НОВЫХ БЕЖЕВИХ СЕКЦИЙ (ФАБРИКА СЕЙШЕЛЫ)
   =================================================== */

/* 1. ПОПУЛЯРНІ ТОВАРИ (#sell) */
#sell {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #eee4d6; /* Ваш базовый бежевый фон */
  width: 100%;
  box-sizing: border-box;
}

.sell-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.view-all-btn {
  font-family: "Montserrat", sans-serif;
  color: #572d0a;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid #572d0a;
  padding-bottom: 2px;
  transition: opacity 0.2s ease;
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: 30px;
}

.view-all-btn:hover {
  opacity: 0.7;
}

/* СОВРЕМЕННАЯ СЕТКА GRID НА 4 АДАПТИВНЫЕ КОЛОНКИ */
.products-grid {
  display: grid;
  /* Ровно 4 карточки в ряд на ноутбуке, которые сами прыгают вниз на телефонах */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 25px;
}

.product-item {
  background-color: transparent;
  display: flex;
  flex-direction: column;
}

.product-img-box {
  width: 100%;
  aspect-ratio: 1 / 1; /* ИДЕАЛЬНЫЕ КВАДРАТНЫЕ КАРТОЧКИ КАК НА МАКЕТЕ */
  border-radius: 12px;
  overflow: hidden;
  background-color: #f4eae0; /* Чуть более светлая бежевая подложка под фото */
  margin-bottom: 15px;
  box-shadow: 0 4px 15px rgba(87, 45, 10, 0.02);
}
.leaf {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.product-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.product-item:hover .product-img-box img {
  transform: scale(1.04); /* Аккуратный зум товара при наведении */
}

.product-name {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  color: #572d0a;
  margin: 0 0 4px 0;
  font-weight: 600;
}

.product-desc {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  color: #aa927b; /* Ваш благородный тауп для подписей */
  margin: 0 0 15px 0;
}

.product-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto; /* Прижимает цену строго к самому низу */
}

.product-price {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #572d0a;
}

.like-btn {
  background: none;
  border: none;
  font-size: 22px;
  color: #572d0a;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease;
  margin-left: 12px;
}

.like-btn:hover {
  transform: scale(1.15);
}

/* ==========================================
   ОСОБЛИВОСТІ РОБОТИ
========================================== */

#mainwork {
  width: 100%;
  padding: 60px 40px;
  background: #eee4d6;
}

.features-flex-row {
  display: flex;

  justify-content: space-between;

  align-items: stretch;

  gap: 25px;

  flex-wrap: wrap;
}

.feature-badge {
  flex: 1 1 260px;

  display: flex;

  align-items: center;

  gap: 18px;

  padding: 28px;

  background: #f0e9df;

  border-radius: 18px;

  box-shadow: 0 10px 25px rgba(87, 45, 10, 0.08);

  transition: 0.3s ease;
}

.feature-badge:hover {
  transform: translateY(-6px);

  box-shadow: 0 18px 35px rgba(87, 45, 10, 0.15);
}

.feature-icon {
  width: 65px;

  height: 65px;

  min-width: 65px;

  border-radius: 50%;

  background: #eeddc5;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 30px;

  color: #572d0a;
}

.feature-text {
  display: flex;

  flex-direction: column;
}

.feature-text h5 {
  font-family: "Cormorant Garamond", serif;

  font-size: 24px;

  color: #572d0a;

  margin-bottom: 6px;
}

.feature-text p {
  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  color: #aa927b;

  margin: 0;
}

/* 3. ВДОХНОВЕНИЕ В КАЖДОЙ ДЕТАЛИ (#muse) */
#muse {
  padding-top: 60px;
  padding-bottom: 60px;
  background: #eee4d6;
}

.muse-banner-full {
  position: relative;

  width: 100%;
  max-width: 100%;

  height: 600px;

  margin: 0 auto;

  border-radius: 30px;

  overflow: hidden;

  box-shadow: 0 20px 50px rgba(87, 45, 10, 0.12);
}

/* Картинка */

.muse-img-side {
  width: 100%;
  height: 100%;
}

.muse-img-side img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}

/* Затемнение справа */

.muse-banner-full::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.45),
    rgba(0, 0, 0, 0.05) 45%,
    transparent 70%
  );
}

/* Текст */

.muse-text-side {
  position: absolute;

  top: 50%;
  right: 70px;

  transform: translateY(-50%);

  width: 420px;

  z-index: 5;

  color: white;
}

.muse-title {
  font-family: "Cormorant Garamond", serif;

  font-size: clamp(42px, 4vw, 60px);

  line-height: 1.1;

  margin-bottom: 20px;
}

.muse-desc {
  font-family: "Montserrat", sans-serif;

  font-size: 20px;

  margin-bottom: 30px;
}

.muse-link {
  display: inline-block;

  padding: 14px 28px;

  border-radius: 50px;

  background: #ffffff;

  color: #572d0a;

  font-weight: 600;

  text-decoration: none;

  transition: 0.3s;
}

.muse-link:hover {
  transform: translateY(-3px);
}
/* 4. ПОДПИСКА НА НОВОСТИ (#sub) */
#sub {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #eee4d6;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.sub-container {
  max-width: 550px;
  margin: 0 auto;
}

.sub-title {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  color: #572d0a;
  margin-bottom: 25px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.sub-form {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
}

.sub-form input {
  flex: 1;
  padding: 16px 20px;
  border: 1px solid #aa927b;
  border-radius: 8px;
  background-color: #fcfbf9; /* Чистый бежево-белый фон поля ввода */
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  color: #572d0a;
  outline: none;
  transition: border-color 0.3s ease;
}

.sub-form input:focus {
  border-color: #572d0a; /* Поле темнеет при клике */
}

.sub-submit-btn {
  padding: 16px 32px;
  background-color: #572d0a; /* Ваша фирменная шоколадная кнопка */
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.sub-submit-btn:hover {
  background-color: #3d1f05; /* Кнопка становится темнее при наведении */
}

.sub-checkbox-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  color: #aa927b;
  cursor: pointer;
  margin-top: 15px;
}

.sub-checkbox-label input {
  cursor: pointer;
}

/* 5. ПОДВАЛ САЙТА (site-footer) */
.site-footer {
  background-color: #eee4d6;
  padding-top: 60px;
  padding-bottom: 60px;
  border-top: 1px solid rgba(87, 45, 10, 0.1);
  width: 100%;
  box-sizing: border-box;
}

/* Сетка для пяти колонок подвала */
.footer-grid-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 40px;
  margin-bottom: 60px;
}

.footer-brand-column {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.footer-logo img {
  max-width: 120px;
  height: auto;
}

.footer-socials {
  display: flex;
  gap: 18px;
}

.footer-socials a {
  text-decoration: none;
  font-size: 18px;
  color: #572d0a;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.footer-socials a:hover {
  transform: scale(1.15);
  opacity: 0.8;
}

.footer-links-column h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  color: #572d0a;
  margin-bottom: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.footer-links-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-links-column ul a {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  color: #572d0a;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.footer-links-column ul a:hover {
  opacity: 1; /* Эффект проявления ссылки при наведении */
}

.footer-links-column p {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  color: #572d0a;
  margin: 0 0 12px 0;
  line-height: 1.4;
  opacity: 0.8;
}

.footer-phone {
  font-weight: 700;
  opacity: 1 !important;
}

/* Нижняя горизонтальная полоса подвала */
.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(87, 45, 10, 0.08);
  padding-top: 25px;
}

.copyright {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  color: #aa927b;
  margin: 0;
}

.payment-icons {
  display: flex;
  gap: 20px;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #aa927b;
  letter-spacing: 1px;
}
/* ==========================================
   ОБЩИЙ КОНТЕЙНЕР СЕКЦИЙ
========================================== */

#cards,
#sell,
#mainwork,
#muse,
#sub,
.site-footer {
  padding-left: 40px;
  padding-right: 40px;
}

:root {
  --slide-speed: 0.65s; /* Время анимации (650 миллисекунд) */
}

/* Прячем горизонтальный скролл на время анимации */
body {
  overflow-x: hidden;
  background-color: #572d0a; /* Ваш цвет темного шоколада, мелькающий на стыке */
}

/* Главная обертка сайта */
.page-wrapper {
  width: 100%;
  min-height: 100vh;
  background-color: #faf8f5; /* Базовый светлый фон вашего сайта */
  position: relative;
  will-change: transform, opacity;
  transition:
    transform var(--slide-speed) cubic-bezier(0.76, 0, 0.24, 1),
    opacity var(--slide-speed) ease-in-out;
}

/* Состояние 1: Страница активно отображается на экране */
.page-wrapper.is-active {
  transform: translateY(0);
  opacity: 1;
}

/* Состояние 2: Старая страница плавно уезжает ВВЕРХ */
.page-wrapper.is-leaving {
  transform: translateY(-100vh);
  opacity: 0.3;
  pointer-events: none; /* Запрещаем клики во время анимации */
}

/* Состояние 3: Новая страница ждет своего часа ВНИЗУ (скрыта перед въездом) */
.page-wrapper.is-entering {
  transform: translateY(100vh);
  opacity: 0.3;
}

/* Допишите это в конец style.css главной страницы */
#page-content,
.card-grid {
  width: 100%;
  min-height: 100vh;
  position: relative;
  will-change: transform, opacity;
  transition:
    transform 0.65s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.65s ease-in-out;
}

.is-leaving {
  transform: translateY(-100vh) !important;
  opacity: 0.3;
  pointer-events: none;
}

.is-entering {
  transform: translateY(100vh) !important;
  opacity: 0.3;
}

@view-transition {
  navigation: auto; /* Включает плавный переход при клике на ссылки */
}

#page-content {
  transition:
    transform 0.65s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.65s ease;
}

.is-leaving {
  transform: translateY(-100px);
  opacity: 0;
}

.is-entering {
  transform: translateY(100px);
  opacity: 0;
}