@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap");

/* =========================================================
   CSS-ПЕРЕМЕННЫЕ — здесь хранится вся палитра сайта.
   Если захочешь поменять акцентный цвет — меняй только тут.
========================================================= */
.account-privacy-note {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.account-privacy-note a { text-decoration: underline; overflow-wrap: anywhere; }
.store-phone-link { text-decoration: underline; text-underline-offset: 2px; }
.catalog-focus-restore { display: none; }
@media (max-width: 900px) {
  body.catalog-focus > .header,
  body.catalog-focus > .motivation-banner,
  body.catalog-focus > #categories,
  body.catalog-focus #products > .section-title,
  body.catalog-focus::before { display: none !important; }
  body.catalog-focus #products { padding-top: 38px; }
  body.catalog-focus .catalog-focus-restore:not([hidden]) {
    display: block;
    position: fixed;
    top: 6px;
    right: 12px;
    z-index: 101;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font: 600 11px var(--font-main);
    cursor: pointer;
  }
}
:root {
  --color-black: #111111;
  --color-white: #ffffff;
  --color-gray: #f2f2f2;
  --color-gray-dark: #555555;
  --color-accent: #e2231a; /* фирменный adidas-красный */
  --color-page: #ffffff;
  --color-surface: #ffffff;
  --color-text: #111111;
  --color-text-muted: #555555;
  --color-border: #d9d9d9;
  --color-button: #111111;
  --color-button-text: #ffffff;
  --color-disabled: #a8a8a8;
  --color-disabled-surface: #eeeeee;

  --font-main: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-banner: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --header-height: 72px;
}

/* =========================================================
   СБРОС СТИЛЕЙ — у браузеров разные стандартные отступы
   и стили, мы их убираем, чтобы всё было предсказуемо.
========================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.4;
}

/* =========================================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ ПРИ СКРОЛЛЕ
   Элементы с атрибутом data-reveal стартуют невидимыми
   и слегка смещёнными вниз. Когда script.js видит, что блок
   попал в область экрана (через IntersectionObserver),
   он добавляет класс is-visible — и элемент плавно "всплывает".
========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* У карточек в сетке — небольшая задержка по очереди, чтобы они
   "появлялись" одна за другой, а не все одновременно */
[data-reveal-group] > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-group] > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-group] > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-group] > *:nth-child(4) { transition-delay: 0.24s; }
[data-reveal-group] > *:nth-child(5) { transition-delay: 0.32s; }
[data-reveal-group] > *:nth-child(6) { transition-delay: 0.4s; }
[data-reveal-group] > *:nth-child(7) { transition-delay: 0.48s; }
[data-reveal-group] > *:nth-child(8) { transition-delay: 0.56s; }

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

ul {
  list-style: none;
}

/* =========================================================
   ШАПКА
========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray);
  transition: box-shadow 0.25s ease;
}

/* Класс добавляется скриптом, когда страница прокручена —
   лёгкая тень отделяет шапку от контента под ней */
.header--scrolled {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Верхний ряд шапки: лого, поиск, иконки */
.header__top {
  height: var(--header-height);
  max-width: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* Свой знак Sportmix — три скошенные полосы. Это НЕ официальный товарный
   знак adidas (его использование регламентирует франчайзинговый договор
   и должно запрашиваться у бренда отдельно) — это собственная графика. */
.logo__mark {
  width: 26px;
  height: 18px;
  fill: var(--color-black);
}

.logo__accent {
  color: var(--color-accent);
}

/* Две картинки-кнопки вместо текстового логотипа — ведут на коллекции
   Performance/Originals. Файлы можно заменить своими: photos/header-*.jpg,
   главное сохранить то же имя файла (или поменять путь в HTML на новый). */
.header__brand-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header__brand-link {
  display: block;
  height: 40px;
  overflow: hidden;
  transition: opacity 0.15s ease;
}

.header__brand-link:hover {
  opacity: 0.8;
}

.header__brand-link img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: cover;
}

/* Поле поиска товаров — растягивается между лого и иконками */
.header__search {
  position: relative;
  flex: 1 1 auto;
  max-width: 480px;
  display: flex;
  align-items: center;
}

.header__search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--color-gray-dark);
  pointer-events: none;
}

.header__search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 16px 10px 36px;
  font-family: var(--font-main);
  font-size: 14px;
  border: 2px solid var(--color-black);
  background: var(--color-white);
}

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

/* Кнопка «Поиск» рядом с полем — открывает страницу всех результатов.
   На десктопе — текст. На мобильном (см. медиа-запрос ниже) текст
   скрывается, остаётся только иконка-лупа, чтобы кнопка не сжималась
   в нечитаемый ярлык на узком экране. */
.header__search-btn {
  flex-shrink: 0;
  margin-left: 8px;
  padding: 10px 18px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-black);
  background: var(--color-white);
  border: 2px solid var(--color-black);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s, transform 0.1s ease;
}

.header__search-btn:hover {
  background: var(--color-black);
  color: var(--color-white);
}

.header__search-btn:active {
  transform: scale(0.95);
}

.header__search-btn-icon {
  display: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ===== ВЫПАДАЮЩИЕ ПОДСКАЗКИ ПОИСКА (с крупными картинками) ===== */
.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--color-white);
  border: 2px solid var(--color-black);
  max-height: 64vh;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.search-suggest__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--color-black);
  border-bottom: 1px solid var(--color-gray);
}

.search-suggest__item:last-child {
  border-bottom: none;
}

.search-suggest__item:hover {
  background: var(--color-gray);
}

.search-suggest__img {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray);
  overflow: hidden;
}

.search-suggest__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.search-suggest__img svg {
  width: 80%;
  height: 80%;
}

.search-suggest__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.search-suggest__name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggest__price {
  font-size: 13px;
  font-weight: 700;
}

.search-suggest__empty {
  padding: 14px;
  font-size: 13px;
  color: var(--color-gray-dark);
}

.search-suggest__missing {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--color-gray-dark);
  border-bottom: 1px solid var(--color-gray);
}

/* Нижняя строка-кнопка «Показать все результаты» */
.search-suggest__all {
  display: block;
  padding: 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-white);
  background: var(--color-black);
  text-decoration: none;
}

.search-suggest__all:hover {
  background: var(--color-accent);
}

.search-history__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-gray);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.search-history__clear {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.search-history__list {
  display: grid;
}

.search-history__item {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--color-gray);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.search-history__item:hover,
.search-history__item:focus-visible {
  background: var(--color-gray);
  outline: none;
}

/* Иконки избранного / корзины / входа справа в шапке */
.header__icons {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  flex-shrink: 0;
}

.header__icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  line-height: 1;
  color: var(--color-black);
  transition: color 0.15s ease, transform 0.1s ease;
}

.header__icon-btn svg {
  width: 21px;
  height: 21px;
}

.header__icon-btn:hover {
  color: var(--color-accent);
}

.header__icon-btn:active {
  transform: scale(0.9);
}

/* Счётчик избранного — красный кружок с числом поверх сердечка */
.header__icon-count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-main);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Иконка "Вход" подсвечивается, когда пользователь уже "залогинен" (account.js) */
.header__icon-btn--active {
  color: var(--color-accent);
}

/* =========================================================
   🧪 МИНИ-КОРЗИНА (playground: cart.js) — выпадающая панель
   из иконки корзины в шапке
========================================================= */
.cart-wrapper {
  position: relative;
}

.cart-drawer {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  padding: 16px;
  z-index: 50;
}

.cart-drawer__title {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.cart-drawer__empty {
  font-size: 13px;
  color: var(--color-gray-dark);
}

.cart-drawer__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-gray);
}

/* Мини-картинка товара слева в строке избранного/корзины */
.cart-drawer__item-thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--color-gray);
  overflow: hidden;
}

.cart-drawer__item-thumb img,
.cart-drawer__item-thumb svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-drawer__item-info {
  flex: 1;
  min-width: 0;
}

.cart-drawer__item-title {
  font-size: 13px;
  font-weight: 700;
}

.cart-drawer__item-meta {
  font-size: 12px;
  color: var(--color-gray-dark);
  margin-top: 2px;
}

.cart-drawer__item-price {
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
}
.cart-drawer__store-label {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.cart-drawer__store-select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
}

.cart-drawer__item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 88px;
}

.cart-drawer__reserve-link,
.cart-drawer__full-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 7px 8px;
  border: 1px solid var(--color-black);
  color: var(--color-black);
  background: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.cart-drawer__full-link {
  margin-top: 12px;
  text-transform: uppercase;
}

.cart-drawer__reserve-link:hover,
.cart-drawer__full-link:hover {
  color: var(--color-white);
  background: var(--color-black);
}

.product-page__reservation {
  width: 100%;
  box-sizing: border-box;
  margin-top: 24px;
  padding: 16px;
  border-top: 1px solid #dddddd;
}

.product-page__reservation form,
.cart-booking-form {
  display: grid;
  gap: 12px;
}

.product-page__reservation label,
.cart-booking-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
}

.product-page__reservation input,
.cart-booking-form input {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--color-black);
  font: inherit;
}

.product-page__reservation button,
.cart-booking-form button {
  width: fit-content;
  max-width: 100%;
}

.cart-page__main {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 56px;
}

.cart-page__back {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--color-black);
  font-size: 13px;
  font-weight: 700;
}

.cart-page__title { margin: 0 0 24px; }

.cart-booking-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 24px;
}

.cart-page__groups { display: grid; gap: 20px; }

.cart-page__group {
  min-width: 0;
  padding: 18px;
  border: 1px solid #dddddd;
}

.cart-page__group h2 { margin: 0 0 14px; font-size: 18px; }

.cart-page__items { display: grid; gap: 8px; margin-bottom: 16px; }

.cart-page__item {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: var(--color-gray);
  overflow-wrap: anywhere;
}

.cart-page__item span { color: var(--color-gray-dark); font-size: 13px; }

.cart-page__reserve {
  width: auto;
  max-width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  white-space: normal;
}

.cart-page__status { margin: 12px 0 0; min-height: 1.2em; color: var(--color-gray-dark); }

@media (max-width: 640px) {
  .cart-booking-form { grid-template-columns: 1fr; }
  .cart-page__main { width: min(100% - 24px, 920px); padding-top: 20px; }
  .cart-page__group { padding: 14px; }
  .cart-page__reserve { width: 100%; }
  .cart-drawer__item-actions { min-width: 0; width: 100%; justify-content: flex-start; }
}

.cart-drawer__qty-btn {
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-black);
  background: var(--color-white);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.cart-drawer__qty-btn:disabled {
  border-color: #cccccc;
  color: #cccccc;
  cursor: not-allowed;
}

/* Подсказка "это весь остаток в этом магазине" под строкой товара в корзине */
.cart-drawer__item-limit {
  font-size: 11px;
  color: var(--color-accent);
  margin-top: 4px;
}

.cart-drawer__remove {
  margin-left: 6px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-gray-dark);
  font-size: 14px;
}

.cart-drawer__remove:hover {
  color: var(--color-accent);
}

.cart-drawer__total {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 800;
  text-align: right;
}

/* Ссылка из корзины на мудборд «Собрать образ» */
.cart-drawer__lookbook-link {
  display: block;
  margin-top: 12px;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-black);
  text-decoration: none;
  border: 2px solid var(--color-black);
}

.cart-drawer__lookbook-link:hover {
  background: var(--color-black);
  color: var(--color-white);
}

/* =========================================================
   🧪 ЛИЧНЫЙ КАБИНЕТ (playground-account.html)
========================================================= */
.account-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}

.account-form {
  margin-bottom: 40px;
}

.account-form__title {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.account-form input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-family: var(--font-main);
  font-size: 14px;
  border: 2px solid var(--color-black);
}

.account-form input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Выпадающий список магазина (регистрация и кабинет) */
.account-form__select {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-family: var(--font-main);
  font-size: 14px;
  border: 2px solid var(--color-black);
  background: var(--color-white);
}

.account-form__select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.account-form__status {
  min-height: 18px;
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-gray-dark);
}

.account-form__status--error {
  color: var(--color-accent);
}

.account-form__status--success {
  color: #2e7d32;
}

/* Блок «Любимый магазин» в личном кабинете */
.account-fav-store {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-gray);
}

.account-fav-store__hint {
  font-size: 13px;
  color: var(--color-gray-dark);
  margin-bottom: 12px;
}

.account-fav-store__saved {
  margin-left: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #2e7d32;
}

.account-user__email {
  color: var(--color-gray-dark);
  margin-bottom: 24px;
}

.account-orders {
  margin-top: 32px;
}

.account-order {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-gray);
  font-size: 13px;
}

.account-orders__empty {
  font-size: 13px;
  color: var(--color-gray-dark);
}

/* Нижний ряд шапки: разделы каталога + выпадающие подменю */
.nav {
  border-top: 1px solid var(--color-gray);
  position: relative; /* точка отсчёта для мега-меню «Бренды» (full-width) */
}

.nav__list {
  max-width: 100%;
  padding: 0 24px;
  display: flex;
  gap: 28px;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: block;
  padding: 14px 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

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

/* Подменю — скрыто по умолчанию, раскрывается при наведении на пункт
   меню (только там, где есть .nav__dropdown — не у всех пунктов) */
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 10;
}

.nav__item:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown a {
  padding: 10px 18px;
  font-size: 13px;
  color: var(--color-black);
}

.nav__dropdown a:hover {
  background: var(--color-gray);
  color: var(--color-accent);
}

/* Мега-меню "Бренды" — растягивается на всю ширину окна (приём
   "full-bleed": left:50% + отрицательный margin-left:-50vw), а не только
   на ширину родителя. Внутри — центрированный контейнер nav__dropdown--brands-inner
   с 5 колонками-линейками. Картинки можно заменить своими (photos/brand-*.jpg
   и photos/brand-*-icon.jpg), сохранив те же имена файлов. */
/* Пункт с мега-меню НЕ должен быть точкой отсчёта — иначе меню съезжает
   вправо вслед за узким пунктом «Бренды» и первая колонка (Originals)
   уходит за левый край. Делаем его static, чтобы меню цеплялось к .nav. */
.nav__item:has(> .nav__dropdown--brands),
.nav__item:has(> .nav__dropdown--mega) {
  position: static;
}

.nav__dropdown--brands,
.nav__dropdown--mega {
  left: 0;
  margin-left: 0;
  width: 100%;
  min-width: auto;
  padding: 28px 0;
}

/* Мега-меню «Мужчинам/Женщинам» — колонки разделов и моделей.
   Заполняется динамически из товаров в наличии (см. script.js, блок 2.2). */
.mega-inner {
  max-width: 100%;
  padding: 0 24px;
  display: flex;
  gap: 48px;
}

.mega-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mega-col__title {
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 14px;
  color: var(--color-black);
}

/* Подсветка выбранного пункта/заголовка серым при наведении */
.nav__dropdown--mega a {
  padding: 6px 8px;
  border-radius: 3px;
}

.nav__dropdown--mega a:hover {
  background: var(--color-gray);
  color: var(--color-black);
}

.mega-col__all {
  font-weight: 700;
}

.nav__dropdown--brands-inner {
  max-width: 100%;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.brand-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* Большая иконка-баннер раздела. Чтобы заменить картинку — положи свой
   файл с тем же именем в папку photos/ (см. .brand-col__image ниже). */
.brand-col__media {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/* 🖼️ БОЛЬШИЕ ИКОНКИ РАЗДЕЛОВ В МЕНЮ «БРЕНДЫ».
   Каждая колонка показывает один баннер из папки photos/:
     Originals          → photos/brand-originals.jpg
     Adidas Sportswear  → photos/brand-sportswear.jpg
     Performance        → photos/brand-performance.jpg
     Stella McCartney   → photos/brand-stella.jpg
     Terrex             → photos/brand-terrex.jpg
   Чтобы поменять картинку — просто замени нужный файл в photos/
   на свой с ТЕМ ЖЕ именем (рекомендуемый размер ~280×56 px). */
.brand-col__image {
  width: 100%;
  height: 56px;
  min-width: 0;
  object-fit: cover;
}

.brand-col__title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}

/* Краткое описание-история раздела — меньшим шрифтом под заголовком */
.brand-col__desc {
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-gray-dark);
  margin-bottom: 12px;
}

.brand-col a {
  padding: 6px 4px;
}

/* Кнопка-бургер: три полоски. Скрыта на десктопе. */
.burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
}

