/* ==========================================================
   ZARA Theme Override — momentime.ru
   Подключать ПОСЛЕ style.css — переопределяет цветовую схему
   и ключевые компоненты на строгий чёрно-белый editorial стиль.
   ========================================================== */

/* ── A. Цветовая палитра — Printworks warm neutral ── */
:root {
  --cream:      #f7f5f2;   /* тёплый off-white фон как у Printworks */
  --warm-white: #ffffff;
  --beige:      #eeecea;   /* карточки товаров */
  --sand:       #e6e4e1;
  --gold:       #111111;   /* заменяем gold на near-black */
  --dark:       #111111;
  --mid:        #5c5c5c;
  --muted:      #6b6b6b;
  --border:     #e2e0dc;
}

/* DM Sans как основной sans-serif */
:root {
  --font-sans: 'DM Sans', 'Inter', 'Helvetica Neue', sans-serif;
}

/* Шрифт логотипа. Слово MOMENTIME встречается в шапке, в подвале и большой
   надписью внизу страницы — держим его в одной переменной, чтобы начертание
   везде совпадало и менялось разом. */
:root {
  --font-logo: 'Montserrat', 'Helvetica Neue', sans-serif;
}

/* Playfair Display вместо Cormorant Garamond.
   У Cormorant очень низкая строчная буква: при одном и том же кегле он
   выглядит заметно мельче и на 15px в карточках просто теряется.
   У Playfair строчная высокая — он держит мелкий размер. */
:root {
  --font-serif: 'Playfair Display', 'Cormorant Garamond', 'Georgia', serif;
}

/* ── B. Body — убрать grain и warm gradient ── */
body {
  background: #ffffff;
  background-image: none;
  background-attachment: initial;
}
body::after {
  display: none; /* убираем grain-текстуру */
}

/* ── C. Навигация — холодный белый, без blur ── */
.nav {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid #e5e5e5;
}
.nav.scrolled {
  box-shadow: none;
  border-bottom-color: #d0d0d0;
}
.nav__logo {
  font-family: var(--font-logo);
  letter-spacing: 0.2em;
  font-weight: 500;
  font-size: 1.45rem;
}
/* Логотип в подвале — тот же шрифт, что в шапке */
.footer__logo {
  font-family: var(--font-logo);
  font-weight: 500;
  letter-spacing: 0.2em;
}
.footer__wordmark {
  font-family: var(--font-logo);
}
.nav__links a::after {
  background: #000;
}
.nav__cart-count {
  background: #000;
}
.nav__dropdown-menu {
  border-radius: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e5e5;
}

/* ── D. Hero — full-bleed ZARA layout (только CSS) ── */
/* Тёмный градиент поверх фото */
/* Фото — на весь блок */
/* Текстовый блок — overlay снизу */
/* Кнопки в hero — инвертированные (белый/прозрачный) */
/* Бейдж "33 000+ покупателей" — перемещаем наверх-справа */

/* ── E. Кнопки — квадратные, монохромные ── */
.btn {
  border-radius: 0;
}
/* Убедиться что основной цвет заливки — чёрный.
   Переход прописан явно, а не подтягивается из style.css по каскаду:
   так все три кнопки товара объявлены одинаково и не разъедутся при правках. */