.burger span {
  display: block;
  height: 2px;
  background: var(--color-black);
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Универсальная кнопка-ссылка (CTA) */
.btn {
  display: inline-block;
  padding: 14px 32px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 2px solid transparent;
  transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}

/* Основная кнопка — чёрная, как у adidas.com. Красный мы оставили только
   для точечных акцентов (скидки/счётчики/бейджи), а не для CTA-кнопок. */
.btn--accent {
  background: var(--color-black);
  color: var(--color-white);
}

.btn--accent:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.btn--accent:active {
  opacity: 0.85;
  transform: translateY(0) scale(0.97);
}

/* =========================================================
   ЗАГОЛОВКИ СЕКЦИЙ (общий стиль для "Категории", "Бренды" и т.д.)
========================================================= */
.section-title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 60px 0 32px;
}

/* =========================================================
   МОТИВАЦИОННЫЙ БАННЕР "YOU GOT THIS"
   Чёрно-белый, минималистичный, шрифт Montserrat —
   отдельный плакатный акцент посреди главной страницы.
========================================================= */
.motivation-banner {
  position: relative;
  /* Фон теперь полностью прозрачный (просто белый фон страницы) —
     картинки идут отдельным слоем-слайдером ниже (.motivation-banner__slides),
     чтобы текст можно было оставить статичным поверх меняющихся фото. */
  background: var(--color-white);
  color: var(--color-black);
  padding: 100px 24px 56px;
  text-align: center;
  overflow: hidden;
}

/* Слайдер фоновых фото — лежит под текстом (z-index: 0), каждый слайд
   занимает всю секцию и сменяется через JS (см. script.js, MOTIVATION_SLIDES) */
.motivation-banner__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.motivation-banner__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateX(100%);
  transition: transform 0.9s ease;
}

.motivation-banner__slide--active {
  transform: translateX(0);
}

.motivation-banner__slide--prev {
  transform: translateX(-100%);
}

/* Текст лежит отдельным статичным слоем НАД слайдером и не участвует
   в анимации смены фото. Полупрозрачная белая "карточка" под текстом —
   чтобы текст оставался читаемым независимо от того, что на фото сзади
   (текстовые тени одной не хватало на пёстрых фото типа граффити). */
.motivation-banner__content {
  position: relative;
  z-index: 1;
  display: inline-block;
  max-width: 90%;
  padding: 40px 32px;
  background: rgba(255, 255, 255, 0.78);
}

.motivation-banner__eyebrow {
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-gray-dark);
  margin-bottom: 16px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}

.motivation-banner__title {
  font-family: var(--font-banner);
  font-weight: 700;
  font-size: clamp(48px, 11vw, 140px);
  line-height: 0.95;
  letter-spacing: -1px;
  text-transform: uppercase;
  /* Белый "ореол" вокруг текста — подстраховка на случай, если под текстом
     окажется тёмный участок фото после того, как сделали "вуаль" прозрачнее */
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.9);
}

/* Три тонкие полосы под текстом — отсылка к фирменным "3 stripes" adidas.
   Все чёрные: красный приберегаем только для скидок/бейджей, не для декора. */
.motivation-banner__stripes {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.motivation-banner__stripes span {
  width: 64px;
  height: 6px;
  background: var(--color-black);
}

.motivation-banner__subtitle {
  font-size: 18px;
  color: var(--color-gray-dark);
  margin-top: 28px;
  margin-bottom: 24px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}

.motivation-banner .btn {
  position: relative;
  z-index: 1;
}

/* =========================================================
   СЕТКА КАТЕГОРИЙ
========================================================= */
.categories {
  max-width: 100%;
  padding: 0 24px 60px;
}

.categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.category-card {
  display: block;
  position: relative;
  transition: transform 0.15s ease;
}

.category-card:active {
  transform: scale(0.98);
}

.category-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-gray) center / cover no-repeat;
  overflow: hidden; /* чтобы увеличенная картинка не вылезала за рамки */
  position: relative;
}

/* Настоящие фото (photos/) для категорий, где они уже есть. Для "Детской
   обуви" подходящего фото пока нет — там осталась схематичная SVG-иллюстрация
   (images-svg/category-kids-shoes.svg), заменить можно так же — просто url(). */
.category-card__image--mens-shoes { background-image: url("photos/category-mens-shoes.jpg"); }
.category-card__image--mens-clothing { background-image: url("photos/category-mens-clothing.jpg"); }
.category-card__image--womens-shoes { background-image: url("photos/category-womens-shoes.jpg"); }
.category-card__image--womens-clothing { background-image: url("photos/category-womens-clothing.jpg"); }
.category-card__image--kids-shoes {
  background-image: url("photos/category-rotator/kids-shoes/01.jpg");
  background-size: contain;
  background-color: #f1f1f1;
}
.category-card__image--kids-shoes .category-card__fit {
  /* Preserve the complete portrait frame, including shoes and existing text. */
  background-size: contain;
}
.category-card__image--accessories { background-image: url("photos/category-accessories.jpg"); }
.category-card__image--tracksuits { background-image: url("photos/category-tracksuits.jpg"); }
.category-card__image--new { background-image: url("photos/category-new.jpg"); }

/* Картинка чуть увеличивается при наведении — частый приём adidas.com */
.category-card__fit {
  position: absolute;
  inset: 0;
  display: block;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate(calc(var(--media-x, 0) * 1%), calc(var(--media-y, 0) * 1%)) scale(var(--media-scale, 1));
  transform-origin: center center;
  transition: transform 0.4s ease;
}

.category-card:hover .category-card__fit {
  transform: translate(calc(var(--media-x, 0) * 1%), calc(var(--media-y, 0) * 1%)) scale(calc(var(--media-scale, 1) * 1.08));
}

.category-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Оверлей "Смотреть товары", который проявляется при наведении */
.category-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1; /* поверх увеличивающейся картинки (псевдоэлемент ::after) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, 0);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 0.25s ease, background-color 0.25s ease;
}

.category-card:hover .category-card__overlay {
  opacity: 1;
  background: rgba(17, 17, 17, 0.45);
}

.category-card__title {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  transition: color 0.15s ease;
}

.category-card:hover .category-card__title {
  color: var(--color-accent);
}

/* =========================================================
   ТОВАРЫ (карточки конкретных артикулов из остатков)
========================================================= */
.products {
  max-width: 100%;
  padding: 0 24px 60px;
}

/* Layout каталога: сайдбар с фильтрами слева, сетка товаров справа.
   На мобильных (см. медиа-запрос ниже) превращается в один столбец. */
.products__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
}

.products__sidebar {
  align-self: start;
}

.sidebar-block {
  margin-bottom: 28px;
}

.fav-store-filter {
  padding: 12px 14px;
  background: var(--color-accent);
  color: var(--color-white);
}

.fav-store-filter__select {
  width: 100%;
  min-height: 40px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 2px solid var(--color-black);
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
}

.fav-store-filter__label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-white);
}

.fav-store-filter__label input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--color-white);
}

.fav-store-filter__label b {
  font-weight: 700;
}

.products__filter--sizes {
  display: grid;
  gap: 12px;
}

.products__size-group {
  display: grid;
  gap: 8px;
  border: 2px solid var(--color-black);
}

.products__size-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-black);
  cursor: pointer;
  list-style: none;
}

.products__size-group-title::-webkit-details-marker {
  display: none;
}

.products__size-group-title::after {
  content: "⌄";
  font-size: 14px;
  line-height: 1;
}

.products__size-group[open] .products__size-group-title::after {
  content: "⌃";
}

.products__size-group-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 10px 10px;
}

.products__filter--sizes .filter-btn {
  min-height: 38px;
  padding: 8px 6px;
  text-align: center;
  white-space: nowrap;
}

.products__filter--sizes .filter-btn--all {
  width: 100%;
}

.sidebar-block__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 12px;
}

summary.sidebar-block__title {
  cursor: pointer;
  list-style: none;
}

summary.sidebar-block__title::-webkit-details-marker {
  display: none;
}

.sidebar-block--filter > summary.sidebar-block__title::after {
  content: "⌄";
  margin-left: 10px;
  font-size: 14px;
  line-height: 1;
}

.sidebar-block--filter[open] > summary.sidebar-block__title::after {
  content: "⌃";
}

/* Заголовок "Фильтры" + общая кнопка "✕ Сбросить всё" над всеми блоками */
.sidebar-block--header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sidebar-reset {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
}

.sidebar-reset:hover {
  text-decoration: underline;
}

/* Маленький ✕ возле конкретного фильтра ("Линейка"/"Назначение") —
   сбрасывает только его, не трогая остальные */
.sidebar-block__clear {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-gray-dark);
  padding: 0 2px;
}

.sidebar-block__clear:hover {
  color: var(--color-accent);
}

/* Общий стиль для всех выпадающих списков на странице каталога:
   доп. фильтры в сайдбаре и выбор количества карточек на странице */
.products__select {
  padding: 12px 14px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--color-black);
  background: var(--color-white);
  cursor: pointer;
}

.products__select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.products__select--full {
  width: 100%;
}

/* Кнопки-фильтры "Все / Текстиль / Обувь" и "Любой пол / Мужской / ..." */
.products__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* В сайдбаре кнопки идут одна под другой и растягиваются на всю ширину —
   так привычнее смотрится в левой колонке, как фильтры на adidas.kz */
.products__filter--vertical {
  flex-direction: column;
}

.products__filter--vertical .filter-btn {
  width: 100%;
  text-align: left;
}

/* Строка "Найдено: N" слева + выбор количества карточек на странице справа */
.products__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.products__count {
  font-size: 13px;
  color: var(--color-gray-dark);
}

.products__search-missing {
  flex: 1 0 100%;
  margin: -12px 0 0;
  font-size: 13px;
  color: var(--color-gray-dark);
}

.products__sort,
.products__page-size {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.products__sort .products__select,
.products__page-size .products__select {
  padding: 8px 12px;
  font-size: 13px;
}

/* =========================================================
   НЕДАВНО ПРОСМОТРЕННЫЕ
========================================================= */
.recently-viewed {
  max-width: 100%;
  padding: 0 24px 60px;
}

/* Слайдер: стрелки по бокам + прокручиваемая горизонтально строка карточек */
.recently-viewed__slider {
  position: relative;
}

.recently-viewed__track {
  display: flex;
  grid-template-columns: none; /* отключаем grid из .products__grid, тут flex-строка */
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 24px;
  padding-bottom: 4px;
  scrollbar-width: none; /* прячем полосу прокрутки — листают стрелками или пальцем */
}

.recently-viewed__track::-webkit-scrollbar {
  display: none;
}

.recently-viewed__track .product-card {
  flex: 0 0 240px;
}

.recently-viewed__slider .gallery-arrow {
  display: none;
}

/* =========================================================
   ПОДПИСКА НА EMAIL
========================================================= */
.newsletter {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 24px 80px;
  text-align: center;
}

.newsletter__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.newsletter__text {
  font-size: 14px;
  color: var(--color-gray-dark);
  margin-bottom: 24px;
}

.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.newsletter__input {
  flex: 1 1 240px;
  padding: 14px 16px;
  font-family: var(--font-main);
  font-size: 14px;
  border: 2px solid var(--color-black);
}

.newsletter__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.newsletter__form .btn {
  cursor: pointer;
}

.newsletter__hint {
  margin-top: 16px;
  font-size: 13px;
  color: var(--color-gray-dark);
}

.filter-btn {
  padding: 10px 24px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--color-white);
  border: 2px solid var(--color-black);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.filter-btn:hover {
  background: var(--color-gray);
}

.filter-btn--active {
  background: var(--color-black);
  color: var(--color-white);
}

.filter-btn--active:hover {
  background: var(--color-black);
}

/* Кнопка фильтра, которая в сочетании с уже выбранными фильтрами не
   даст ни одного товара — серая и недоступная для выбора */
.filter-btn--unavailable,
.filter-btn:disabled {
  color: #cccccc;
  border-color: #eeeeee;
  background: var(--color-white);
  cursor: not-allowed;
}

.filter-btn--unavailable:hover,
.filter-btn:disabled:hover {
  background: var(--color-white);
}

/* Select с применённым (не "Любой/Любая...") значением — подсвечен рамкой,
   чтобы сразу было видно, что фильтр реально работает */
.products__select--active {
  border-color: var(--color-accent);
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
  min-height: 200px; /* чтобы при фильтрации сетка не "прыгала" в момент перерисовки */
}

.products__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 32px 0;
  color: var(--color-gray-dark);
  font-size: 16px;
}

.products__load-more {
  text-align: center;
  margin-top: 40px;
}

.products__load-more .btn {
  cursor: pointer;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  color: inherit;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.product-card__main-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.product-card__main-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Лента других цветов модели — по умолчанию скрыта, показывается на мобильном */
.product-card__colors {
  display: none;
  position: relative;
  z-index: 2;
}

.product-card:hover {
  transform: translateY(-6px);
}

.product-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Градиентный фон под прозрачным фото товара (рисует CSS, не картинка) */
  background: linear-gradient(135deg, #f6f6f6, #e9e9e9);
  overflow: hidden;
  position: relative;
}

.product-card__image svg,
.product-card__image img {
  width: 100%;
  height: 100%;
  /* contain + отступ: прозрачный товар виден целиком, не обрезается по краям */
  object-fit: contain;
  padding: 8%;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.product-card:hover .product-card__image svg,
.product-card:hover .product-card__image img {
  transform: scale(1.08);
}

/* Оверлей "Быстрый просмотр" — проявляется снизу карточки при наведении */
.product-card__quickview {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  text-align: center;
  background: var(--color-black);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  z-index: 2;
}

.product-card:hover .product-card__quickview {
  transform: translateY(0);
}

.product-card__new-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-card__title {
  transition: color 0.15s ease;
}

.product-card:hover .product-card__title {
  color: var(--color-accent);
}

/* Статус наличия под ценой — зелёный текст, если товар есть на складе,
   серый "Нет в наличии", если остатка по сети не осталось */
.product-card__badge {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
}

.product-card__badge--in-stock {
  color: var(--color-black);
}

.product-card__badge--out-of-stock {
  color: var(--color-gray-dark);
  text-decoration: line-through;
}

/* Остатки ещё не загружены из 1С — нейтральный статус */
.product-card__badge--pending {
  color: var(--color-gray-dark);
}

/* Сердечко "избранное" — верхний правый угол картинки.
   Состояние (добавлено/нет) хранится в localStorage, см. script.js */
.product-card__favorite {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  font-size: 16px;
  color: var(--color-black);
  cursor: pointer;
}

.product-card__favorite:hover {
  color: var(--color-accent);
}

.product-card__favorite--active {
  color: var(--color-accent);
}

.product-card__title {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
}

.product-card__sku {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-gray-dark);
}

.product-card__price {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 800;
}

.product-price__current {
  font-weight: 900;
}

.product-price__old {
  margin-left: 8px;
  color: var(--color-gray-dark);
  font-size: 0.86em;
  font-weight: 700;
  text-decoration: line-through;
}

.product-price__discount {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 6px;
  background: #e30613;
  color: #fff;
  font-size: 0.72em;
  font-weight: 900;
  line-height: 1.2;
}

/* =========================================================
   СТРАНИЦА ТОВАРА (product.html)
========================================================= */
.breadcrumbs {
  max-width: 100%;
  padding: 20px 24px 0;
  font-size: 13px;
  color: var(--color-gray-dark);
  display: flex;
  gap: 8px;
}

.breadcrumbs a:hover {
  color: var(--color-accent);
}

.product-page {
  max-width: 100%;
  padding: 24px 24px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.product-page > * {
  min-width: 0;
}

.product-page__gallery {
  grid-column: 1;
  grid-row: 1;
}

.product-page__info {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.product-page__main-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-gray);
  overflow: hidden;
}

/* Контейнер, в который product.js вставляет SVG-картинку текущего ракурса */
.gallery-svg-holder {
  width: 100%;
  height: 100%;
}

.gallery-svg-holder svg,
.gallery-svg-holder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4%;
  box-sizing: border-box;
}

/* Стрелки "‹" и "›" поверх главной картинки */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  background: var(--color-white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.gallery-arrow:hover {
  background: var(--color-black);
  color: var(--color-white);
}

.gallery-arrow--prev {
  left: 12px;
}

.gallery-arrow--next {
  right: 12px;
}

/* Полоса миниатюр под главной картинкой */
.gallery-thumbs {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery-thumbs__item {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  aspect-ratio: 1 / 1;
  background: var(--color-gray);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 4px;
}

.gallery-thumbs__item svg,
.gallery-thumbs__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery-thumbs__item:hover {
  border-color: #cccccc;
}

.gallery-thumbs__item--active {
  border-color: var(--color-accent);
}

/* Desktop: keep the product prominent without letting a square gallery take
   over a wide screen. Mobile rules below continue to control the gallery. */
@media (min-width: 1024px) {
  .product-page {
    grid-template-columns: minmax(360px, 0.86fr) minmax(460px, 1.14fr);
    gap: clamp(36px, 4vw, 72px);
  }

  .product-page__gallery {
    width: min(100%, 620px);
    justify-self: center;
  }

  .product-page__main-image,
  .gallery-thumbs {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }
}

.product-page__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  word-break: normal;
}

.product-page__sku {
  margin-top: 8px;
  font-size: 14px;
  color: var(--color-gray-dark);
}

.product-page__price {
  margin-top: 16px;
  font-size: 28px;
  font-weight: 900;
}

/* Краткое описание-подзаголовок под названием товара */
.product-page__subtitle {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-gray-dark);
}

/* Бейджи-факты (тип комплекта, пол, цвет, линейка) под ценой */
.product-page__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.product-page__tag {
  padding: 6px 12px;
  background: var(--color-gray);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Кликабельный бейдж (пол/линейка/спорт) — ведёт в каталог с фильтром */
.product-page__tag--link {
  color: var(--color-black);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.product-page__tag--link:hover {
  background: var(--color-black);
  color: var(--color-white);
}

/* Описание товара и блок характеристик из каталога Adidas */
.product-page__block-title {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.product-page__description {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-gray);
}

.product-page__description p {
  font-size: 14px;
  line-height: 1.6;
  color: #333333;
}

/* Ключевые особенности (буллеты Пули1-7) */
.product-page__bullets {
  margin-top: 14px;
  padding-left: 20px;
  list-style: disc;
}

.product-page__bullets li {
  font-size: 14px;
  line-height: 1.55;
  color: #333333;
  margin-bottom: 6px;
}

.product-page__specs {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-gray);
}

.product-page__legal {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--color-gray);
  color: #777777;
  font-size: 11px;
  line-height: 1.55;
}

.product-page__legal p {
  margin: 0 0 6px;
}

.specs-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}

.specs-list dt {
  font-size: 13px;
  color: var(--color-gray-dark);
}

.specs-list dd {
  font-size: 13px;
  font-weight: 700;
}

/* Кликабельные характеристики (линейка/пол/спорт/модель) — ведут в каталог */
.specs-list__link {
  color: var(--color-black);
  text-decoration: underline;
  text-decoration-color: var(--color-gray);
  text-underline-offset: 2px;
}

.specs-list__link:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* Баннер "остался последний экземпляр" — показывается только когда
   по всей сети товара осталась ровно 1 штука */
.low-stock-banner {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
}

/* ---- Выбор магазина ---- */
.store-picker {
  margin-top: 28px;
}

.store-picker__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.store-picker__select {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-family: var(--font-main);
  border: 2px solid var(--color-black);
  background: var(--color-white);
  cursor: pointer;
  appearance: none; /* убираем стандартную стрелку браузера, чтобы нарисовать свою */
  background-image: linear-gradient(45deg, transparent 50%, var(--color-black) 50%),
                     linear-gradient(135deg, var(--color-black) 50%, transparent 50%);
  background-position: calc(100% - 22px) center, calc(100% - 16px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.store-picker__option--available {
  font-weight: 800;
}

/* ---- Сетка размеров ---- */
.size-grid__wrapper {
  margin-top: 24px;
}

.size-grid__label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 10px;
}

.size-grid__cell {
  position: relative;
  min-width: 0;
}

.size-grid__item {
  width: 100%;
  min-height: 72px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 14px;
  font-weight: 700;
  background: var(--color-white);
  border: 1px solid #cccccc;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.size-grid__uk {
  display: block;
  font-size: 14px;
  line-height: 1.1;
}

.size-grid__meta {
  display: block;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--color-gray-dark);
}

.size-grid__item:hover:not(:disabled) {
  border-color: var(--color-black);
}

.size-grid__item--active {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.size-grid__item--active .size-grid__meta {
  color: rgba(255, 255, 255, 0.78);
}

.size-grid__item--disabled {
  color: #cccccc;
  border-color: #eeeeee;
  cursor: not-allowed;
}

.size-grid__item--disabled .size-grid__uk {
  text-decoration: line-through;
}

.size-grid__item--disabled .size-grid__meta {
  color: #c7c7c7;
}

.size-grid__notify {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfcfcf;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.size-grid__notify:hover {
  border-color: #111;
  transform: translateY(-1px);
}

.size-grid__notify--active {
  background: #111;
  border-color: #111;
  color: #fff;
}

.stock-hint {
  margin-top: 16px;
  font-size: 14px;
  color: var(--color-gray-dark);
  min-height: 20px;
}

.store-contact {
  margin-top: 10px;
  color: var(--color-gray-dark);
  font-size: 13px;
  line-height: 1.45;
}

.product-page__actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
}

.product-page__add-to-cart {
  flex: 1;
}

/* Квадратная кнопка-сердечко рядом с "В корзину" — как на adidas.kz */
.product-page__favorite-square {
  width: 56px;
  flex-shrink: 0;
  border: 2px solid var(--color-black);
  background: var(--color-white);
  font-size: 20px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.product-page__favorite-square:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.product-page__favorite-square--active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--outline {
  background: transparent;
  border: 2px solid var(--color-black);
  color: var(--color-black);
  cursor: pointer;
}

.btn--outline:hover {
  background: var(--color-black);
  color: var(--color-white);
}

.btn--outline:active {
  background: var(--color-black);
  color: var(--color-white);
  transform: scale(0.97);
}

/* Кнопка "В избранном" на странице товара, когда товар уже добавлен */
.btn--accent-outline {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--accent:disabled {
  background: #cccccc;
  cursor: not-allowed;
}

.btn--accent:disabled:hover {
  opacity: 1;
  transform: none;
}

/* =========================================================
   ПОЛОСА БРЕНДОВ
========================================================= */
.brands {
  background: var(--color-gray);
  padding: 40px 24px 60px;
  text-align: center;
}

.brands__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.brands__item {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-gray-dark);
}

/* =========================================================
   ПОДВАЛ
========================================================= */
.footer {
  background: var(--color-black);
  color: var(--color-white);
  padding: 60px 24px 20px;
}

.footer__inner {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.footer__title {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer__col p {
  color: #aaaaaa;
  margin-bottom: 8px;
  font-size: 14px;
}

.footer__link:hover {
  color: var(--color-accent);
}

.footer__copy {
  text-align: center;
  margin-top: 40px;
  font-size: 12px;
  color: #777777;
}

/* =========================================================
   ИНФОРМАЦИОННЫЕ СТРАНИЦЫ (about / contacts / delivery / returns)
========================================================= */
.info-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}

.info-page__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.info-page__lead {
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
  margin-bottom: 40px;
}

.info-page__text p {
  font-size: 15px;
  line-height: 1.7;
  color: #333333;
  margin-bottom: 16px;
}

.info-page__block-title {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 32px 0 12px;
}

.info-page__block-title:first-child {
  margin-top: 0;
}

.info-page__contact-form {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--color-gray);
}

.info-page__contact-form p {
  font-size: 14px;
  margin-bottom: 8px;
}

/* Сетка магазинов на странице контактов */
.stores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.store-card {
  padding: 20px;
  background: var(--color-gray);
}

.store-card h3 {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 6px;
}

.store-card p {
  font-size: 13px;
  color: var(--color-gray-dark);
}

/* ===== ПОХОЖИЕ МОДЕЛИ ===== */
.similar-models {
  grid-column: 1;
  grid-row: 2;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-gray);
}

.similar-models__label {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: #000;
}

.similar-models__group {
  margin-bottom: 20px;
}

.similar-models__group:last-child {
  margin-bottom: 0;
}

.similar-models__sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-dark);
  margin-bottom: 10px;
}

.similar-models__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.similar-models__card {
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--color-gray);
  padding: 12px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.similar-models__card:hover {
  border-color: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.similar-models__image {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-gray);
  display: flex;
  align-items: center;
  justify-content: center;
}

.similar-models__image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.similar-models__image svg {
  width: 60%;
  height: 60%;
}

.similar-models__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.similar-models__name {
  font-size: 12px;
  font-weight: 500;
  color: #000;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.similar-models__price {
  font-size: 14px;
  font-weight: 700;
  color: #000;
}

/* =========================================================
   МУДБОРД «СОБРАТЬ ОБРАЗ» (lookbook.html)
========================================================= */
.lookbook {
  padding: 32px 40px 64px;
}

.lookbook__title {
  font-family: var(--font-display), sans-serif;
  font-size: 34px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.lookbook__intro {
  max-width: 720px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-gray-dark);
  margin-bottom: 32px;
}

/* 3 колонки: панель управления | доска-силуэт | лоток вещей */
.lookbook__layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  gap: 32px;
  align-items: start;
}

.lookbook__panel-block {
  margin-bottom: 24px;
}

.lookbook__panel-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 12px;
}

.lookbook__angles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lookbook__angle {
  padding: 7px 12px;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  border: 2px solid var(--color-black);
  background: var(--color-white);
  cursor: pointer;
}

.lookbook__angle--active {
  background: var(--color-black);
  color: var(--color-white);
}

.lookbook__hint {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-gray-dark);
}

.lookbook__zone-toggles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lookbook__zone-toggles label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

/* ----- Доска: силуэт + слоты ----- */
.lookbook__board {
  position: relative;
  width: min(680px, 100%);
  height: 720px;
  margin: 0 auto;
  justify-self: center;
  background: #ffffff;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.lookbook__fit-zone {
  position: absolute;
  left: 50%;
  top: 40px;
  width: 340px;
  max-width: 72%;
  height: 640px;
  transform: translateX(-50%);
  border: 2px solid #dddddd;
  background: rgba(245, 245, 245, 0.22);
  pointer-events: none;
  z-index: 0;
}

.lookbook__figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--color-gray);
  display: none;
}

/* Слоты-зоны поверх силуэта */
.lookbook__slot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.lookbook__slot {
  display: none;
}

.lookbook__slot--hidden {
  display: none;
}

/* Слоты идут вплотную друг к другу (board высотой 640px), без промежутков */
.lookbook__slot--head   { top: 0;     width: 120px; height: 86px; }
.lookbook__slot--top    { top: 86px;  width: 184px; height: 182px; }
.lookbook__slot--bottom { top: 268px; width: 164px; height: 270px; }
.lookbook__slot--shoes  { top: 538px; width: 172px; height: 102px; }

/* Пустой слот — пунктирная рамка с подписью зоны */
.lookbook__slot--empty {
  border: 2px dashed #bdbdbd;
  background: rgba(255, 255, 255, 0.55);
}

.lookbook__slot-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gray-dark);
}

/* Слот с товаром — карточка-вещь */
.lookbook__slot:not(.lookbook__slot--empty) {
  /* Прозрачное фото товара ложится прямо на силуэт — без белой карточки */
  background: transparent;
  flex-direction: column;
}

.lookbook__slot-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.lookbook__slot-photo img,
.lookbook__slot-photo svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lookbook__slot-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 3;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.lookbook__slot-remove:hover {
  background: var(--color-accent);
}

.lookbook__slot-switch {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.9);
  padding: 1px 4px;
  border-radius: 10px;
}

.lookbook__slot-arrow {
  border: none;
  background: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-black);
  padding: 0 2px;
}

.lookbook__slot-counter {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-gray-dark);
}

.lookbook__pin {
  position: absolute;
  z-index: 2;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.lookbook__pin--dragging {
  cursor: grabbing;
}

.lookbook__pin--hidden {
  display: none;
}

.lookbook__pin-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lookbook__pin-photo img,
.lookbook__pin-photo svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}


/* ----- Лоток вещей (правая колонка) ----- */
.lookbook__tray-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.lookbook__tray-empty {
  font-size: 13px;
  color: var(--color-gray-dark);
  line-height: 1.5;
}

.lookbook__tray-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-gray);
  padding: 6px;
}

.lookbook__tray-thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray);
  overflow: hidden;
}

.lookbook__tray-thumb img,
.lookbook__tray-thumb svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lookbook__tray-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lookbook__tray-name {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lookbook__tray-zone {
  font-size: 11px;
  color: var(--color-gray-dark);
}

.lookbook__tray-remove {
  flex-shrink: 0;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--color-gray-dark);
  cursor: pointer;
}

.lookbook__tray-remove:hover {
  color: var(--color-accent);
}

.lookbook__btn {
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 14px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 2px solid var(--color-black);
  background: var(--color-black);
  color: var(--color-white);
  cursor: pointer;
}

.lookbook__btn--ghost {
  background: var(--color-white);
  color: var(--color-black);
}

.lookbook__btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.lookbook__actions {
  margin-top: 32px;
  text-align: center;
}

.lookbook__actions .lookbook__btn--ghost {
  width: auto;
  display: inline-block;
}

/* ----- Модалка выбора товара из каталога ----- */
.lookbook-picker {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lookbook-picker[hidden] {
  display: none;
}

.lookbook-picker__box {
  background: var(--color-white);
  width: 100%;
  max-width: 720px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.lookbook-picker__head {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--color-gray);
}

.lookbook-picker__search {
  flex: 1;
  padding: 10px 14px;
  font-family: var(--font-main);
  font-size: 14px;
  border: 2px solid var(--color-black);
}

.lookbook-picker__close {
  width: 42px;
  border: 2px solid var(--color-black);
  background: var(--color-white);
  font-size: 16px;
  cursor: pointer;
}

.lookbook-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
}

.lookbook-picker__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--color-gray);
  background: var(--color-white);
  cursor: pointer;
  text-align: center;
}

.lookbook-picker__item:hover {
  border-color: var(--color-black);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.lookbook-picker__thumb {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray);
  overflow: hidden;
}

.lookbook-picker__thumb img,
.lookbook-picker__thumb svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lookbook-picker__name {
  font-size: 12px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lookbook-picker__zone {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-gray-dark);
}