.btn--primary {
  background: linear-gradient(to right, #2a2a2a 50%, #000000 50%);
  background-size: 200% 100%;
  background-position: 100% center;
  color: #ffffff;
  transition: background-position 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform var(--transition);
}
.btn--primary:hover {
  background-position: 0% center;
  transform: none;
}
.btn--outline {
  background: linear-gradient(to right, #000000 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% center;
  border-color: #000000;
  color: #000000;
}
.btn--outline:hover {
  background-position: 0% center;
  color: #ffffff;
}
/* Gold-кнопка → чёрная.
   Наведение везде одинаковое, как у .btn--primary: заливка съезжает слева.
   Цвет у каждой кнопки остаётся свой. */
.btn--gold {
  background: linear-gradient(to right, #2a2a2a 50%, #000000 50%);
  background-size: 200% 100%;
  background-position: 100% center;
  color: #ffffff;
  border-color: transparent;
  transition: background-position 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform var(--transition);
}
.btn--gold:hover {
  background-position: 0% center;
  opacity: 1;
  transform: none;
}
/* Cookie-кнопка */
.cookie-accept {
  background: #000 !important;
  color: #fff !important;
}

/* ── F. Карточки товаров ── */
.product-card__fig {
  background: #f4f4f4;
  border-radius: 0;
}
.product-card__badge {
  background: #000000;
  color: #ffffff;
  border-radius: 0;
}
.product-card__name {
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}

/* ── G. Полосы и секции ── */
.about-strip {
  /* Серая полоса с рамками сверху и снизу — приём из шаблонов десятилетней
     давности. Раздел теперь отделяется фотографией, уходящей в край экрана. */
  background: #ffffff;
}
.about-strip .about-stat-num {
  color: #000;
}
.section[style*="background: var(--warm-white)"],
.section[style*="background: var(--beige)"],
.section[style*="background:var(--beige)"] {
  background: #ffffff !important;
}
.marketplaces {
  background: #ffffff;
  border-top: 1px solid #e5e5e5;
}
.reviews-section {
  background: #ffffff;
}
.review-card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  box-shadow: none;
}
.review-card__stars svg path {
  fill: #000;
}
.section-label {
  color: #000000;
}

/* ── H. Шапка страниц (catalog, faq и т.д.) ── */
.page-header {
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  background-image: none;
}
.page-header h1 {
  /* Было до 80px — крупнее, чем что-либо на сайте. Приводим к той же
     шкале, что у заголовка корзины и страницы древа. */
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em;
  color: #000;
}

/* ── I. Фильтр-табы каталога ── */
.filter-tab {
  border-radius: 0;
  border: 1px solid #e0e0e0;
  color: #555;
  background: #fff;
}
.filter-tab:hover {
  border-color: #000;
  color: #000;
  background: #fff;
}
.filter-tab.active {
  background: #000;
  color: #ffffff;
  border-color: #000;
}

/* ── J. Страница товара ── */
.product-page__main-img {
  background: #f4f4f4;
  border-radius: 0;
}
.product-page__thumb {
  border-radius: 0;
}
.product-page__thumb.active {
  border-color: #000;
}
.product-page__brand {
  color: #000000;
  letter-spacing: 0.12em;
}
.product-page__name {
  letter-spacing: -0.01em;
}
.product-page__price {
  color: #000;
}

/* ── K. Форма (checkout, contacts) ── */
.form-input,
.form-textarea {
  border-radius: 0;
  border-color: #d0d0d0;
}
.form-input:focus,
.form-textarea:focus {
  border-color: #000;
  box-shadow: none;
}

/* mix-blend-mode: difference: белый элемент = белый на тёмном, чёрный на светлом */

/* ── M. Мобильное меню ── */
.mobile-menu {
  background: #ffffff;
  border-top: 1px solid #e5e5e5;
}
.mobile-menu__links a {
  color: #000;
  border-bottom-color: #f0f0f0;
}
.mobile-menu__sub a {
  color: #555;
}

/* ── N. Маркетплейс-кнопка WB ── */
/* Фирменный фиолетовый Wildberries сохраняем, меняем только поведение
   при наведении — чтобы совпадало с остальными кнопками. */
.btn--wb {
  background: linear-gradient(to right, #e427c4 50%, #cb11ab 50%);
  background-size: 200% 100%;
  background-position: 100% center;
  color: #ffffff;
  transition: background-position 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform var(--transition);
}
.btn--wb:hover {
  background-position: 0% center;
  transform: none;
}

/* ── O. Адаптив hero — переопределяем responsive-блоки style.css ── */

/* Оплата не прошла: заметно, но без паники — заказ уже принят */
.cart-pay-failed {
  margin: 0 0 28px;
  padding: 14px 18px;
  border: 1px solid #d8b4a0;
  background: #fdf6f1;
  color: #6b3f2a;
  font-size: 14px;
  line-height: 1.5;
}