/* =========================================================
   МЕДИА-ЗАПРОСЫ — адаптация под мобильные экраны
========================================================= */
@media (max-width: 768px) {
  /* Верхний ряд переходит на 2 строки: лого+иконки сверху, поиск под ними */
  .header__top {
    height: auto;
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 10px;
  }

  .header__brand-links {
    order: 1;
  }

  .header__icons {
    order: 2;
    margin-left: auto;
  }

  .burger {
    order: 3;
  }

  .header__search {
    order: 4;
    flex: 1 1 100%;
    max-width: none;
  }

  /* Прячем обычное меню и показываем бургер */
  .nav {
    position: fixed;
    top: calc(var(--header-height) + 56px); /* высота строки поиска под лого */
    left: 0;
    right: 0;
    border-top: none;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray);
    transform: translateY(-150%);
    transition: transform 0.25s ease;
  }

  /* Класс .nav--open добавляется через script.js при клике на бургер */
  .nav--open {
    transform: translateY(0);
  }

  .nav__list {
    flex-direction: column;
    gap: 0;
    padding: 16px 24px;
  }

  .nav__link {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-gray);
  }

  /* На мобильных подменю не раскрываем по hover — просто список разделов */
  .nav__dropdown {
    display: none;
  }

  .burger {
    display: flex;
  }

  .categories__grid {
    grid-template-columns: 1fr;
  }

  .products__layout {
    grid-template-columns: 1fr;
  }

  /* Другие цвета модели — лента мини-картинок под фото (только мобильный) */
  .product-card__colors {
    display: flex;
    gap: 6px;
    margin-top: 8px;
  }

  .product-card__color {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-gray);
    border: 1px solid var(--color-gray);
  }

  .product-card__color img,
  .product-card__color svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .products__sidebar {
    display: block;
    width: 100%;
  }

  .sidebar-block {
    width: 100%;
    margin-bottom: 10px;
  }

  .sidebar-block--filter {
    border: 1px solid #d8d8d8;
    background: #fff;
  }

  .sidebar-block--filter > .sidebar-block__title {
    min-height: 44px;
    margin: 0;
    padding: 12px 14px;
  }

  .sidebar-block--filter > .products__filter,
  .sidebar-block--filter > .products__select {
    margin: 0 14px 14px;
  }

  .products__filter--vertical {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .products__filter--vertical .filter-btn {
    width: 100%;
    min-height: 40px;
    padding: 9px 10px;
    font-size: 12px;
  }

  .products__grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .product-page {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .size-grid {
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  }

  .specs-list {
    grid-template-columns: 1fr;
  }

  .stores-grid {
    grid-template-columns: 1fr 1fr;
  }

  .similar-models__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Мудборд на мобильных — одна колонка: панель, доска, лоток друг под другом */
  .lookbook {
    padding: 24px 16px 48px;
  }

  .lookbook__layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .lookbook__board {
    order: -1; /* силуэт сверху */
  }
}

@media (max-width: 768px) {
  .lookbook__board {
    height: 640px;
  }

  .lookbook__fit-zone {
    top: 24px;
    height: 590px;
    max-width: 82%;
  }
}

/* =========================================================
   Mobile UX polish: compact commerce flow
========================================================= */
@media (max-width: 768px) {
  :root {
    --header-height: 112px;
  }

  html,
  body {
    overflow-x: hidden;
  }

  .header__top {
    padding: 8px 12px 10px;
    gap: 8px 10px;
    overflow: hidden;
  }

  .logo {
    font-size: 22px;
  }

  .logo__mark {
    width: 24px;
    height: 17px;
  }

  .header__brand-links {
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .header__brand-link {
    height: 34px;
    width: 58px;
    flex: 0 1 58px;
  }

  .header__brand-link img {
    width: 100%;
    object-fit: contain;
  }

  .header__icons {
    gap: 4px;
  }

  .header__icon-btn {
    min-width: 30px;
    min-height: 38px;
    justify-content: center;
  }

  .header__icon-btn svg {
    width: 19px;
    height: 19px;
  }

  .burger {
    width: 34px;
    height: 38px;
    align-items: center;
    justify-content: center;
  }

  .header__search {
    min-width: 0;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    flex: 0 0 calc(100vw - 24px);
    display: block;
    box-sizing: border-box;
  }

  .header__search::after {
    content: "Поиск";
    position: fixed;
    top: 55px;
    left: calc(100vw - 90px);
    width: 66px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-black);
    color: var(--color-white);
    border: 2px solid var(--color-black);
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 2;
  }

  .header__search-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 72px 10px 36px;
    font-size: 16px;
    box-sizing: border-box;
  }

  .header__search-btn {
    position: fixed;
    top: 55px;
    left: calc(100vw - 90px);
    right: auto;
    bottom: auto;
    width: 66px;
    min-height: 44px;
    margin-left: 0;
    padding: 0;
    font-size: 12px;
    letter-spacing: 0;
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
    opacity: 0;
    z-index: 3;
  }

  .search-suggest {
    position: fixed;
    top: var(--header-height);
    left: 12px;
    right: 12px;
    max-height: calc(100vh - var(--header-height) - 16px);
  }

  .search-suggest__item {
    gap: 10px;
    padding: 10px;
  }

  .search-suggest__img {
    width: 72px;
    height: 72px;
  }

  .search-suggest__name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .nav {
    top: var(--header-height);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    z-index: 95;
  }

  .nav__list {
    align-items: stretch;
    padding: 10px 16px 18px;
  }

  .nav__link {
    padding: 14px 0;
  }

  .hero {
    padding-top: 72px;
    min-height: 520px;
  }

  .hero__title {
    font-size: clamp(36px, 12vw, 58px);
  }

  .categories,
  .products,
  .recently-viewed,
  .newsletter {
    padding-left: 12px;
    padding-right: 12px;
  }

  .categories__grid {
    gap: 12px;
  }

  .products__layout {
    gap: 18px;
  }

  .products__sidebar {
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0 -12px;
    padding: 0 12px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    position: sticky;
    top: var(--header-height);
    z-index: 20;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray);
  }

  .products__sidebar::-webkit-scrollbar {
    display: none;
  }

  .sidebar-block {
    flex: 0 0 auto;
    min-width: max-content;
  }

  .sidebar-block--header {
    min-width: 130px;
    align-items: center;
  }

  .sidebar-block__title {
    margin-bottom: 8px;
    font-size: 12px;
  }

  .fav-store-filter {
    min-width: 220px;
    padding: 10px 12px;
  }

  .products__select {
    min-height: 42px;
    padding: 9px 34px 9px 12px;
    font-size: 12px;
  }

  .products__filter--vertical {
    gap: 6px;
  }

  .products__filter--vertical .filter-btn {
    min-height: 42px;
    padding: 9px 12px;
    font-size: 12px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .products__meta-row {
    align-items: flex-end;
    margin-bottom: 14px;
  }

  .products__page-size {
    font-size: 11px;
  }

  .products__grid {
    gap: 18px 10px;
  }

  .product-card:hover {
    transform: none;
  }

  .product-card__image svg,
  .product-card__image img {
    padding: 5%;
  }

  .product-card__quickview {
    display: none;
  }

  .product-card__favorite {
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.96);
  }

  .product-card__colors {
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .product-card__colors::-webkit-scrollbar {
    display: none;
  }

  .product-card__color {
    width: 42px;
    height: 42px;
  }

  .product-card__title {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product-card__sku,
  .product-card__badge {
    font-size: 11px;
  }

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

  .breadcrumbs {
    padding: 12px 12px 0;
    overflow-x: auto;
    white-space: nowrap;
  }

  .product-page {
    gap: 18px;
    padding: 12px 12px 120px;
  }

  .product-page__gallery {
    grid-column: 1;
    grid-row: 1;
    margin: 0 -12px;
  }

  .product-page__info {
    grid-column: 1;
    grid-row: 2;
  }

  .similar-models {
    grid-column: 1;
    grid-row: 3;
    margin-top: 12px;
    padding-top: 18px;
  }

  .product-page__main-image {
    aspect-ratio: 4 / 5;
  }

  .gallery-svg-holder svg,
  .gallery-svg-holder img {
    object-fit: contain;
    padding: 5%;
    box-sizing: border-box;
  }

  .gallery-arrow {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.92);
  }

  .gallery-thumbs {
    display: flex;
    overflow-x: auto;
    grid-template-columns: none;
    gap: 8px;
    padding: 0 12px 4px;
    scrollbar-width: none;
  }

  .gallery-thumbs::-webkit-scrollbar {
    display: none;
  }

  .gallery-thumbs__item {
    flex: 0 0 68px;
  }

  .product-page__title {
    font-size: 24px;
    line-height: 1.05;
  }

  .product-page__price {
    font-size: 24px;
  }

  .product-page__tags {
    gap: 6px;
  }

  .product-page__tag {
    padding: 6px 9px;
    font-size: 11px;
  }

  .store-picker__select {
    min-height: 48px;
    font-size: 16px;
  }

  .size-grid {
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 8px;
  }

  .size-grid__item {
    min-height: 66px;
    padding: 8px 6px;
  }

  .product-page__actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    margin: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--color-white);
    border-top: 1px solid var(--color-gray);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
  }

  .product-page__add-to-cart,
  .product-page__favorite-square {
    min-height: 52px;
  }

  .product-page__description,
  .product-page__specs {
    margin-top: 20px;
    padding-top: 18px;
  }

  .cart-drawer {
    position: fixed;
    left: 12px;
    right: 12px;
    top: var(--header-height);
    width: auto;
    max-height: calc(100vh - var(--header-height) - 18px);
  }

  .lookbook {
    padding: 18px 12px 48px;
  }

  .lookbook__layout {
    gap: 16px;
  }

  .lookbook__board {
    width: 100%;
    max-width: 430px;
    height: 610px;
    margin: 0 auto;
  }

  .lookbook__fit-zone {
    top: 18px;
    width: min(320px, 84%);
    height: 570px;
    max-width: 84%;
  }
}

@media (max-width: 420px) {
  :root {
    --header-height: 108px;
  }

  .header__brand-link {
    width: 50px;
    flex-basis: 50px;
    height: 30px;
  }

  .header__icons {
    gap: 2px;
  }

  .header__icon-btn {
    min-width: 28px;
  }

  .header__icon-btn svg {
    width: 18px;
    height: 18px;
  }

  .header__search-btn {
    left: calc(100vw - 82px);
    width: 58px;
    font-size: 11px;
  }

  .header__search::after {
    left: calc(100vw - 82px);
    width: 58px;
    font-size: 11px;
  }

  .products__grid {
    gap: 16px 8px;
  }

  .product-card__title {
    font-size: 11px;
  }

  .lookbook__board {
    height: 560px;
  }

  .lookbook__fit-zone {
    height: 522px;
  }
}

@media (max-width: 768px) {
  .header__search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    column-gap: 6px;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    flex-basis: calc(100vw - 24px);
  }

  .header__search::after {
    display: none;
  }

  .header__search-input {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    padding-right: 12px;
  }

  .header__search-btn {
    position: static;
    grid-column: 2;
    width: auto;
    min-width: 0;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
  }

  .header__search-btn-icon {
    display: block;
  }

  .header__search-btn-label {
    display: none;
  }

  .product-page__main-image {
    aspect-ratio: 1 / 1;
    max-height: 390px;
  }
}

@media (max-width: 420px) {
  .header__search {
    grid-template-columns: minmax(0, 1fr) 58px;
  }
}


@media (max-width: 900px) {
  .products__sidebar {
    display: block;
    width: 100%;
    margin: 0 0 16px;
    padding: 0;
    overflow: visible;
    position: static;
    background: transparent;
    border-bottom: none;
  }

  .sidebar-block {
    width: 100%;
    min-width: 0;
    margin-bottom: 10px;
  }

  .sidebar-block--filter {
    border: 1px solid #d8d8d8;
    background: #fff;
  }

  .sidebar-block--filter > .sidebar-block__title {
    min-height: 44px;
    margin: 0;
    padding: 12px 14px;
  }

  .sidebar-block--filter > .products__filter,
  .sidebar-block--filter > .products__select {
    margin: 0 14px 14px;
  }

  .products__filter--vertical {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .products__filter--vertical .filter-btn {
    width: 100%;
    min-height: 40px;
    padding: 9px 10px;
    font-size: 12px;
    text-align: center;
  }

  .products__filter--sizes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .products__filter--sizes .filter-btn {
    min-height: 38px;
    padding: 8px 6px;
  }

  .products__meta-row {
    align-items: stretch;
  }

  .products__count {
    flex: 1 0 100%;
  }

  .products__sort,
  .products__page-size {
    flex: 1 1 180px;
    justify-content: space-between;
  }
}

/* =========================================================
   SHOWROOM — экспериментальная интерактивная витрина
   ========================================================= */
.showroom-page {
  min-height: 100vh;
  color: #f7f7f4;
  background:
    radial-gradient(circle at 74% 24%, rgba(231, 34, 24, 0.24), transparent 30%),
    linear-gradient(135deg, #151513 0%, #25241f 48%, #080808 100%);
}

.showroom-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(18px, 4vw, 54px);
  background: linear-gradient(180deg, rgba(8, 8, 8, 0.82), rgba(8, 8, 8, 0));
}

.showroom-header__brand,
.showroom-header__nav a {
  color: #fff;
  text-decoration: none;
}

.showroom-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.showroom-header__mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #080808;
  background: #fff;
  font-size: 13px;
}

.showroom-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.showroom-header__nav a {
  opacity: 0.78;
}

.showroom-header__nav a:hover {
  opacity: 1;
}

.showroom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  min-height: 100vh;
  padding: 78px clamp(14px, 3vw, 42px) 28px;
  gap: clamp(16px, 2.5vw, 34px);
}

.showroom-stage {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 108px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
    #11110f;
  isolation: isolate;
}

.showroom-stage::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 7%;
  height: 24%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.16), transparent 68%);
  filter: blur(10px);
  transform: perspective(700px) rotateX(64deg);
  transform-origin: center bottom;
  opacity: 0.68;
}

.showroom-stage__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 0 44%, rgba(255, 255, 255, 0.07) 44% 44.4%, transparent 44.4%),
    linear-gradient(180deg, transparent 0 71%, rgba(255, 255, 255, 0.09) 71% 71.2%, transparent 71.2%);
}

.showroom-stage__stripe {
  position: absolute;
  top: 7%;
  bottom: 16%;
  width: clamp(44px, 6vw, 82px);
  opacity: 0.92;
}

.showroom-stage__stripe--red {
  left: 48%;
  background: #e51d17;
}

.showroom-stage__stripe--white {
  left: calc(48% + clamp(46px, 6.2vw, 86px));
  background: rgba(255, 255, 255, 0.9);
}

.showroom-stage__stripe--charcoal {
  left: calc(48% + clamp(92px, 12.4vw, 172px));
  background: rgba(0, 0, 0, 0.42);
}

.showroom-stage__copy {
  position: absolute;
  z-index: 4;
  top: clamp(24px, 6vw, 62px);
  left: clamp(18px, 4vw, 54px);
  max-width: 330px;
}

.showroom-stage__eyebrow,
.showroom-stage__label {
  margin: 0 0 8px;
  color: #e51d17;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.showroom-stage__copy h1 {
  margin: 0;
  font-family: var(--font-display), sans-serif;
  font-size: clamp(46px, 8vw, 118px);
  line-height: 0.9;
  text-transform: uppercase;
}

.showroom-stage__copy p:last-child {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
}

.showroom-carousel {
  position: absolute;
  inset: 13% 7% 18%;
  perspective: 1100px;
}

.showroom-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(180px, 24vw, 330px);
  min-height: clamp(250px, 38vw, 500px);
  transform: translate(-50%, -50%);
  transition: transform 520ms ease, opacity 320ms ease, filter 320ms ease;
  will-change: transform, opacity;
}

.showroom-card__media {
  display: grid;
  height: clamp(230px, 36vw, 480px);
  place-items: center;
  text-decoration: none;
}

.showroom-card__media img,
.showroom-card__media svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 34px 30px rgba(0, 0, 0, 0.45));
}

.showroom-card__plate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -18px auto 0;
  max-width: 260px;
  padding: 10px 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.showroom-card.is-active {
  z-index: 5;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08) rotateY(0);
}

.showroom-card.is-active .showroom-card__media {
  cursor: grab;
  touch-action: pan-y;
}

.showroom-card--spinning .showroom-card__media {
  cursor: grabbing;
}

.showroom-card.is-prev {
  z-index: 3;
  opacity: 0.62;
  filter: saturate(0.82) brightness(0.82);
  transform: translate(-126%, -52%) scale(0.76) rotateY(24deg);
}

.showroom-card.is-next {
  z-index: 3;
  opacity: 0.62;
  filter: saturate(0.82) brightness(0.82);
  transform: translate(26%, -52%) scale(0.76) rotateY(-24deg);
}

.showroom-card.is-far-prev {
  z-index: 2;
  opacity: 0.22;
  filter: saturate(0.7) brightness(0.62);
  transform: translate(-188%, -52%) scale(0.56) rotateY(34deg);
}

.showroom-card.is-far-next {
  z-index: 2;
  opacity: 0.22;
  filter: saturate(0.7) brightness(0.62);
  transform: translate(88%, -52%) scale(0.56) rotateY(-34deg);
}

.showroom-card.is-hidden {
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.42);
}

.showroom-stage__arrow {
  position: absolute;
  z-index: 8;
  top: 50%;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  background: rgba(0, 0, 0, 0.44);
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
}

.showroom-stage__arrow:hover {
  background: #e51d17;
}

.showroom-stage__arrow--prev {
  left: clamp(14px, 2vw, 28px);
}

.showroom-stage__arrow--next {
  right: clamp(14px, 2vw, 28px);
}

.showroom-stage__hud {
  position: absolute;
  z-index: 9;
  left: clamp(18px, 4vw, 54px);
  right: clamp(18px, 4vw, 54px);
  bottom: clamp(18px, 4vw, 40px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.showroom-stage__hud h2 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(24px, 3vw, 46px);
  line-height: 1;
  text-transform: uppercase;
}

.showroom-stage__hud p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
}

.showroom-stage__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 10px;
}

.showroom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #fff;
  color: #080808;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.showroom-btn--ghost {
  color: #fff;
  background: transparent;
}

.showroom-btn--spin {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.showroom-btn--spin:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.showroom-btn--dark {
  color: #fff;
  background: #e51d17;
  border-color: #e51d17;
}

.showroom-rail {
  min-height: calc(100vh - 108px);
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

.showroom-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.showroom-rail__filters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.showroom-filter {
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.showroom-filter--active {
  color: #080808;
  background: #fff;
}

.showroom-rail__items {
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 260px);
  overflow: auto;
  padding-right: 4px;
}

.showroom-rail__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  background: rgba(0, 0, 0, 0.24);
  text-align: left;
  cursor: pointer;
}

.showroom-rail__item--active {
  border-color: #e51d17;
  background: rgba(229, 29, 23, 0.16);
}

.showroom-rail__thumb {
  display: grid;
  width: 64px;
  height: 58px;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
}

.showroom-rail__thumb img,
.showroom-rail__thumb svg {
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
}

.showroom-rail__text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.showroom-rail__text strong,
.showroom-rail__text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showroom-rail__text strong {
  font-size: 13px;
  text-transform: uppercase;
}

.showroom-rail__text small {
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
}

.showroom-toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 12px 18px;
  color: #080808;
  background: #fff;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

@media (max-width: 980px) {
  .showroom {
    grid-template-columns: 1fr;
  }

  .showroom-stage {
    min-height: 78vh;
  }

  .showroom-rail {
    min-height: 0;
  }

  .showroom-rail__items {
    grid-auto-flow: column;
    grid-auto-columns: minmax(170px, 1fr);
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

@media (max-width: 640px) {
  .showroom-header {
    padding: 14px 14px 8px;
    align-items: flex-start;
  }

  .showroom-header__brand span:last-child {
    display: none;
  }

  .showroom-header__nav {
    gap: 10px;
    font-size: 11px;
  }

  .showroom {
    padding: 66px 10px 18px;
  }

  .showroom-stage {
    min-height: 72vh;
  }

  .showroom-stage__copy {
    max-width: 210px;
  }

  .showroom-stage__copy p:last-child {
    display: none;
  }

  .showroom-carousel {
    inset: 18% 6% 28%;
  }

  .showroom-card {
    width: 58vw;
  }

  .showroom-card__media {
    height: 44vh;
  }

  .showroom-card__plate {
    display: none;
  }

  .showroom-stage__arrow {
    top: auto;
    bottom: 130px;
    width: 44px;
    height: 44px;
    font-size: 34px;
  }

  .showroom-stage__hud {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .showroom-stage__hud h2 {
    font-size: 22px;
  }

  .showroom-stage__actions {
    justify-content: stretch;
  }

  .showroom-btn {
    flex: 1;
    min-width: 0;
    padding: 0 10px;
  }

  .showroom-rail {
    padding: 12px;
  }

  .showroom-rail__filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .showroom-filter {
    font-size: 10px;
  }
}

/* =========================================================
   БЛОГ — страница-список (blog.html) и статьи (blog-*.html)
========================================================= */
.blog-page {
  max-width: 100%;
  padding: 40px 24px 80px;
}

.blog-hero {
  max-width: 700px;
  margin: 0 auto 40px;
  text-align: center;
}

.blog-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.blog-hero__lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-gray-dark);
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  min-height: 200px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  color: var(--color-black);
  transition: transform 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
}

.blog-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-gray) center / cover no-repeat;
  overflow: hidden;
}

.blog-card__category {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  background: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.blog-card__body {
  padding: 16px 2px 0;
}

.blog-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  margin-bottom: 8px;
  transition: color 0.15s ease;
}

.blog-card:hover .blog-card__title {
  color: var(--color-accent);
}

.blog-card__excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-gray-dark);
  margin-bottom: 12px;
}

.blog-card__meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #999999;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.blog-empty {
  text-align: center;
  color: var(--color-gray-dark);
  padding: 40px 0;
}

/* ---- Страница отдельной статьи ---- */
.blog-article__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.blog-article__meta span:not(:first-child) {
  color: #999999;
  font-weight: 500;
}

.blog-article__hero {
  width: 100%;
  aspect-ratio: 21 / 9;
  background: var(--color-gray) center / cover no-repeat;
  margin-bottom: 32px;
}

.blog-article__body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  margin: 32px 0 12px;
}

.blog-article__body ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.blog-article__body li {
  font-size: 15px;
  line-height: 1.7;
  color: #333333;
  margin-bottom: 8px;
}

.blog-article__cta {
  margin: 32px 0;
  padding: 24px;
  background: var(--color-gray);
  text-align: center;
}

.blog-article__cta p {
  margin-bottom: 16px !important;
}

.blog-article__related {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--color-gray);
}

.blog-article__related h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.blog-article__related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}


@media (max-width: 900px) {
  .blog-grid,
  .blog-article__related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .blog-grid,
  .blog-article__related-grid {
    grid-template-columns: 1fr;
  }

  .blog-article__hero {
    aspect-ratio: 4 / 3;
  }
}

/* Admin */
.admin-page {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto 80px;
}

.admin-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 48px 0 28px;
  border-bottom: 1px solid #e8e8e8;
}

.admin-kicker {
  margin: 0 0 8px;
  color: #777;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-title {
  margin: 0;
  font-size: clamp(36px, 5vw, 72px);
  line-height: .9;
  text-transform: uppercase;
}

.admin-user {
  font-weight: 700;
  text-align: right;
}

.admin-access {
  max-width: 560px;
  padding: 48px 0;
}

.admin-workspace {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 32px;
  padding-top: 32px;
}

.admin-sidebar {
  position: sticky;
  top: 16px;
  align-self: start;
}

.admin-quality-filters {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.admin-quality-filter {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 2px solid #111;
  background: #fff;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.admin-quality-filter:has(input:checked) {
  color: #fff;
  background: #111;
}

.admin-quality-filter input {
  width: 18px;
  height: 18px;
  accent-color: #ed1c18;
}

.admin-quality-filter strong {
  font-size: 13px;
}

.admin-discount-tools {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 180px 180px auto;
  align-items: end;
  gap: 12px;
  margin: 0 0 14px;
}

.admin-discount-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.admin-discount-column {
  min-width: 0;
}

.admin-discount-column__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.admin-discount-column__head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-category-discount {
  padding: 10px 12px;
  text-align: center;
}

.admin-discount-category-text {
  min-height: 340px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
}


.admin-label,
.admin-field span {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-input,
.admin-textarea {
  width: 100%;
  border: 2px solid #111;
  border-radius: 0;
  background: #fff;
  padding: 14px 16px;
  font: inherit;
  font-weight: 600;
}

.admin-textarea {
  resize: vertical;
  line-height: 1.55;
}

.admin-product-list {
  display: grid;
  gap: 8px;
  max-height: 72vh;
  margin-top: 16px;
  overflow: auto;
  padding-right: 8px;
}

.admin-product-row {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 1px solid #dcdcdc;
  background: #fff;
  padding: 14px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.admin-product-row span {
  font-weight: 900;
  text-transform: uppercase;
}

.admin-product-row small {
  color: #777;
  font-weight: 700;
}

.admin-product-row--active {
  border-color: #111;
  background: #111;
  color: #fff;
}

.admin-product-row--active small {
  color: #ddd;
}

.admin-editor {
  min-width: 0;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.admin-tab {
  border: 2px solid #111;
  background: #fff;
  padding: 13px 18px;
  font: inherit;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.admin-tab--active {
  background: #111;
  color: #fff;
}

.admin-panel {
  display: none;
}

.admin-panel--active {
  display: block;
}

.admin-empty,
.admin-help {
  color: #666;
  line-height: 1.5;
}

.admin-form {
  display: grid;
  gap: 22px;
}

.admin-form__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.admin-editor-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
  text-transform: uppercase;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.admin-metadata-editor {
  border: 1px solid var(--color-border, #dcdcdc);
  padding: 18px;
}

.admin-metadata-editor__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.admin-metadata-editor__head .admin-help {
  margin: 4px 0 0;
}

.admin-metadata-editor__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.admin-option-group {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--color-border, #dcdcdc);
  padding: 12px;
}

.admin-option-group legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 240px;
  overflow: auto;
}

.admin-option-search {
  margin-bottom: 10px;
  padding: 9px 11px;
}

.admin-option-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--color-border, #dcdcdc);
  padding: 7px 9px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #111);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.admin-option-chip input {
  margin: 0;
  accent-color: #ed1c18;
}

.admin-field {
  display: block;
}

.admin-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.admin-check input {
  width: 20px;
  height: 20px;
  accent-color: #ed1c18;
}

.admin-warning {
  border: 2px solid #ed1c18;
  background: #fff1f1;
  padding: 14px 16px;
  color: #b30000;
  font-weight: 800;
}

.admin-status {
  min-height: 24px;
  font-weight: 800;
}

.admin-status--success {
  color: #087b33;
}

.admin-status--error {
  color: #b30000;
}

.admin-status--muted {
  color: #777;
}

.admin-store-list { display: grid; gap: 16px; }
.admin-store-row { border: 1px solid #d7d7d7; padding: 18px; }
.admin-store-row__head,
.admin-store-row__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-store-row__head strong,
.admin-store-row__head small { display: block; }
.admin-store-row__head strong { font-size: 15px; text-transform: uppercase; }
.admin-store-row__head small { margin-top: 4px; color: #777; }
.admin-store-connection { color: #777; font-size: 12px; font-weight: 800; }
.admin-store-connection--active { color: #087b33; }
.admin-store-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: 18px; }
.admin-store-row__foot { margin-top: 18px; }

.admin-preview {
  border-top: 1px solid #e8e8e8;
  padding-top: 24px;
}

.admin-preview h3 {
  margin: 0 0 14px;
  font-size: 16px;
  text-transform: uppercase;
}

.admin-preview-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  background: #f4f4f4;
  padding: 18px;
}

.admin-preview-card__media {
  aspect-ratio: 1;
  background: #fff;
  display: grid;
  place-items: center;
}

.admin-preview-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-preview-card__badges {
  color: #ed1c18;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-preview-card h4 {
  margin: 0 0 8px;
  font-size: 24px;
  text-transform: uppercase;
}

.admin-add-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 18px 0;
}

.admin-photo-list {
  display: grid;
  gap: 12px;
}

.admin-photo-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid #ddd;
  padding: 12px;
}

.admin-photo-row img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: #f4f4f4;
}

.admin-photo-row__body {
  display: grid;
  gap: 10px;
}

.admin-photo-row__body strong {
  overflow-wrap: anywhere;
}

.admin-photo-row__actions {
  display: grid;
  gap: 8px;
}


@media (max-width: 900px) {
  .admin-page {
    width: min(100% - 28px, 720px);
  }

  .admin-hero,
  .admin-form__top {
    display: grid;
  }

  .admin-user,
  .admin-actions {
    justify-content: stretch;
    text-align: left;
  }

  .admin-workspace,
  .admin-grid,
  .admin-metadata-editor__grid,
  .admin-store-grid,
  .admin-preview-card,
  .admin-photo-row,
  .admin-add-photo,
  .admin-discount-tools,
  .admin-discount-columns {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
  }

  .admin-product-list {
    max-height: 340px;
  }
}

.product-price__period {
  display: block;
  margin-top: 4px;
  color: #e2231a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.admin-active-discounts {
  margin: 14px 0 18px;
  border: 1px solid #dcdcdc;
  background: #f7f7f7;
  padding: 12px;
}

.admin-active-discounts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-active-discounts__head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-active-discounts__head strong {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  color: #fff;
  background: #111;
  font-size: 12px;
}

.admin-active-discounts__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 92px;
  overflow: auto;
}

.admin-active-discounts__list span,
.admin-active-discounts__empty {
  border: 1px solid #111;
  background: #fff;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 800;
}

.admin-active-discounts__empty {
  display: inline-block;
  margin: 0;
  color: #777;
}

.admin-discount-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 14px;
  align-items: start;
  margin: 14px 0 18px;
}

.admin-manual-discount-field {
  margin-top: 18px;
}

.admin-manual-discount-field h3,
.admin-discount-trash__head h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-discount-trash {
  min-height: 104px;
  border: 2px solid #e2231a;
  background: #fff;
  padding: 12px;
}

.admin-discount-trash__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: #e2231a;
}

.admin-discount-trash__list,
.admin-active-discounts__list {
  display: grid;
  gap: 6px;
}

.admin-discount-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #111;
  background: #fff;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 800;
}

.admin-discount-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-discount-chip button {
  width: 26px;
  height: 26px;
  border: 1px solid #111;
  background: #fff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.admin-discount-chip button:hover {
  color: #fff;
  background: #e2231a;
  border-color: #e2231a;
}

@media (max-width: 900px) {
  .admin-discount-board {
    grid-template-columns: 1fr;
  }
}

body.admin-locked .header,
body.admin-locked .breadcrumbs,
body.admin-locked .admin-hero,
body.admin-locked .admin-access,
body.admin-locked .admin-workspace {
  display: none;
}

body:not(.admin-locked) .admin-login {
  display: none;
}

.admin-login {
  min-height: calc(100vh - 48px);
  display: grid;
  place-items: center;
  padding: 48px 0;
}

.admin-login__form {
  width: min(420px, 100%);
  display: grid;
  gap: 16px;
}

.admin-login__form h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.95;
  text-transform: uppercase;
}

.admin-login__help {
  margin: 0;
  color: #555;
  line-height: 1.5;
}

.admin-manual-discount-field[hidden],
.admin-discount-columns[hidden] {
  display: none !important;
}

.admin-active-discounts,
.admin-discount-trash {
  padding: 16px;
}

.admin-active-discounts__list {
  max-height: 220px;
  overflow: auto;
}

.admin-discount-trash__list {
  max-height: 170px;
  overflow: auto;
}

.admin-discount-doc {
  border: 1px solid #111;
  background: #fff;
  padding: 10px;
}

.admin-discount-doc__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.admin-discount-doc__top strong {
  font-size: 13px;
  line-height: 1.3;
}

.admin-discount-doc small {
  display: block;
  margin-top: 6px;
  color: #666;
  line-height: 1.35;
}

.admin-discount-doc__top button {
  min-width: 88px;
  min-height: 34px;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.admin-discount-doc__top button:hover {
  background: #111;
  color: #fff;
}

.admin-discount-doc--trash .admin-discount-doc__top button {
  min-width: 128px;
}
.admin-discount-exclusions-field {
  margin-top: 12px;
}

.admin-discount-exclusions {
  min-height: 76px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
}
body::before {
  content: "Сайт работает в тестовом режиме.\AИнформация о ценах и наличии товаров не является публичной офертой. Точную информацию можно получить по телефону инфолинии или у наших продавцов-консультантов.";
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: #111;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  text-transform: none;
  white-space: pre-line;
  overflow-wrap: anywhere;
  letter-spacing: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.media-fit {
  --media-scale: 1;
  --media-x: 0;
  --media-y: 0;
  transform: translate(calc(var(--media-x) * 1px), calc(var(--media-y) * 1px)) scale(var(--media-scale));
  transform-origin: center center;
  transition: transform 0.15s ease;
}

.admin-upload-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.admin-photo-row {
  grid-template-columns: 180px minmax(0, 1fr) auto;
  align-items: start;
}

.admin-photo-preview {
  position: relative;
  width: 180px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f4f4f4;
  border: 1px solid #bbb;
}

.admin-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4%;
  box-sizing: border-box;
}

.admin-photo-preview span {
  position: absolute;
  pointer-events: none;
  background: rgba(226, 35, 26, 0.34);
}

.admin-photo-preview span:nth-of-type(1) {
  left: 33.333%;
  top: 0;
  width: 1px;
  height: 100%;
}

.admin-photo-preview span:nth-of-type(2) {
  left: 66.666%;
  top: 0;
  width: 1px;
  height: 100%;
}

.admin-photo-preview span:nth-of-type(3) {
  left: 0;
  top: 33.333%;
  width: 100%;
  height: 1px;
}

.admin-photo-preview span:nth-of-type(4) {
  left: 0;
  top: 66.666%;
  width: 100%;
  height: 1px;
}

.admin-photo-fit-controls {
  display: grid;
  gap: 8px;
}

.admin-photo-fit-controls label {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-photo-fit-controls input[type="range"] {
  width: 100%;
}

.admin-photo-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 900px) {
  .admin-upload-photo {
    grid-template-columns: 1fr;
  }

  .admin-photo-preview {
    width: 100%;
    max-width: 260px;
  }
}
/* Better live crop controls in admin photo editor */
.admin-photo-row {
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) auto;
  gap: 18px;
}

.admin-photo-preview {
  width: min(340px, 100%);
  min-width: 260px;
  cursor: grab;
  background:
    linear-gradient(45deg, #ececec 25%, transparent 25%),
    linear-gradient(-45deg, #ececec 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ececec 75%),
    linear-gradient(-45deg, transparent 75%, #ececec 75%);
  background-color: #f8f8f8;
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

.admin-photo-preview--dragging {
  cursor: grabbing;
}

.admin-photo-preview i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid #e2231a;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-sizing: border-box;
}

.admin-photo-preview i::before,
.admin-photo-preview i::after {
  content: "";
  position: absolute;
  background: #e2231a;
}

.admin-photo-preview i::before {
  left: 50%;
  top: -10px;
  width: 2px;
  height: 32px;
  transform: translateX(-50%);
}

.admin-photo-preview i::after {
  left: -10px;
  top: 50%;
  width: 32px;
  height: 2px;
  transform: translateY(-50%);
}

.admin-photo-fit-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-photo-fit-toolbar .btn {
  min-width: 42px;
  min-height: 34px;
  padding: 7px 10px;
}

.admin-photo-fit-toolbar strong {
  min-width: 54px;
  text-align: center;
  font-size: 13px;
}

.admin-photo-fit-controls label {
  grid-template-columns: 140px minmax(0, 1fr);
}

.admin-photo-fit-controls b {
  display: inline-block;
  min-width: 42px;
  margin-left: 6px;
  color: #e2231a;
}
/* Show crop grid only while the user is actively moving/scaling a photo */
.admin-photo-preview span,
.admin-photo-preview i {
  opacity: 0;
  transition: opacity 0.12s ease;
}

.admin-photo-preview--active span,
.admin-photo-preview--active i,
.admin-photo-preview--dragging span,
.admin-photo-preview--dragging i {
  opacity: 1;
}

.admin-photo-preview .media-fit {
  will-change: transform;
  transition: none;
}
.admin-photo-delete {
  border-color: #e2231a;
  color: #e2231a;
}

.admin-photo-delete:hover,
.admin-photo-delete:focus-visible {
  background: #e2231a;
  color: #fff;
}
.admin-site-media-list {
  display: grid;
  gap: 14px;
}

.admin-site-media-row {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  border: 1px solid #d8d8d8;
  padding: 12px;
  background: #fff;
}

.admin-site-media-preview {
  width: min(340px, 100%);
  min-width: 260px;
  border: 2px solid #111;
  box-sizing: border-box;
}

.admin-site-media-preview--category {
  aspect-ratio: 4 / 3;
}

.admin-site-media-preview--hero {
  aspect-ratio: 16 / 7;
}

.admin-site-media-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #f4f4f4;
}

.admin-site-media-frame.media-fit {
  transform: translate(calc(var(--media-x, 0) * 1%), calc(var(--media-y, 0) * 1%)) scale(var(--media-scale, 1));
}

.admin-site-media-preview::after {
  content: "VISIBLE ON SITE";
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 4px 7px;
  background: rgba(17, 17, 17, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.admin-site-media-row--dirty {
  border-color: #e2231a;
  box-shadow: inset 0 0 0 1px #e2231a;
}

.admin-site-media-apply:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-site-media-row--dirty .admin-site-media-apply:not(:disabled) {
  background: #e2231a;
  border-color: #e2231a;
  color: #fff;
}
.admin-site-media-row .admin-upload-photo {
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 760px) {
  .admin-site-media-row {
    grid-template-columns: 1fr;
  }
}
.gallery-svg-holder {
  overflow: hidden;
}

/* Portrait product photos keep their whole subject while a muted copy fills
   the existing gallery frame. The class is added only to the main gallery. */
.gallery-svg-holder--portrait {
  position: relative;
  isolation: isolate;
}

.gallery-svg-holder--portrait::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: 0;
  background: center / cover no-repeat var(--gallery-blur-image);
  filter: blur(24px) saturate(0.72) brightness(0.78);
  opacity: 0.36;
  transform: scale(1.06);
  pointer-events: none;
}

.gallery-svg-holder--portrait .media-fit {
  position: relative;
  z-index: 1;
}

.gallery-svg-holder .media-fit,
.gallery-thumbs__item .media-fit,
.admin-photo-preview .media-fit {
  padding: 0;
  max-width: none;
  max-height: none;
}

.gallery-svg-holder .media-fit {
  object-fit: contain;
}
/* SPORTMIX MOBILE CLEANUP 2026-07-22 */
@media (max-width: 768px) {
  :root {
    --header-height: 128px;
  }

  .header__top {
    height: auto;
    min-height: var(--header-height);
    padding: 10px 12px 12px;
    display: grid;
    grid-template-columns: minmax(112px, auto) 1fr;
    grid-template-areas:
      "brand icons"
      "search search";
    gap: 10px 8px;
    align-items: center;
    overflow: visible;
  }

  .header__brand-links {
    grid-area: brand;
    min-width: 0;
    gap: 8px;
  }

  .header__brand-link {
    width: 54px;
    height: 34px;
    flex: 0 0 54px;
  }

  .header__brand-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .header__icons {
    grid-area: icons;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
  }

  .header__icon-btn,
  .burger {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
  }

  .header__icon-btn svg,
  .burger svg {
    width: 20px;
    height: 20px;
  }

  .header__icon-count {
    top: -2px;
    right: -1px;
    min-width: 17px;
    height: 17px;
    font-size: 10px;
  }

  .header__search {
    grid-area: search;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px;
    column-gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: none;
  }

  .header__search::after {
    display: none !important;
  }

  .header__search-icon {
    left: 12px;
    z-index: 1;
  }

  .header__search-input {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px 10px 38px;
    font-size: 14px;
    border-width: 2px;
  }

  .header__search-btn {
    position: static !important;
    grid-column: 2;
    width: 54px;
    min-width: 54px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    opacity: 1 !important;
    border-width: 2px;
    background: var(--color-white);
    color: var(--color-black);
  }

  .header__search-btn-icon {
    display: block;
    width: 24px;
    height: 24px;
  }

  .header__search-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .nav {
    top: var(--header-height);
  }

  .motivation-banner {
    min-height: 560px;
    padding: 128px 16px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .motivation-banner__slide {
    background-position: center center;
  }

  .motivation-banner__content {
    width: min(100%, 380px);
    max-width: none;
    padding: 30px 22px;
    background: rgba(255, 255, 255, 0.82);
  }

  .motivation-banner__eyebrow {
    font-size: 11px;
    letter-spacing: 3px;
    margin-bottom: 14px;
  }

  .motivation-banner__title {
    font-size: clamp(42px, 14vw, 64px);
    line-height: 0.98;
    letter-spacing: 0;
  }

  .motivation-banner__stripes {
    gap: 8px;
    margin-top: 24px;
  }

  .motivation-banner__stripes span {
    width: 56px;
    height: 5px;
  }

  .motivation-banner__subtitle {
    max-width: 280px;
    margin: 22px auto 22px;
    font-size: 17px;
    line-height: 1.35;
  }

  .motivation-banner .btn {
    width: 100%;
    max-width: 250px;
    min-height: 58px;
    padding: 14px 18px;
    white-space: normal;
  }

  .section-title {
    margin: 36px 0 20px;
    font-size: 32px;
    line-height: 1.05;
  }
}

@media (max-width: 420px) {
  :root {
    --header-height: 122px;
  }

  .header__top {
    padding-left: 10px;
    padding-right: 10px;
    grid-template-columns: minmax(104px, auto) 1fr;
  }

  .header__brand-link {
    width: 50px;
    height: 32px;
    flex-basis: 50px;
  }

  .header__icons {
    gap: 2px;
  }

  .header__icon-btn,
  .burger {
    width: 31px;
    min-width: 31px;
    height: 32px;
    min-height: 32px;
  }

  .header__icon-btn svg,
  .burger svg {
    width: 19px;
    height: 19px;
  }

  .header__search {
    grid-template-columns: minmax(0, 1fr) 50px;
    column-gap: 6px;
  }

  .header__search-btn {
    width: 50px;
    min-width: 50px;
  }

  .motivation-banner {
    min-height: 540px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .motivation-banner__content {
    padding: 28px 18px;
  }

  .motivation-banner__title {
    font-size: clamp(40px, 15vw, 58px);
  }
}
/* SPORTMIX PRODUCT MOBILE WEBVIEW CLEANUP 2026-07-22 */
.product-page__main-image {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.product-page__main-image--dragging {
  cursor: grabbing;
}

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .header,
  .product-page,
  .breadcrumbs,
  .product-page__gallery,
  .product-page__info,
  .product-page__main-image,
  .gallery-thumbs,
  .store-picker,
  .size-grid__wrapper,
  .product-page__tags,
  .product-page__description,
  .product-page__specs {
    max-width: 100%;
  }

  .product-page {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    overflow: hidden;
  }

  .product-page__gallery {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
  }

  .product-page__main-image {
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    max-height: min(78vw, 420px);
    overflow: hidden;
  }

  .gallery-svg-holder,
  .gallery-svg-holder img,
  .gallery-svg-holder svg {
    max-width: 100%;
    max-height: 100%;
  }

  .gallery-arrow {
    width: 42px;
    height: 56px;
    top: 50%;
    transform: translateY(-50%);
  }

  .gallery-arrow--prev {
    left: 10px;
  }

  .gallery-arrow--next {
    right: 10px;
  }

  .gallery-thumbs {
    width: 100%;
    margin: 10px 0 0;
    padding: 0 0 6px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .gallery-thumbs__item {
    flex: 0 0 76px;
    width: 76px;
    height: 92px;
    min-width: 76px;
  }

  .product-page__info {
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .product-page__title {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: clamp(24px, 7.5vw, 34px);
    line-height: 1.08;
  }

  .product-page__subtitle,
  .product-page__article,
  .stock-hint {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .product-page__tags {
    width: 100%;
    overflow: hidden;
  }

  .product-page__tag {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .store-picker__select {
    max-width: 100%;
    min-width: 0;
  }

  .size-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }
}

@supports not (overflow: clip) {
  @media (max-width: 768px) {
    html,
    body {
      overflow-x: hidden;
    }
  }
}
/* SPORTMIX MOBILE SPECS COMPACT 2026-07-22 */
@media (max-width: 768px) {
  .product-page__specs {
    margin-top: 18px;
    padding-top: 18px;
  }

  .specs-list {
    display: block;
  }

  .specs-list dt,
  .specs-list dd {
    display: inline;
    font-size: 14px;
    line-height: 1.45;
  }

  .specs-list dt {
    color: var(--color-gray-dark);
    font-weight: 600;
  }

  .specs-list dt::after {
    content: ": ";
  }

  .specs-list dd {
    font-weight: 800;
    overflow-wrap: anywhere;
  }

  .specs-list dd::after {
    content: "";
    display: block;
    height: 8px;
  }
}
/* SPORTMIX MOBILE HEADER AND FILTERS 2026-07-22 */
@media (max-width: 768px) {
  .header__brand-links {
    gap: 6px;
  }

  .header__brand-link {
    width: 46px;
    height: 30px;
    flex-basis: 46px;
  }

  .header__icons {
    gap: 5px;
  }

  .header__icon-btn,
  .burger {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .header__icon-btn svg,
  .burger svg {
    width: 23px;
    height: 23px;
  }

  .header__icon-count {
    top: -3px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
  }

  #products-filter,
  #products-gender-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  #products-filter.products__filter--vertical,
  #products-gender-filter.products__filter--vertical {
    flex-direction: initial;
  }

  #products-filter .filter-btn,
  #products-gender-filter .filter-btn {
    width: 100%;
    min-height: 44px;
    padding: 9px 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    line-height: 1.15;
    letter-spacing: 0;
    white-space: normal;
  }

  .products__select--full {
    min-height: 44px;
    width: 100%;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 12px;
  }

  .sidebar-block--filter {
    margin-bottom: 16px;
  }

  .sidebar-block__title {
    margin-bottom: 8px;
  }
}

@media (max-width: 420px) {
  .header__brand-link {
    width: 42px;
    height: 28px;
    flex-basis: 42px;
  }

  .header__icons {
    gap: 3px;
  }

  .header__icon-btn,
  .burger {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .header__icon-btn svg,
  .burger svg {
    width: 22px;
    height: 22px;
  }

  #products-filter .filter-btn,
  #products-gender-filter .filter-btn {
    min-height: 42px;
    font-size: 9px;
    padding-left: 3px;
    padding-right: 3px;
  }
}

/* SPORTMIX admin quick edit buttons on product page */
.product-page__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.product-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}

.product-admin-actions[hidden] {
  display: none;
}

.product-admin-actions__btn {
  border: 2px solid #e20000;
  color: #e20000;
  background: #fff;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.product-admin-actions__btn--accent {
  border-color: #087b33;
  color: #087b33;
}

@media (max-width: 768px) {
  .product-page__title-row {
    display: block;
  }

  .product-admin-actions {
    justify-content: flex-start;
    margin-top: 12px;
  }
}
#store-select option[data-empty="1"] {
  color: #777;
}

/* Product card: final mobile WebView overrides. Keep photos fully visible. */
@media (max-width: 768px) {
  :root {
    --header-height: 106px;
  }

  .header__top {
    min-height: 0;
    padding: 8px 12px 9px;
    gap: 6px 8px;
  }

  .header__brand-link {
    width: 42px;
    height: 28px;
    flex-basis: 42px;
  }

  .header__icon-btn,
  .burger {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .header__search {
    grid-template-columns: minmax(0, 1fr) 46px;
    column-gap: 6px;
  }

  .header__search-input,
  .header__search-btn {
    min-height: 40px;
    height: 40px;
  }

  .header__search-btn {
    width: 46px;
    min-width: 46px;
  }

  .product-page {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding-top: 10px;
    padding-bottom: 32px;
  }

  .product-page__main-image {
    height: clamp(320px, 60vh, 520px);
    height: clamp(320px, 60svh, 520px);
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    overflow: hidden;
  }

  .gallery-svg-holder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
  }

  .gallery-svg-holder img,
  .gallery-svg-holder svg,
  .gallery-svg-holder .media-fit {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  .gallery-arrow {
    width: 38px;
    height: 48px;
  }

  .gallery-thumbs {
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
  }

  .gallery-thumbs__item {
    flex-basis: 68px;
    width: 68px;
    height: 68px;
    min-width: 68px;
    scroll-snap-align: center;
  }

  .product-page__actions {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px;
    gap: 8px;
    margin-top: 20px;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .product-page__actions .btn,
  .product-page__favorite-square {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 10px 8px;
    white-space: normal;
  }

  .product-page__favorite-square {
    width: 52px;
  }
}

/* SPORTMIX THEME: semantic variables and compact header switch. */
html[data-theme="dark"] {
  color-scheme: dark;
  --color-black: #f4f5f7;
  --color-white: #17191d;
  --color-gray: #292d33;
  --color-gray-dark: #b6bbc4;
  --color-page: #121417;
  --color-surface: #1b1e23;
  --color-text: #f4f5f7;
  --color-text-muted: #b6bbc4;
  --color-border: #363b43;
  --color-button: #f4f5f7;
  --color-button-text: #17191d;
  --color-disabled: #7d838d;
  --color-disabled-surface: #292d33;
}

html[data-theme="dark"] body {
  background: var(--color-page);
  color: var(--color-text);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

html[data-theme="dark"] option {
  background: var(--color-surface);
  color: var(--color-text);
}

html[data-theme="dark"] .header,
html[data-theme="dark"] .nav__dropdown,
html[data-theme="dark"] .cart-drawer,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .filter-sidebar,
html[data-theme="dark"] .account-form,
html[data-theme="dark"] .account-order,
html[data-theme="dark"] .admin-store-row {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

html[data-theme="dark"] button:disabled,
html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled {
  background-color: var(--color-disabled-surface);
  color: var(--color-disabled);
  border-color: var(--color-border);
}

.header__theme-toggle {
  width: 32px;
  height: 32px;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-gray);
  background: transparent;
  cursor: pointer;
}

.header__theme-toggle svg {
  width: 17px;
  height: 17px;
}

.header__theme-toggle--admin {
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .header__theme-toggle {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
  }
}

/* Compact home categories and search controls on phone-sized screens. */
@media (max-width: 768px) {
  .categories {
    padding-top: 0;
    padding-bottom: 36px;
  }

  .categories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }

  .category-card {
    min-width: 0;
  }

  .category-card__image {
    aspect-ratio: 1 / 0.82;
  }

  .category-card__title {
    min-height: 32px;
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .header__search {
    grid-template-columns: minmax(0, 1fr) 42px;
    column-gap: 6px;
  }

  .header__search-input,
  .header__search-btn {
    min-height: 38px;
    height: 38px;
  }

  .header__search-input {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 14px;
  }

  .header__search-btn {
    width: 42px;
    min-width: 42px;
  }

  .header__search-btn-icon {
    width: 19px;
    height: 19px;
  }
}

/* Dark theme visual polish: keep brand marks and product media readable. */
html[data-theme="dark"] .header__brand-link img {
  filter: grayscale(1) invert(1) contrast(1.12);
  mix-blend-mode: screen;
}

html[data-theme="dark"] .fav-store-filter {
  background: #20242a;
  color: var(--color-text);
  border: 1px solid #404752;
  box-shadow: inset 3px 0 0 var(--color-accent);
}

html[data-theme="dark"] .fav-store-filter__select {
  background: #181b20;
  color: var(--color-text);
  border-color: #4a525d;
}

html[data-theme="dark"] .fav-store-filter__label {
  color: var(--color-text-muted);
}

html[data-theme="dark"] .fav-store-filter__label input {
  accent-color: var(--color-accent);
}

html[data-theme="dark"] .motivation-banner__content {
  background: rgba(18, 20, 23, 0.9);
  color: var(--color-text);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .motivation-banner__eyebrow,
html[data-theme="dark"] .motivation-banner__subtitle {
  color: #d6dbe3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

html[data-theme="dark"] .motivation-banner__title {
  color: var(--color-text);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.85);
}

html[data-theme="dark"] .motivation-banner__stripes span {
  background: var(--color-text);
}

@media (max-width: 768px) {
  .header__search-input,
  .header__search-btn,
  .fav-store-filter,
  .fav-store-filter__select,
  .products__select,
  .products__price-input,
  .sidebar-block--filter,
  .filter-btn,
  .store-picker__select,
  .product-page__reserve,
  .product-page__add-to-cart,
  .product-page__favorite-square {
    border-radius: 6px;
  }
}

html[data-theme="dark"] .product-card__image {
  background: linear-gradient(135deg, #2d333b, #20242a);
}

html[data-theme="dark"] .product-page__main-image {
  background: #262b32;
}

/* Product detail text that previously used fixed dark colours. */
html[data-theme="dark"] .breadcrumbs,
html[data-theme="dark"] .product-page__sku,
html[data-theme="dark"] .product-page__subtitle,
html[data-theme="dark"] .stock-hint,
html[data-theme="dark"] .store-contact,
html[data-theme="dark"] .size-grid__meta,
html[data-theme="dark"] .specs-list dt,
html[data-theme="dark"] .similar-models__sub {
  color: var(--color-text-muted);
}

html[data-theme="dark"] .product-page__description p,
html[data-theme="dark"] .product-page__bullets li {
  color: #d9dde3;
}

html[data-theme="dark"] .product-page__legal {
  color: #aeb4bf;
}

html[data-theme="dark"] .product-page__block-title,
html[data-theme="dark"] .specs-list dd,
html[data-theme="dark"] .store-picker__label,
html[data-theme="dark"] .size-grid__label,
html[data-theme="dark"] .similar-models__label,
html[data-theme="dark"] .similar-models__name,
html[data-theme="dark"] .similar-models__price {
  color: var(--color-text);
}

html[data-theme="dark"] .similar-models__card:hover {
  border-color: var(--color-text-muted);
}

html[data-theme="dark"] .size-grid__item--disabled {
  background: #20242a;
  color: #939aa5;
  border-color: #3b414a;
}

html[data-theme="dark"] .size-grid__item--disabled .size-grid__meta {
  color: #858c96;
}

/* SPORTMIX catalog price filters 2026-08-17 */
.products__price-range {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.products__price-range label {
  display: grid;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.products__price-input {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--color-black);
  background: var(--color-white);
  color: var(--color-black);
  font: inherit;
  font-weight: 800;
}

.products__price-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

html[data-theme="dark"] .products__price-input {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

/* Catalog shoe-size filter uses the same UK/RU/cm table as product.html. */
.products__filter--sizes .filter-btn--size {
  display: grid;
  place-content: center;
  gap: 2px;
  min-height: 76px;
  white-space: normal;
  line-height: 1.1;
}

.catalog-size-filter__uk {
  font-size: 13px;
  font-weight: 800;
}

.catalog-size-filter__ru,
.catalog-size-filter__cm {
  font-size: 11px;
  font-weight: 600;
}

.catalog-size-filter__single {
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 768px) {
  .products__size-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .products__filter--sizes .filter-btn--size {
    min-height: 72px;
  }
}

/* Mobile header and filter contrast polish. Kept last to override legacy mobile rules. */
/* Size facets use two independent columns only when both product groups occur. */
#products-size-filter { grid-template-columns: minmax(0, 1fr); }
.catalog-size-filter__columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.catalog-size-filter__columns--mixed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-size-filter__column { min-width: 0; }
.catalog-size-filter__heading { margin: 0 0 8px; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.catalog-size-filter__columns .products__size-group-grid { padding: 0; }
#products-size-filter .catalog-size-filter__columns--mixed .products__size-group-grid { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 768px) {
  .header__brand-link {
    background: transparent;
    border: 0;
    box-shadow: none;
    isolation: auto;
  }

  .header__brand-link img {
    background: transparent;
    filter: grayscale(1) contrast(1.2);
    mix-blend-mode: multiply;
  }

  html[data-theme="dark"] .header__brand-link img {
    background: transparent;
    filter: grayscale(1) invert(1) contrast(1.15);
    mix-blend-mode: screen;
  }

  .sidebar-block--filter {
    overflow: hidden;
    border: 1px solid #d7d9dd;
    border-radius: 7px;
    background: #fff;
    color: #17191d;
  }

  .sidebar-block--filter > summary.sidebar-block__title,
  .sidebar-block--filter > summary.sidebar-block__title::after,
  .products__size-group-title,
  .products__size-group-title::after,
  .products__price-range label {
    color: inherit;
  }

  .sidebar-block--filter > summary.sidebar-block__title {
    background: transparent;
  }

  .fav-store-filter,
  .fav-store-filter__select,
  .products__select,
  .products__price-input,
  .products__size-group,
  .filter-btn,
  .sidebar-block--filter button {
    border-radius: 7px;
  }

  html[data-theme="dark"] .sidebar-block--filter {
    background: #20242a;
    color: #f1f3f6;
    border-color: #3d434c;
  }

  html[data-theme="dark"] .sidebar-block--filter > summary.sidebar-block__title,
  html[data-theme="dark"] .sidebar-block--filter > summary.sidebar-block__title::after,
  html[data-theme="dark"] .products__size-group-title,
  html[data-theme="dark"] .products__size-group-title::after,
  html[data-theme="dark"] .products__price-range label {
    color: #f1f3f6;
  }

  html[data-theme="dark"] .sidebar-block--filter .filter-btn {
    background: #181b20;
    color: #e7eaf0;
    border-color: #454c56;
  }

  html[data-theme="dark"] .sidebar-block--filter .filter-btn--active {
    background: #f1f3f6;
    color: #17191d;
    border-color: #f1f3f6;
  }

  html[data-theme="dark"] .sidebar-block--filter .filter-btn:disabled,
  html[data-theme="dark"] .sidebar-block--filter .filter-btn--unavailable {
    background: #292d33;
    color: #9299a4;
    border-color: #3b4149;
  }

  html[data-theme="dark"] .fav-store-filter {
    background: #20242a;
    color: #f1f3f6;
    border: 1px solid #3d434c;
    box-shadow: none;
    outline: none;
  }

  html[data-theme="dark"] .fav-store-filter__label {
    color: #c3c8d0;
  }

  html[data-theme="dark"] .fav-store-filter__label input {
    accent-color: #f1f3f6;
  }
}

@media (max-width: 768px) {
  #products-size-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-rows: auto;
    align-items: start;
    align-content: start;
    gap: 8px;
    height: auto;
  }
  #products-size-filter > .filter-btn--all,
  #products-size-filter > .products__size-group-grid,
  #products-size-filter > .products__size-group {
    grid-column: 1 / -1;
  }
  #products-size-filter .products__size-group-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  #products-size-filter .filter-btn {
    width: 100%;
    min-width: 0;
    height: auto;
    align-self: start;
  }
  #products-size-filter .filter-btn--all {
    min-height: 40px;
  }
  .product-page__actions {
    grid-template-columns: minmax(0, 1fr) 52px;
  }
  .product-page__actions .product-page__reserve {
    grid-column: 1 / -1;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }
}
@media (min-width: 410px) and (max-width: 768px) {
  #products-size-filter .products__size-group-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Temporary cart switch. The cart implementation remains intact in JS/API. */
html.sportmix-cart-disabled #cart-btn,
html.sportmix-cart-disabled .header__icon-btn[title="Корзина"],
html.sportmix-cart-disabled #cart-count,
html.sportmix-cart-disabled #cart-drawer,
html.sportmix-cart-disabled #add-to-cart,
html.sportmix-cart-disabled [data-add-to-cart],
html.sportmix-cart-disabled a[href="cart.html"] {
  display: none !important;
}

html.sportmix-cart-disabled .product-page__reserve {
  flex: 1 1 auto;
}

.products__favorites-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: -14px 0 28px;
}

.products__favorites-links a {
  color: var(--color-text, var(--color-black));
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-favorites-page="true"] .products__layout {
  display: block;
}

body[data-favorites-page="true"] .products__main {
  width: 100%;
}

.products__empty-state {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  gap: 16px;
  padding: 32px 0;
}

.products__empty-state .products__empty {
  margin: 0;
}

.cart-page__unavailable {
  display: grid;
  gap: 22px;
  justify-items: start;
  padding: 32px 0;
}

.cart-page__unavailable > p {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.cart-page__unavailable-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.account-page--user {
  max-width: 820px;
}

.account-orders {
  scroll-margin-top: 24px;
}

.account-order {
  padding: 18px 0;
}

.account-order__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.account-order__title {
  margin: 0;
  font-size: 15px;
}

.account-order__status {
  flex-shrink: 0;
  padding: 5px 8px;
  border: 1px solid var(--color-border, var(--color-gray));
  color: var(--color-text-muted, var(--color-gray-dark));
  font-size: 11px;
  font-weight: 700;
}

.account-order__fact {
  margin: 5px 0;
  color: var(--color-text-muted, var(--color-gray-dark));
  line-height: 1.45;
}

.account-order__fact strong {
  color: var(--color-text, var(--color-black));
}

.account-order__items {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.account-order__item {
  padding: 10px 12px;
  border-left: 2px solid var(--color-border, var(--color-gray));
  background: var(--color-surface, #f7f7f7);
}

.account-orders__empty--error {
  color: var(--color-accent);
}

@media (max-width: 768px) {
  html.sportmix-cart-disabled .product-page__actions {
    grid-template-columns: minmax(0, 1fr) 52px;
  }

  html.sportmix-cart-disabled .product-page__actions .product-page__reserve {
    grid-column: auto;
  }

  .products__favorites-links {
    margin-top: -8px;
    margin-bottom: 20px;
  }

  .account-order__header,
  .cart-page__unavailable-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .account-order__status {
    align-self: flex-start;
  }
}

/* Use the original logo pixels as alpha masks; no blend-mode compositing. */
.header__brand-link {
  position: relative;
  background: transparent !important;
  border: 0;
  box-shadow: none;
}
.header__brand-link img,
html[data-theme="dark"] .header__brand-link img {
  opacity: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  filter: none;
  mix-blend-mode: normal;
}
.header__brand-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #111;
  -webkit-mask: var(--header-logo-mask) center / 100% 100% no-repeat;
  mask: var(--header-logo-mask) center / 100% 100% no-repeat;
}
html[data-theme="dark"] .header__brand-link::before {
  background-color: #f5f5f5;
}
.header__brand-link:first-child {
  --header-logo-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22160%22%20height%3D%2248%22%20viewBox%3D%220%200%20160%2048%22%3E%3Cfilter%20id%3D%22alpha%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%20-.2126%20-.7152%20-.0722%201%200%22%2F%3E%3C%2Ffilter%3E%3Cimage%20width%3D%22160%22%20height%3D%2248%22%20xlink%3Ahref%3D%22data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAKAAAAAwCAIAAAAZy%2BY5AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFcGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSfvu78nIGlkPSdXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQnPz4KPHg6eG1wbWV0YSB4bWxuczp4PSdhZG9iZTpuczptZXRhLyc%2BCjxyZGY6UkRGIHhtbG5zOnJkZj0naHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyc%2BCgogPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9JycKICB4bWxuczpBdHRyaWI9J2h0dHA6Ly9ucy5hdHRyaWJ1dGlvbi5jb20vYWRzLzEuMC8nPgogIDxBdHRyaWI6QWRzPgogICA8cmRmOlNlcT4KICAgIDxyZGY6bGkgcmRmOnBhcnNlVHlwZT0nUmVzb3VyY2UnPgogICAgIDxBdHRyaWI6Q3JlYXRlZD4yMDI2LTA2LTI0PC9BdHRyaWI6Q3JlYXRlZD4KICAgICA8QXR0cmliOkRhdGE%2BeyZxdW90O2RvYyZxdW90OzomcXVvdDtEQUhOWm5uYjlaRSZxdW90OywmcXVvdDt1c2VyJnF1b3Q7OiZxdW90O1VBRy1Bcl9nVDd3JnF1b3Q7LCZxdW90O2JyYW5kJnF1b3Q7OiZxdW90O0JBRy1BdWdWenN3JnF1b3Q7fTwvQXR0cmliOkRhdGE%2BCiAgICAgPEF0dHJpYjpFeHRJZD45OWYzODI0NS05ZTFjLTQ0ZWUtOTlmZS04Yzg0MjU0OTRhNDY8L0F0dHJpYjpFeHRJZD4KICAgICA8QXR0cmliOkZiSWQ%2BNTI1MjY1OTE0MTc5NTgwPC9BdHRyaWI6RmJJZD4KICAgICA8QXR0cmliOlRvdWNoVHlwZT4yPC9BdHRyaWI6VG91Y2hUeXBlPgogICAgPC9yZGY6bGk%2BCiAgIDwvcmRmOlNlcT4KICA8L0F0dHJpYjpBZHM%2BCiA8L3JkZjpEZXNjcmlwdGlvbj4KCiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0nJwogIHhtbG5zOmRjPSdodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyc%2BCiAgPGRjOnRpdGxlPgogICA8cmRmOkFsdD4KICAgIDxyZGY6bGkgeG1sOmxhbmc9J3gtZGVmYXVsdCc%2B0JTQuNC30LDQudC9INCx0LXQtyDQvdCw0LfQstCw0L3QuNGPIC0gMTwvcmRmOmxpPgogICA8L3JkZjpBbHQ%2BCiAgPC9kYzp0aXRsZT4KIDwvcmRmOkRlc2NyaXB0aW9uPgoKIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PScnCiAgeG1sbnM6cGRmPSdodHRwOi8vbnMuYWRvYmUuY29tL3BkZi8xLjMvJz4KICA8cGRmOkF1dGhvcj7QnNCw0LrQsNGAINCk0ZHQtNC%2B0YDQvtCyPC9wZGY6QXV0aG9yPgogPC9yZGY6RGVzY3JpcHRpb24%2BCgogPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9JycKICB4bWxuczp4bXA9J2h0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8nPgogIDx4bXA6Q3JlYXRvclRvb2w%2BQ2FudmEgKFJlbmRlcmVyKSBkb2M9REFITlpubmI5WkUgdXNlcj1VQUctQXJfZ1Q3dyBicmFuZD1CQUctQXVnVnpzdzwveG1wOkNyZWF0b3JUb29sPgogPC9yZGY6RGVzY3JpcHRpb24%2BCjwvcmRmOlJERj4KPC94OnhtcG1ldGE%2BCjw%2FeHBhY2tldCBlbmQ9J3InPz4%2BbeYwAAAATmVYSWZNTQAqAAAACAAEARoABQAAAAEAAAA%2BARsABQAAAAEAAABGASgAAwAAAAEAAgAAAhMAAwAAAAEAAQAAAAAAAAAAAGAAAAABAAAAYAAAAAF3Bd%2FnAAAIqklEQVR4nO1bbUgUWxieo26pqKsSUoliIBWSpgWireZnBYb9WLSCQMRsYUnS3cpK8yM3l6VcJb82TdJftQlplm6Q5LKaipFpfqBYmpXrB2G2uJq7szvn%2FhiQYbzXWwevs7Pe5%2Bdh3nfeM88877znPWcAhBDb8oAQmkwmjUZTXl5eW1vr6uoKAGA6qI2BDdMBMAwIIUEQw8PDZ86ciY%2BPf%2F78eV5eHtNBbSTAllUwOfG5ubmKigq5XL6yskKOODs7azSawMBA6xDxFiUYQriyslJbWyuXyz9%2F%2Fkx7CHw%2BX6lUcjgcpsLbQGw5gsnPbVdXV0ZGxsDAAEEQa6%2BxsbFRqVTHjx%2B3AhFvIYLJmQ4ODkql0sbGRqPRuM7Ffn5%2BXV1dLi4ubOd4qxRZBEEsLCxcv349PDy8vr5%2BfXYxDBsdHVUoFJsT23%2BKLaHgpaWlR48eyWSytZ%2FbdbBr167u7m5vb29Wi9jKCYYQTk9P8%2Fn83t5es9n8R7YAAIFAoFAoWE2wladoAIC7u7uLi8ufsothGISwpqamo6OD1RqwcgVjGAYhfPv2LY%2FHQ%2BAYw7CjR4%2B%2BfPnS0dFxwwPbHFi5gjEMAwAEBwcLhUK0TNvZ2dnQ0MBeGVi%2FgjEMgxBqtdrQ0NCpqSkEcx8fn%2F7%2BfpYumaxfwRiGAQA8PT1FIpGNDcp8v3z5IpFIWKqELaFgEouLi2FhYQMDAwi2bm5ubW1tBw8eZJ2IrVbBEELau%2Bvk5FRcXGxnZ4fgbWFhQSqVopVpzMIKCSapnZqaqq6uNhgMq%2BMAgIiIiISEBDS3z549e%2F36NesSnrURDCFcWloqLy8PCgpKS0tra2ujUmJra5uVleXq6orgGcfxjIyMpaUldnFsPQRDCI1GY2NjY0RERHp6%2Bvz8vMlkEovFer1%2BlRIAwIEDB86fP492i7Gxsaqqqo0LeTNgJUWW2WweGRkRi8UajYa6kQAAKCgoyMrKWq2fIYR6vT4wMHBiYgLhRrt37%2B7p6fH09GRLtcVuBZOf269fv169ejUkJKS1tZW2TQQhrKiomJiYoIrYyclJIpGgVVszMzNSqXQDQt8ssFjBZE4uKysrLi6enZ1dZyICgeD%2B%2FftUzS0vL8fFxbW3tyNMn8PhqNXqI0eOsELErCSYpLa1tTU3N7e%2Fv%2F9fp8DhcNra2ng83iolEMI3b97Exsb%2B68bwWgAAIiMjm5ubWdGgZlmKJnPyhw8f%2BHx%2BQkJCX1%2Ff77ygOI5fuXLl169fqyMAAB6Pl5qaihZDR0dHU1MTK7TBJgVDCBcXF2%2Ffvl1WVmYwGP4ocjs7u%2Brq6uTkZKqIv337FhoaOj09jRCMr69vb2%2Bvs7OzhSdqlinYYDAolcrVI66%2FD5PJVFhYuLCwQK22vLy8xGIxWoN6fHxcIpEgGG4y2EQwAGDHjh2ZmZm2trYI5uPj4zKZjDYoEAj27t2L4A1C%2BODBg%2BHhYQtPgWwiGMMwAEBSUlJAQACauUKhoH62ySVTSUkJ2pJJp9NZfoOaZQRjGObs7CyTydBErNfrJRIJjuOrIwCA2NhYPp%2BPFkx9fT3aWmvTwD6CAQDHjh07ffo0WnWjUqnUajWtQX3jxg0ul4vgzWw2i0QivV6PYLs5YB%2FBJHJyctzd3REMjUajSCSiLZkCAgJSUlLQ3pihoaGamhqLFTFrCKY%2BQQDA%2Fv37BQIBGiWjo6P37t2jOczNzfXx8UHwRhBEcXGxVqu1TI5ZQDD5h%2Bf4%2BDjtCWZmZnp5eaE5LCsrm5ycpFZbXC731q1baEsmrVZbVFSEYLgJsGiCSWr7%2B%2FsTExNDQkJGRkZolMjlcrQCeHZ29s6dO9QRAACfzw8PD0eLs7KysqenxwJFbLkEEwTx%2Ffv3ixcvRkVFNTQ0zM%2FPy2Qy6s%2BAAICTJ09GRUUhOIcQPnz4kEaJo6OjRCJBS%2Fs4jmdnZ6%2BsrCDY%2FqewRIIhhDqdrqam5tChQ1VVVTqdjhxXKpWdnZ1USuzt7XNychwcHBDuYjQa1zaow8LCUlNT0Thub29%2F8eKFpYnYsggm9xJaWlpiYmKEQiGtcsFxPD09fXl5mZqoeTxeUlISGiU9PT319fU0SrKzs3fu3IngzWQy3bx509LO9FgKweTndmhoKCEh4dSpU729vX%2F7a%2FbAwEBdXR11BACQn5%2BPTElhYeHPnz%2Bpb4y3t%2FelS5fQqq1Pnz5JpdL%2FCaaDIIjZ2VmxWBwREdHY2LjOAyIIoqioaGZmhkqJh4fHtWvXkBvUa6stoVC4b98%2BBG8QwurqamoxyDgYJpg8IVVXVxcUFFRaWkrd7fknTE5OlpSUUC%2BzsbFJSUnx8%2FNDC6C0tJS2Z%2BDi4oJcn8%2FPz1tUg5pJggmCaG5ujo2NvXDhwtzc3O%2B%2F9eXl5e%2Ffv6de7%2BTkhNygXl5eLigoWNugjo%2BPR%2FCGYdjTp08t56dTJjf8P3786O%2FvTz2b%2Fpsg29FNTU329vargwRBnDt3TqlUIkTC4XBUKlVMTAz1OEBfX190dPRqDf9H4fn7%2B3d3dzs4ODB%2BHIBJBfv6%2Bp49exbBEEKoVqtVKhWt3ZidnY3WoMZx%2FPLly7T6PCgoCK0%2BhxCSDWqESDYcDH%2BD8%2FLyPDw8EAxxHM%2FKyqIe3AEA%2BPn5Ie8ZDA4OVlZW0gYlEglaN5QgCLlcvv5Zz82BbX5%2BPlP3BgC4uroaDAaNRoPwIH78%2BAEAiIqKojJ6%2BPDhJ0%2BeIORVDMNGRkb4fD6XyyUdAgC2b9%2Fu5ubW0tLyt2u29aHT6cxm84kTJ5jN0gwrGACQlpa2Z88etEyoUCjGxsaoInZ3d7979y7aM9VqtXK5nBZeYmJicHAwmsOKiop3794xK2Lm18FcLreoqAitACYb1NQ1Cdmgjo6ORvBGHrOiUUI2qNHCI3tbCFXkBoJ5gklK4uLiEGwhhI8fP6btGTg4OOTm5m7btg3BocFgEIlEtJ9OIyMjk5OT0cJTq9WvXr1CsN0o%2FAXX%2FdLxb0wPHgAAAABJRU5ErkJggg%3D%3D%22%20filter%3D%22url(%23alpha)%22%2F%3E%3C%2Fsvg%3E");
}
.header__brand-link:last-child {
  --header-logo-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2272%22%20height%3D%2248%22%20viewBox%3D%220%200%2072%2048%22%3E%3Cfilter%20id%3D%22alpha%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%20-.2126%20-.7152%20-.0722%201%200%22%2F%3E%3C%2Ffilter%3E%3Cimage%20width%3D%2272%22%20height%3D%2248%22%20xlink%3Ahref%3D%22data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAEgAAAAwCAYAAACynDzrAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAXYaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49J%2B%2B7vycgaWQ9J1c1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCc%2FPg0KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyI%2BDQoJPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4NCgkJPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6QXR0cmliPSJodHRwOi8vbnMuYXR0cmlidXRpb24uY29tL2Fkcy8xLjAvIj4NCgkJCTxBdHRyaWI6QWRzPg0KCQkJCTxyZGY6U2VxPg0KCQkJCQk8cmRmOmxpIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4NCgkJCQkJCTxBdHRyaWI6Q3JlYXRlZD4yMDI2LTA2LTI0PC9BdHRyaWI6Q3JlYXRlZD4NCgkJCQkJCTxBdHRyaWI6RGF0YT57ImRvYyI6IkRBSE5abm5iOVpFIiwidXNlciI6IlVBRy1Bcl9nVDd3IiwiYnJhbmQiOiJCQUctQXVnVnpzdyJ9PC9BdHRyaWI6RGF0YT4NCgkJCQkJCTxBdHRyaWI6RXh0SWQ%2BMGY2OGNkZDEtY2Y5Ni00YzA0LTg1ZWYtMDIzZDU3MjFiNDk3PC9BdHRyaWI6RXh0SWQ%2BDQoJCQkJCQk8QXR0cmliOkZiSWQ%2BNTI1MjY1OTE0MTc5NTgwPC9BdHRyaWI6RmJJZD4NCgkJCQkJCTxBdHRyaWI6VG91Y2hUeXBlPjI8L0F0dHJpYjpUb3VjaFR5cGU%2BDQoJCQkJCTwvcmRmOmxpPg0KCQkJCTwvcmRmOlNlcT4NCgkJCTwvQXR0cmliOkFkcz4NCgkJPC9yZGY6RGVzY3JpcHRpb24%2BDQoJCTxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI%2BDQoJCQk8ZGM6dGl0bGU%2BDQoJCQkJPHJkZjpBbHQ%2BDQoJCQkJCTxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI%2B0JTQuNC30LDQudC9INCx0LXQtyDQvdCw0LfQstCw0L3QuNGPIC0gMTwvcmRmOmxpPg0KCQkJCTwvcmRmOkFsdD4NCgkJCTwvZGM6dGl0bGU%2BDQoJCTwvcmRmOkRlc2NyaXB0aW9uPg0KCQk8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczpwZGY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGRmLzEuMy8iPg0KCQkJPHBkZjpBdXRob3I%2B0JzQsNC60LDRgCDQpNGR0LTQvtGA0L7QsjwvcGRmOkF1dGhvcj4NCgkJPC9yZGY6RGVzY3JpcHRpb24%2BDQoJCTxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI%2BDQoJCQk8eG1wOkNyZWF0b3JUb29sPkNhbnZhIChSZW5kZXJlcikgZG9jPURBSE5abm5iOVpFIHVzZXI9VUFHLUFyX2dUN3cgYnJhbmQ9QkFHLUF1Z1Z6c3c8L3htcDpDcmVhdG9yVG9vbD4NCgkJPC9yZGY6RGVzY3JpcHRpb24%2BDQoJCTxyZGY6RGVzY3JpcHRpb24geG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPjx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24%2BPC9yZGY6RGVzY3JpcHRpb24%2BPC9yZGY6UkRGPg0KPC94OnhtcG1ldGE%2BDQo8P3hwYWNrZXQgZW5kPSd3Jz8%2B0O2iawAAAE5lWElmTU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAAITAAMAAAABAAEAAAAAAAAAAABgAAAAAQAAAGAAAAABdwXf5wAACIRJREFUaEPlm1tIFO8fxr%2FvrK7ruplmiZhQXch2ER4oK8JOENIJLwKN6CKjJAyyA2UnhJDACEqDyptNFCOhQOkAhSUW4glXEis1TEyyMI087qq7zvv8bnbmv86o7bibVv8HHpD3PJ95z7MyAKAFFgCy2%2B107tw52rp1K6WkpJAgCMpkCyP8ARJFERcvXoSfnx9MJhOePXsGzrky2YJowQGJogiLxQJ%2Ff38QEYgIy5cvx%2Fv37%2F8ISAsKiHOOlpYWhISEyHCICIwxJCUlwWazLTikBQU0MjKCpKSkKXDcIeXn5%2F%2F%2FAuKco7i4GH5%2Bfio4khcvXoyOjo4FhbQggDjnGBkZQXR0tAqK0ocPH8bk5KSyiHnTgq2lFouFPn36pAxWqby8nN69e0cLtRuZd0AAaHR0lG7duuXRQw8NDVFhYSFxzpVR86J5B0RE9OTJE%2Fry5YsyeFoBoIcPH9LPnz89AuprzTsgp9NJpaWlJIqiMmpG9fX10ePHj5XB86J5BQSAuru7qa6uThk1qwBQYWGhMnheJJCrAZxzcq1qv60rA6DXr1%2FTwMCAMuqXslqt1NHR8VvbJnGQWJAEqLKykq5fv04PHjwgq9VKAwMDU4D5Ui9evJhTmZOTk%2FTq1StlsFeSnk8URerp6aE3b97QvXv3KCcnh3p6euREuHz5MhhjYIwhKCgIUVFRSE5OhsViwY8fP8A593qzxjmH3W5HRESEaq%2FjiRljSElJ8bodcJ3%2FRFFEW1sbcnJysGnTJixbtgwBAQFgjEGn06GmpgZwEcSFCxembRBjDMHBwUhPT0dDQwPGx8fn3EDOOaxWKxhjqro8tdlsxsDAgLJojyS95MHBQZSVlWHHjh3Q6XTys7rXIwgCqqurAQnQlStXVI1xN2MMgYGBSE5ORlVVFZxOp2ZQnHPcvn1b1RgtDgkJwYcPH%2BZU9%2FDwMCwWC%2BLj4yEIwqzt0Ol0aGhoACRA%2Bfn5s2Zwt9FoxP79%2B9HV1QVRFJVtmVGiKOLQoUMe1zOdGWN4%2BvSpx%2FVyziGKIl6%2BfIl169bNeu5zt5%2BfH1pbWwEJUGlpqaaGM8awdOlSFBYWwm63e%2FRGRVHE%2BvXrNdWjNGMMN2%2Fe9AgQ5xy9vb3IyMiATqfTVK%2B%2Fvz96e3sBCVBtba3HdN0tCAJSU1PR1dU1KyTOOcbHxxEZGakqQ4sZYzh58uQv6xJFEZWVlYiJidEERnJ4eDgcDgcgAeru7vZqdTGbzWhsbJzxzXLO8f37d5hMJlV%2Brd63b9%2Bsp3uHw4H8%2FHwsWrRIldcTM9dlnSQCgLGxMWzcuFGVWItNJhMePXoEp9Pp3l7ABai9vR1Go1GVT6u3b9%2BOiYkJZRXgnMNms%2BHMmTPy6jRX5%2BbmyuWSVPjZs2fn1B3dbTKZUFBQoHrD3LXEBwYGqvJoMWMMGzZswNjYmKr8wcFBHDx40OtnEAQBjY2N8jCWAVVWVkKv16syaLXBYMDdu3enDDfOOerq6mAwGFTptZgxhtjYWNjt9v%2FRATA8PIyUlBQIgqDKo9Vmsxmjo6Ny2TIgm82GlStXqjLMxTqdDkVFRXJP4pyjpqYGAQEBqrRazBhDTEyMDIhzjrGxMRw5csTrniOVf%2Fr06Skvl6Q%2FOOe4dOmSKtNcHRoaioqKCnDXDrahocEnPWjt2rUyIKfTifPnz%2FsEDrn2eNXV1fLwUgHq7u72yUQqecWKFfKGsqWlxSdlJyYmykeeoqIir3ulZMYYEhMTVcNXBgTXZi4tLU3eintrQRCwZcsWjI6Ooru7GyaTSZVGq%2Ffs2QOHw4Hm5maEh4er4udqnU6H4uLiKb0HABjc7h4AUFtbG92%2Ff5%2Fcgr0SY4z2799PZrOZrl27RhMTE8okmhQXF0epqalUXl5OVqvVZ%2B3U6%2FWUlZVFRqORGGNy%2BBRA5ILkq0olSRX6olzGGDHGfks7p%2FvBhAqQJJvNpune%2BG%2BWwWAgvV6vDCaaCRAAunPnDlksFmXUP6fAwEAqKCig2NjYKUNL1pQZySXOOYaGhhAfH6%2BazP4lC4KAzMzMaY9HkqbtQeTqRS0tLZSRkUF2u10Z%2FU9o1apVVFJSQkFBQdP3npmGmKTfMRH%2BaZIm%2FZk0KyB3eZjsr9FsUNzlESAA9Pz5c6qqqlJG%2FXVijNHRo0cpOjraM0iKOWlacdeF1969e31yYl4oGwwG5ObmzjopK%2BURILjduRw%2FfhzMR4fD%2BXRISAhKSko0f5HxaIhJkibt3t7ev24TaTQaKTQ0dNrd8mzSBEiSe5Y5ZNck6VgxV005V3ky5yg0J0CSAFBTUxP19PRoqpwxRmFhYRQWFkYfP35URssCQAkJCdTS0kIOh0MZPatEUaSEhASKiorS1DaVlGNOizjn%2BPr1K9LS0mA0Gj2%2BJhEEAWvWrEFjYyNCQ0NV8VKauLg4WK1WTdckgiAgMjISN27cmPZyX6u8AgQXpMnJSVRVVWHXrl3Q6%2FVgHkziwcHBGB4eRlZW1rQrY2BgIKqrq1FRUTFtvNKMMYSEhODEiRPo7OyEKIqaJuOZ5DUgSdz1643Kykrs3Lnzl18z%2Ff398fnzZ%2FT398NsNk9JyxjDqVOn4HA4UFxcPGM5Uq8JDg5GZmYm2tvbNa9Sv5LPAEniri%2BbTU1NSE9PR1RU1JR%2FM3AH9PbtW4iiiJqaGgQFBclx8fHx6O%2FvhyiKyMvLUwFirh9TxMTE4OrVq%2Fj27ZvPeoxSPgckibsu6%2Fv6%2BlBWVoZjx44hJiYGRqMRjDH4%2B%2Fujvr5eBpqXlwe9Xo%2FQ0FDU1tbK4bm5ufKHwCVLlmDz5s3Izs5GdXW1%2FK8KvwOMJK9WMU8kFQ%2BARkZGqK%2Bvj1pbW6mzs5MOHDhAERERxBij8fFxys7Opm3bttHu3bvl5b2%2Bvp6am5tp9erVFB0dTWFhYRQQECCvTF6tUB7oP%2FR%2BZPbyaTZLAAAAAElFTkSuQmCC%22%20filter%3D%22url(%23alpha)%22%2F%3E%3C%2Fsvg%3E");
}