/* ============================================
   NOCONCEPT - NEW DESIGN SYSTEM
   Изолированная архитектура для постепенной миграции

   ВАЖНО: Все новые стили применяются только к элементам
   с классом .new-design для безопасного деплоя на production
   ============================================ */

/* ============================================
   ШРИФТЫ: единая точка объявления
   main-new.css грузится на всех страницах через AppAsset, поэтому @font-face
   живут здесь, а не в незагружаемом base/typography.css и не в inline-<style>
   отдельных вьюх — раньше из-за этого текст падал на системный sans-serif
   там, где inline-дубля не было (например /order — layouts/order.php).
   ============================================ */

/* Базовый шрифт редизайна: HelveticaNeueLT — на него ссылается --font-primary
   (весь основной текст .new-design). В main.css те же файлы объявлены под
   легаси-именем 'NNC', под новым именем @font-face не было вообще. */
@font-face {
  font-family: 'HelveticaNeueLT';
  src: url('/app/media/fonts/HelveticaNeueLT-Roman.woff2') format('woff2'),
       url('/app/media/fonts/HelveticaNeueLT-Roman.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HelveticaNeueLT';
  src: url('/app/media/fonts/HelveticaNeueLT-Bold.woff2') format('woff2'),
       url('/app/media/fonts/HelveticaNeueLT-Bold.woff') format('woff');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* Шрифт нового дизайна: TT Hoves Pro Trl Cnd (Medium 500) — на него ссылается
   --font-secondary (шапка, корзина, футер, окно авторизации). Раньше @font-face
   жил в незагружаемом base/typography.css → текст падал на системный sans-serif.
   Файлы лежат под именем TT-Hoves-Pro-Condensed-Medium.* (не Trl-Cnd) — ссылка
   на несуществующий TT-Hoves-Pro-Trl-Cnd-Medium.woff2 давала 404. */
@font-face {
  font-family: 'TT Hoves Pro Trl Cnd';
  src: url('/app/media/fonts/TT-Hoves-Pro-Condensed-Medium.woff2') format('woff2'),
       url('/app/media/fonts/TT-Hoves-Pro-Condensed-Medium.woff') format('woff'),
       url('/app/media/fonts/TT-Hoves-Pro-Condensed-Medium.otf') format('opentype'),
       url('/app/media/fonts/TT-Hoves-Pro-Condensed-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Жирное начертание того же семейства — так его объявляла главная (mainpage.php),
   без него font-weight:700 давал синтетический болд поверх Medium. */
@font-face {
  font-family: 'TT Hoves Pro Trl Cnd';
  src: url('/app/media/fonts/TT-Hoves-Pro-Condensed-ExtraBold.otf') format('opentype'),
       url('/app/media/fonts/TT-Hoves-Pro-Condensed-ExtraBold.ttf') format('truetype');
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

/* Шрифт цены: TT Hoves Pro Condensed ExtraBold — на него ссылается --font-price.
   Файлы есть в /app/media/fonts/ (otf/ttf, отдаются 200), но @font-face не был
   объявлен → цена падала на системный sans-serif. */
@font-face {
  font-family: 'TT Hoves Pro Condensed';
  src: url('/app/media/fonts/TT-Hoves-Pro-Condensed-ExtraBold.otf') format('opentype'),
       url('/app/media/fonts/TT-Hoves-Pro-Condensed-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Monospace Font - Elma Mono */
@font-face {
    font-family: 'Elma Mono';
    src: url('/app/media/fonts/Elma Mono-Regular-Desktop.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Elma Mono';
    src: url('/app/media/fonts/Elma Mono-Extrabold-Desktop.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html {
  font-size: 10px; /* база: 1rem = 10px */
}

@media screen and (min-width: 320px) and (max-width: 375px) {
  html {
    font-size: calc(8.5px + 1.5 * (100vw - 320px) / 55);
  }
}

/* Мобайл 375-767: up-scale 10px -> 20.45px */
@media screen and (max-width: 767px) {
  html {
    font-size: calc(10px + 10.45 * (100vw - 375px) / 392);
  }
}

/* Планшет/десктоп ≥768: флюид БЕЗ капа — 1rem растёт пропорционально ширине
   экрана (как на главной, monochrome.ru-подход): 768→5.33px, 1440→10px, и дальше
   продолжает расти (2560→17.78px). Так вся вёрстка (всё в rem/токенах) масштабируется
   целиком на любых экранах, а не фиксируется на 10px после 1440. */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  html {
    font-size: calc(5.33333333px + 4.66666667 * (100vw - 768px) / 600);
  }
}

@media screen and (min-width: 1025px) {
    html {
        font-size: calc(5.33333333px + 4.66666667 * (100vw - 768px) / 672);
    }
}

/* ============================================
   DESIGN TOKENS (CSS Custom Properties)
   Определяются в scope .new-design
   ============================================ */
.new-design {
  /* Colors */
  --color-primary: #000000;
  --color-bg: #ffffff;
  --color-bg-beige: #f6f2f0; /* Background/beige из Figma — фон медиа/карточек товара */
  --color-button: #e7e0dd; /* Button из Figma — фон основных кнопок (CTA) */
  --color-muted: rgba(0, 0, 0, 0.35);
  --color-border: rgba(0, 0, 0, 0.1);

  /* black scale (black/100…5) — единая шкала прозрачностей чёрного */
  --black-100: #000;
  --black-50: rgba(0, 0, 0, 0.5);
  --black-35: rgba(0, 0, 0, 0.35);
  --black-15: rgba(0, 0, 0, 0.15);
  --black-5: rgba(0, 0, 0, 0.05);

  /* Success/Error states */
  --color-success-bg: #d4edda;
  --color-success-text: #155724;
  --color-error-bg: #f8d7da;
  --color-error-text: #721c24;

  /* Typography - Adaptive sizing with clamp() */
  /* Базовый шрифт всего редизайна. В макете (Figma NOCONCEPT-WEB) вся типографика —
     переменные Body 2 / Body 3 = TT Hoves Pro Trl Cnd Medium 500; Helvetica в дизайн-системе
     нет вообще. Раньше здесь стоял 'HelveticaNeueLT' — старый шрифт сайта (в легаси main.css
     он же 'NNC'), из-за чего всё, что не переопределяло шрифт явно, рисовалось не по макету. */
  --font-primary: 'TT Hoves Pro Trl Cnd', sans-serif;
  --font-secondary: 'TT Hoves Pro Trl Cnd', sans-serif;
  --font-price: 'TT Hoves Pro Condensed', 'TT Hoves Pro Trl Cnd', sans-serif;
  --font-mono: 'Elma Mono', 'Courier New', monospace;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 800; /* Figma Price = ExtraBold 800; файла с 900 нет, 900 просто откатывалось на 800 */

  /* Typography: Fixed sizes (base 10px) */
  --font-size-xs: 1.1rem; /* 11px - Body 1 (11/10) */
  --font-size-sm: 1.2rem; /* 12px - Body 2 (12/10) */
  --font-size-md: 1.6rem; /* 16px (16/10) */
  --font-size-lg: 1.8rem; /* 18px (18/10) */
  --font-size-xl: 2.4rem; /* 24px (24/10) */
  --font-size-xxl: 3.2rem; /* 32px (32/10) */

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.1em;

  /* Spacing: Fixed sizes (base 10px) */
  --spacing-xs: 0.8rem; /* 8px */
  --spacing-sm: 1.2rem; /* 12px */
  --spacing-md: 1.4rem; /* 14px */
  --spacing-lg: 1.6rem; /* 16px */
  --spacing-xl: 2.4rem; /* 24px */
  --spacing-xxl: 4rem; /* 32px */

  /* Layout */
  --container-max-width: 144rem;
  --container-padding: 1.6rem; /* 16px (base 10px) */

  --header-height: 5rem; /* 50px */
  --footer-height: auto;

  /* Borders */
  --border-width-thin: 1px;
  --border-width-normal: 2px;
  --border-width-thick: 4px;

  --border-radius-sm: 0.4rem;
  --border-radius-md: 0.8rem;
  --border-radius-lg: 1.6rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* Z-index layers */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-tooltip: 2000;

  /* Form elements (base 10px) */
  --input-height-sm: 2rem; /* 20px */
  --input-height-md: 3.8rem; /* 38px - из дизайна */
  --input-height-lg: 4rem; /* 40px */
}

/* ============================================
   SCOPED RESET
   Reset стили только для элементов внутри .new-design
   ============================================ */
.new-design *,
.new-design *::before,
.new-design *::after {
  box-sizing: border-box;
}

.new-design h1,
.new-design h2,
.new-design h3,
.new-design h4,
.new-design h5,
.new-design h6,
.new-design p,
.new-design ul,
.new-design ol {
  margin: 0;
  padding: 0;
}

.new-design ul,
.new-design ol {
  list-style: none;
}

.new-design a {
  text-decoration: none;
  color: inherit;
}

.new-design img {
  max-width: 100%;
  height: auto;
  display: block;
}

.new-design button,
.new-design input,
.new-design textarea,
.new-design select {
  font-family: inherit;
  font-size: inherit;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

.new-design {
  /* Базовый font-size: 10px (как в старом дизайне)
     1rem = 10px
     11px = 1.1rem, 12px = 1.2rem и т.д.
     Наследуем флюидный корень (html): 1rem = 10px на 1440, 17.78px на 2560.
     Хардкод 10px здесь ломал бы масштабирование на больших экранах. */
  font-size: 1rem;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   LAYOUT: PAGE CONTENT
   ============================================ */
.page__content {
  flex: auto;
  position: relative;
}

/* ============================================
   LAYOUT: HEADER
   ============================================ */
.new-design .header-new {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-sticky);
  /* desktop: прозрачный wrapper, белый бар внутри */
  padding: 1.2rem 1rem 0; /* 12px сверху, 10px по бокам */
  transition: transform 300ms ease;
}

.new-design .header-new .container {
  max-width: 73.2rem; /* 732px (Figma 2949-66584, хедер по центру 1440) */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 0.6rem; /* Figma: 12px вертикаль / 6px горизонталь */
  position: relative;
  background: var(--color-bg);
  transition: box-shadow var(--transition-normal);
}

.new-design .header-new--scrolled .container {
  box-shadow: 0 4px 10px rgba(100, 100, 100, 0.07);
}

.new-design .header-new__nav {
  display: flex;
  align-items: center;
  /* Паддинг контейнера 0.6rem (6px) + паддинг пункта 1rem (10px) → «NEW» на 16px
     (Figma: left-фрейм x6 + таб padding 10). Отдельный сдвиг больше не нужен. */
}

.new-design .header-new__nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;
  padding: 1rem;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
  border-radius: 0.2rem;
  transition: background-color var(--transition-fast);
}

/* Ховер и выделение — таб-бокс как у корзины (серый фон, скругление 2px) */
.new-design .header-new__nav-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
/* Раздел текущей страницы (is-active) подсвечен, только пока не открыт ни один
   попап: активной должна быть ровно одна вкладка, и попап приоритетнее страницы. */
body:not(.is-overlay-open):not(.is-catalog-open) .new-design .header-new__nav-item.is-active {
  background-color: rgba(0, 0, 0, 0.05);
}
.is-overlay-open .new-design .header-new__action--account.is-active {
    background: unset;
}
/* КАТАЛОГ подсвечен, пока открыто каталог-меню (как корзина при открытой корзине) */
body.is-catalog-open .header-new__nav-item.js-catalog-toggle {
  background-color: rgba(0, 0, 0, 0.05);
}

.new-design .header-new__logo {
  position: absolute;
  left: 50%; /* Figma: логотип строго по центру (x366 = 732/2) */
  transform: translateX(-50%);
}

.new-design .header-new__logo-full {
  height: 1.1rem; /* 11px */
  width: auto;
}

.new-design .header-new__logo-compact {
  width: 3.6rem; /* 36px */
  height: 3.6rem;
}

.new-design .header-new__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.new-design .header-new__action {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  transition: opacity var(--transition-fast);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  /* Бургер — <button>: гасим дефолтную рамку/фон iOS Safari, иначе вокруг
     иконки (и крестика) рисуется прямоугольник. */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* Ховер/выделение иконок-действий — таб-бокс в desktop-медиа ниже */

.new-design .header-new__icon {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.new-design .header-new__action--search .header-new__icon {
  -webkit-mask-image: url('/app/media/img/minified-svg/icon-search.svg');
  mask-image: url('/app/media/img/minified-svg/icon-search.svg');
}

.new-design .header-new__action--account .header-new__icon {
  -webkit-mask-image: url('/app/media/img/minified-svg/icon-cabinet.svg');
  mask-image: url('/app/media/img/minified-svg/icon-cabinet.svg');
}

.new-design .header-new__action--fav .header-new__icon {
  -webkit-mask-image: url('/app/media/img/minified-svg/icon-favorite.svg');
  mask-image: url('/app/media/img/minified-svg/icon-favorite.svg');
}

.new-design .header-new__action--cart .header-new__icon {
  -webkit-mask-image: url('/app/media/img/minified-svg/icon-cart.svg');
  mask-image: url('/app/media/img/minified-svg/icon-cart.svg');
}

/* Иконки-действия — ховер и выделение тем же таб-боксом, что у пунктов меню и у
   корзины, rounded 2px, высота 24px).
   Паддинг + РАВНЫЙ отрицательный margin: margin-box не меняется, поэтому иконки и
   счётчики не сдвигаются (правый край остаётся на 16px), а фон-«бокс» рисуется
   поверх. Только desktop — на мобильном иконки растянуты во flex. */
@media (min-width: 65em) {
  /* Figma: actions вплотную (gap 0), каждый таб — сам ховер-бокс с паддингом
     pl-8 pr-10 py-10; правый край cart = padding контейнера 6 + pr-10 = 16px. */
  .new-design .header-new__actions {
    gap: 0;
  }
  .new-design .header-new__action {
    /* Вертикальный паддинг 4px: таб выходит 24px, как в макете (иконка 16 + 4×2),
       и плашка шапки становится 48 (12 + 24 + 12), а не 60. Горизонтальные
       отступы прежние — правый край корзины остаётся на 16px от края. */
    padding: 0.4rem 1rem 0.4rem 0.8rem;
    margin: 0;
    border-radius: 0.2rem;
    transition: background-color var(--transition-fast);
  }
  /* Ховер + вкладка открытого попапа */
  .new-design .header-new__action:hover,
  .new-design .header-new__action.is-active,
  body.is-cart-open .header-new__action--cart,
  body.is-favorites-open .header-new__action--fav,
  body.is-auth-open .header-new__action--account,
  body.is-search-open .header-new__action--search  {
    background-color: rgba(0, 0, 0, 0.05);
    opacity: 1;
  }
  /* Иконка текущей страницы (аккаунт/избранное) — только пока не открыт попап:
     иначе подсвечены две вкладки разом (страница + попап). */
  body:not(.is-overlay-open):not(.is-catalog-open) .new-design .header-new__action.is-active {
    background-color: rgba(0, 0, 0, 0.05);
    opacity: 1;
  }
  /* Иконка текущей страницы (аккаунт/избранное) — только пока не открыт попап:
     иначе подсвечены две вкладки разом (страница + попап). */
  body:not(.is-overlay-open):not(.is-catalog-open) .new-design .header-new__action.is-active {
    background-color: rgba(0, 0, 0, 0.05);
    opacity: 1;
  }
}

.new-design .header-new__action-label {
  display: flex;
  align-items: center;
  height: 1.6rem;
  padding: 0 0.4rem;
}

.new-design .header-new__action-count {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.6rem;
  width: 1.4rem;
}

.new-design .header-new__action-count--muted {
  color: var(--color-muted);
}

.new-design .header-new__gap {
  height: 10rem; /* 100px = 60px header height + 40px gap */
}

/* ============================================
   LAYOUT: FILTER BAR
   ============================================ */
.new-design .filter-bar {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
}

@media (min-width: 65em) {
  /* Снимаем стек-контексты бара и .container (z-index:1 и общий z-index:2),
     иначе fixed-кнопки заперты под шапкой (z 200) и она перехватывает клики. */
  .new-design .filter-bar--docked,
  .new-design .filter-bar--docked .container {
    z-index: auto;
  }
  .new-design .filter-bar--docked .filter-bar__btn--filter,
  .new-design .filter-bar--docked .sort-dropdown {
    position: fixed;
    top: 1.2rem;    /* верх белого бокса шапки */
    height: 5.2rem; /* высота бокса → вертикальный центр совпадает с меню */
    z-index: 210;
  }
  .new-design .filter-bar--docked .filter-bar__btn--filter { left: 1.2rem; }
  .new-design .filter-bar--docked .sort-dropdown { right: 1.2rem; }
  .new-design .filter-bar--docked .filter-bar__categories,
  .new-design .filter-bar--docked .filter-bar__result {
    display: none;
  }
}

.new-design .filter-bar--fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-sticky);
  background: var(--color-bg);
}

/* Открыт фильтр или любой оверлей — закреплённые кнопки не должны лежать поверх */
.is-filters .new-design .filter-bar--fixed,
.is-overlay-open .new-design .filter-bar--fixed,
.is-filters .new-design .filter-bar__btn--filter,
.is-filters .new-design .sort-dropdown,
.is-overlay-open .new-design .filter-bar__btn--filter,
.is-overlay-open .new-design .sort-dropdown {
  display: none;
}

.new-design .filter-bar .container {
  position: relative; /* якорь для абсолютно позиционированных категорий */
  max-width: 100%; /* Fluid — растягивается на всю ширину */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 1.2rem; /* 16px vertical, 12px horizontal */
}

.new-design .filter-bar__btn {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-muted); /* текст серый rgba(0,0,0,0.35) */
  padding: 0;
  transition: opacity var(--transition-fast);
}

/* Обёртка текста: отступ от иконки + выравнивание */
.new-design .filter-bar__btn > span {
  display: flex;
  align-items: center;
  height: 1.6rem;
  padding: 0 0.4rem;
}

.new-design .filter-bar__btn:hover {
  opacity: 0.6;
}

.new-design .filter-bar__icon {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  background-color: #000; /* иконки чёрные, не currentColor */
  -webkit-mask-image: url('/app/media/img/minified-svg/icon-filters.svg');
  mask-image: url('/app/media/img/minified-svg/icon-filters.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.new-design .filter-bar__icon--sort {
  -webkit-mask-image: url('/app/media/img/minified-svg/icon-sort.svg');
  mask-image: url('/app/media/img/minified-svg/icon-sort.svg');
}

/* === Выпадающий список сортировки (СОРТИРОВКА в filter-bar) === */
.new-design .sort-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.new-design .sort-dropdown__menu {
  position: absolute;
  top: calc(100% + 1.2rem);
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 20rem;
  display: flex;
  flex-direction: column;
  padding: 0.8rem 0;
  background: var(--color-bg);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.new-design .sort-dropdown__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.8rem 1.6rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--color-muted);
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.new-design .sort-dropdown__option:hover {
  opacity: 0.6;
}

.new-design .sort-dropdown__option--active {
  color: var(--color-primary);
}

/* Mobile: кнопки закреплены снизу — меню открываем вверх, чтобы не уходило за экран */
@media (max-width: 63.99em) {
  .new-design .sort-dropdown__menu {
    top: auto;
    bottom: calc(100% + 1.2rem);
  }
}

/* категории позиционированы абсолютно,
   центрированы по viewport независимо от ширины filter/sort, width 800px */
.new-design .filter-bar__categories {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80rem; /* 800px */
  display: flex;
  gap: 1.2rem; /* 12px между пунктами */
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.new-design .filter-bar__category {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.new-design .filter-bar__category::after {
  content: ',';
}

.new-design .filter-bar__category:last-child::after {
  content: '';
}

.new-design .filter-bar__category:hover {
  opacity: 0.6;
}

.new-design .filter-bar__category.active {
  font-weight: var(--font-weight-bold);
}

/* Центр фильтр-бара на странице поиска: «РЕЗУЛЬТАТ ПОИСКА <запрос>».
   Позиционируется как категории — absolute по центру на desktop (между Фильтр/Сортировка). */
.new-design .filter-bar__result {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  justify-content: center;
  max-width: 60rem;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.new-design .filter-bar__result-label {
  color: var(--color-muted);
}
.new-design .filter-bar__result-query {
  color: var(--color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 47.99em) {
  .new-design .filter-bar__result {
    position: static;
    transform: none;
    max-width: 100%;
    min-width: 0;
  }
}

/* Пустой результат поиска */
.new-design .search-empty,
.new-design .catalog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: 8rem 1.6rem;
  text-align: center;
  font-family: var(--font-secondary);
}
.new-design .search-empty__title,
.new-design .catalog-empty .search-empty__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}
.new-design .search-empty__link,
.new-design .catalog-empty .search-empty__link {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: underline;
}

/* ============================================
   LAYOUT: MOBILE CATEGORIES
   ============================================ */
.new-design .mobile-categories .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0;
  padding: 1.2rem;
}

.new-design .mobile-categories__item {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.new-design .mobile-categories__item::after {
  content: ',\00a0';
}

.new-design .mobile-categories__item:last-child::after {
  content: '';
}

.new-design .mobile-categories__item:hover {
  opacity: 0.6;
}

/* ============================================
   LAYOUT: FOOTER
   ============================================ */
.new-design .footer-new {
  background: var(--color-bg);
  padding: var(--spacing-xxl) var(--container-padding);
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-medium);
}

.new-design .footer-new .container {
  max-width: 73.2rem; /* как у шапки (732px) — футер выравнивается по меню, а не во всю ширину */
  margin: 0 auto;
  padding: 0 1.6rem; /* как отступ .container шапки — левый край текста совпадает с меню */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* контент по левому краю (как меню), а не по центру вьюпорта */
  gap: 5rem; /* 80px - gap между основным контентом и bottom section */
}

/* Обертка для верхних секций (newsletter, social, columns) */
.new-design .footer-new__content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* 40px - gap между секциями */
  max-width: 69.8rem; /* Из дизайна */
  width: 100%;
}

/* Newsletter Section — flex-col, gap 24px */
.new-design .footer-new__newsletter {
  display: flex;
  flex-direction: column;
  gap: 2.4rem; /* 24px - gap из дизайна */
  text-align: left;
  max-width: 27.9rem; /* 279px - из дизайна */
}

.new-design .footer-new__newsletter-text {
  font-size: var(--font-size-sm); /* 12px - Body 2 */
  line-height: 1.1; /* Из дизайна */
  letter-spacing: 0.05em; /* 5% = 0.6px при 12px */
  color: var(--color-primary);
}

.new-design .footer-new__newsletter-form {
  width: 100%;
}

.new-design .footer-new__newsletter-input-wrapper {
  display: flex;
  align-items: flex-end;
  height: 3.9rem; /* 39px - из дизайна */
}

.new-design .footer-new__newsletter-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-primary);
  outline: none;
  padding: 0 0 1rem 0; /* 10px gap между текстом и линией */
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--color-primary);
}

.new-design .footer-new__newsletter-input::placeholder {
  color: var(--color-muted);
}

.new-design .footer-new__newsletter-message {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  border-radius: var(--border-radius-sm);
}

.new-design .footer-new__newsletter-message.success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.new-design .footer-new__newsletter-message.error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

/* Social Section */
.new-design .footer-new__social {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16px - gap из дизайна */
}

.new-design .footer-new__social-title {
  font-size: var(--font-size-xs); /* 11px */
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.new-design .footer-new__social-links {
  display: flex;
  gap: 0.75rem; /* 12px - gap между ссылками из дизайна */
  align-items: center;
  flex-wrap: wrap;
}

.new-design .footer-new__social-link {
  font-size: var(--font-size-xs); /* 11px */
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity var(--transition-normal);
}

.new-design .footer-new__social-link:hover {
  opacity: 0.6;
}

/* Columns Section - Вертикальная раскладка как в дизайне */
.new-design .footer-new__columns {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* 40px - из дизайна */
}

.new-design .footer-new__column-title {
  font-size: var(--font-size-xs); /* 11px */
  line-height: 1.2; /* Из дизайна */
  text-transform: uppercase;
  letter-spacing: 0.1em; /* 10% = 1.1px при 11px */
  margin-bottom: 1rem; /* 16px - gap из дизайна */
  color: var(--color-muted);
}

.new-design .footer-new__column-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px - gap между ссылками из дизайна */
}

.new-design .footer-new__column-link {
  font-size: var(--font-size-xs); /* 11px */
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity var(--transition-normal);
}

.new-design .footer-new__column-link:hover {
  opacity: 0.6;
}

/* Bottom Section */
.new-design .footer-new__bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16px - gap из дизайна */
  max-width: 69.8rem; /* Из дизайна */
  width: 100%;
}

.new-design .footer-new__logo {
  display: inline-flex;
  align-items: center;
}

/* Логотип-начертание (тот же SVG, что в шапке), высота из дизайна */
.new-design .footer-new__logo-img {
  height: 1.9rem; /* 19px - высота логотипа из дизайна */
  width: auto;
  display: block;
}

/* Mobile-first: вертикальная раскладка */
.new-design .footer-new__legal {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24px - мобильный gap из дизайна */
}

/* Обертка для ссылок "Политика" и "Оферта" */
.new-design .footer-new__legal-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px - мобильный gap из дизайна */
}

.new-design .footer-new__legal-link {
  font-size: var(--font-size-xs); /* 11px */
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  text-decoration: underline;
  transition: color var(--transition-normal);
}

.new-design .footer-new__legal-link:hover {
  color: var(--color-primary);
}

.new-design .footer-new__legal-credit {
  font-size: var(--font-size-xs); /* 11px */
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.new-design .footer-new__legal-credit-link {
  color: var(--color-primary);
  text-decoration: underline;
  transition: opacity var(--transition-normal);
}

.new-design .footer-new__legal-credit-link:hover {
  opacity: 0.6;
}

/* ============================================
   VUE.JS TRANSITIONS
   ============================================ */
.new-design .fade-enter-active,
.new-design .fade-leave-active {
  transition: opacity var(--transition-normal);
}

.new-design .fade-enter,
.new-design .fade-leave-to {
  opacity: 0;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Mobile + Tablet: до 1024px */
@media (max-width: 64em) {
  /* --- Mobile Header: full-width, 5 элементов --- */
  .new-design .header-new {
    padding: 0; /* без "плавания" на мобильном */
    background: var(--color-bg); /* full-width белый фон */
    transition: transform 300ms ease;
  }

  /* Скрытие хедера при скролле вниз (mobile) */
  .new-design .header-new--hidden {
    transform: translateY(-100%);
  }

  .new-design .header-new .container {
    max-width: 100%;
    min-height: 4rem; /* 40px */
    padding: 0 1rem; /* только горизонтальный */
    background: transparent; /* фон на родителе */
  }

  .new-design .header-new--scrolled .container {
    box-shadow: none; /* на мобильном тень на wrapper */
  }

  .new-design .header-new--scrolled {
    box-shadow: 0 4px 10px rgba(100, 100, 100, 0.07);
  }

  .new-design .header-new__gap {
    height: 8rem; /* 80px = 40px header height + 40px gap */
  }

  .new-design .header-new__logo {
    position: static;
    transform: none;
    order: 3;
    flex: 0 0 6.6rem; /* 36px */
    display: flex;
    justify-content: center;
  }

    .new-design .header-new__logo-compact {
        width: 5.6rem;
        height: 5.6rem;
    }

    .new-design .header-new__action {
        font-size: 2rem;
    }

  .new-design .header-new__actions {
    display: contents; /* элементы вливаются во flex контейнера */
  }

  .new-design .header-new__hamburger {
    order: 1;
    flex: 1 0 0;
  }

  .new-design .header-new__action--fav {
    order: 2;
    flex: 1 0 0;
  }

  .new-design .header-new__action--account {
    order: 4;
    flex: 1 0 0;
    justify-content: flex-end;
  }

  .new-design .header-new__action--cart {
    order: 5;
    flex: 1 0 0;
    justify-content: flex-end;
  }

  /* Иконки шапки на мобиле — 24px. */
  .new-design .header-new__icon {
    width: 4.4rem;
    height: 4.4rem;
  }

  /* Бургер каталога — иконка-маска (как остальные действия), а не CSS-палочки. */
  .new-design .header-new__hamburger .header-new__icon {
    -webkit-mask-image: url('/app/media/img/minified-svg/menu.svg');
    mask-image: url('/app/media/img/minified-svg/menu.svg');
  }

  /* Состояния «активная иконка → ✕», когда открыт её оверлей:
     ☰ каталог · ♡ избранное · 👤 авторизация · 🛒 корзина. Тап по ✕ закрывает оверлей.
     Специфичность с body выше базовой маски — крестик перебивает. */
  body.is-catalog-open .header-new__hamburger .header-new__icon,
  body.is-favorites-open .header-new__action--fav .header-new__icon,
  body.is-auth-open .header-new__action--account .header-new__icon,
  body.is-cart-open .header-new__action--cart .header-new__icon {
    -webkit-mask-image: url('/app/media/img/minified-svg/close.svg');
    mask-image: url('/app/media/img/minified-svg/close.svg');
    /* Крестик в макете компактнее иконки — ~14px по центру 24px-зоны, а не во всю. */
    -webkit-mask-size: 1.4rem;
    mask-size: 1.4rem;
  }
  /* В ✕-состоянии счётчик прячем — остаётся только крестик. */
  body.is-favorites-open .header-new__action--fav .header-new__action-count,
  body.is-cart-open .header-new__action--cart .header-new__action-count {
    display: none;
  }

  /* --- Mobile Filter Bar: два состояния --- */

  /* Плашка «Сортировка / Фильтр» закреплена снизу всегда, не по скроллу.
     Категории при этом остаются в потоке бара. Две половины дают сплошную
     белую полосу без отдельной подложки. */
  .new-design .sort-dropdown,
  .new-design .filter-bar__btn--filter {
    position: fixed;
    bottom: 0;
    width: 50%;
    height: 6rem;
    z-index: var(--z-sticky);
    background: var(--color-bg);
  }

  .new-design .sort-dropdown {
    left: 0;
    display: flex;
    justify-content: flex-end;
    padding-right: 0.6rem;
  }

  .new-design .filter-bar__btn--filter {
    right: 0;
    display: flex;
    justify-content: flex-start;
    padding-left: 0.6rem;
  }

  .new-design .filter-bar__btn {
    display: flex;
  }

  /* Скролл больше не переносит бар вниз — кнопки и так закреплены */
  .new-design .filter-bar--fixed {
    position: relative;
    bottom: auto;
  }

  .new-design .filter-bar--fixed .filter-bar__categories,
  .new-design .filter-bar--fixed .filter-bar__mobile-categories {
    display: flex;
  }

  .new-design .filter-bar {
    position: relative;
    z-index: 1;
    background: var(--color-bg);
  }

  .new-design .filter-bar .container {
    padding: 1.6rem 1.2rem; /* 16px vertical, 12px horizontal */
  }

  /* Категории: сброс desktop-абсолюта, flex-wrap по центру */
  .new-design .filter-bar__categories {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 0.8rem 1.2rem; /* 8px vertical, 12px horizontal */
    white-space: nowrap;
  }

  /* Mobile categories (initial state) — текстовые категории через запятую */
  .new-design .filter-bar__mobile-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem 1.2rem; /* 8px vertical, 12px horizontal */
    min-height: 3.4rem; /* ~2 строки по ~17px */
  }

  .new-design .filter-bar__mobile-category {
    font-family: var(--font-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-primary);
    white-space: nowrap;
    transition: opacity var(--transition-fast);
  }

  .new-design .filter-bar__mobile-category::after {
    content: ',';
  }

  .new-design .filter-bar__mobile-category:last-child::after {
    content: '';
  }

  .new-design .filter-bar__mobile-category:hover {
    opacity: 0.6;
  }

  /* Scrolled state: fixed bottom с кнопками */
  .new-design .filter-bar--fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-sticky);
    background: var(--color-bg);
  }

  .new-design .filter-bar--fixed .filter-bar__categories {
    display: none; /* скрываем категории в fixed-режиме */
  }

  .new-design .filter-bar--fixed .filter-bar__mobile-categories {
    display: none; /* legacy-класс — тоже скрыт */
  }

  .new-design .filter-bar--fixed .filter-bar__btn {
    display: flex; /* показываем кнопки в fixed режиме */
  }

  .new-design .filter-bar--fixed .container {
    justify-content: center;
    gap: 1.2rem; /* 12px */
    height: 6rem; /* 60px — по комменту дизайнера */
    padding: 0 1.2rem;
  }

  /* Порядок: СОРТИРОВКА первая, ФИЛЬТР вторая */
  .new-design .filter-bar--fixed .filter-bar__btn--sort {
    order: 1;
  }

  .new-design .filter-bar--fixed .filter-bar__btn--filter {
    order: 2;
  }

  /* Отступ внизу страницы для fixed filter bar */
  .page {
    padding-bottom: 6rem;
  }

  .new-design .footer-new {
    padding: var(--spacing-xxl) 1.2rem 1.2rem; /* 12px horizontal и bottom */
  }
}

/* Tablets and desktops (48em = 768px) */
@media (min-width: 48em) {
  .new-design .footer-new__content,
  .new-design .footer-new__bottom {
    margin: 0; /* по левому краю контейнера (выравнивание по меню), не по центру */
  }

  .new-design .footer-new__legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem; /* 12px */
  }

  .new-design .footer-new__legal-links {
    flex-direction: row;
    gap: 0.75rem; /* 12px */
  }


}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.new-design .header-new__nav-item:focus-visible,
.new-design .header-new__action:focus-visible,
.new-design .filter-bar__btn:focus-visible,
.new-design .filter-bar__category:focus-visible,
.new-design .footer-new__social-link:focus-visible,
.new-design .footer-new__column-link:focus-visible,
.new-design .footer-new__legal-link:focus-visible,
.new-design .footer-new__newsletter-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-contrast: high) {
  .new-design .footer-new__social-title,
  .new-design .footer-new__column-title,
  .new-design .footer-new__legal-link {
    color: var(--color-primary);
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .new-design .header-new .container,
  .new-design .footer-new__social-link,
  .new-design .footer-new__column-link,
  .new-design .footer-new__legal-link,
  .new-design .fade-enter-active,
  .new-design .fade-leave-active {
    transition: none;
  }
}

/* ============================================
   UTILITIES
   Вспомогательные классы для быстрой разметки
   ============================================ */

/* Spacing utilities */
.new-design .u-mt-xs { margin-top: var(--spacing-xs) !important; }
.new-design .u-mt-sm { margin-top: var(--spacing-sm) !important; }
.new-design .u-mt-md { margin-top: var(--spacing-md) !important; }
.new-design .u-mt-lg { margin-top: var(--spacing-lg) !important; }
.new-design .u-mt-xl { margin-top: var(--spacing-xl) !important; }

.new-design .u-mb-xs { margin-bottom: var(--spacing-xs) !important; }
.new-design .u-mb-sm { margin-bottom: var(--spacing-sm) !important; }
.new-design .u-mb-md { margin-bottom: var(--spacing-md) !important; }
.new-design .u-mb-lg { margin-bottom: var(--spacing-lg) !important; }
.new-design .u-mb-xl { margin-bottom: var(--spacing-xl) !important; }

.new-design .u-pt-xs { padding-top: var(--spacing-xs) !important; }
.new-design .u-pt-sm { padding-top: var(--spacing-sm) !important; }
.new-design .u-pt-md { padding-top: var(--spacing-md) !important; }
.new-design .u-pt-lg { padding-top: var(--spacing-lg) !important; }
.new-design .u-pt-xl { padding-top: var(--spacing-xl) !important; }

.new-design .u-pb-xs { padding-bottom: var(--spacing-xs) !important; }
.new-design .u-pb-sm { padding-bottom: var(--spacing-sm) !important; }
.new-design .u-pb-md { padding-bottom: var(--spacing-md) !important; }
.new-design .u-pb-lg { padding-bottom: var(--spacing-lg) !important; }
.new-design .u-pb-xl { padding-bottom: var(--spacing-xl) !important; }

/* Display utilities */
.new-design .u-hidden { display: none !important; }
.new-design .u-visible { display: block !important; }

/* Text utilities */
.new-design .u-text-center { text-align: center !important; }
.new-design .u-text-left { text-align: left !important; }
.new-design .u-text-right { text-align: right !important; }


/* Responsive utilities */
@media (max-width: 64em) {
  .new-design .u-hidden-mobile { display: none !important; }
}

@media (min-width: 65em) {
  .new-design .u-hidden-desktop { display: none !important; }
}

/* ============================================
   FILTERS MODAL
   ============================================ */

/* Body state */
.is-filters { overflow: hidden; height: 100%; }
.is-filters .page__bg {
  background: rgba(0, 0, 0, 0.2);
  pointer-events: all;
  opacity: 1;
}

/* Modal container */
.filters-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 190; /* под шапкой: в макете она видна над фильтром */
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow: hidden;
  font-size: 1rem;
}

.is-filters .filters-modal {
  transform: translateX(0);
}

.filters-modal__container {
  position: relative;
  display: flex;
  max-width: 144rem;
  margin: 0 auto;
  padding: 12rem 1.2rem 2.2rem;
  height: 100%;
}

/* Left column: applied filters */
.filters-modal__left {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 4rem;
}

@media (min-width: 65em) {
  /* Правую половину не сужаем: от неё считается центр колонки применённых */
  .filters-modal__left {
    padding-right: 0;
  }

  /* Первая секция начинается на 124, как в макете */
  .filters-modal__right > .filters-modal__section:first-child {
    margin-top: 0.4rem;
  }

  /* Длинный список категорий скроллится внутри колонки, а не тянет модалку */
  .filters-modal__right {
    /*overflow-y: auto;*/
    padding-bottom: 1.2rem;
  }

  /* Низ слайдера цены и низ кнопки сброса стоят на одной линии */
  .filters-modal__right > .filters-modal__section:last-child,
  .filters-modal__right .filters-modal__price {
    margin-bottom: 0;
  }

  /* Кнопка закрытия стоит в углу и не участвует в потоке колонки */
  .filters-modal__left .filters-modal__header {
    position: absolute;
    top: 12rem;
    left: 1.2rem;
    margin: 0;
  }
  /* Примененные фильтры и кнопка стоят колонкой по центру половины */
  .filters-modal__left .filters-modal__applied,
  .filters-modal__left .filters-modal__actions {
    width: 100%;
    max-width: 34.2rem;
    margin-left: auto;
    margin-right: auto;
  }

  /* Кнопка держится низа колонки, даже когда применённых фильтров нет */
  .filters-modal__left .filters-modal__actions {
    margin-top: auto;
  }
}

.filters-modal__header {
  margin-bottom: 3.2rem;
}

.filters-modal__close {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
}

.filters-modal__close svg {
  width: 1.6rem;
  height: 1.6rem;
}

.filters-modal__close:hover {
  opacity: 0.6;
}

/* Applied filters */
.filters-modal__applied {
  flex: 1;
}

.filters-modal__applied-title {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 4rem;
}

.filters-modal__applied-section {
  margin-bottom: 4rem;
}

.filters-modal__applied-label {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 2.4rem;
}

.filters-modal__applied-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.4rem;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 3.2rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 100px;
  padding: 0 1.2rem;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}

.filter-tag__remove {
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.filter-tag__remove:hover {
  opacity: 1;
}

/* Цветной квадрат внутри примененного тега */
.filter-tag__swatch {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

/* Action buttons */
.filters-modal__actions {
  display: flex;
  gap: 0.8rem;
  padding-top: 1.6rem;
  position: relative;
  z-index: 1;
}

.filters-modal__actions--mobile {
  display: none;
}

.filters-modal__btn {
  height: 4rem;
  padding: 0 2.4rem;
  border: none;
  border-radius: 0;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.filters-modal__btn:hover {
  opacity: 0.8;
}

.filters-modal__btn--apply {
  background: #000;
  color: #fff;
}

.filters-modal__btn--reset {
  background: rgba(0, 0, 0, 0.05);
  color: #000;
}

.filters-modal__left .filters-modal__actions .filters-modal__btn--reset {
  flex: 1;
  justify-content: center;
}

/* Right column: all filters */
.filters-modal__right {
  width: 50%;
  max-width: 44rem;
  margin-left: 0.8rem;
}

/* Filter sections */
.filters-modal__section {
  margin-bottom: 3.2rem;
}

.filters-modal__section-title {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.11rem;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 2.4rem;
}

/* Row layout for category + offers */
.filters-modal__row {
  display: flex;
  gap: 4rem;
}

.filters-modal__row > .filters-modal__section {
  flex: 0 0 20rem;
  width: 20rem;
}

/* У спецпредложений заголовок ближе к тегам, чем в остальных секциях */
.filters-modal__row > .filters-modal__section:nth-child(2) .filters-modal__section-title {
  margin-bottom: 1.4rem;
}

.filters-modal__row .filters-modal__section {
  flex: 1;
}

/* Sizes */
.filters-modal__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
}

.filter-size {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  white-space: nowrap;
  border: none;
  padding: 0;
  background: transparent;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-size:hover {
  opacity: 0.6;
}

/* Выбранный размер — подчёркиванием, как в макете */
.filter-size.active {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

/* Checkboxes */
.filters-modal__checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
}

.filter-checkbox__box {
  width: 1rem;
  height: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.filter-checkbox__box.active {
  background: #000;
  border-color: #000;
}

/* Названия категорий в макете обычным регистром, 12px */
.filter-checkbox__name {
  font-family: var(--font-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--color-primary);
}

/* Badges (offers) */
.filters-modal__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 0.4rem;
}

.filter-badge {
  display: inline-flex;
  align-items: center;
  height: 3.2rem;
  border: none;
  padding: 0 1.2rem;
  background: transparent;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-badge:hover {
  opacity: 0.6;
}

.filter-badge.active {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

/* Colors — свотчи в модалке фильтров */
.filters-modal__color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.filter-color-swatch {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}

.filter-color-swatch span {
  display: block;
  width: 100%;
  height: 100%;
}

.filter-color-swatch:hover {
    width: 3.2rem;
    height: 3.2rem;
  border-color: #000;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.filter-color-swatch.active {
  border-color: #000;
    width: 3.2rem;
    height: 3.2rem;
  /*border-width: 2px;*/
  /*padding: 2px;*/
    border: 1px solid rgba(0, 0, 0, 0.35);
}

.filter-color-swatch:hover span, .filter-color-swatch.active span {
    width: 3.1rem;
    height: 3.1rem;
}

/* Price */
.filters-modal__price {
  max-width: 33.8rem;
}

.filters-modal__price-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}

.filters-modal__price {
  position: relative;
  z-index: 0;
  margin-bottom: 2rem;
}

/* Селекторы с запасом специфичности — иначе побеждает базовый nouislider.css */
.filters-modal .filters-modal__price-slider {
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 0;
  border: 0;
  box-shadow: none;
}

.filters-modal .filters-modal__price-slider .noUi-base,
.filters-modal .filters-modal__price-slider .noUi-connects {
  height: 1px;
}

.filters-modal .filters-modal__price-slider .noUi-connect {
  background: #000;
  height: 1px;
}

/* Ручка — узкий штрих 4x8, как в макете */
.filters-modal .filters-modal__price-slider .noUi-handle {
  border-radius: 0;
  background: #000;
  box-shadow: none;
  width: 0.4rem;
  height: 0.8rem;
  border: 0;
  top: -0.35rem;
  right: -0.2rem;
  cursor: pointer;
}

.filters-modal .filters-modal__price-slider .noUi-handle:before,
.filters-modal .filters-modal__price-slider .noUi-handle:after {
  display: none;
}

/* ============================================
   FILTERS MODAL: MOBILE + TABLET (<1024px)
   ============================================ */
@media (max-width: 64em) {
  .filters-modal__container {
    flex-direction: column;
    padding: 1.2rem;
  }

  .filters-modal__left {
    width: 100%;
    padding-right: 0;
    order: -1; /* Примененные фильтры — сверху на мобилке */
  }

  .filters-modal__left .filters-modal__applied {
    display: block; /* Показываем примененные фильтры на мобилке */
  }

  .filters-modal__left .filters-modal__actions {
    display: none;
  }

  .filters-modal__right {
    width: 100%;
      overflow-y: auto;
  }

  .filters-modal__row {
    flex-direction: column;
    gap: 0;
  }

  .filter-color {
    width: 2.8rem;
    height: 2.8rem;
  }

  .filters-modal__actions--mobile {
    display: flex;
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 1.2rem 0;
    margin-top: 1.6rem;
  }

  .filters-modal__btn {
    flex: 1;
  }
}

/* ============================================
   PRODUCTS GRID (Homepage)
   Динамический паттерн: 3-3-4-4 (desktop), 2-2-1 (mobile)
   ============================================ */

.new-design .products-grid {
  background-color: #fff;
}

.new-design .products-grid__container {
  max-width: 100%; /* Fluid — сетка тянется до ширины экрана */
  margin: 0 auto;
  padding: 2.4rem 12px 0; /* 24 сверху, 12px по бокам — по комменту дизайнера */
  display: flex;
  flex-direction: column;
  gap: 8rem; /* 80px между рядами */
}

/* Каталог: по макету между фильтр-баром и первым рядом 12px
   (в Figma ряды лежат внутри product's с отступом 12). */
.new-design #shop-catalog .products-grid__container {
  padding-top: 1.2rem;
  /* Gap 160 до футера — пагинации в вёрстке нет, карточки догружаются скроллом */
  padding-bottom: 16rem;
}

/* Каталог desktop: карточки в ряду стыкуются вплотную,
   а между рядами остаётся вертикальный воздух — базовый gap контейнера (8rem). */
@media (min-width: 65em) {
  .new-design #shop-catalog .products-grid__row {
    gap: 0;
  }

  /* Пересчёт ширин под нулевой gap */
  .new-design #shop-catalog .products-grid__row--3 .products-grid__item {
    width: calc(100% / 3);
  }

  .new-design #shop-catalog .products-grid__row--4 .products-grid__item {
    width: 25%;
  }
}

/* Ряд карточек */
.new-design .products-grid__row {
  display: flex;
  width: 100%;
}

.new-design .products-grid__row--3 .products-grid__item {
  width: calc(100% / 3); /* учёт двух 18px-гапов */
}

.new-design .products-grid__row--4 .products-grid__item {
  width: calc(100% / 4); /* учёт трёх 18px-гапов */
}

/* Карточка товара */
.new-design .products-grid__item {
  position: relative;
  /* Пропускаем рендер off-screen карточек: меньше layout/paint при скролле и
     при свайпе слайдера внутри карточки. contain-intrinsic-size резервирует
     высоту, чтобы скролл не «прыгал» при первом отображении. */
  content-visibility: auto;
  contain-intrinsic-size: auto 60rem;
}

.new-design .products-grid__card {
  position: relative;
  height: 100%;
  /* Query-контейнер для action-bar: компактный вариант в узких карточках
     (4 колонки / «похожие») — см. @container ниже. inline-size не трогает высоту. */
  container-type: inline-size;
}

.new-design .products-grid__link {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}

/* Ссылка-overlay: покрывает всю карточку, z-index ниже кнопок */
.new-design .products-grid__link-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* Картинка и info: выше overlay, но пропускают клики к нему.
   Интерактивные дочерние элементы (стрелки, +, цвета, action-bar) внизу
   возвращают pointer-events: auto, чтобы получать клики. */
.new-design .products-grid__image {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.new-design .products-grid__info {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.new-design .products-grid__label {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* fav-inline внутри info — кликабелен */
.new-design .products-grid__fav-inline {
  pointer-events: auto;
}

/* Изображение товара */
.new-design .products-grid__image {
  position: relative;
  width: 100%;
  aspect-ratio: 351 / 488;
  overflow: hidden;
  background-color: var(--color-bg-beige);
}

.new-design .products-grid__image img,
.new-design .products-grid__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover-изображение */
.new-design .products-grid__image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.new-design .products-grid__image-hover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Фото меняется только стрелками слайдера, не при hover */

/* Лейблы (NEW, SOLD OUT, LIMITED, ПРЕДЗАКАЗ и др.) — Tag/Elma по макету */
.new-design .products-grid__label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  /* Выше .products-grid__image: тот идёт следом в разметке и с равным z-index
     перекрывал лейблы своим фоном — их не было видно вообще. */
  z-index: 3;
  padding: 0 0.2rem;
  font-family: var(--font-mono);
  font-size: 1rem; /* 10px */
  font-weight: 400;
  line-height: 1.3; /* 13px при 10px размере */
  letter-spacing: 0.05rem; /* 0.5px */
  text-transform: uppercase;
  color: var(--color-primary);
  font-feature-settings: 'ss07' on;
}

.new-design .products-grid__label--limited {
  top: 1rem;
}

/* Статус и скидка стоят на месте LIMITED, а при его наличии — строкой ниже.
   Раньше сдвиг снимался через :first-child, но первым в карточке идёт
   ссылка-оверлей, поэтому правило не срабатывало и лейбл всегда висел на 24px. */
.new-design .products-grid__label--status,
.new-design .products-grid__label--sale {
  top: 1rem;
}

.new-design .products-grid__label--limited ~ .products-grid__label--status,
.new-design .products-grid__label--limited ~ .products-grid__label--sale {
  top: 2.4rem;
}

/* Информация о товаре */
/* padding-right = 10px, чтобы сердечко ♥ (24×24 по правому краю) центрировалось
   по той же вертикальной оси, что "+" (24×24, right: 10px внутри image) */
.new-design .products-grid__info {
  padding: 1.2rem 0 1.2rem 1rem; /* инсет текста слева 10px (картинка full-bleed) */
}

.new-design .products-grid__name {
  font-family: var(--font-secondary);
  font-size: 1.1rem; /* 11px */
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.11rem; /* 1.1px */
  text-transform: uppercase;
  line-height: 1.6rem; /* h-16px */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Название карточки — ссылка (анкор для поисковика), выглядит как обычный текст.
   position/z-index — чтобы клик уходил на неё, а не на ссылку-оверлей карточки. */
.new-design .products-grid__name a,
.new-design .product-list-card-name,
.new-design .pdp__look-card-name {
  color: inherit;
  text-decoration: none;
  position: relative;
  z-index: 2;
}

.new-design .products-grid__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: var(--font-price);
  font-size: 1.2rem; /* 12px */
  font-weight: 800; /* ExtraBold */
  letter-spacing: 0.06rem; /* 0.6px */
  line-height: normal; /* line-height auto/normal */
  text-transform: uppercase; /* uppercase */
  margin-top: 0.4rem; /* имя→цена gap 4px */
  width: 98%;
}

/* Старая цена — зачёркнутая и приглушённая, как в универсальной карточке
   (.product-list-card-price-old): по макету она уходит на второй план. */
.new-design .products-grid__price-old {
  color: var(--color-muted);
  text-decoration: line-through;
  filter: blur(0.5px);
}

.new-design .products-grid__price-special {
  color: var(--color-primary);
}

/* Soldout состояние */
/* Sold-out (нет в наличии): фото приглушено до 30% (Figma 1682-25764), скрыты
   «+», цена и скидка-бейдж — добавить нельзя. Имя и ♥ (избранное) остаются. */
.new-design .products-grid__card.soldout .products-grid__image {
  opacity: 0.3;
}
.new-design .products-grid__card.soldout .products-grid__add-cart,
.new-design .products-grid__card.soldout .products-grid__colors,
.new-design .products-grid__card.soldout .products-grid__price span {
  display: none;
}

/* Loader для infinite scroll */
.new-design .products-grid__loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem 0;
  width: 100%;
}

.new-design .products-grid__spinner {
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   PRODUCTS GRID: MOBILE (<768px)
   Паттерн: 2-2-1, циклически
   ============================================ */
@media (max-width: 47.99em) {
  .new-design .products-grid__container {
    padding: 2.4rem 0 0; /* 24px сверху, без padding по бокам на мобиле */
    gap: 6rem; /* 60px между рядами */
  }

  /* На мобиле все ряды становятся flex-wrap, горизонтальный gap сброшен */
  .new-design .products-grid__row {
    flex-wrap: wrap;
    gap: 4rem 0; /* 40px вертикальный, 0 горизонтальный (ширины item 50%/100%) */
  }

  /* Мобильный паттерн: 2-2-1 */
  /* Для рядов по 3 — первые 2 карточки по 50%, третья 100% */
  .new-design .products-grid__row--3 .products-grid__item {
    width: 50%;
  }

  .new-design .products-grid__row--3 .products-grid__item:nth-child(3) {
    width: 100%;
  }

  /* Для рядов по 4 — первые 2 по 50%, следующие 2 по 50% (2+2) */
  .new-design .products-grid__row--4 .products-grid__item {
    width: 50%;
  }

  /* Мобильная информация: маленькие карточки — padding 8px, отступ сверху от картинки */
  .new-design .products-grid__info {
    padding: 1rem 0.8rem 0;
  }

  /* Большая карточка (100% ширины): padding 12px, отступ сверху от картинки */
  .new-design .products-grid__row--3 .products-grid__item:nth-child(3) .products-grid__info {
    padding: 1rem 1.2rem 0;
  }

  /* Gap между картинкой и info: 10px на мобиле */
  .new-design .products-grid__link {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* На мобильном элементы управления ВСЕГДА видны (нет hover) */
  /* !important — базовые стили opacity:0 идут ниже в файле и перезаписывают */
  /* Правый отступ совпадает с padding-right у .products-grid__info,
     чтобы "+" и сердечко были на одной вертикальной линии */
  .new-design .products-grid__counter {
    opacity: 1 !important;
    top: 0.4rem;
    right: 0.8rem;
  }

  .new-design .products-grid__add-cart {
    opacity: 1 !important;
    bottom: 0.4rem;
    right: 0.8rem;
  }

  .new-design .products-grid__fav-inline {
    display: block !important;
    opacity: 1 !important;
  }

  /* Стрелки, action bar — скрыты на мобильном */
  .new-design .products-grid__arrow {
    display: none !important;
  }

  .new-design .products-grid__action-bar {
    display: none !important;
  }


  /* Большие карточки (1 на всю ширину): offset совпадает с padding 12px у info */
  .new-design .products-grid__row--3 .products-grid__item:nth-child(3) .products-grid__counter {
    top: 1rem;
    right: 1.2rem;
  }

  .new-design .products-grid__row--3 .products-grid__item:nth-child(3) .products-grid__add-cart {
    bottom: 1rem;
    right: 1.2rem;
  }
}

/* ============================================
   PRODUCTS GRID: TABLET (768px - 1023px)
   ============================================ */
@media (min-width: 48em) and (max-width: 64em) {
  .new-design .products-grid__container {
    gap: 6rem;
    padding: 0 12px;
  }

  /* На планшете row--4 остаётся 4 в ряд */
  .new-design .products-grid__row--4 .products-grid__item {
    width: 25%;
  }
}

/* ============================================
   PRODUCT CARD: HOVER OVERLAY ELEMENTS (Desktop)
   Стрелки, счётчик фото, кнопка корзины, цвета, fav
   ============================================ */

/* --- Навигационные стрелки (< >) --- */
/* По дизайну: просто шевроны без фона, 16x16, по вертикальному центру */
.new-design .products-grid__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 0;
  color: #000;
  pointer-events: auto;
}

.new-design .products-grid__arrow--prev {
  left: 1rem;
}

.new-design .products-grid__arrow--next {
  right: 1rem;
}

/* --- Tab-индикатор (точки фото) --- */
/* По дизайну: сетка квадратов 4x4px, active=чёрный, rest=rgba(0,0,0,0.15) */
.new-design .products-grid__counter {
  position: absolute;
  top: 1rem;
  right: 1.4rem;
  z-index: 12;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.new-design .products-grid__counter-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  width: 1.6rem;
  justify-content: flex-end;
}

.new-design .products-grid__counter-dot {
  width: 0.4rem;
  height: 0.4rem;
  background: rgba(0, 0, 0, 0.15);
}

.new-design .products-grid__counter-dot--active {
  background: #000;
}

/* --- Кнопка добавления в корзину (+) --- */
/* По дизайну: 24x24, белый фон, без скругления, без тени */
.new-design .products-grid__add-cart {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 12;
  width: 2.4rem;
  height: 2.4rem;
  pointer-events: auto;
  background: #fff;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 0.4rem;
}

.new-design .products-grid__add-cart::after {
  content: '';
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  -webkit-mask-image: url(/app/media/img/minified-svg/open-botton-sheet.svg);
  mask-image: url(/app/media/img/minified-svg/open-botton-sheet.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* «+» — это ИКОНКА, а не кнопка. Состояния — цветом глифа:
     default — чёрный 100%; hover — чёрный 35% (fill-opacity .35); active(open) — минус. */
  background-color: #000;
  transition: background-color var(--transition-fast);
}

/* Hover — глиф бледнеет до 35% чёрного. Фон-чип не трогаем. */
.new-design .products-grid__add-cart:hover::after,
.new-design .products-grid__add-cart:focus-visible::after {
  background-color: rgba(0, 0, 0, 0.35);
}

/* Скрыто визуально, но доступно скринридерам и поисковику (H1 листинга,
   которого нет в макете). */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Цветовые варианты (swatches) --- */
/* По дизайну: квадраты сплошного цвета 18x18 внутри контейнера 24x24 */
.new-design .products-grid__colors {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: auto;
    height: 2.4rem;
}

.new-design .products-grid__color-swatch {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
    /*outline: 1px solid rgba(0, 0, 0, 0.2);*/
    outline-offset: -1px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease;
}

/* Квадрат цвета внутри swatch */
.new-design .products-grid__color-swatch span {
  display: block;
  width: 100%;
  height: 100%;
}

/* Для обратной совместимости (если используются img) */
.new-design .products-grid__color-swatch img {
  width: 1.8rem;
  height: 1.8rem;
  object-fit: cover;
  display: block;
}

.new-design .products-grid__color-swatch:hover,
.new-design .products-grid__color-swatch--active {
    width: 2.4rem;
    height: 2.4rem;
}

.new-design .products-grid__color-swatch--active {
  /*outline: 1px solid rgba(0, 0, 0, 0.35);*/
  cursor: default;
}

/* Счётчик скрытых цветов «+N»: бокс 24×24 как у свотча, подложка — только под
   контентом 18×18 (background-clip), чтобы совпадать с цветным квадратом рядом. */
.new-design .products-grid__color-more {
  /* px, а не rem: соседний .products-grid__color-swatch тоже в px, а root-размер
     флюидный — в rem счётчик выходил меньше свотчей. */
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.05);
  background-clip: content-box;
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-primary);
}

/* Свотчи цветов на мобилке: работают так же, как на десктопе (тап меняет фото
   карточки), но с поправкой на тач — hover'а нет, поэтому видны всегда, стоят
   у нижнего края фото на одной линии с «+», а зону тапа расширяет невидимый
   псевдоэлемент: сам квадрат остаётся мелким, как в макете. */
@media (max-width: 64em) {
  .new-design .products-grid__colors {
    opacity: 1 !important;
    bottom: 0.4rem;
    left: 0.8rem;
    /* Просвет между квадратами больше, чем на десктопе: расширенные зоны тапа
       соседних свотчей почти не перекрываются */
    gap: 0.8rem;
  }

  .new-design .products-grid__color-swatch {
    position: relative;
    /* базовый overflow: hidden обрезал бы псевдоэлемент зоны тапа */
    overflow: visible;
  }

  /* Без обрезки квадрат цвета (он на пару пикселей шире внутренней области)
     наползал на рамку и та читалась как тень. Ровно по внутренней области. */
  .new-design .products-grid__color-swatch span,
  .new-design .products-grid__color-swatch--active span {
    width: 100%;
    height: 100%;
  }

  .new-design .products-grid__color-swatch::after {
    content: '';
    position: absolute;
    inset: -0.6rem;
  }

  /* Подборки и коллаж «на модели» — карточки крупнее, отступ как у их лейблов */
  .new-design .product-list-card .products-grid__colors,
  .new-design .pdp__look-card .products-grid__colors {
    bottom: 1.2rem;
    left: 1.2rem;
  }
}

/* --- Иконка избранного рядом с ценой (при hover) — стиль как в хедере --- */
/* Контейнер 24×24, сама иконка 16×16 по центру — чтобы центр совпадал с "+" (24×24) */
.new-design .products-grid__fav-inline {
  display: none;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-left: auto;
  pointer-events: auto;
  position: relative;
  z-index: 12;
  -webkit-mask-image: url(/app/media/img/minified-svg/heart-outline.svg);
  mask-image: url(/app/media/img/minified-svg/heart-outline.svg);
  -webkit-mask-size: 1.6rem 1.6rem;
  mask-size: 1.6rem 1.6rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: #000;
}

.new-design .products-grid__fav-inline.in-fav {
  -webkit-mask-image: url(/app/media/img/minified-svg/heart-filled.svg);
  mask-image: url(/app/media/img/minified-svg/heart-filled.svg);
}

/* --- Product Action Bar (панель выбора цвета/размера) --- */
/* По дизайну: белая панель внизу картинки, появляется по клику на "+" */
.new-design .products-grid__action-bar {
  position: absolute;
  bottom: 0.9rem;
  left: 49.9%;
  transform: translateX(-50%);
  z-index: 20;
  width: calc(100% - 2rem);
  background: #fff;
  padding: 2.4rem;
  display: none;
  gap: 6rem;
  pointer-events: auto;
}

.new-design .products-grid__action-bar.is-open {
  display: flex;
}

/* Левая часть: цвет */
.new-design .products-grid__action-bar-colors {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  width: 11rem;
  flex-shrink: 0;
}

.new-design .products-grid__action-bar-label {
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-muted);
}

.new-design .products-grid__action-bar-value {
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #000;
  margin-top: 0.4rem;
}

.new-design .products-grid__action-bar-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
}

.new-design .products-grid__action-bar-swatch {
  width: 3rem;
  height: 3rem;
  /*padding: 0.3rem;*/
    /*outline: 1px solid rgba(0, 0, 0, 0.2);*/
    outline-offset: -1px;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.new-design .products-grid__action-bar-swatch span {
  display: block;
  width: 100%;
  height: 100%;
}

/* Светлый цвет обводим внутренней рамкой — белый иначе не читается */
.new-design .products-grid__action-bar-swatch span.is-light,
.new-design .mobile-cart-sheet__swatch span.is-light {
  box-shadow: inset 0 0 0 1px var(--black-15);
}

/* Текущий цвет (не выбран вручную) — рамка по границе квадрата цвета */


.new-design .products-grid__action-bar-swatch.active {
    /*outline: 1px solid rgba(0, 0, 0, 0.35);*/
}

.new-design .products-grid__action-bar-swatch.active,
.new-design .products-grid__action-bar-swatch:hover {
    width: 3.6rem;
    height: 3.6rem;
}

/* Правая часть: размер + корзина */
.new-design .products-grid__action-bar-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-height: 18rem;
}

.new-design .products-grid__action-bar-sizes-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.4rem;
}

.new-design .products-grid__action-bar-sizes-header > div {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.new-design .products-grid__action-bar-size-guide {
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 0.3rem; /* микро-отступ между текстом и подчёркиванием — по комменту */
}

.new-design .products-grid__action-bar-sizes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 2.4rem; /* гап «Размер»-хедер ↔ ряд размеров (Figma: 24px) */
}

/* Мало размеров (≤3) — прижаты влево с фикс. гэпом, а не растянуты во всю
   ширину (по макету, как в мобильном sheet). */
.new-design .products-grid__action-bar-sizes:has(> :nth-child(-n+3):last-child) {
  justify-content: flex-start;
  gap: 2.4rem;
}

.new-design .products-grid__action-bar-size {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #000;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.new-design .products-grid__action-bar-size.active {
  border: 1px solid rgba(0, 0, 0, 0.35);
}

/* Hover для доступных размеров — бордер как у активного */
.new-design .products-grid__action-bar-size:not(:disabled):not(.active):hover {
  border: 1px solid rgba(0, 0, 0, 0.35);
}

.new-design .products-grid__action-bar-size.size-error {
  color: #DB1D26;
}

.new-design .products-grid__action-bar-size:disabled {
  color: rgba(0, 0, 0, 0.35);
  cursor: not-allowed;
}

/* Единственный размер: метка слева, без рамки, выбрана по умолчанию.
   Ширина по тексту — иначе короткий размер («M») висит в центре широкого блока. */
.new-design .products-grid__action-bar-sizes--one-size {
  justify-content: flex-start;
}
.new-design .products-grid__action-bar-size--one-size {
  width: auto;
  min-width: 2.4rem;
  padding: 0;
  cursor: default;
}
.new-design .products-grid__action-bar-size--one-size.active {
  border: none;
}

/* Кнопка закрытия (X) */
.new-design .products-grid__action-bar-close {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.new-design .products-grid__action-bar-close::before,
.new-design .products-grid__action-bar-close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.4156rem;
  height: 0.12rem;
  background: #000;
}

.new-design .products-grid__action-bar-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.new-design .products-grid__action-bar-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Кнопка "В корзину" */
.new-design .products-grid__action-bar-cart {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  height: 5.2rem;
  padding: 0.8rem 1.4rem 0.8rem 1.6rem;
  background: #E7E0DD;
  border: none;
  cursor: pointer;
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #000;
}

/* текст прижат влево (flex:1), иконка прижата вправо */
.new-design .products-grid__action-bar-cart > span {
  flex: 1;
  text-align: left;
}

.new-design .products-grid__action-bar-cart.is-ready {
  background: #000;
  color: #fff;
}

/* Стейт «добавлен» — подтверждение после добавления: чёрная кнопка, иконка-галочка */
.new-design .products-grid__action-bar-cart.is-added,
.new-design .mobile-cart-sheet__cart-btn.is-added {
  background: var(--black-100, #000);
  color: #fff;
}
.new-design .products-grid__action-bar-cart.is-added .products-grid__action-bar-cart-icon,
.new-design .mobile-cart-sheet__cart-btn.is-added .mobile-cart-sheet__cart-icon {
  -webkit-mask-image: url(/app/media/img/minified-svg/arr-checkbox.svg);
  mask-image: url(/app/media/img/minified-svg/arr-checkbox.svg);
}

/* Отказ добавления по лимиту штук на позицию — приглушённая кнопка
   с коротким сообщением вместо подтверждения «Добавлен» */
.new-design .products-grid__action-bar-cart.is-limit,
.new-design .mobile-cart-sheet__cart-btn.is-limit,
.new-design .pdp__cta.is-limit {
  background: var(--black-5);
  color: var(--color-muted);
  cursor: not-allowed;
}

/* Hover — превью активного состояния (чёрный фон / белый текст) */
.new-design .products-grid__action-bar-cart:not(.is-ready):not(.is-limit):hover {
  background: var(--black-100, #000);
  color: #fff;
}

.new-design .products-grid__action-bar-cart-icon {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  -webkit-mask-image: url(/app/media/img/minified-svg/cart.svg);
  mask-image: url(/app/media/img/minified-svg/cart.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
}

.new-design .products-grid__action-bar-cart span {
  flex: 1;
}

/* Узкая карточка (4 колонки / «похожие» ~354px) → компактный action-bar
   (Figma Size=S, 1866-36723): padding 18, gap лево↔право 30, свотч 32/26,
   правая колонка 150. Порог 40rem (=400px на 1440) масштабируется с флюид-root:
   широкая 3-кол карточка (~472px) остаётся большим вариантом. */
@container (max-width: 40rem) {
  .new-design .products-grid__action-bar {
    padding: 1.8rem;
    gap: 3rem;
  }
  .new-design .products-grid__action-bar-swatch {
      width: 2.6rem;
      height: 2.6rem;
  }
  .new-design .products-grid__action-bar-swatch span {
    width: 2.5rem;
    height: 2.5rem;
  }

    .new-design .products-grid__action-bar-swatch.active,
    .new-design .products-grid__action-bar-swatch:hover {
        width: 3.2rem;
        height: 3.2rem;
    }

    .new-design .products-grid__action-bar-swatch.active span,
    .new-design .products-grid__action-bar-swatch:hover span {
        width: 3.1rem;
        height: 3.1rem;
    }
  .new-design .products-grid__action-bar-right {
    min-height: 15rem;
  }
}

/* Очень узкая карточка (попап лукбука на странице коллекции — 188px ≈ 17.7rem):
   двухколоночная раскладка не помещается (лево 11rem + gap 3rem шире контента),
   бар вылезал за карточку и наезжал на соседнюю. Складываем в одну колонку.
   Порог 24rem (~254px) ниже самой узкой карточки каталога (4 колонки ~31rem) и
   «похожих»/«на модели» на PDP (~32rem) — там раскладка не меняется. */
@container (max-width: 24rem) {
  .new-design .products-grid__action-bar {
    flex-direction: column;
    gap: 1.6rem;
    padding: 1.2rem;
    width: calc(100% - 1.2rem);
    bottom: 6.2rem;
  }

    .new-design .products-grid__action-bar-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

  .new-design .products-grid__action-bar-colors {
    width: 100%;
    gap: 1.2rem;
  }

  .new-design .products-grid__action-bar-right {
    min-height: 0;
    gap: 1.6rem;
  }

  .new-design .products-grid__action-bar-sizes {
    margin-top: 1.2rem;
  }

  .new-design .products-grid__action-bar-cart {
    height: 4rem;
    gap: 0.6rem;
    padding: 0.8rem;
  }

  .new-design .products-grid__action-bar-cart > span {
    white-space: nowrap;
  }
}

/* Кнопка корзины и ссылка предзаказа переключаются атрибутом hidden, а у обеих
   display:flex из авторских стилей — он сильнее браузерного [hidden], поэтому
   скрытие задаём явно. */
.new-design .products-grid__action-bar-cart[hidden],
.new-design .mobile-cart-sheet__cart-btn[hidden] {
  display: none;
}

/* Предзаказ (coming_soon): размеры не выбираются — как на карточке товара, где
   блок размера при предзаказе не выводится. Саму кнопку/ссылку переключает JS
   (applyPreorderState), здесь гасим только размерную часть. */
.new-design .products-grid__action-bar.is-preorder .products-grid__action-bar-sizes,
.new-design .products-grid__action-bar.is-preorder .products-grid__action-bar-sizes-header > div {
  display: none;
}

.new-design .mobile-cart-sheet.is-preorder .mobile-cart-sheet__sizes-section {
  display: none;
}

/* --- Mobile Bottom Sheet: быстрое добавление в корзину --- */
.new-design .mobile-cart-sheet {
  position: fixed;
  inset: 0;
  z-index: 1001;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.new-design .mobile-cart-sheet.is-open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0s 0s;
}

.new-design .mobile-cart-sheet__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.new-design .mobile-cart-sheet__panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  will-change: transform;
}

.new-design .mobile-cart-sheet.is-open .mobile-cart-sheet__panel {
  transform: translateY(0);
}

.new-design .mobile-cart-sheet__content {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
}

.new-design .mobile-cart-sheet__preview {
  width: 10.7rem;
  height: 14.9rem;
  flex-shrink: 0;
  background: #F6F2F0;
  overflow: hidden;
}

.new-design .mobile-cart-sheet__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.new-design .mobile-cart-sheet__details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.new-design .mobile-cart-sheet__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.new-design .mobile-cart-sheet__color-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.new-design .mobile-cart-sheet__label {
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-muted);
}

.new-design .mobile-cart-sheet__value {
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #000;
}

.new-design .mobile-cart-sheet__close {
  width: 2.4rem;
  height: 2.4rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.new-design .mobile-cart-sheet__swatches {
  display: flex;
  flex-wrap: wrap;
  /* по центру — иначе увеличенный выбранный свотч свисал бы вниз ряда */
  align-items: center;
  gap: 0.2rem;
  margin-top: 1.3rem;
    align-items: center;
}

/* Размеры — как были (специфика sheet), стиль — как у свотча десктопного
   action-bar (.products-grid__action-bar-swatch): та же рамка 0.35, текущий
   цвет обведён по квадрату, выбранный вручную — рамкой потемнее. */
.new-design .mobile-cart-sheet__swatch {
  width: 1.9rem;
  height: 1.9rem;
  aspect-ratio: 1 / 1;
  /* Как в каталожной карточке (.products-grid__color-swatch): цвет заполняет
     квадрат до рамки, без воздуха внутри */
  padding: 0;
  overflow: hidden;

  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.new-design .mobile-cart-sheet__swatch span {
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
}

/* Текущий цвет товара (не выбран вручную) — рамка по границе квадрата цвета */
.new-design .mobile-cart-sheet__swatch.current span {
  outline: 1px solid var(--black-35);
}

/* Выбранный вручную — рамка темнее на самом квадрате, outline со span снимаем */
.new-design .mobile-cart-sheet__swatch.active span {
  outline: none;
}

/* Выбранный свотч крупнее остальных — как в карточке каталога
   (.products-grid__color-swatch--active: 1.8rem → 2.4rem, те же +0.6rem) */
.new-design .mobile-cart-sheet__swatch.active {
  /* FIXME: 0.6 из макета action-bar — токена такой прозрачности нет
     (есть --black-50 и --black-35) */
  border-color: rgba(0, 0, 0, 0.6);
  width: 3rem;
  height: 3rem;
}

.new-design .mobile-cart-sheet__swatch.active span {
    width: 2.3rem;
    height: 2.3rem;
}

.new-design .mobile-cart-sheet__sizes-section {
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.new-design .mobile-cart-sheet__sizes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.new-design .mobile-cart-sheet__size-guide {
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.new-design .mobile-cart-sheet__sizes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 2.4rem;
}

/* Малое число размеров (≤3) — выравнивание влево без растяжки */
.new-design .mobile-cart-sheet__sizes:has(> :nth-child(-n+3):last-child) {
  justify-content: flex-start;
}

/* margin-top: 13px на свотчах — отступ от label "Цвет" */

.new-design .mobile-cart-sheet__size {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #000;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.new-design .mobile-cart-sheet__size.active {
  border: 1px solid rgba(0, 0, 0, 0.35);
}

.new-design .mobile-cart-sheet__size.size-error {
  color: #DB1D26;
}

.new-design .mobile-cart-sheet__size:disabled {
  color: rgba(0, 0, 0, 0.35);
  cursor: not-allowed;
}

.new-design .mobile-cart-sheet__cart-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  height: 5.2rem;
  padding: 0.8rem 1.4rem 0.8rem 1.6rem;
  background: #E7E0DD;
  border: none;
  cursor: pointer;
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #000;
}

.new-design .mobile-cart-sheet__cart-btn span {
  flex: 1;
  text-align: left;
}

.new-design .mobile-cart-sheet__cart-btn.is-ready {
  background: #000;
  color: #fff;
}

/* Распродан — кнопка неактивна, как CTA «SOLD OUT» на карточке товара
   (.pdp__cta--disabled). Правило перебивает hover и .is-ready. */
.new-design .products-grid__action-bar-cart.is-soldout,
.new-design .products-grid__action-bar-cart.is-soldout:hover,
.new-design .mobile-cart-sheet__cart-btn.is-soldout,
.new-design .mobile-cart-sheet__cart-btn.is-soldout:hover {
  background: var(--black-5);
  color: var(--color-muted);
  cursor: not-allowed;
}

/* Служебное сообщение вместо размеров: «Загрузка…» и ошибка с повтором.
   Появляется только когда данных быстрого выбора нет в разметке карточки. */
.new-design .products-grid__action-bar-status,
.new-design .mobile-cart-sheet__status {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-muted);
}

.new-design .products-grid__action-bar-status-retry,
.new-design .mobile-cart-sheet__status-retry {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--color-primary);
  text-decoration: underline;
}

.new-design .mobile-cart-sheet__cart-icon {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  -webkit-mask-image: url(/app/media/img/minified-svg/cart.svg);
  mask-image: url(/app/media/img/minified-svg/cart.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
}

/* --- Hover state: показываем все overlay-элементы (только desktop) --- */
@media screen and (min-width: 65em) {
  .new-design .products-grid__fav-inline,
  .new-design .pdp__look-card-fav {
    display: block;
  }

  .new-design .products-grid__card:hover .products-grid__arrow,
  .new-design .products-grid__card:hover .products-grid__counter,
  .new-design .products-grid__card:hover .products-grid__add-cart,
  .new-design .products-grid__card:hover .products-grid__colors,
  .new-design .products-grid__card:hover .products-grid__fav-inline,
  .new-design .pdp__look-card:hover .pdp__look-card-add,
  .new-design .pdp__look-card:hover .pdp__look-card-fav,
  .new-design .product-list-card:hover .pdp__look-card-add,
  .new-design .product-list-card:hover .pdp__look-card-fav {
    opacity: 1;
  }

  /* Скрываем "+" когда action bar открыт */
  .new-design .products-grid__card:has(.products-grid__action-bar.is-open) .products-grid__add-cart {
    opacity: 0 !important;
  }

  /* При использовании слайдера скрываем дефолтный hover-image */
  .new-design .products-grid__card[data-gallery-index]:not([data-gallery-index="0"]) .products-grid__image-hover {
    opacity: 0 !important;
  }
}

/* --- Анимация смены изображения в слайдере --- */
.new-design .products-grid__main-img {
  transition: opacity 0.25s ease;
}

.new-design .products-grid__main-img.is-switching {
  opacity: 0.6;
}

/* ============================================
   CATALOG MENU (выпадающее меню «КАТАЛОГ», desktop-only)
   Контейнер 700px по центру под шапкой, переключатель пола,
   список категорий со сдвигом +8px при hover и crossfade превью
   по центральной оси контейнера.
   ============================================ */
/* Меню каталога теперь живёт внутри overlay__panel (общий BaseOverlay): фон,
   позиционирование (top:header, центрированная карточка 76rem), анимация-fade,
   scroll-lock/Esc/клик-вне и a11y — всё на оболочке. Здесь — только контент. */
.new-design .catalog-menu {
  width: 100%;
}

/* Top-оверлеи (каталог/корзина/избранное/поиск/авторизация) — без непрозрачной
   подложки: страница под ними и так гаснет (body.is-overlay-open .page → 0.03),
   отдельный белый слой не нужен. Только desktop; на мобиле оверлеи полноэкранные. */
@media (min-width: 65em) {
  .new-design .overlay--top .overlay__panel {
    background: transparent;
  }
  /* Каталог и поиск дополнительно ужимаются по высоте под контент — пустая зона
     под пунктами не перехватывает клик (клик мимо закрывает оверлей). */
  .new-design .overlay__panel:has(.catalog-menu),
  .new-design .overlay__panel:has(.search-panel) {
    height: auto;
    align-self: flex-start;
  }
}

.new-design .catalog-menu__container {
  position: relative;
  /* Заполняем панель (73.2rem, как .header-new .container): левый край контейнера
     совпадает с левым краем шапки, и padding-left 1.6rem встаёт ровно под «NEW»
     (NEW = padding шапки 6px + padding nav-item 10px = 16px). */
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  /* padding-top 4rem (40px) — зазор шапка→меню по Figma (Gap 40px): МУЖСКОЕ
     встаёт вровень с началом контента страницы (header + 40px). */
  padding: 4rem 1.6rem 3.2rem;
  display: flex;
  flex-direction: column;
  gap: 3.2rem; /* 32px — gap между tabs / static / categories */
  font-family: var(--font-secondary);
  font-size: 1.1rem; /* Body 1: 11px */
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.11rem; /* 1.1px */
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Обёртка правой колонки нужна только мобильной раскладке. На десктопе она
   разрывала flex-контейнер меню: табы и списки переставали быть его прямыми
   детьми, и gap 32 между ними пропадал. display:contents возвращает их в поток
   контейнера (в мобильном медиа ниже обёртка снова становится колонкой). */
.new-design .catalog-menu__main {
  display: contents;
}

/* Поиск в мобильном меню (desktop скрыт через u-hidden-desktop).
   Отступ иконка→текст 6px: в макете gap 2 + инсет текста 4. */
.new-design .catalog-menu__search-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-primary);
  text-decoration: none;
}
.new-design .catalog-menu__search-icon {
  width: 1.6rem;
  height: 1.6rem;
  background-color: currentColor;
  -webkit-mask: url('/app/media/img/minified-svg/icon-search.svg') center / contain no-repeat;
          mask: url('/app/media/img/minified-svg/icon-search.svg') center / contain no-repeat;
}

/* Табы пола — первая секция меню */
.new-design .catalog-menu__tabs {
  display: flex;
  gap: 1.2rem; /* 12px */
}

.new-design .catalog-menu__tab {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--color-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.new-design .catalog-menu__tab:hover {
  color: var(--color-primary);
}

.new-design .catalog-menu__tab--active {
  color: var(--color-primary);
}

/* Списки категорий — оба рендерятся в DOM, видимость через data-gender */
.new-design .catalog-menu__lists {
  position: relative;
}

.new-design .catalog-menu__list {
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.new-design .catalog-menu__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem; /* 6px между строками */
}

.new-design .catalog-menu[data-gender="men"] .catalog-menu__list--women,
.new-design .catalog-menu[data-gender="women"] .catalog-menu__list--men {
  display: none;
}

/* Строка категории: hover-зона на всю строку, сдвиг +8px, точка слева */
.new-design .catalog-menu__row {
  position: relative;
  padding-right: 1.2rem; /* 12px буфер от превью при длинных названиях */
}

.new-design .catalog-menu__link {
  position: relative;
  display: block;
  padding: 0;
  color: inherit;
  text-decoration: none;
  white-space: nowrap; /* название категории всегда в одну строку */
  transition: transform var(--transition-fast);
}

.new-design .catalog-menu__link::before {
  content: '';
  position: absolute;
  left: -0.8rem; /* 8px слева от текста */
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 40px;
  background: var(--color-primary);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.new-design .catalog-menu__row:hover .catalog-menu__link {
  transform: translateX(0.8rem); /* +8px */
}

.new-design .catalog-menu__row:hover .catalog-menu__link::before {
  opacity: 1;
}

/* Превью — лента миниатюр 40×52px у наведённой строки.
   top / left / width задаёт JS (по вертикали — центр наведённой строки,
   по горизонтали — справа за самой длинной категорией). */
.new-design .catalog-menu__preview {
  position: absolute;
  height: 5.2rem; /* 52px */
  transform: translateY(-50%);
  pointer-events: none;
}

.new-design .catalog-menu__preview-layer {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.new-design .catalog-menu__preview-layer--active {
  opacity: 1;
}

/* Каждая миниатюра — 40×52px, впритык; в rem для флюид-респонсива */
.new-design .catalog-menu__preview-layer img {
  flex: 0 0 4rem;
  width: 4rem;
  height: 5.2rem;
  object-fit: cover;
  display: block;
}

/* Мобильное каталог-меню — ниже десктопных правил секции: раньше блок лежал
   выше в файле и перебивался ими при равной специфичности. */
@media screen and (max-width: 1024px) {
  /* --- Каталог-меню на мобиле (макет 3748:30243) ------------
     Две равные колонки в инсетах 12px: слева поиск и служебные страницы,
     справа переключатель пола и категории. Превью-фото не нужны (нет hover).
     Типографика общая с десктопом: 11px / tracking 1.1 / uppercase. */
  .new-design .catalog-menu__container {
    width: 100%;
    /* padding-top 4rem — тот же зазор шапка→меню (Gap 40), что на десктопе */
    padding: 4rem 1.2rem 3.2rem;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }
  .new-design .catalog-menu__preview { display: none; }

  /* Колонки: обе flex: 1, как в макете */
  .new-design .catalog-menu__aside,
  .new-design .catalog-menu__main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3.2rem; /* 32px — поиск ↔ список, табы ↔ категории */
  }

  .new-design .catalog-menu__aside-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem; /* 8px между пунктами */
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .new-design .catalog-menu__aside-link {
    color: var(--color-primary);
    text-decoration: none;
    line-height: 1.3;
  }

  /* Переключатель пола: gap 14px, неактивный приглушён */
  .new-design .catalog-menu__tabs { gap: 1.4rem; }
  .new-design .catalog-menu__tab { font-size: 1.1rem; }

  /* Группы «акции» и «категории» — 24px между собой, 8px внутри */
  .new-design .catalog-menu__list { gap: 2.4rem; }
  .new-design .catalog-menu__sublist { gap: 0.8rem; }
  .new-design .catalog-menu__row { padding-right: 0; }
  .new-design .catalog-menu__link { font-size: 1.1rem; padding: 0; line-height: 1.3; }
}


/* Когда открыто каталог-меню ИЛИ корзина — страница «выцветает» в opacity 0.03
   (по дизайну), шапку (.header-new) и сам оверлей не трогаем. Поведение синхронно
   для всех top-overlay (BaseOverlay добавляет body.is-overlay-open при position=top). */
body.is-catalog-open .page,
body.is-overlay-open .page,
body.is-catalog-open .footer-new,
body.is-overlay-open .footer-new,
body.is-catalog-open #filter-bar-wrapper,
body.is-overlay-open #filter-bar-wrapper {
  opacity: 0.03;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}
/* Шапка лежит внутри .page → наследует pointer-events:none. Явно возвращаем клики
   и полную видимость, чтобы при открытом оверлее можно было кликать иконки. */
body.is-catalog-open .header-new,
body.is-overlay-open .header-new {
  opacity: 1;
  pointer-events: auto;
}
body:not(.is-catalog-open):not(.is-overlay-open) .page,
body:not(.is-catalog-open):not(.is-overlay-open) .footer-new,
body:not(.is-catalog-open):not(.is-overlay-open) #filter-bar-wrapper {
  transition: opacity var(--transition-normal);
}

/* Accessibility: отключаем движение для пользователей с reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .new-design .catalog-menu,
  .new-design .catalog-menu__link,
  .new-design .catalog-menu__link::before,
  .new-design .catalog-menu__preview-layer {
    transition: none;
  }
}

/* ============================================
   PDP — Карточка товара
   Этапы 1–5: данные, partials, галерея, sticky CTA, якорь к размеру.
   Drawer-попапы и cross-sell — этапы 8–10.
   ============================================ */

.new-design .pdp-section {
  width: 100%;
}

.new-design .pdp-section__container {
  width: 100%;
  /* PDP — во всю страницу: убираем max-width-кап, сетка-гайды 891/533
     растягивается пропорционально на всю ширину экрана (галерея во всю ширину). */
  max-width: none;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Breadcrumbs скрыты визуально,
   но остаются в DOM для schema.org микроразметки BreadcrumbList → SEO */
.new-design .pdp__breadcrumbs {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.new-design .pdp__breadcrumb {
  color: inherit;
  text-decoration: none;
}

.new-design .pdp__breadcrumb:not(span):hover {
  color: var(--color-primary);
}

/* === Главный grid: галерея + правая колонка ===
   Соотношение 891 / 533 (gap 16) = 1440 точно */
.new-design .pdp {
  display: grid;
  grid-template-columns: minmax(0, 891fr) minmax(0, 533fr);
  gap: 1.6rem;
  align-items: start;
  padding-top: 2rem;
}

/* Десктоп (≥1024): карточка во всю ширину фрейма — .pdp выходит
   за горизонтальные падинги контейнера и флашится к ОБОИМ краям: галерея впритык к
   левому краю (x=0), правая колонка — к правому (1440). 12px-инсет контента справа
   даёт padding-right у .pdp__right. Гайды-пропорции 891/533 (gap 16) сохраняются. */
@media (min-width: 48em) {
  /* Две строки: 1-я — ровно по высоте галереи (--pdp-gallery-h задаёт JS,
     см. initPdpGallerySticky в noname.js), 2-я — «на модели».
     Колонки разделены gap 16px, строки — без зазора (cross-sell идёт впритык
     под правой колонкой, как было при отдельном .pdp-cross-row). */
  .new-design .pdp {
    grid-template-rows: var(--pdp-gallery-h, auto) auto;
    column-gap: 1.6rem;
    row-gap: 0;
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
  }

  /* Логика заказчика: пока листается галерея — блок описания (buy-box+детали+
     аккордеон) ЗАЛИПАЕТ; когда галерея кончилась — описание отлипает и появляется
     «на модели». Шапка fixed 64px → top 6.4rem.

     Sticky висит на .pdp__info, а не на самой колонке: у sticky grid item Chrome
     ограничивает залипание всем гридом, а не его строкой, из-за чего описание
     доезжало до конца второй строки и «на модели» ложилось поверх него. Колонка
     растянута на свою строку (align-self: stretch) и служит рамкой для sticky —
     описание отлипает ровно на границе строки, элементы идут строго друг за другом. */
  .new-design .pdp__right {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
  }

  .new-design .pdp__info {
    position: sticky;
    top: 6.4rem;
  }

  /* «На модели» — под правой колонкой (строка 2, колонка 2), 12px-инсет справа
     как у .pdp__right. Отступ до «похожих товаров» остаётся на
     .product-list--pdp (11.6rem) — залипание галереи кончается на его границе. */
  .new-design .pdp-cross-row {
    grid-column: 2;
    grid-row: 2;
    padding-right: 1.2rem;
  }
}

.new-design .pdp__right {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  padding-top: 3.2rem;
  padding-right: 1.2rem;
  padding-bottom: 2.4rem;
  padding-left: 0;
  min-width: 0;
}

/* === ГАЛЕРЕЯ === */
.new-design .pdp__gallery {
  position: relative;
  display: block;
}

.new-design .pdp__gallery-mosaic {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.new-design .pdp__gallery-row {
  display: grid;
  gap: 0;
}

.new-design .pdp__gallery-row--1 {
  grid-template-columns: 1fr;
}

.new-design .pdp__gallery-row--2 {
  grid-template-columns: 1fr 1fr;
}

.new-design .pdp__gallery-tile {
  position: relative;
  aspect-ratio: 481 / 620;
  overflow: hidden;
  background: var(--color-bg);
}

/* warm overlay поверх изображений главного товара (rgba(255,244,230,.3) multiply) */
.new-design .pdp__gallery-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 244, 230, 0.3);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

.new-design .pdp__gallery-media {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.new-design .pdp__schema-image {
  display: none;
}

/* Десктоп: фото кончились → левая колонка замирает, справа докручивается
   «на модели» (до блока похожих товаров).

   .pdp__left растянут на обе строки грида (галерея + «на модели»), галерея внутри
   него — sticky. Смещение задано через top, а не bottom: галерея выше окна, а для
   sticky-бокса, который не влезает в окно, браузер применяет start-край (top) и
   игнорирует bottom. top = 100vh - высота галереи (JS кладёт её в --pdp-gallery-h)
   даёт тот же результат, что bottom: 0 — низ галереи прилипает к низу окна.
   Правило ниже базового position:relative — иначе оно бы его перебивало. */
@media (min-width: 48em) {
  .new-design .pdp__left {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
    min-width: 0;
  }

  .new-design .pdp__gallery {
    position: sticky;
    top: calc(100vh - var(--pdp-gallery-h));
  }
}

/* === ПРАВАЯ КОЛОНКА: статический инфоблок ===
   По дизайну — обычный блок в потоке (не sticky).
   Прокручивается вместе с галереей. */
.new-design .pdp__info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  /* между info-inner и details ~252px пустого пространства (sticky-imitation) */
  gap: 25.2rem;
}

.new-design .pdp__info-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}

/* Группа details + accordion в нижней части блока */
.new-design .pdp__sticky-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* details (y=559..612) + accordion (y=660..716) → gap 48px */
  gap: 4.8rem;
}

/* Точные отступы (Product Info y=0..155):
   шапка→цвет 32px, цвет→размер 24px (внутри Color block), размер→CTA 40px */
.new-design .pdp__info-inner > .pdp__row--colors {
  margin-top: 3.2rem;
}

.new-design .pdp__info-inner > .pdp__row--sizes {
  margin-top: 2.4rem;
}

.new-design .pdp__info-inner > .pdp__cta-wrap {
  margin-top: 4rem;
}

/* шапка: имя + цена слева, ♥ справа.
   Fluid: 342/521 ≈ 65.6% от inner правой колонки */
.new-design .pdp__head {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  width: 65.6%;
}

.new-design .pdp__head-text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.new-design .pdp__title {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
}

.new-design .pdp__price {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: baseline;
  font-family: var(--font-price);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-black);
  /* В макете у стиля Price line-height = auto (слой 49x15 при кегле 12 = 1.25),
     а не 100%. Хардкод 1 сжимал строку цены на 3px против макета. */
  line-height: normal;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  color: var(--color-primary);
}

.new-design .pdp__price-current {
  color: var(--color-primary);
}

.new-design .pdp__price-old {
  color: var(--color-muted);
  text-decoration: line-through;
  filter: blur(0.5px);
}

.new-design .pdp__hidden-meta {
  display: none;
}

.new-design .pdp__fav {
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  background-color: currentColor;
  -webkit-mask: url('/app/media/img/minified-svg/heart-outline.svg') center / contain no-repeat;
          mask: url('/app/media/img/minified-svg/heart-outline.svg') center / contain no-repeat;
  color: var(--color-primary);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.new-design .pdp__fav.in-fav {
  -webkit-mask-image: url('/app/media/img/minified-svg/heart-filled.svg');
          mask-image: url('/app/media/img/minified-svg/heart-filled.svg');
}

.new-design .pdp__fav:hover {
  opacity: 0.7;
}

/* Ряд: лейбл слева + контент справа */
.new-design .pdp__row {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  width: 100%;
}

/* Fluid: label 163/521 ≈ 31.3% от inner правой колонки */
.new-design .pdp__row-label {
  flex: 0 0 31.3%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
}

.new-design .pdp__row-label-key {
  color: var(--color-muted);
}

.new-design .pdp__row-label-value {
  color: var(--color-primary);
}

.new-design .pdp__row-label-link {
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* Цвета — inline свотчи */
.new-design .pdp__colors {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* просвет между квадратами — как в каталожной карточке (раньше его давал
     внутренний padding свотча, теперь цвет заполняет квадрат целиком) */
  gap: 0.2rem;
}

/* Цветовой свотч — повторяет логику .products-grid__action-bar-swatch:
   базовая лёгкая рамка → темнее при hover/active. PDP 32×32, inner 26×26 */
.new-design .pdp__color-swatch {
  /* Бокс-модель как у каталожной карточки: контент 26 + border 1 = 28×28,
     цвет заполняет квадрат до рамки, рамка видна у всех свотчей. */
  /*flex: 0 0 2.8rem;*/
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
    /*outline: 1px solid rgba(0, 0, 0, 0.2);*/
    outline-offset: -1px;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition-fast), width var(--transition-fast), height var(--transition-fast);
}

/* Выбранный цвет — крупнее и с рамкой потемнее (как --active в каталоге).
   На hover только темнеет рамка: ряд на PDP длиннее каталожного, и прыжки
   размера при проводке мышью по нему заметны. */
.new-design .pdp__color-swatch--active {
  /* FIXME: 0.6 из макета action-bar — токена такой прозрачности нет
     (есть --black-50 и --black-35) */
    /*outline: 1px solid rgba(0, 0, 0, 0.35);*/
  flex-basis: 3.4rem;
  width: 3.4rem;
  height: 3.4rem;
}

.new-design .pdp__color-swatch:hover {
    width: 3.4rem;
    height: 3.4rem;
}

.new-design .pdp__color-swatch-dot {
  /* Квадрат цвета — во всю внутреннюю область свотча (контур даёт рамка).
     flex-shrink:0 — чтобы по главной оси флекса точку не ужимало. */
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  display: block;
  background-color: var(--color-primary);
  /*box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);*/
}

/* Светлый цвет обводим внутренней рамкой — белый иначе не читается на фоне */
.new-design .pdp__color-swatch-dot--light {
  box-shadow: inset 0 0 0 1px var(--black-15);
}

.new-design .pdp__color-swatch--active .pdp__color-swatch-dot,
.new-design .pdp__color-swatch:hover .pdp__color-swatch-dot {
  box-shadow: none;
    width: 100%;
    height: 100%;
}

.new-design .pdp__color-swatch--active .pdp__color-swatch-dot--light,
.new-design .pdp__color-swatch:hover .pdp__color-swatch-dot--light {
  box-shadow: inset 0 0 0 1px var(--black-15);
}

.new-design .pdp__color-more {
  margin-left: 0.8rem;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* Размеры — toggle-кнопки justify-between, без gap */
.new-design .pdp__sizes {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  min-width: 0;
}

/* Мало размеров (≤3) — прижаты влево с гэпом, а не растянуты во всю ширину
   (по макету, как в экшн-баре/мобильном sheet). */
.new-design .pdp__sizes:has(> :nth-child(-n+3):last-child) {
  justify-content: flex-start;
  gap: 3.2rem;
}

.new-design .pdp__size-btn {
  flex: 0 0 3.2rem;
  width: 3.2rem;
  height: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-secondary);
  font-size: 1.4rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  color: var(--color-primary);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.new-design .pdp__size-btn:hover:not(:disabled) {
  border-color: var(--color-muted);
}

.new-design .pdp__size-btn--active {
  border-color: var(--color-primary);
}

.new-design .pdp__size-btn--out {
  color: var(--color-muted);
  cursor: not-allowed;
}

.new-design .pdp__size-btn--last {
  position: relative;
}

/*.new-design .pdp__size-btn--last::after {
  content: '';
  position: absolute;
  inset: auto auto -0.2rem 50%;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--color-primary);
  border-radius: 50%;
  transform: translateX(-50%);
}

.new-design .pdp__size-btn--delivery {
  font-style: italic;
}*/

.new-design .pdp__size-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* Якорь-флэш при попытке клика по CTA без выбранного размера */
.new-design .pdp__row--sizes.is-flash {
  animation: pdp-size-flash 1.5s ease-out;
}

@keyframes pdp-size-flash {
  0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6); }
  30%  { box-shadow: 0 0 0 0.4rem rgba(0, 0, 0, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* CTA */
/* Fluid: CTA-wrap 342/521 ≈ 65.6% от inner правой колонки */
.new-design .pdp__cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 65.6%;
  align-self: flex-end;
}

/* CTA «В КОРЗИНУ» — повторяет стили .products-grid__action-bar-cart из каталога:
   52px, бежевая, текст flex:1 align-left, иконка справа,
   hover → чёрная с белым текстом (preview активного состояния) */
.new-design .pdp__cta {
  width: 100%;
  height: 5.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.4rem 0.8rem 1.6rem;
  background: #E7E0DD;
  border: 0;
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #000;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Текст прижат влево */
.new-design .pdp__cta > span {
  flex: 1;
  text-align: left;
}

.new-design .pdp__cta:not(.pdp__cta--disabled):not(.is-limit):hover,
.new-design .pdp__cta.is-ready {
  background: #000;
  color: #fff;
}

/* Стейт «Добавлен» — пара цвет+размер уже в корзине (как каталожный action-bar):
   чёрная кнопка + иконка-галочка вместо корзины. */
.new-design .pdp__cta.is-added {
  background: #000;
  color: #fff;
}
.new-design .pdp__cta.is-added .pdp__cta-icon {
  -webkit-mask-image: url(/app/media/img/minified-svg/arr-checkbox.svg);
          mask-image: url(/app/media/img/minified-svg/arr-checkbox.svg);
}

.new-design .pdp__cta--disabled {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-muted);
  cursor: not-allowed;
}

/* cart-иконка: повторяет .products-grid__action-bar-cart-icon из каталога.
   currentColor → цвет наследуется (чёрный по умолчанию, белый при hover) */
.new-design .pdp__cta-icon {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  -webkit-mask-image: url(/app/media/img/minified-svg/cart.svg);
          mask-image: url(/app/media/img/minified-svg/cart.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: currentColor;
}

.new-design .pdp__cta-hint {
  font-family: var(--font-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  margin: 0;
}

/* Сплит-бейдж */
.new-design .pdp__split {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  background: none;
  border: 0;
  font-family: 'YS Text', var(--font-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  align-self: flex-start;
}

.new-design .pdp__split-badge {
  display: inline-flex;
  align-items: center;
  height: 1.6rem;
  padding: 0.2rem 0.6rem 0.2rem 0.5rem;
  background: var(--color-primary);
  color: var(--color-bg);
  border-radius: 0.8rem;
  font-size: 1.2rem;
  line-height: 1;
}

/* Глиф «Сплит» — вытащен из split.svg, цвет через mask (под фон пилюли) */
.new-design .pdp__split-badge::before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.4rem;
  background-color: var(--color-bg);
  -webkit-mask: url('/app/media/img/minified-svg/dolyame.svg') center / contain no-repeat;
          mask: url('/app/media/img/minified-svg/dolyame.svg') center / contain no-repeat;
}

.new-design .pdp__split-badge-amount {
  font-weight: var(--font-weight-normal);
}

.new-design .pdp__split-text {
  color: var(--color-primary);
  font-size: 1.2rem;
  line-height: 1;
}

.new-design .pdp__split-chevron {
  width: 1.6rem;
  height: 1.6rem;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url('/app/media/img/minified-svg/icon-chevron-right.svg') center / contain no-repeat;
          mask: url('/app/media/img/minified-svg/icon-chevron-right.svg') center / contain no-repeat;
  color: var(--color-primary);
}

/* Детали */
.new-design .pdp__details {
  width: 100%;
}

.new-design .pdp__row--details {
  align-items: flex-start;
}

.new-design .pdp__details-content {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  font-family: var(--font-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  letter-spacing: 0.06rem;
  color: var(--color-primary);
  min-width: 0;
}

.new-design .pdp__details-row {
  margin: 0;
}

.new-design .pdp__details-text {
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
}

.new-design .pdp__details-text p {
  margin: 0 0 0.8rem;
}

.new-design .pdp__details-limited {
  display: inline-block;
  padding: 0.2rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.05rem;
  background: var(--color-primary);
  color: var(--color-bg);
  margin: 0 0 0.8rem;
}

.new-design .pdp__details-note {
  color: var(--color-muted);
  font-weight: var(--font-weight-normal);
}

.new-design .pdp__details-hint {
  margin-top: 1.2rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

.new-design .pdp__details-hint a {
  text-decoration: underline;
  color: inherit;
}

/* Аккордеон-ссылки → drawer.
   Fluid: 342/521 ≈ 65.6% от inner правой колонки */
.new-design .pdp__accordion {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 65.6%;
  align-self: flex-end;
}

.new-design .pdp__accordion-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* Высота строки 16px — без вертикального padding */
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
  cursor: pointer;
}

.new-design .pdp__accordion-icon {
  width: 1.6rem;
  height: 1.6rem;
  background-color: currentColor;
  -webkit-mask: url('/app/media/img/minified-svg/icon-chevron-right.svg') center / contain no-repeat;
          mask: url('/app/media/img/minified-svg/icon-chevron-right.svg') center / contain no-repeat;
}

.new-design .pdp__ask-stylist {
  /* margin-top убран — расстояние задаётся gap у .pdp__right */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  color: var(--color-muted);
  align-self: flex-end;
  /* text width 351, прижат к правому краю.
     Fluid: 351/533 ≈ 65.9% от правой колонки */
  width: 65.9%;
  text-align: left;
}

.new-design .pdp__ask-stylist:hover {
  color: var(--color-primary);
}

/* === CROSS-SELL «На модели» === */
.new-design .pdp__cross-sell {
  width: 100%;
  display: flex;
  align-items: flex-start;
  /* width=533, label x=0 width=163, cards x=179 width=342.
     Промежуток 179-163=16px, fluid через flex-gap */
  gap: 1.6rem;
}

.new-design .pdp__cross-sell-label {
  /* 163/521 ≈ 31.3% от inner правой колонки */
  flex: 0 0 31.3%;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-muted);
}

.new-design .pdp__cross-sell-cards {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6rem;
  min-width: 0;
}

.new-design .pdp__look-card {
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Overlay-ссылка (повторяет .products-grid__link-overlay) — покрывает карточку.
   z-index 1 ниже всего; image / footer имеют pointer-events:none чтобы клики
   на пустые места уходили на overlay; «+», ♥ и action-bar имеют pointer-events:auto */
.new-design .pdp__look-card-link,
.new-design .product-list-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.new-design .pdp__look-card-images {
  position: relative;
  z-index: 2;
  pointer-events: none;
  /* aspect 339/235.37 */
  aspect-ratio: 339 / 235;
  display: flex;
  background: #F6F2F0;
}

.new-design .pdp__look-card-image {
  flex: 1 1 0;
  position: relative;
  overflow: hidden;
}

.new-design .pdp__look-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain — чтобы модель была видна целиком (а не обрезалась).
     position: bottom — модель «стоит» на полу карточки, как в дизайне */
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

/* Кнопка «+» (add-to-cart) — повторяет логику .products-grid__add-cart из каталога:
   24x24 с отступом 10px от края, белый фон, SVG-иконка через mask.
   По умолчанию скрыта (opacity:0), появляется на hover (только desktop) */
.new-design .pdp__look-card-add {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--color-bg);
  border: 0;
  cursor: pointer;
  padding: 0.4rem;
  z-index: 12;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.new-design .pdp__look-card-add::after {
  content: '';
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  -webkit-mask-image: url(/app/media/img/minified-svg/open-botton-sheet.svg);
          mask-image: url(/app/media/img/minified-svg/open-botton-sheet.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: var(--color-primary);
}

/* padding-right=10px → ♥ (24×24 в right-краю) центрируется по той же оси что "+"
   (24×24 absolute right:10px). Та же логика что у .products-grid__info в каталоге. */
.new-design .pdp__look-card-footer {
  position: relative;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.2rem 1rem 0 1rem;
}


.new-design .pdp__look-card-name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Цена + ♥ — flex-row с центрированием по вертикали (повторяет .products-grid__price).
   pointer-events:auto чтобы клик по ♥ работал поверх overlay-link */
.new-design .pdp__look-card-price {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  font-family: var(--font-price);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-black);
  line-height: 1.3;
  letter-spacing: 0.06rem;
  color: var(--color-primary);
}

/* ♥ — повторяет логику .products-grid__fav-inline:
   на desktop opacity:0 → 1 при hover карточки; на mobile/tablet display:none.
   Базовое display:block — поскольку media-query (min-width:1025) у нас выше в файле,
   используем отдельный @media (max-width:1024) для скрытия (см. ниже). */
.new-design .pdp__look-card-fav {
  display: block;
  flex: 0 0 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  background-color: var(--color-primary);
  -webkit-mask-image: url('/app/media/img/minified-svg/heart-outline.svg');
          mask-image: url('/app/media/img/minified-svg/heart-outline.svg');
  -webkit-mask-size: 1.6rem 1.6rem;
          mask-size: 1.6rem 1.6rem;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  cursor: pointer;
  pointer-events: auto;
  z-index: 12;
}

.new-design .pdp__look-card-fav.in-fav {
  -webkit-mask-image: url('/app/media/img/minified-svg/heart-filled.svg');
          mask-image: url('/app/media/img/minified-svg/heart-filled.svg');
}

/* Mobile/tablet — скрыть ♥ (на тач-устройствах нет hover) */
@media screen and (max-width: 64em) {
  .new-design .pdp__look-card-fav {
    display: none;
  }

    .new-design .products-grid__add-cart {
        opacity: 1 !important;
        bottom: 0.4rem;
        right: 0.4rem;
    }
}

/* Sticky CTA удалён — по дизайну блок прокручивается со страницей */

/* === УНИВЕРСАЛЬНЫЙ СПИСОК ТОВАРОВ === */
.new-design .product-list { width: 100%; }

/* Спейсинг секции «похожие товары» на PDP (модификатор) */
.new-design .product-list--pdp {
  /* отступ от нижнего края галереи до заголовка «ПОХОЖИЕ ТОВАРЫ» — 116px
     (Figma: 58 + 58) */
  margin-top: 11.6rem;
  margin-bottom: 16rem;
  padding: 0 1.2rem;
}

.new-design .product-list-title {
  margin: 0 0 2.4rem;
  padding: 0;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Флюид-сетка: колонки 1fr → карточки пропорционально заполняют родителя,
   высота фото — через aspect-ratio. Кол-во колонок задаётся --product-cols
   (по умолчанию 4), поэтому шаблон универсален: меняешь родителя/колонки —
   карточки сами подстраиваются. */
.new-design .product-list-grid {
  display: grid;
  grid-template-columns: repeat(var(--product-cols, 4), minmax(0, 1fr));
  gap: 0;
}

.new-design .product-list-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.new-design .product-list-card-image {
  position: relative;
  z-index: 2;
  pointer-events: none;
  /* aspect 351/488 */
  aspect-ratio: 351 / 488;
  background: #F6F2F0;
  overflow: hidden;
}

.new-design .product-list-card-image picture,
.new-design .product-list-card-image img {
  display: block;
  width: 100%;
  height: 100%;
}

.new-design .product-list-card-image img {
  object-fit: cover;
}

.new-design .product-list-tag {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  padding: 0.2rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: var(--color-primary);
  /*background: var(--color-bg);*/
  pointer-events: none;
}

.new-design .product-list-tag--limited {
  /* Tag/Limited "Эксклюзив" — тот же стиль */
}

.new-design .product-list-card-info {
  position: relative;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.2rem 1rem 0;
}

.new-design .product-list-card-price {
  pointer-events: auto;
}

.new-design .product-list-card-name {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.new-design .product-list-card-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  font-family: var(--font-price);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-black);
  line-height: 1.3;
  letter-spacing: 0.06rem;
  color: var(--color-primary);
}

.new-design .product-list-card-price-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  min-width: 0;
}

.new-design .product-list-card-price-old {
  color: var(--color-muted);
  text-decoration: line-through;
  filter: blur(0.5px);
}

/* === MOBILE === */
/* ============================================
   PDP — ПЛАНШЕТ (768-1023px)
   Двухколоночная сетка тесна на планшете (правая колонка ~287px при
   fr-пропорциях 891/533), поэтому сворачиваем в одну колонку. Галерея
   остаётся мозаичной — свайп предназначен только для телефона (<=767px).
   Информация раскрывается на всю ширину колонки.
   ============================================ */
@media (min-width: 48em) and (max-width: 64em) {
    .new-design .catalog-menu__container {
        font-size: 2rem;
    }

    .new-design .catalog-menu__search-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .new-design .catalog-menu__tab {
        font-size: 2rem;
    }

    .new-design .catalog-menu__link {
        font-size: 2rem;
    }

    body.is-catalog-open .header-new__hamburger .header-new__icon {
        mask-size: 2.4rem;
    }
}

@media (max-width: 47.99em) {
  .new-design .pdp-section__container {
    padding: 0;
  }

  .new-design .pdp__breadcrumbs {
    padding: 1.2rem;
  }

  .new-design .pdp {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0;
  }

  /* Mobile: та же мозаика становится swipe-лентой — второй набор изображений
     в DOM больше не рендерится (раньше десктопный и мобильный шли рядом). */
  .new-design .pdp__gallery {
    position: relative;
  }

  .new-design .pdp__gallery-mosaic {
    flex-direction: row;
    width: 100%;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .new-design .pdp__gallery-mosaic::-webkit-scrollbar {
    display: none;
  }

  /* Ряды мозаики перестают быть боксами — плитки встают в одну ленту */
  .new-design .pdp__gallery-row {
    display: contents;
  }

  .new-design .pdp__gallery-tile {
    flex: 0 0 100%;
    aspect-ratio: 375 / 500;
    scroll-snap-align: start;
  }

  /* Пагинатор-точки (переиспользуем каталожный .products-grid__counter-dots) —
     контейнер только позиционирует в правом верхнем углу слайдера. */
  .new-design .pdp__gallery-counter {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 2;
    display: inline-flex;
  }

  .new-design .pdp__right {
    /* инфо начинается через 24px после картинки (image 0..521) */
    padding: 2.4rem 1.2rem 0;
    gap: 6rem;
  }

  .new-design .pdp__info {
    /* между buy-box и «детали» стоит Gap 60px */
    gap: 6rem;
  }

  .new-design .pdp__sticky-bottom {
    /* «детали» → аккордеон = 60px */
    gap: 6rem;
  }

  .new-design .pdp__info-inner {
    /* Ритм задаётся margin-top у строк (ниже). gap обнуляем — иначе он
       суммируется с базовыми margin-top и вертикальные отступы удваиваются. */
    gap: 0;
    align-items: stretch;
  }

  /* Вертикальный ритм info-inner под mobile:
     имя→цвет 40px, цвет→размер 24px (из базы), размер→кнопка 60px. */
  .new-design .pdp__info-inner > .pdp__row--colors {
    margin-top: 4rem;
  }
  .new-design .pdp__info-inner > .pdp__cta-wrap {
    margin-top: 6rem;
  }

  /* Имя+цена и аккордеон — на всю ширину колонки. */
  .new-design .pdp__head,
  .new-design .pdp__accordion,
  .new-design .pdp__ask-stylist {
    width: 100%;
  }

  /* Кнопка «В КОРЗИНУ» — на всю ширину колонки (351 = 375 − инсеты 12), Figma 1986:6927 */
  .new-design .pdp__cta-wrap {
    width: 100%;
    align-self: stretch;
  }

  /* Плавающая кнопка (Figma 2002:20066): пока её место в потоке ниже экрана,
     кнопка висит над нижним краем — 296px по центру, 24px от низа. Как только
     доскроллили до места, класс снимается (JS: initPdpFloatingCta) и кнопка
     садится в поток. Место в потоке держит .pdp__cta-placeholder, чтобы контент
     не прыгал в момент посадки. */
  .new-design .pdp__cta.is-floating {
    position: fixed;
    left: 50%;
    bottom: 2.4rem;
    transform: translateX(-50%);
    width: 29.6rem;
    max-width: calc(100% - 2.4rem);
    z-index: var(--z-dropdown);
  }

  /* Drawer перекрывает низ экрана — плавающая кнопка не должна лежать поверх */
  body.pdp-drawer-open .new-design .pdp__cta.is-floating {
    display: none;
  }

  .new-design .pdp__cta-placeholder {
    flex-shrink: 0;
  }

  /* Шапка как строка сетки: ♥ в левой колонке, имя+цена — в правом столбце
     171px, в один столбец со свотчами/размерами. */
  .new-design .pdp__head {
    justify-content: space-between;
    gap: 0;
  }
  .new-design .pdp__fav {
    order: -1;
  }
  /* ширина колонки имени/цены — ниже, вместе с остальными колонками (18.6rem) */

  /* «На модели» вынесен из .pdp__right в .pdp-cross-row (для sticky-описания на
     десктопе). На мобилке возвращаем ему 12px-инсет — этим компенсируется
     negative-margin карточек ниже, чтобы фото ложились ровно в край экрана. */
  .new-design .pdp-cross-row {
    padding: 0 1.2rem;
  }

  /* Cross-sell: stack — label сверху, карточки в инсетах 12px (Figma 1986:6952 —
     карточка 351 = 375 − инсеты, фото 175+176, высота 244).
     mobile: gap label↔cards = 12px, между карточками 40px. */
  .new-design .pdp__cross-sell {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    /* Gap 60px между аккордеоном и секцией «на модели». */
    margin-top: 6rem;
  }

  .new-design .pdp__cross-sell-label {
    flex: 0 0 auto;
  }

  .new-design .pdp__cross-sell-cards {
    width: auto;
    gap: 4rem;
  }

  /* Похожие товары — 2×2 на mobile */
  .new-design .product-list {
    margin-top: 8rem;
    margin-bottom: 8rem;
    padding: 0;
  }

  .new-design .product-list-title {
    padding: 0 1.2rem;
  }

  .new-design .product-list-grid {
    grid-template-columns: repeat(2, 1fr);
    /* gap 40px между rows, 0 между cols */
    row-gap: 4rem;
    column-gap: 0;
  }

  /* Строка = сетка «лейбл (127) | контент (171)» со space-between: имя/цена,
     свотчи, размеры и «детали» стоят в одном правом столбце. */
  .new-design .pdp__row {
    align-items: flex-start;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
  }

  /* Ширины колонок по Figma 1986-6873: лейбл 130, контент 186.
     В макете лейбл и контент разделены gap 27 — тогда справа остаётся 8px до
     инсета; выравниваем контент по правому краю (space-between выше), чтобы
     имя/цена, свотчи, размеры и «детали» стояли в одну вертикаль. */
  .new-design .pdp__row-label {
    flex: 0 0 13rem;
  }

  .new-design .pdp__colors,
  .new-design .pdp__sizes,
  .new-design .pdp__details-content {
    flex: 0 0 18.6rem;
  }

  .new-design .pdp__head-text {
    flex: 0 0 18.6rem;
  }

  /* Свотч 32×32 (Figma mobile) достигается общим размером 2.8rem: на мобильной
     ширине rem крупнее. Отдельные размеры больше не нужны — геометрия единая
     с десктопом и каталожной карточкой. */
  .new-design .pdp__color-swatch {
    padding: 0;
  }

  /* Size tab 24×24 (Figma mobile), текст 11px */
  .new-design .pdp__size-btn {
    flex: 0 0 2.4rem;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.1rem;
  }

  /* Sticky CTA убран по дизайну — блок прокручивается со страницей */
}

/* ============================================
   PDP — Drawer (этап 8 плана)
   Универсальный slide-in справа на desktop / fullscreen на mobile.
   Используется для: О ТОВАРЕ / Состав / Доставка / Размерная сетка / Стилист.
   ============================================ */

.new-design .pdp__drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
}

.new-design .pdp__drawer[hidden] {
  display: none;
}

.new-design .pdp__drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
  cursor: pointer;
}

.new-design .pdp__drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 53.3rem;
  max-width: 100%;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  /* Figma 2002:18319: padding 12px сверху/по бокам, 24px снизу */
  padding: 1.2rem 1.2rem 2.4rem;
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  pointer-events: auto;
  overflow: hidden;
}

.new-design .pdp__drawer.pdp__drawer--open {
  pointer-events: auto;
}

.new-design .pdp__drawer.pdp__drawer--open .pdp__drawer-overlay {
  opacity: 1;
  pointer-events: auto;
}

.new-design .pdp__drawer.pdp__drawer--open .pdp__drawer-panel {
  transform: translateX(0);
}

/* Header: 509×24, title 388×14 left + close 24×24 right */
.new-design .pdp__drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  height: 2.4rem;
  padding: 0;
  flex: 0 0 auto;
}

.new-design .pdp__drawer-title {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: 1;
}

.new-design .pdp__drawer-close {
  flex: 0 0 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}

.new-design .pdp__drawer-close::before,
.new-design .pdp__drawer-close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.4rem; /* Figma: линии X ≈ 14.16px в иконке 24×24 */
  height: 1px;
  background: var(--color-primary);
  transform-origin: center;
}

.new-design .pdp__drawer-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.new-design .pdp__drawer-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Скролл-контейнер: media + body скроллятся вместе (панель — header фиксирован) */
.new-design .pdp__drawer-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Media image (Размерная сетка, Figma 1988:30151): бежевая плашка 509×498,
   схема обмеров 432 wide по центру, mix-blend multiply.
   Между header (y=36) и media (y=79) gap 43px */
.new-design .pdp__drawer-media {
  flex: 0 0 auto;
  margin-top: 4.3rem;
  height: 49.8rem;
  background: var(--color-bg-beige);
  overflow: hidden;
}

.new-design .pdp__drawer-media img {
  display: block;
  width: 43.2rem;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* Body: gap header→content 120px (y=144 − header end 24).
   Контент центрирован с max-width 228 (по дизайну блоки текста 228 wide,
   списки items 140 в frame 227 центрированы) */
.new-design .pdp__drawer-body {
  flex: 0 0 auto;
  margin-top: 12rem;
  padding: 0;
  font-family: var(--font-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  /* Body 3 из Figma: 12px / 1.1 / letter-spacing 5% (0.6px) */
  line-height: 1.1;
  letter-spacing: 0.06rem;
  color: var(--color-primary);
}

/* Если в drawer есть media — gap до body сокращаем (header→media→content) */
.new-design .pdp__drawer-media + .pdp__drawer-body {
  margin-top: 2.9rem;
}

.new-design .pdp__drawer-section {
  width: 22.8rem;
  margin: 0 auto;
}


.split__logo {
    display: flex;
    /*justify-content: center;*/
    margin-bottom: 1rem;
}


.new-design .pdp__drawer-section + .pdp__drawer-section {
  margin-top: 3.2rem;
}

/* Пиктограммы ухода — отдельный блок ниже текста, gap 50px (Figma 2002:18324) */
.new-design .pdp__drawer-section + .pdp__drawer-section--icons {
  margin-top: 5rem;
}

.new-design .pdp__drawer-section-title {
  margin: 0 0 1.2rem;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3; /* Body 2 из Figma: 11px / 1.3 / letter-spacing 10% */
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-muted);
}

.new-design .pdp__drawer-section--text p {
  margin: 0 0 1.2rem;
}

.new-design .pdp__drawer-section--text p:last-child {
  margin-bottom: 0;
}

.new-design .pdp__drawer-section--text a {
  text-decoration: underline;
  color: inherit;
}

/* Список items: items 140×48, gap 24px (y=72 vs y=0 = 24 + 48).
   Icon 48×48 + gap 4 + text 88. Список центрирован внутри 227-wide frame */
.new-design .pdp__drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.new-design .pdp__drawer-list-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 14rem;
}

.new-design .pdp__drawer-list-icon {
  flex: 0 0 4.8rem;
  width: 4.8rem;
  height: 4.8rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
}

/* Символы ухода: без рамки-кружка — сама пиктограмма уже содержит
   контур. Иконка через mask-image (минифицированные SVG 48×48). */
.new-design .pdp__drawer-list-icon--temperature,
.new-design .pdp__drawer-list-icon--bleaching,
.new-design .pdp__drawer-list-icon--dry,
.new-design .pdp__drawer-list-icon--p {
  border: 0;
  border-radius: 0;
  background-color: var(--color-primary);
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
}

.new-design .pdp__drawer-list-icon--temperature {
  -webkit-mask-image: url('/app/media/img/minified-svg/temperature.svg');
          mask-image: url('/app/media/img/minified-svg/temperature.svg');
}

.new-design .pdp__drawer-list-icon--bleaching {
  -webkit-mask-image: url('/app/media/img/minified-svg/bleaching.svg');
          mask-image: url('/app/media/img/minified-svg/bleaching.svg');
}

.new-design .pdp__drawer-list-icon--dry {
  -webkit-mask-image: url('/app/media/img/minified-svg/dry.svg');
          mask-image: url('/app/media/img/minified-svg/dry.svg');
}

.new-design .pdp__drawer-list-icon--p {
  -webkit-mask-image: url('/app/media/img/minified-svg/p.svg');
          mask-image: url('/app/media/img/minified-svg/p.svg');
}

/* Размерная сетка (Figma 1988:30057): секции на всю ширину панели,
   label→таблица 18px, между секциями 40px */
.new-design .pdp__drawer-section--size-guide {
  width: 100%;
}

.new-design .pdp__drawer-section + .pdp__drawer-section--size-guide {
  margin-top: 4rem;
}

.new-design .pdp__drawer-section--size-guide .pdp__drawer-section-title {
  margin: 0 0 1.8rem;
  padding: 0 1.2rem;
}

/* Таблица обмеров строками (Figma 1988:30065): зебра black/5, gap 2px,
   первая колонка 100px, значения 30px, Body 2 (11px / 1.2 / ls 10%) */
.new-design .pdp__size-guide-table {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
}

.new-design .pdp__size-guide-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1.2rem;
}

.new-design .pdp__size-guide-row:nth-child(even) {
  background: var(--black-5);
}

.new-design .pdp__size-guide-cell {
  flex: 0 0 3rem;
}

.new-design .pdp__size-guide-cell--label {
  flex: 0 0 10rem;
}

/* Body scroll-lock когда drawer открыт */
body.pdp-drawer-open {
  overflow: hidden;
}

/* === MOBILE === */
@media (max-width: 47.99em) {
  .new-design .pdp__drawer-panel {
    width: 100%;
    inset: 0;
  }

  .new-design .pdp__drawer-header {
    padding: 1.2rem 1.6rem;
  }

  .new-design .pdp__drawer-body {
    padding: 1.6rem;
  }
}

/* ============================================================
   UNIVERSAL OVERLAY (BaseOverlay)
   Оболочка для всех всплывающих панелей нового дизайна.
   z-index задаётся inline из overlayStore. Анимация — по позиции.
   ============================================================ */
.new-design .overlay {
  position: fixed;
  inset: 0;
  display: flex;
  pointer-events: none;
  visibility: hidden;
}
/* ВАЖНО: контейнер оверлея НЕ перехватывает клики (pointer-events:none даже когда
   открыт) — иначе он накрывает полосу шапки (контейнер на inset:0, z-index выше
   шапки) и главное меню становится некликабельным («перекрыто»). Клики ловят только
   backdrop (закрытие по клику-вне) и сама панель. У top-оверлея backdrop начинается
   ниже шапки (top:header-height), поэтому полоса меню остаётся «сквозной». */
.new-design .overlay--open {
  visibility: visible;
}
.new-design .overlay--open .overlay__backdrop,
.new-design .overlay--open .overlay__panel {
  pointer-events: auto;
}

.new-design .overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity var(--transition-normal);
}
/* Top-overlay не накрывает шапку. Backdrop прозрачный — «выцветание» делает сама
   страница через body.is-overlay-open (см. правило с opacity:0.03). */
.new-design .overlay--top .overlay__backdrop {
  top: var(--header-height);
  background: transparent;
}
.new-design .overlay--open .overlay__backdrop {
  opacity: 1;
}

.new-design .overlay__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  max-width: 100%;
  max-height: 100%;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  will-change: transform;
}

/* Позиции контейнера */
.new-design .overlay--right { justify-content: flex-end; }
.new-design .overlay--left { justify-content: flex-start; }
.new-design .overlay--bottom { align-items: flex-end; }
.new-design .overlay--top { align-items: flex-start; }
.new-design .overlay--center { justify-content: center; align-items: center; }

/* Размеры панели по оси */
.new-design .overlay--right .overlay__panel,
.new-design .overlay--left .overlay__panel {
  height: 100vh;
  height: 100dvh;
}
.new-design .overlay--bottom .overlay__panel,
.new-design .overlay--top .overlay__panel {
  width: 100%;
}

/* Стартовые трансформации (закрытое состояние) */
.new-design .overlay--right .overlay__panel { transform: translateX(100%); }
.new-design .overlay--left .overlay__panel { transform: translateX(-100%); }
.new-design .overlay--bottom .overlay__panel { transform: translateY(100%); }
/* TOP: окно под шапкой сайта. Ширина = ширине контейнера шапки (73.2rem/732px),
   центрировано — чтобы корзина продолжала линию шапки сверху. */
.new-design .overlay--top { align-items: stretch; justify-content: center; }
.new-design .overlay--top .overlay__panel {
  width: 73.2rem;
  max-width: 100%;
  height: calc(100vh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  margin-top: var(--header-height);
  /* Появление top-оверлеев — fade (как у меню каталога), без слайда сверху:
     единое поведение для корзины/избранного/авторизации/меню и плавный
     кросс-фейд при переключении разделов шапки наведением. */
  opacity: 0;
}
/* Мобайл: окно занимает весь экран */
@media (max-width: 47.99em) {
  .new-design .overlay--top .overlay__panel { width: 100%; }
}
.new-design .overlay--center .overlay__panel { transform: scale(0.98); opacity: 0; }

.new-design .overlay--open .overlay__panel {
  transform: none;
  opacity: 1;
}

/* Внутренняя раскладка: header / прокручиваемое body / footer */
.new-design .overlay__header { flex: 0 0 auto; }
.new-design .overlay__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.new-design .overlay__footer {
  flex: 0 0 auto;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Иконки оверлея — через CSS mask (как в проекте) */
.new-design .overlay__icon {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
/* Стрелка-«вправо» для CTA «Оформить заказ» / «В каталог».
   icon-arrow.svg в проекте смотрит ВНИЗ, поэтому используем icon-chevron-right.svg. */
.new-design .overlay__icon--arrow {
  -webkit-mask-image: url('/app/media/img/minified-svg/icon-chevron-right.svg');
  mask-image: url('/app/media/img/minified-svg/icon-chevron-right.svg');
}
/* Иконка корзины на кнопке «Оформить заказ» — та же, что в шапке. */
.new-design .overlay__icon--cart {
  -webkit-mask-image: url('/app/media/img/minified-svg/icon-cart.svg');
  mask-image: url('/app/media/img/minified-svg/icon-cart.svg');
}

/* ============================================================
   SEARCH PANEL — оверлей поиска (top-overlay, как корзина/каталог).
   Desktop: прозрачная панель, центрированная строка ввода
   под шапкой — страница за ней затемнена (body.is-overlay-open).
   Mobile: полноэкранно — «ПОИСК / ЗАКРЫТЬ ✕» + строка ввода.
   ============================================================ */
.new-design .search-panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  font-family: var(--font-secondary);
}

/* Мобильная шапка окна: «ПОИСК» слева, «ЗАКРЫТЬ ✕» справа */
.new-design .search-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.6rem;
}
.new-design .search-panel__bar-title,
.new-design .search-panel__close {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}
.new-design .search-panel__close {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.new-design .search-panel__close-x {
  width: 1.6rem;
  height: 1.6rem;
  background-color: currentColor;
  -webkit-mask: url('/app/media/img/minified-svg/close.svg') center / contain no-repeat;
          mask: url('/app/media/img/minified-svg/close.svg') center / contain no-repeat;
}

/* Строка ввода: иконка поиска + input + нижнее подчёркивание */
.new-design .search-panel__form {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 1.6rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.new-design .search-panel__icon {
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  background-color: var(--color-muted);
  -webkit-mask: url('/app/media/img/minified-svg/icon-search.svg') center / contain no-repeat;
          mask: url('/app/media/img/minified-svg/icon-search.svg') center / contain no-repeat;
}
.new-design .search-panel__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}
.new-design .search-panel__input::placeholder {
  color: var(--color-muted);
}
.new-design .search-panel__input:focus {
  outline: none;
}

/* Desktop: строка поиска по центру (прозрачность панели и ужатие по высоте —
   в общем правиле top-оверлеев выше). */
@media (min-width: 65em) {
  .new-design .search-panel {
    min-height: 0;
  }
  .new-design .search-panel__form {
    width: 69.8rem; /* 698px */
    max-width: 100%;
    margin: 2.6rem auto 0; /* отступ от шапки: y=86 (шапка 60) → 26px */
  }
}

/* ============================================================
   AUTH PANEL — окно авторизации при оформлении (гость).
   top-overlay, как корзина: затемнение страницы + центрированное окно.
   (телефон) / (код) / (ошибка).
   ============================================================ */
.new-design .auth-panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  /* Весь текст окна — TT Hoves Pro Trl Cnd (иначе наследуется HelveticaNeue
     из --font-primary). Дочерние правила могут переопределять размер/вес. */
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}
/* Верхняя строка окна: «Оформление заказа» / «Назад ✕».
   Паддинг 1.6rem — в одну линию с краями шапки. */
.new-design .auth-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6rem;            /* 60px — как навигейт в макете */
  padding: 0 1.6rem;       /* px-16 в линию с краями шапки */
  flex: 0 0 auto;
}
.new-design .auth-panel__bar-title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-primary);
}
.new-design .auth-panel__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-primary);
  transition: opacity var(--transition-fast);
}
.new-design .auth-panel__back:hover { opacity: 0.6; }
/* ✕ — две скрещённые линии (CSS, без инлайн-SVG), как в макете */
.new-design .auth-panel__back-x {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-block;
}
.new-design .auth-panel__back-x::before,
.new-design .auth-panel__back-x::after {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.75rem;
  width: 1rem;
  height: 1px;
  background: currentColor;
}
.new-design .auth-panel__back-x::before { transform: rotate(45deg); }
.new-design .auth-panel__back-x::after { transform: rotate(-45deg); }

.new-design .auth-panel__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  width: 33rem; /* 254px колонка */
  max-width: calc(100% - 3.2rem);  /* поля на мобильном */
  margin: 0 auto;
  padding: 2rem 0 4rem;
  text-align: center;
}
.new-design .auth-panel__prompt {
  font-size: var(--font-size-xs);
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0; /* интервалы держит gap родителя (40px) */
  width: 100%;
}

/* Группа полей: внутри 12px между блоками (номер→кнопка, код→кнопка).
   До промпта — 40px (gap родителя .auth-panel__content). */
.new-design .auth-panel__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem; /* 12px */
  width: 100%;
}

/* Ряд ввода телефона: «+7» + поле + курсор-линия. Номер слева, gap 8px,
   справа padding 40px до края блока. */
.new-design .auth-panel__phone {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;            /* 8px */
  width: 100%;
  padding-right: 4rem;    /* 40px */
  cursor: text;
}
.new-design .auth-panel__phone-prefix {
  font-family: var(--font-secondary); /* TT Hoves Pro Trl Cnd */
  font-weight: var(--font-weight-medium); /* 500 */
  font-size: 3.2rem;
  line-height: 1.1;
  letter-spacing: 0.16rem; /* 1.6px */
  color: var(--color-primary);
  flex: 0 0 auto;
}
/* Зеркало и инпут набраны одинаково — ширина поля равна ширине набранного номера,
   поэтому курсор-линия стоит вплотную к последней цифре и не «плавает». */
.new-design .auth-panel__phone-mirror,
.new-design .auth-panel__phone-input {
  font-family: var(--font-secondary); /* TT Hoves Pro Trl Cnd */
  font-weight: var(--font-weight-medium); /* 500 */
  font-size: 3.2rem;
  line-height: 1.1;
  letter-spacing: 0.16rem; /* 1.6px */
  color: var(--color-primary);
}
.new-design .auth-panel__phone-field {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
}
.new-design .auth-panel__phone-mirror {
  display: block;
  visibility: hidden;   /* нужен только как измеритель ширины */
  white-space: pre;
  min-width: 1px;
}
.new-design .auth-panel__phone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
  text-align: left;
  caret-color: transparent; /* нативную каретку прячем — рисуем свою линию ниже */
}
/* Курсор-линия 60px после номера — мигает только когда поле в фокусе */
.new-design .auth-panel__phone-cursor {
  flex: 0 0 auto;
  width: 1px;
  height: 6rem;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
}
.new-design .auth-panel__phone.is-focused .auth-panel__phone-cursor {
  animation: auth-caret-blink 1s step-end infinite;
}
@keyframes auth-caret-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Ввод кода: 4 ячейки + прозрачный input сверху (нативная цифровая клавиатура) */
.new-design .auth-panel__code {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.2rem;
  width: 100%;
}
.new-design .auth-panel__code-cell {
  width: 3.2rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-secondary); /* TT Hoves Pro Trl Cnd */
  font-weight: var(--font-weight-medium); /* 500 */
  font-size: 3.2rem;
  line-height: 1.1;
  letter-spacing: 0.16rem; /* 1.6px */
  color: var(--color-primary);
  border-bottom: var(--border-width-thin) solid var(--color-border);
  transition: border-color var(--transition-fast);
}
.new-design .auth-panel__code-cell.is-active { border-bottom-color: var(--color-primary); }
.new-design .auth-panel__code.is-error .auth-panel__code-cell {
  color: #db1d26;
  border-bottom-color: #db1d26;
}
.new-design .auth-panel__code-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  background: transparent;
  font-size: 1.6rem; /* >=16px чтобы iOS не зумил при фокусе */
  cursor: text;
}
.new-design .auth-panel__error {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: #db1d26;
  margin: 0;
  width: 100%;
}

/* Повторная отправка + таймер */
.new-design .auth-panel__resend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-muted);
  transition: opacity var(--transition-fast);
}
.new-design .auth-panel__resend:hover { opacity: 0.6; }
.new-design .auth-panel__resend.is-disabled,
.new-design .auth-panel__resend:disabled { cursor: default; pointer-events: none; }
.new-design .auth-panel__timer { color: var(--color-muted); flex: 0 0 auto; }

/* CTA «Получить код» / «Войти» — бежевая, как в корзине */
.new-design .auth-panel__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 4.6rem; /* 46px — высота кнопки */
  background: #e7e0dd; /* Button #E7E0DD */
  color: var(--color-primary);
  text-decoration: none;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  padding: 0.8rem 1.4rem 0.8rem 1.6rem; /* py-8 / pl-16 pr-14 */
  border: 0;
  cursor: pointer;
  transition: opacity var(--transition-fast), background-color var(--transition-fast);
}
.new-design .auth-panel__cta:hover { opacity: 0.85; }
.new-design .auth-panel__cta.is-disabled,
.new-design .auth-panel__cta:disabled {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-muted);
  cursor: default;
  pointer-events: none;
}
.new-design .auth-panel__cta .overlay__icon--arrow { color: currentColor; }

/* Окно авторизации заменяет сайт-меню своей строкой «Оформление заказа / Назад ✕»
   : прячем шапку, тянем окно от top:0 на весь экран, панель делаем
   прозрачной — сквозь неё видно затемнённую страницу (как в макете).
   Скоуп body.is-auth-open безопасен: при открытом auth другие top-overlay закрыты.
   ТОЛЬКО desktop: на мобиле шапка остаётся видимой, а иконка «аккаунт»
   превращается в ✕ — поэтому полноэкранный режим auth ограничен десктопом. */
@media (min-width: 65em) {
  body.is-auth-open .header-new { display: none; }
  body.is-auth-open .overlay--open .overlay__panel {
    margin-top: 0;
    height: 100vh;
    height: 100dvh;
    background: transparent;
  }
  body.is-auth-open .overlay--open .overlay__backdrop { top: 0; }
}

/* ============================================================
   CART PANEL — top-overlay (как каталог-меню), центрированный контент.
   Десктоп: контент max-width 1200px по центру, рекомендации 2 крупные карты.
   Мобайл: то же содержимое, fullscreen, 2×N карточек.
   ============================================================ */
/* Cart head в дизайне не используется: закрытие — кликом-вне/Esc через BaseOverlay,
   заголовок «КОРЗИНА» уже в шапке сайта (счётчик у иконки). */
.new-design .cart-panel__close {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-primary);
  display: inline-flex;
  padding: 0.4rem;
}

/* 2 колонки внутри окна 76rem (как контейнер шапки): товары 1fr | summary 26rem.
   Паддинг 1.6rem с краёв = 16px (как в макете). Левый край фото товара встаёт ровно
   под текстом «NEW» (его тоже притянули к 16px, см. .header-new__nav), а правый край
   summary — под правым краем иконок действий шапки. Обе линии = 16px. */
.new-design .cart-panel__layout {
  display: grid;
  grid-template-columns: 1fr 26rem;
  gap: 2.4rem;
  padding: var(--spacing-xl) 1.6rem;
  align-items: start;
  min-height: 100%;
}
@media (max-width: 47.99em) {
  .new-design .cart-panel__layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: var(--spacing-md);
    min-height: 100%;
  }
}
.new-design .cart-panel__items {
  display: flex;
  flex-direction: column;
}
/* Элемент товара по компоненту (Figma 3800-19233):
   фото 120×160, контент 223×160 (column, степпер прижат вниз), gap 8px между ними.
   Контент: вверху name+price → size+color, внизу степпер. */
.new-design .cart-panel__item {
  display: flex;
  gap: 0.8rem;
  padding: 1.2rem 0;
  align-items: stretch;
}
.new-design .cart-panel__item-image {
  display: block;
  width: 12rem;
  height: 16rem;
  flex: 0 0 auto;
  background: #f6f2f0;
  overflow: hidden;
}
.new-design .cart-panel__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Колонка контента товара: высота 160 строго (как у фото). Гэпы name/price/size/color
   фиксированные (4/8/2px), степпер прижат вниз через .cart-panel__qty margin-top:auto. */
.new-design .cart-panel__item-info {
  display: flex;
  flex-direction: column;
  height: 16rem;
  width: 15rem;
  min-width: 0;
  flex: 1 1 auto;
}
/* Верхний блок: name→price 4px, price→size+color 8px (Figma). */
.new-design .cart-panel__item-info > .cart-panel__item-name { margin-bottom: 0.4rem; }
.new-design .cart-panel__item-info > .cart-panel__item-price { margin-bottom: 0.8rem; }
.new-design .cart-panel__item-name {
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
  text-decoration: none;
}
.new-design .cart-panel__item-price {
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}
.new-design .cart-panel__item-price--old {
  color: var(--color-muted);
  text-decoration: line-through;
}
/* Size — 24×24 квадрат с центрированным текстом */
.new-design .cart-panel__item-size {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
/* Color — 24×24 рамка-ячейка + свотч 18×18 + название */
.new-design .cart-panel__item-color {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* Свотч цвета: 24×24 «рамка» — но реально это просто отступ 3px вокруг 18×18 цветной плашки.
   Цвет приходит inline-style :style="{ backgroundColor: colorHex }". Чтобы не делать
   контрастный заполненный квадрат 24×24, делаем border 3px того же фона (color-bg),
   итог — видимая 18×18 цветная плашка центрированно внутри 24×24 рамки. */
.new-design .cart-panel__swatch {
  width: 2.4rem;
  height: 2.4rem;
  box-sizing: border-box;
  border: 0.3rem solid var(--color-bg);
  outline: 0;
  display: inline-block;
  flex: 0 0 auto;
  background-clip: content-box;
}
.new-design .cart-panel__color-name {
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
}
/* Степпер «− x1 +» — 72px шириной по макету, у самого низа карточки */
.new-design .cart-panel__qty {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 7.2rem;
  font-size: 1.2rem;
  letter-spacing: 0.06rem;
  margin-top: auto; /* прижать степпер к низу колонки (как в макете) */
}
.new-design .cart-panel__qty-btn {
  background: none;
  border: 0;
  cursor: pointer;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-primary);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Лимит штук на позицию достигнут — «+» неактивен */
.new-design .cart-panel__qty-btn:disabled {
  color: var(--color-muted);
  cursor: not-allowed;
}
.new-design .cart-panel__qty-value {
  width: 4rem;
  text-align: center;
  font-size: 1.2rem;
}
.new-design .cart-panel__empty,
.new-design .fav-panel__empty {
  padding: var(--spacing-xxl) var(--spacing-xl);
  text-align: center;
  color: var(--color-muted);
  text-transform: uppercase;
  font-size: var(--font-size-sm);
}

/* Summary: правая колонка, sticky-вверх. Плотный список строк,
   поле «Промокод» с подчёркиванием, итого крупно, CTA бежевая со стрелкой вправо.
   На мобайле — становится низом одной колонки (sticky-bottom через flex). */
.new-design .cart-panel__summary {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--spacing-xl);
  /* Вся сводка набрана Body 1/2 (TT Hoves Pro Trl Cnd Medium), а не основным шрифтом. */
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-medium);
}
/* Группа строк «количество / стоимость / скидка» — Figma 2158:17683, gap 4px. */
.new-design .cart-panel__summary-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
@media (max-width: 47.99em) {
  .new-design .cart-panel__summary {
    position: static;
    margin-top: auto;
    padding-top: var(--spacing-xl);
  }
}
.new-design .cart-panel__summary-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  color: var(--color-muted);
  letter-spacing: var(--letter-spacing-wide);
}
/* Промокод — поле с подчёркиванием (Figma 3436:76073): от строк сводки 24px,
   от подписи до линии 10px. Линия принадлежит промокоду, не «Итого». */
.new-design .cart-panel__promo {
  margin: var(--spacing-xl) 0 0;
  display: flex;
  align-items: baseline;
  gap: var(--spacing-md);
  padding-bottom: 1rem; /* FIXME: Figma 10px -> токена нет (--spacing-xs 8px / --spacing-sm 12px) */
  border-bottom: var(--border-width-thin) solid var(--black-35);
}
.new-design .cart-panel__promo-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-muted);
  flex: 0 0 auto;
}
.new-design .cart-panel__promo-input {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  font: inherit;
  outline: none;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-primary);
  padding: 0;
}
/* «Итого» — Figma 2158:17695: TT Hoves Pro Condensed ExtraBold 14/0.7px,
   40px от линии промокода, 12px до кнопки. */
.new-design .cart-panel__summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4rem; /* FIXME: Figma 40px -> токена нет (--spacing-xxl 32px) */
  font-family: var(--font-price);
  font-size: 1.4rem; /* FIXME: Figma 14px -> токена нет (--font-size-sm 12px / --font-size-md 16px) */
  font-weight: 800; /* ExtraBold — как .order-summary__total на странице заказа */
  text-transform: uppercase;
  letter-spacing: 0.05em; /* FIXME: Figma 0.7px при 14px -> токена нет (--letter-spacing-wide 0.1em) */
  color: var(--color-primary);
}
/* CTA — Figma 1306:9720: высота 52, паддинги 8/14/8/16, подпись слева (растягивается),
   иконка корзины справа. Стрелки в макете нет. */
.new-design .cart-panel__cta {
  margin-top: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: 1rem; /* FIXME: Figma 10px -> токена нет (--spacing-xs 8px / --spacing-sm 12px) */
  min-height: 5.2rem;
  background: #ece5df;
  color: var(--color-primary);
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-lg);
}
.new-design .cart-panel__cta .overlay__icon--cart {
  color: var(--color-primary);
  flex: 0 0 auto;
}
/* Подпись кнопки занимает всю свободную ширину — иконка прижата к правому краю. */
.new-design .cart-panel__cta-label {
  flex: 1 1 auto;
  line-height: 1.3;
}
/* Плавающая CTA корзины — только мобилка (Figma 3800-19207): дублирует инлайновую
   кнопку из сводки, прижата к низу; прячется, когда инлайновая во вьюпорте
   (JS inlineCtaVisible) — тогда кнопка «ложится» на своё место. По образцу
   .checkout__mobile-cta-wrap. Desktop — скрыта (сводка со стикером всегда видна). */
.new-design .cart-panel__mobile-cta-wrap { display: none; }
@media (max-width: 47.99em) {
  .new-design .cart-panel__mobile-cta-wrap {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    padding: var(--spacing-md);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-bg));
    pointer-events: none;
  }
  .new-design .cart-panel__mobile-cta-wrap .cart-panel__cta {
    margin-top: 0;
    width: 100%;
    pointer-events: auto;
  }
  .new-design .cart-panel__mobile-cta-wrap.is-hidden { display: none; }

    .new-design .header-new__logo {
        position: static;
        transform: none;
        order: 3;
        flex: 0 0 3.6rem; /* 36px */
        display: flex;
        justify-content: center;
    }

    .new-design .header-new__logo-compact {
        width: 3.6rem;
        height: 3.6rem;
    }

    .new-design .header-new__action {
        font-size: 1.1rem;
    }

    .new-design .header-new__icon {
        width: 2.4rem;
        height: 2.4rem;
    }
}

/* Мобайл: панель-drawer на всю ширину */
@media (max-width: 47.99em) {
  .new-design .overlay--right .overlay__panel,
  .new-design .overlay--left .overlay__panel {
    width: 100% !important;
  }
}

/* ============================================================
   CART EMPTY STATE + «ПОДОБРАЛИ ДЛЯ ВАС» (пустая корзина)
   ============================================================ */
/* Пустое состояние — центрированный блок 228×133 на отступе 168/120 от краёв окна. */
.new-design .cart-panel__empty,
.new-design .fav-panel__empty {
  display: flex;
  flex-direction: column;
  /* По макету содержимое выровнено по левому краю колонки 228, а не по центру */
  align-items: flex-start;
  text-align: left;
  width: 22.8rem;
  /* padding из общего правила выше обнуляем: он добавлял по 40px сверху и снизу,
     из-за чего отступ от шапки был 158 вместо 120, а до «подобрали для вас» — 160. */
  padding: 0;
  margin: 12rem auto;
  /* Без этого блок наследовал HelveticaNeueLT из глобальной типографики,
     хотя весь макет корзины набран TT Hoves Pro Trl Cnd. */
  font-family: var(--font-secondary);
}
/* Заголовок «ВАША КОРЗИНА ПУСТА» — 14px / lh 1.2 / tracking 1.4, чёрный */
.new-design .cart-panel__empty-title,
.new-design .fav-panel__empty-title {
  font-size: 1.4rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.1em; /* 1.4px при 14px */
  color: var(--color-primary);
}
/* Подпись 228×26 в две строки — Body 3: 12px / lh 1.1 / tracking 0.6, чёрная,
   в обычном регистре (uppercase из общего правила выше здесь снимаем). */
.new-design .cart-panel__empty-text,
.new-design .fav-panel__empty-text {
  margin-top: 1.4rem;
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.1;
  letter-spacing: 0.05em; /* 0.6px при 12px */
  text-transform: none;
  color: var(--color-primary);
}
/* Кнопка «В КАТАЛОГ» — 228×52 */
/* Кнопка «В КАТАЛОГ» — 228×52, фон Button #E7E0DD, текст 11/1.3/tracking 1.1,
   паддинги 8/14/8/16 и иконка 16 справа (как у остальных кнопок макета). */
.new-design .cart-panel__empty-cta,
.new-design .fav-panel__empty-cta {
  margin: 2.4rem 0 0;
  width: 22.8rem;
  height: 5.2rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #E7E0DD;
  color: var(--color-primary);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: 0.11em; /* 1.1px при 11px */
  padding: 0.8rem 1.4rem 0.8rem 1.6rem;
}
.new-design .cart-panel__empty-cta .overlay__icon--arrow,
.new-design .fav-panel__empty-cta .overlay__icon--arrow { color: var(--color-primary); }

/* «ПОДОБРАЛИ ДЛЯ ВАС» — крупные карточки каталога, 2 в ряд.
   Карточка переиспользуется из //shared/_product-card — собственных стилей карт не пишем,
   только обёртку секции и грид. */
.new-design .cart-recs {
  margin: 0;
  padding: 0;
}
/* «Подобрали для вас» — Body 2: 11 / lh 1.3 / tracking 1.1, чёрный */
.new-design .cart-recs__title {
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--color-primary);
  padding: 0 1.2rem;
  margin-bottom: var(--spacing-sm);
}
.new-design .cart-recs__grid.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

/* Карточки приходят из каталожного рендера с его шириной ряда и вылезали за
   колонку панели (600 против 366). В гриде ширину задаёт колонка. */
.new-design .cart-recs__grid .products-grid__item {
  width: 100%;
  min-width: 0;
}

/* ============================================================
   FAVORITES PANEL — top-overlay избранного.
   Структура та же, что у корзины, но без summary — только грид карточек.
   ============================================================ */
/* Грид во всю ширину страницы, а не узкая колонка как у корзины. */
#fav-app .overlay--top .overlay__panel { width: 100%; }
.new-design .fav-panel {
  padding: var(--spacing-xl) 1.2rem 0;
  min-height: 100%;
}
/* В избранном фото карточек без бежевой подложки — панель оверлея прозрачная,
   подложка .products-grid__image смотрелась бы лишним непрозрачным слоем.
   Скоуп только .fav-panel__grid: каталог/главная сохраняют бежевую подложку. */
.new-design .fav-panel__grid .products-grid__image {
  background: transparent;
}
/* Фиксированная ширина карточки + центрирование: при малом числе товаров
   карточки встают по центру, а не прижимаются влево. */
.new-design .fav-panel__grid.products-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8rem 0; /* вертикальный ритм между рядами; по горизонтали — вплотную */
}
.new-design .fav-panel__grid.products-grid > .products-grid__item {
  width: 25%; /* 4 колонки */
  box-sizing: border-box;
}
/* Сердечко видно всегда: товар уже сохранён, клик снимает из избранного. */
.new-design .fav-panel__grid .products-grid__fav-inline {
  opacity: 1;
}
@media (max-width: 47.99em) {
  .new-design .fav-panel {
    padding: var(--spacing-xl) 0 0;
  }
  .new-design .fav-panel__grid.products-grid {
    gap: 4rem 0;
  }
  .new-design .fav-panel__grid.products-grid > .products-grid__item {
    width: 50%; /* 2 колонки */
  }
}
.new-design .fav-panel__loader {
  padding: 4rem;
  text-align: center;
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}
/* Пустое состояние избранного — то же, что у корзины */
.new-design .fav-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 22.8rem;
  margin: 16.8rem auto 12rem;
}
.new-design .fav-panel__empty-title {
  font-size: var(--font-size-sm);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}
.new-design .fav-panel__empty-text {
  margin-top: 1.4rem;
  font-size: var(--font-size-xs);
  line-height: 1.4;
  color: var(--color-muted);
}
.new-design .fav-panel__empty-cta {
  margin: 2.4rem 0 0;
  width: 22.8rem;
  height: 5.2rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ece5df;
  color: var(--color-primary);
  text-decoration: none;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  padding: 0 2rem;
}
.new-design .fav-panel__empty-cta .overlay__icon--arrow { color: var(--color-primary); }

/* ============================================================
   CHECKOUT — оформление заказа, отдельная страница /order
   (Figma 3799-10099 — форма адреса, 3657-22558 — адресная книга).
   Разметка: views/order/index.php, логика: OrderCheckout.js.
   ============================================================ */
[v-cloak] { display: none !important; }

/* На странице оформления шапки сайта и каталожного фильтр-бара нет —
   только своя верхняя строка «назад к корзине / нужна помощь?» */
body.is-checkout-page .header-new { display: none; }
body.is-checkout-page .header-new__gap { display: none; }
body.is-checkout-page .filter-bar { display: none; }

.new-design .checkout-page {
  background: var(--color-bg);
  min-height: 100vh;
}

/* Верхняя строка 40px: «← Назад к корзине … Нужна помощь?» */
.new-design .checkout-page__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  padding: 0 1.2rem;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.11rem;
}
.new-design .checkout-page__back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--color-primary); font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.new-design .checkout-page__back::before {
  /* стрелка «влево» — CSS-шеврон, без ассета */
  content: ''; width: 0.7rem; height: 0.7rem; flex: 0 0 auto;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  margin-right: 0.2rem;
}
.new-design .checkout-page__help { color: var(--color-muted); text-decoration: none; }

/* Контент: две колонки по центру — форма 431px | сводка 207px, gap 60px */
.new-design .checkout-page__content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 6rem;
  margin-top: 2.4rem;
  padding-bottom: 2.4rem;
}
.new-design .checkout__form {
  width: 43.1rem;
  display: flex;
  flex-direction: column;
  gap: 6rem; /* между шагами */
}
/* Мобильная колонка (Figma 3657-38196 / 3702-4519): px 12, топбар→контент 40px,
   шаги 60px, шаги→«товары» 64px, все поля в столбик, запас снизу под CTA */
@media (max-width: 47.99em) {
  .new-design .checkout-page__content {
    flex-direction: column; align-items: stretch;
    gap: 6.4rem;
    margin-top: 4rem;
    padding: 0 1.2rem 10rem;
  }
  .new-design .checkout__form { width: 100%; gap: 6rem; }
  .new-design .checkout__step { gap: 1.8rem; }
  .new-design .checkout__step-head { gap: 1.2rem; }
  .new-design .checkout__field-row { flex-direction: column; gap: 1.8rem; }
}

/* Шаги: заголовок (номер 24×24 + название) → 24px → содержимое */
.new-design .checkout__step { display: flex; flex-direction: column; gap: 2.4rem; }
.new-design .checkout__step-head { display: flex; align-items: center; gap: 1.4rem; }
.new-design .checkout__step-num {
  width: 2.4rem; height: 2.4rem; flex: 0 0 auto;
  /* номер шага — залитый чёрный квадрат с белой цифрой (не кружок) */
  background: var(--color-primary); color: #fff; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-secondary); font-size: 1.4rem;
  font-weight: var(--font-weight-medium); letter-spacing: 0.14rem;
}
.new-design .checkout__step-title {
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.11rem;
}
/* Заблокированный шаг: серый номер и название, тело скрыто (v-show) */
.new-design .checkout__step.is-locked { pointer-events: none; }
.new-design .checkout__step.is-locked .checkout__step-num { background: var(--black-15); }
.new-design .checkout__step.is-locked .checkout__step-title { color: var(--black-15); }

.new-design .checkout__step-body { display: flex; flex-direction: column; gap: 3.2rem; }
.new-design .checkout__group { display: flex; flex-direction: column; gap: 1.8rem; }

/* Поля с плавающим лейблом-плейсхолдером (Input из макета: 39px, линия снизу).
   Пустое поле: лейбл 11px muted над светлой линией; заполненное/фокус:
   лейбл уезжает вверх (8px), линия становится чёрной. */
.new-design .checkout__field { position: relative; }
.new-design .checkout__field-row { display: flex; gap: 2.4rem; }
.new-design .checkout__field-row .checkout__field { flex: 1 1 0; min-width: 0; }
.new-design .checkout__input {
  width: 100%; height: 3.9rem;
  padding: 1.4rem 0 0.9rem;
  border: 0; border-bottom: 1px solid var(--black-15);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); letter-spacing: 0.11rem;
  text-transform: uppercase; color: var(--color-primary);
  outline: none;
}
.new-design .checkout__input:focus,
.new-design .checkout__field.is-filled .checkout__input { border-bottom-color: var(--color-primary); }
.new-design .checkout__label {
  position: absolute; left: 0; bottom: 1.2rem;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.2;
  color: var(--color-muted);
  text-transform: uppercase; letter-spacing: 0.11rem; pointer-events: none;
  transition: bottom var(--transition-fast), font-size var(--transition-fast);
}
/* Float управляется детерминированно: фокус ИЛИ класс is-filled, который Vue
   вешает по фактическому значению поля (:placeholder-shown ненадёжен). */
.new-design .checkout__input:focus + .checkout__label,
.new-design .checkout__field.is-filled .checkout__label {
  bottom: 3rem; font-size: 0.8rem; letter-spacing: 0.08rem;
}

/* Ошибка поля: красная нижняя граница + красный текст под полем */
.new-design .checkout__field.is-error .checkout__input { border-bottom-color: #db1d26; }
.new-design .checkout__field-error {
  margin-top: 0.8rem;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  color: #db1d26;
}

/* Dadata-подсказки */
.new-design .checkout__field--suggest { position: relative; }
.new-design .checkout__suggest {
  position: absolute; left: 0; right: 0; top: 100%;
  list-style: none; margin: 0; padding: 0; z-index: 10;
  background: var(--color-bg); border: 1px solid var(--color-border);
  max-height: 24rem; overflow-y: auto;
}
.new-design .checkout__suggest li {
  padding: 0.8rem 1rem; font-family: var(--font-secondary); font-size: 1.2rem; cursor: pointer;
}
.new-design .checkout__suggest li:hover { background: var(--color-bg-beige); }

/* Способы доставки: радио 12px + лейбл, цена — muted, строки через 8px */
.new-design .checkout__delivery { display: flex; flex-direction: column; gap: 0.8rem; }
.new-design .checkout__radio {
  position: relative; display: flex; align-items: center; gap: 0.8rem;
  cursor: pointer;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.11rem;
}
.new-design .checkout__radio input { position: absolute; opacity: 0; pointer-events: none; }
.new-design .checkout__radio-mark {
  width: 1.2rem; height: 1.2rem; flex: 0 0 auto; position: relative;
  border: 1px solid var(--black-35); border-radius: 50%;
}
.new-design .checkout__radio.is-active .checkout__radio-mark { border-color: var(--color-primary); }
.new-design .checkout__radio.is-active .checkout__radio-mark::after {
  content: ''; position: absolute; inset: 0.3rem; border-radius: 50%; background: var(--color-primary);
}
.new-design .checkout__radio-label { flex: 0 1 auto; }
.new-design .checkout__radio-note { color: var(--color-muted); }
.new-design .checkout__radio-price { color: var(--color-muted); }
.new-design .checkout__radio.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* Адресная книга (Figma 3657-22558): карточки с радио справа.
   Выбранная — белая с чёрной рамкой, остальные — плашка Button 40%. */
.new-design .address-book { display: flex; flex-direction: column; gap: 1.8rem; }
.new-design .address-book__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.new-design .address-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.2rem;
  background: color-mix(in srgb, var(--color-button) 40%, transparent);
  border: 1px solid transparent; cursor: pointer;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.11rem;
}
.new-design .address-card.is-selected { background: transparent; border-color: var(--color-primary); }
.new-design .address-card__radio {
  width: 1.2rem; height: 1.2rem; flex: 0 0 auto; position: relative;
  border: 1px solid var(--black-35); border-radius: 50%;
}
.new-design .address-card.is-selected .address-card__radio { border-color: var(--color-primary); }
.new-design .address-card.is-selected .address-card__radio::after {
  content: ''; position: absolute; inset: 0.3rem; border-radius: 50%; background: var(--color-primary);
}
.new-design .address-card__text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Кнопки под карточками адресов: «Добавить адрес» (чёрная) + «Все адреса»
   (рамочная) — в ряд, gap 8px, равной ширины (Figma 3848:43086) */
.new-design .address-book__actions { display: flex; align-items: stretch; gap: 0.8rem; }

/* Кнопка «Добавить адрес» — чёрная, с плюсом справа (Figma 3848:35482) */
.new-design .checkout__add-address {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex: 1 1 0; max-width: 21.2rem; height: 4.6rem; padding: 0 1.4rem 0 1.6rem;
  background: var(--color-primary); color: #fff; border: 0; cursor: pointer;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.11rem;
}

/* Кнопка «Все адреса» — с чёрной рамкой, открывает правую панель адресов */
.new-design .checkout__all-addresses {
  flex: 1 1 0; max-width: 21.2rem; height: 4.6rem; padding: 0 1.6rem;
  display: flex; align-items: center;
  background: transparent; border: 1px solid var(--color-primary);
  color: var(--color-primary); cursor: pointer;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.11rem;
}
.new-design .checkout__add-address-icon {
  width: 1.6rem; height: 1.6rem; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: url('/app/media/img/minified-svg/plus.svg') no-repeat center / 0.8rem;
          mask: url('/app/media/img/minified-svg/plus.svg') no-repeat center / 0.8rem;
}
.new-design .address-book__btn,
.new-design .checkout__minor {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-primary); text-decoration: underline;
}
.new-design .checkout__address-save { display: flex; gap: 1.6rem; }
.new-design .checkout__minor:disabled { color: var(--color-muted); cursor: not-allowed; text-decoration: none; }
.new-design .checkout__minor--ghost { color: var(--color-muted); }
.new-design .checkout__minor--danger { color: #db1d26; }

/* Шаг 3 — способ оплаты / бонусы / подарочная карта (Figma 3806-23898 /
   3848-44137). Радио с иконками справа, бонусы раскрываются кликом,
   подарочная карта — переключатель 28×16 + поле + чёрная кнопка. */
.new-design .checkout__step-body--payment { gap: 4rem; }
.new-design .checkout__pay-extras { display: flex; flex-direction: column; gap: 2.4rem; }

.new-design .checkout__radio--pay .checkout__radio-label { flex: 1 1 auto; }
.new-design .checkout__pay-icon {
  flex: 0 0 auto; width: 2.8rem; height: 1.6rem;
  background-color: currentColor; color: var(--color-primary);
}
.new-design .checkout__pay-icon.checkout__pay-icon--split {
    width: 1.7rem;
    height: 1.36rem;
    margin-right: 0.5rem;
}
.new-design .checkout__pay-icon--card {
  -webkit-mask: url('/app/media/img/minified-svg/pay-card.svg') no-repeat center / contain;
          mask: url('/app/media/img/minified-svg/pay-card.svg') no-repeat center / contain;
}
.new-design .checkout__pay-icon--split {
  -webkit-mask: url('/app/media/img/minified-svg/dolyame.svg') no-repeat center / contain;
          mask: url('/app/media/img/minified-svg/dolyame.svg') no-repeat center / contain;
}

/* Бонусы: свернуто — muted заголовок и серый бейдж; раскрыто — чёрные */
.new-design .checkout__bonus { display: flex; flex-direction: column; gap: 1.2rem; }
.new-design .checkout__bonus-head {
  display: flex; align-items: center; gap: 0.6rem; width: fit-content;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.11rem; color: var(--color-muted);
}
.new-design .checkout__bonus.is-open .checkout__bonus-head { color: var(--color-primary); }
.new-design .checkout__bonus-badge {
  background: var(--black-35); color: #fff;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3; letter-spacing: 0.11rem;
  padding: 0.2rem 0.6rem; text-align: center;
}
.new-design .checkout__bonus.is-open .checkout__bonus-badge { background: var(--color-primary); }

/* Бонусы недоступны (оплата «Долями» или нулевой баланс) */
.new-design .checkout__bonus.is-disabled .checkout__bonus-head { color: var(--black-15); cursor: default; }
.new-design .checkout__bonus.is-disabled .checkout__bonus-badge { background: var(--black-15); }
.new-design .checkout__bonus-note {
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  letter-spacing: 0.11rem; text-transform: uppercase; color: var(--color-muted);
}

/* Крестик очистки в поле (бонусы / номер подарочной карты) */
.new-design .checkout__field--clearable .checkout__input { padding-right: 2.4rem; }
.new-design .checkout__clear {
  position: absolute; right: 0; bottom: 1.1rem;
  width: 1.6rem; height: 1.6rem; padding: 0; border: 0;
  background: none; cursor: pointer; color: var(--color-primary);
}
.new-design .checkout__clear::before,
.new-design .checkout__clear::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 1rem; height: 1px; background: currentColor;
}
.new-design .checkout__clear::before { transform: translate(-50%, -50%) rotate(45deg); }
.new-design .checkout__clear::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Подарочная карта: заголовок + переключатель 28×16 (Figma 3657:36410) */
.new-design .checkout__giftcard { display: flex; flex-direction: column; gap: 1.6rem; }
.new-design .checkout__giftcard-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
}
.new-design .checkout__giftcard-title {
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.11rem;
}
.new-design .checkout__switch {
  flex: 0 0 auto; width: 2.8rem; height: 1.6rem; padding: 0; border: 0;
  border-radius: 10rem; background: var(--black-15);
  position: relative; cursor: pointer;
  transition: background var(--transition-normal);
}
.new-design .checkout__switch::after {
  content: ''; position: absolute; top: 0.2rem; left: 0.2rem;
  width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff;
  transition: transform var(--transition-normal);
}
.new-design .checkout__switch.is-on { background: var(--color-primary); }
.new-design .checkout__switch.is-on::after { transform: translateX(1.2rem); }

.new-design .checkout__giftcard-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1rem 1.2rem; border: 1px solid var(--color-primary);
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
}
.new-design .checkout__giftcard-chip button { background: none; border: 0; cursor: pointer; font-size: 1.4rem; }
.new-design .checkout__add-address:disabled { background: var(--black-15); cursor: not-allowed; }

/* Правая колонка — сводка «товары» (207px, без подложки) */
.new-design .order-summary {
  width: 20.7rem; flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 1.4rem;
}
@media (min-width: 48em) {
  .new-design .order-summary { position: sticky; top: 1.6rem; }
}
@media (max-width: 47.99em) {
  .new-design .order-summary { width: 100%; }
  /* Миниатюры крупнее (63.8×88.6, gap 6) */
  .new-design .order-summary__thumbs { gap: 0.6rem; }
  .new-design .order-summary__thumb { width: 6.38rem; height: 8.86rem; }
  /* Итого: лейбл — Body 2 (11px), сумма — Price 12px ExtraBold */
  .new-design .order-summary__total {
    font-family: var(--font-secondary); font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium); line-height: 1.3; letter-spacing: 0.11rem;
  }
  .new-design .order-summary__total span:last-child {
    font-family: var(--font-price); font-size: var(--font-size-sm);
    font-weight: 800; line-height: normal; letter-spacing: 0.06rem;
  }
}
.new-design .order-summary__title {
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.11rem;
}
.new-design .order-summary__thumbs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.new-design .order-summary__thumb {
  width: 3.8rem; height: 5.3rem; overflow: hidden;
  background: var(--color-bg-beige); display: block;
}
.new-design .order-summary__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* flex: 0 0 auto — миниатюры не сжимаются, при нехватке ширины переносятся
   (раньше flex-элементом был сам .order-summary__thumb с заданными размерами) */
.new-design .order-summary__thumb-wrap { position: relative; flex: 0 0 auto; }
/* Общая карточка в подборках и коллаже «на модели»: блок с фото гасит клики
   (pointer-events:none), чтобы пустые места уводили на ссылку-оверлей, — но
   управляющим элементам каталожной карточки клики нужны. */
.new-design .product-list-card .products-grid__arrow,
.new-design .product-list-card .products-grid__colors,
.new-design .pdp__look-card .products-grid__colors {
  pointer-events: auto;
}
/* Свотчи в этих карточках стоят у нижнего края фото, как в каталоге */
.new-design .product-list-card .products-grid__colors,
.new-design .pdp__look-card .products-grid__colors {
  bottom: 1.2rem;
  left: 1.2rem;
}

/* Крестик удаления позиции — правый верхний угол миниатюры, появляется по наведению */
.new-design .order-summary__thumb-remove {
  position: absolute; top: 0; right: 0;
  width: 1.6rem; height: 1.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none;
  cursor: pointer; opacity: 0; transition: opacity 0.15s ease;
}
.new-design .order-summary__thumb-remove::before {
  content: ''; width: 0.8rem; height: 0.8rem;
  background-color: var(--color-primary);
  -webkit-mask: url('/app/media/img/minified-svg/close.svg') center / contain no-repeat;
          mask: url('/app/media/img/minified-svg/close.svg') center / contain no-repeat;
}
.new-design .order-summary__thumb-wrap:hover .order-summary__thumb-remove,
.new-design .order-summary__thumb-remove:focus-visible { opacity: 1; }
.new-design .order-summary__thumb-remove:disabled { cursor: default; opacity: 0.5; }
/* Тач-устройства (hover нет) — крестик виден всегда */
@media (hover: none) {
  .new-design .order-summary__thumb-remove { opacity: 1; }
}
.new-design .order-summary__rows { display: flex; flex-direction: column; gap: 0.4rem; }
.new-design .order-summary__row {
  display: flex; justify-content: space-between; gap: 0.8rem;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.11rem; color: var(--color-primary);
}
.new-design .order-summary__row span:first-child { color: var(--color-muted); }
/* rows → промокод 24px (14 гэпа колонки + 10) */
.new-design .order-summary__promo-block { margin-top: 1rem; position: relative; }
.new-design .order-summary__promo-btn {
  position: absolute; right: 0; bottom: 1.2rem; z-index: 1;
}
.new-design .order-summary__promo-chip {
  display: flex; justify-content: space-between; width: 100%;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.11rem;
}
.new-design .order-summary__promo-chip button { background: none; border: 0; cursor: pointer; }
.new-design .order-summary__promo-error { color: #db1d26; font-size: 1rem; margin-top: 0.6rem; }
/* промокод → итог 32px (14 гэпа + 18) */
.new-design .order-summary__footer {
  margin-top: 1.8rem;
  display: flex; flex-direction: column; gap: 1.2rem;
}
.new-design .order-summary__total {
  display: flex; justify-content: space-between;
  font-family: var(--font-price); font-size: 1.4rem;
  font-weight: 800; /* ExtraBold */
  line-height: normal; text-transform: uppercase; letter-spacing: 0.07rem;
}
.new-design .order-summary__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 5.2rem; padding: 0 1.4rem 0 1.6rem; border: 0; cursor: pointer;
  background: var(--color-button); color: var(--color-primary);
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.11rem;
}
.new-design .order-summary__cta.is-disabled { background: var(--black-5); color: var(--color-muted); cursor: not-allowed; }
.new-design .order-summary__cta-icon {
  width: 1.6rem; height: 1.6rem; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: url('/app/media/img/minified-svg/icon-cart.svg') no-repeat center / contain;
  mask: url('/app/media/img/minified-svg/icon-cart.svg') no-repeat center / contain;
}
.new-design .order-summary__agree { display: flex; gap: 0.6rem; font-size: 1rem; color: var(--color-muted); line-height: 1.3; }
.new-design .order-summary__agree input { margin-top: 0.2rem; flex: 0 0 auto; }
.new-design .order-summary__agree a { text-decoration: underline; }

/* Мобильная sticky-кнопка «Оформить» снизу.
   На десктопе скрыта (основной CTA — в правой сводке). На мобилке прячем CTA из
   сводки и показываем эту, залипшую к низу вьюпорта поверх скролла. */
/* Плавающая CTA снизу (Figma 3762:22244): фикс-подложка с градиентом в белый,
   поверх контента; кнопка в блоке «товары» при этом остаётся (как в макете). */
.new-design .checkout__mobile-cta-wrap { display: none; }
@media (max-width: 47.99em) {
  .new-design .checkout__mobile-cta-wrap {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    padding: 1.2rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-bg));
    pointer-events: none;
  }
  .new-design .checkout__mobile-cta-wrap .order-summary__cta {
    width: 100%;
    pointer-events: auto;
  }
  /* Доскроллили до сводки — плавающая CTA отлипает (инлайновая кнопка уже видна) */
  .new-design .checkout__mobile-cta-wrap.is-hidden { display: none; }
}

/* Оверлей «Все адреса» — правая панель 549px (Figma 3848-43035):
   шапка «все адреса / закрыть», список 261px по центру, кнопка «Выбрать адрес» */
.new-design .addresses-overlay {
  height: 100%;
  padding: 1.2rem;
  display: flex; flex-direction: column; gap: 2.4rem;
}
.new-design .addresses-overlay__head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.11rem;
}
.new-design .addresses-overlay__close {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--color-primary); font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.new-design .addresses-overlay__close-x { width: 1.6rem; height: 1.6rem; position: relative; }
.new-design .addresses-overlay__close-x::before,
.new-design .addresses-overlay__close-x::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 1rem; height: 1px; background: currentColor;
}
.new-design .addresses-overlay__close-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.new-design .addresses-overlay__close-x::after { transform: translate(-50%, -50%) rotate(-45deg); }

.new-design .addresses-overlay__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4rem;
}
.new-design .addresses-overlay__list {
  list-style: none; margin: 0; padding: 0;
  width: 26.1rem; display: flex; flex-direction: column;
}
.new-design .addresses-overlay__item {
  display: flex; align-items: flex-start; gap: 0.8rem;
  padding: 1.6rem 0; cursor: pointer;
  border-bottom: 1px solid var(--black-15);
}
.new-design .addresses-overlay__item:first-child { padding-top: 0; }
.new-design .addresses-overlay__item:last-child { border-bottom: 0; padding-bottom: 0; }
.new-design .addresses-overlay__radio {
  width: 1.2rem; height: 1.2rem; flex: 0 0 auto; position: relative; margin-top: 0.1rem;
  border: 1px solid var(--black-35); border-radius: 50%;
}
.new-design .addresses-overlay__item.is-selected .addresses-overlay__radio { border-color: var(--color-primary); }
.new-design .addresses-overlay__item.is-selected .addresses-overlay__radio::after {
  content: ''; position: absolute; inset: 0.3rem; border-radius: 50%; background: var(--color-primary);
}
.new-design .addresses-overlay__info { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.new-design .addresses-overlay__street {
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.11rem; color: var(--color-primary);
}
.new-design .addresses-overlay__city {
  font-family: var(--font-secondary); font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium); line-height: 1.1;
  letter-spacing: 0.06rem; color: var(--color-muted);
}
.new-design .addresses-overlay__actions { display: flex; gap: 1.2rem; margin-top: 0.6rem; }
.new-design .addresses-overlay__cta {
  width: 26.1rem; height: 4.6rem; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 1.4rem 0 1.6rem; border: 0; cursor: pointer;
  background: var(--color-button); color: var(--color-primary);
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.11rem;
}
.new-design .addresses-overlay__cta-icon {
  width: 1.6rem; height: 1.6rem; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: url('/app/media/img/minified-svg/plus.svg') no-repeat center / 0.8rem;
          mask: url('/app/media/img/minified-svg/plus.svg') no-repeat center / 0.8rem;
}

/* ============================================================
   СТРАНИЦА ОШИБКИ
   404: Figma 3980:3786 (desktop) / 4018:721 (mobile) — сообщение + подборка
        «новинки коллекции».
   503 и прочие коды: 3981:7539 / 4020:9825 — только сообщение с «обновить».
   ============================================================ */
.new-design .error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50rem;    /* Figma: блок сообщения занимает 500px под шапкой */
  padding: 0 1.2rem;
}
/* 503/500: сообщение по центру свободного экрана (шапка 60 + gap 40) */
.new-design .error-page--service {
  min-height: calc(100vh - 10rem);
}
.new-design .error-page__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);   /* 24 */
  width: 34.3rem;           /* Figma 343 */
  max-width: 100%;
  text-align: center;
}
.new-design .error-page__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);   /* 12 */
  width: 100%;
}
.new-design .error-page__code {
  font-family: var(--font-price); /* TT Hoves Pro Condensed ExtraBold */
  font-weight: 800;
  font-size: 12.4rem;
  line-height: 11.4rem;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.95;            /* по макету */
}
.new-design .error-page__note {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
}
/* Кнопка — тот же primary-компонент, что «Оформить заказ»/«В каталог» (Figma 1306:9720),
   иконка — стрелка вправо. */
.new-design .error-page__cta {
  display: flex;
  align-items: center;
  gap: 1rem;                /* FIXME: Figma 10px -> токена нет (--spacing-xs 8 / --spacing-sm 12) */
  width: 16.3rem;
  min-height: 4.6rem;
  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-lg);
  background: var(--color-button);
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
}
.new-design .error-page__cta > span {
  flex: 1 1 auto;
  text-align: left;
}
/* Стрелка вправо: исходный ассет смотрит вниз, поворачиваем (как в макете). */
.new-design .error-page__cta-icon,
.new-design .product-list-link-icon {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  background-color: currentColor;
  -webkit-mask: url('/app/media/img/minified-svg/icon-arrow-tail.svg') no-repeat center / 0.8rem 1rem;
          mask: url('/app/media/img/minified-svg/icon-arrow-tail.svg') no-repeat center / 0.8rem 1rem;
  transform: rotate(-90deg);
}

/* Шапка секции товаров: заголовок слева, ссылка справа (Figma 3981:7421) */
.new-design .product-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
}
.new-design .product-list-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);   /* 8 */
  margin-bottom: 2.4rem;    /* та же базовая линия, что у заголовка */
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
}
/* Подборка на 404 идёт сразу за сообщением — вертикальный ритм задаёт сама секция */
.new-design .product-list--error {
  margin: 0 0 8rem;
  padding: 0 1.2rem;
}

@media (max-width: 47.99em) {
  .new-design .error-page { min-height: 48rem; }
  .new-design .error-page--service { min-height: calc(100vh - 4rem); }
  .new-design .error-page__body { width: 100%; }
  .new-design .error-page__code { font-size: 5.2rem; line-height: 4.5rem; }
  .new-design .error-page__note { max-width: 26.1rem; margin: 0 auto; } /* Figma 261 */
  .new-design .error-page__cta { width: 17.1rem; }
  /* Отступ по краям переезжает с заголовка на шапку секции — ссылка тоже отступает */
  .new-design .product-list-head { padding: 0 1.2rem; }
  .new-design .product-list-head .product-list-title { padding: 0; }
  .new-design .product-list--error { margin-bottom: 8rem; padding: 0; }
}

/* ============================================================
   КНОПКИ — единые состояния по дизайн-системе.
   PRIMARY (CTA «Оформить заказ / В каталог / Выбрать адрес / Получить код / В корзину»):
     • default  — beige #E7E0DD, текст и иконка чёрные;
     • hover / active / focus — фон #000, текст и иконка белые;
     • disabled — beige #E7E0DD, opacity .3 (без серого фона).
   Иконки-маски наследуют цвет текста (currentColor) → меняются вместе с ним.
   Блок в конце файла — намеренно перебивает разрозненные старые состояния. */

/* База: единый beige (нормализуем #ece5df → #e7e0dd) + переход цвета */
.new-design .cart-panel__cta,
.new-design .cart-panel__empty-cta,
.new-design .fav-panel__empty-cta,
.new-design .error-page__cta {
  background: #e7e0dd;
  transition: background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

/* Hover / active / focus → чёрный фон, белый текст */
.new-design .auth-panel__cta:not(:disabled):not(.is-disabled):hover,
.new-design .auth-panel__cta:not(:disabled):not(.is-disabled):focus-visible,
.new-design .cart-panel__cta:hover,
.new-design .cart-panel__cta:focus-visible,
.new-design .cart-panel__empty-cta:hover,
.new-design .cart-panel__empty-cta:focus-visible,
.new-design .fav-panel__empty-cta:hover,
.new-design .fav-panel__empty-cta:focus-visible,
.new-design .error-page__cta:hover,
.new-design .error-page__cta:focus-visible,
.new-design .order-summary__cta:not(.is-disabled):hover,
.new-design .order-summary__cta:not(.is-disabled):focus-visible,
.new-design .addresses-overlay__cta:hover,
.new-design .addresses-overlay__cta:focus-visible {
  background: #000;
  color: #fff;
  opacity: 1;
}

/* Иконки CTA следуют цвету текста (на hover белеют) */
.new-design .auth-panel__cta .overlay__icon--arrow,
.new-design .cart-panel__cta .overlay__icon--cart,
.new-design .cart-panel__empty-cta .overlay__icon--arrow,
.new-design .fav-panel__empty-cta .overlay__icon--arrow,
.new-design .order-summary__cta .order-summary__cta-icon {
  color: currentColor;
}

/* Disabled — beige + opacity .3, единообразно */
.new-design .pdp__cta.pdp__cta--disabled,
.new-design .auth-panel__cta:disabled,
.new-design .auth-panel__cta.is-disabled,
.new-design .order-summary__cta:disabled,
.new-design .order-summary__cta.is-disabled,
.new-design .addresses-overlay__cta:disabled,
.new-design .addresses-overlay__cta.is-disabled {
  background: #e7e0dd;
  color: var(--color-primary);
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}

/* TERTIARY — кнопки фильтра «применить» / «сбросить все»:
   default «применить» — чёрный/белый; «сброс» — фон rgba(0,0,0,.05)/чёрный текст;
   hover — чёрный/белый (а не прежний dim opacity .8). */
.filters-modal__btn--apply:hover,
.filters-modal__btn--apply:focus-visible,
.filters-modal__btn--reset:hover,
.filters-modal__btn--reset:focus-visible {
  background: #000;
  color: #fff;
  opacity: 1;
}

/* ============================================================
   СДЭК Пункт выдачи (shipping='4'): кнопка «Выбрать адрес» / карточка
   выбранного пункта (шаг 1) + оверлей «Выбрать пункт» (Яндекс-карта + список).
   Токены и паттерны — общие с чекаутом/адресной книгой. */
.new-design .checkout__pickpoint { display: flex; flex-direction: column; gap: 1.2rem; }

/* «Выбрать адрес» (Figma 3762:12825): плашка Button 40%, p 12, плюс справа */
.new-design .checkout__choose-address {
  width: 100%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.2rem;
  background: color-mix(in srgb, var(--color-button) 40%, transparent);
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.11rem; color: var(--color-primary);
  transition: background-color var(--transition-fast);
}
.new-design .checkout__choose-address:not(:disabled):hover,
.new-design .checkout__choose-address:not(:disabled):focus-visible {
  background: color-mix(in srgb, var(--color-button) 70%, transparent);
}
.new-design .checkout__choose-address:disabled { opacity: 0.3; pointer-events: none; cursor: default; }
.new-design .checkout__choose-icon {
  flex: 0 0 auto; width: 1.6rem; height: 1.6rem; background-color: currentColor;
  -webkit-mask: url('/app/media/img/minified-svg/plus.svg') no-repeat center / 0.8rem;
          mask: url('/app/media/img/minified-svg/plus.svg') no-repeat center / 0.8rem;
}

/* Карточка выбранного пункта (Figma 3657:22486): плашка Button 40%,
   p 12, адрес + карандаш справа */
.new-design .checkout__pickpoint-card {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.2rem; border: 0;
  background: color-mix(in srgb, var(--color-button) 40%, transparent);
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.11rem;
}
.new-design .checkout__pickpoint-address { flex: 1 1 auto; }
.new-design .checkout__pickpoint-edit {
  margin-left: auto; width: 1.6rem; height: 1.6rem; flex: 0 0 auto;
  border: 0; padding: 0; background-color: currentColor; cursor: pointer; color: var(--color-primary);
  /* Значок в макете (3657:22488) повёрнут на 180° — без поворота карандаш «вверх тормашками» */
  transform: rotate(180deg);
  -webkit-mask: url('/app/media/img/minified-svg/pencil.svg') no-repeat center / contain;
          mask: url('/app/media/img/minified-svg/pencil.svg') no-repeat center / contain;
}

/* Самовывоз из магазина (Figma 3657:22708): адрес и часы (обе строки чёрные,
   gap 2px) + «найти на карте →», ниже 12px — два фото 240px с gap 8px.
   Отступ от радио-списка до блока — 52px (32 гэпа body + 20). */
.new-design .checkout__pickup { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 2rem; }
.new-design .checkout__pickup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.6rem; }
.new-design .checkout__pickup-info { display: flex; flex-direction: column; gap: 0.2rem; }
.new-design .checkout__pickup-addr,
.new-design .checkout__pickup-hours {
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.11rem; color: var(--color-primary);
}
.new-design .checkout__pickup-map {
  display: inline-flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; white-space: nowrap;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.11rem;
  color: var(--color-primary); text-decoration: none;
}
.new-design .checkout__pickup-map:hover { text-decoration: underline; }
.new-design .checkout__pickup-map-icon {
  width: 1.3rem; height: 1.3rem; flex: 0 0 auto; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.new-design .checkout__pickup-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.new-design .checkout__pickup-photos img {
  width: 100%; height: 24rem; object-fit: cover; display: block;
  background: var(--black-5);
}
@media (max-width: 47.99em) {
  /* Мобилка — свайп-карусель: снап по фото, соседнее подглядывает (82%),
     системный скроллбар скрыт */
  .new-design .checkout__pickup-photos {
    display: flex; gap: 0.8rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .new-design .checkout__pickup-photos::-webkit-scrollbar { display: none; }
  .new-design .checkout__pickup-photos img { flex: 0 0 82%; height: 20rem; scroll-snap-align: start; }
}

/* Оверлей «Выбрать пункт»: полноэкранная панель —
   карта (слева, растягивается) + панель со списком (справа ~44rem).
   Класс .pickpoints-shell вешаем на корень base-overlay, т.к. Vue при
   монтировании заменяет mount-#id и таргетить по нему уже нельзя. */
.new-design .pickpoints-shell .overlay__panel {
  width: 100vw; height: 100vh; height: 100dvh; max-width: 100vw;
}
/* Десктоп: карта (слева, на всю высоту) + правая колонка «header (сверху) / панель». */
.new-design .pickpoints {
  display: grid; height: 100%; min-height: 0;
  grid-template-columns: minmax(0, 1fr) 44rem;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "map head" "map panel";
}
.new-design .pickpoints__map { grid-area: map; min-width: 0; min-height: 0; background: #f6f2f0; }
.new-design .pickpoints__panel {
  grid-area: panel; min-height: 0; display: flex; flex-direction: column;
  align-items: center;
  padding-top: 4.8rem; /* шапка(48) → контент: суммарно 96 от верха (Figma gap 60) */
  background: var(--color-bg);
}
.new-design .pickpoints__head {
  grid-area: head; display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem; background: var(--color-bg);
}
.new-design .pickpoints__title,
.new-design .pickpoints__close {
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.11rem;
}
.new-design .pickpoints__close {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 0; background: none; cursor: pointer; color: var(--color-primary);
}
.new-design .pickpoints__close-icon { width: 1.6rem; height: 1.6rem; position: relative; }
.new-design .pickpoints__close-icon::before,
.new-design .pickpoints__close-icon::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 1rem; height: 1px; background: currentColor;
}
.new-design .pickpoints__close-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.new-design .pickpoints__close-icon::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Поиск города: колонка 228, лупа + значение + крестик, линия снизу */
.new-design .pickpoints__search { flex: 0 0 auto; position: relative; width: 22.8rem; margin: 0 0 6rem; }
.new-design .pickpoints__search-icon {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1.6rem; height: 1.6rem; background: var(--color-primary); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat;
}
.new-design .pickpoints__search-input {
  width: 100%; height: 3.9rem; border: 0; border-bottom: 1px solid var(--black-15);
  background: none; padding: 0 2rem;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase; letter-spacing: 0.11rem;
}
.new-design .pickpoints__search.is-filled .pickpoints__search-input,
.new-design .pickpoints__search-input:focus { border-bottom-color: var(--color-primary); outline: none; }
.new-design .pickpoints__search-input::placeholder { color: var(--color-muted); }
.new-design .pickpoints__search-clear {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; color: var(--color-muted); font-size: 1.3rem;
}
.new-design .pickpoints__suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  list-style: none; margin: 0; padding: 0; background: var(--color-bg);
  border: 1px solid var(--color-border); max-height: 24rem; overflow-y: auto;
}
.new-design .pickpoints__suggest li {
  padding: 1rem 1.6rem; cursor: pointer;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
}
.new-design .pickpoints__suggest li:hover { background: #f6f2f0; }

/* Список пунктов (Figma 3657:23155): колонка 228, радио 12px + адрес
   UPPERCASE + город Body 3, разделители black/15 */
.new-design .pickpoints__list {
  list-style: none; margin: 0; padding: 0 0 2.4rem;
  width: 22.8rem; flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.new-design .pickpoints__item { border-bottom: 1px solid var(--black-15); }
.new-design .pickpoints__item:last-of-type { border-bottom: 0; }
.new-design .pickpoints__item-head { display: flex; align-items: flex-start; gap: 0.8rem; padding: 1.6rem 0; cursor: pointer; }
.new-design .pickpoints__item:first-child .pickpoints__item-head { padding-top: 0; }
.new-design .pickpoints__radio {
  width: 1.2rem; height: 1.2rem; flex: 0 0 auto; margin-top: 0.1rem; position: relative;
  border: 1px solid var(--black-35); border-radius: 50%;
}
.new-design .pickpoints__item.is-active .pickpoints__radio { border-color: var(--color-primary); }
.new-design .pickpoints__item.is-active .pickpoints__radio::after {
  content: ''; position: absolute; inset: 0.3rem; border-radius: 50%; background: var(--color-primary);
}
.new-design .pickpoints__item-text { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.new-design .pickpoints__item-name {
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.11rem;
}
.new-design .pickpoints__item-city {
  font-family: var(--font-secondary); font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium); line-height: 1.1;
  letter-spacing: 0.06rem; color: var(--color-muted);
}

/* Инлайн-детали выбранного пункта (режим/телефон/доставка + CTA), px 19 */
.new-design .pickpoints__details {
  padding: 0.8rem 0 2.4rem 1.9rem; display: flex; flex-direction: column;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium); line-height: 1.3; letter-spacing: 0.11rem;
}
.new-design .pickpoints__d-label {
  margin-top: 1.4rem; color: var(--color-muted);
  text-transform: uppercase;
}
.new-design .pickpoints__d-label:first-child { margin-top: 0; }
.new-design .pickpoints__d-value { margin-top: 0.6rem; color: var(--color-primary); text-transform: uppercase; }
.new-design .pickpoints__cta {
  margin-top: 2.4rem; height: 4rem; width: 100%; border: 0; cursor: pointer;
  background: var(--color-primary); color: #fff; text-align: center;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase; letter-spacing: 0.11rem;
  transition: opacity var(--transition-fast);
}
.new-design .pickpoints__cta:hover,
.new-design .pickpoints__cta:focus-visible { opacity: 0.85; }
.new-design .pickpoints__empty {
  padding: 2rem 0; color: var(--color-muted);
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
}

/* Стрелка «назад» и поиск-строка карты — только мобилка (на десктопе скрыты) */
.new-design .pickpoints__back,
.new-design .pickpoints__mapsearch { display: none; }

/* Мобилка — два полноэкранных окна оверлея (Figma 3702-5075 карта ⇄ 3703-24744 список).
   Окно карты: карта на весь экран + поиск-строка снизу. Тап по поиску открывает
   окно списка ПОВЕРХ карты — белая панель вплотную к шапке, без скруглений/тени/
   грабера (иначе виден шов перехода). Стрелка «назад» в шапке возвращает на карту. */
@media (max-width: 47.99em) {
  .new-design .pickpoints { display: block; position: relative; height: 100%; }

  .new-design .pickpoints__head {
    position: absolute; top: 0; left: 0; right: 0; z-index: 5;
    height: 4rem; box-sizing: border-box; background: var(--color-bg);
  }
  .new-design .pickpoints__title { margin-right: auto; } /* назад+заголовок слева, «Закрыть» справа */

  /* Стрелка назад (шеврон влево бордерами — как в «назад к корзине») */
  .new-design .pickpoints__back {
    display: inline-flex; position: relative; width: 1.6rem; height: 1.6rem;
    margin-right: 0.4rem; padding: 0; border: 0; background: none; cursor: pointer;
  }
  .new-design .pickpoints__back::before {
    content: ''; position: absolute; left: 0.5rem; top: 50%;
    width: 0.8rem; height: 0.8rem;
    border-left: 1px solid var(--color-primary); border-bottom: 1px solid var(--color-primary);
    transform: translateY(-50%) rotate(45deg);
  }

  .new-design .pickpoints__map { position: absolute; left: 0; right: 0; top: 4rem; bottom: 0; z-index: 1; }

  /* Окно карты: плоская белая плашка снизу с полем поиска 261 (Figma 3703:23681) */
  .new-design .pickpoints__mapsearch {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    display: flex; justify-content: center;
    padding: 1.2rem 0 2.4rem; border: 0; cursor: pointer; background: var(--color-bg);
  }
  .new-design .pickpoints__mapsearch-field {
    display: flex; align-items: center; gap: 0.4rem;
    width: 26.1rem; height: 3.9rem; border-bottom: 1px solid var(--black-15);
    font-family: var(--font-secondary); font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium); text-transform: uppercase;
    letter-spacing: 0.11rem; color: var(--color-muted);
  }
  .new-design .pickpoints__mapsearch-field .pickpoints__search-icon { position: static; transform: none; }
  .new-design .pickpoints__mapsearch-field.is-filled { color: var(--color-primary); border-bottom-color: var(--color-primary); }
  .new-design .pickpoints.is-expanded .pickpoints__mapsearch { display: none; }

  /* Окно списка: белая панель поверх карты, вплотную к шапке (без шва) */
  .new-design .pickpoints__panel {
    position: absolute; left: 0; right: 0; top: 4rem; bottom: 0; z-index: 4;
    max-width: 100%; padding-top: 1.2rem; background: var(--color-bg);
  }
  .new-design .pickpoints:not(.is-expanded) .pickpoints__panel { display: none; }

  .new-design .pickpoints__search { width: 26.1rem; }
  .new-design .pickpoints__list { width: 26.1rem; }
}

/* ============================================================
   Страница статуса заказа — оплачен/не оплачен */
.new-design .order-status { padding: 4.8rem 0 10rem; }
.new-design .order-status__wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.2rem; }

/* Состояние + действия */
.new-design .order-status__state { margin-bottom: 4rem; }
.new-design .order-status__title {
  margin: 0 0 1.2rem; font-weight: 500;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  text-transform: uppercase; letter-spacing: var(--letter-spacing-wide);
}
.new-design .order-status__text {
  margin: 0 0 2.4rem; line-height: 1.1; letter-spacing: 0.06rem;
  font-family: var(--font-secondary); font-size: var(--font-size-sm);
}
.new-design .order-status__actions { display: flex; gap: 1.2rem; }
.new-design .order-status__btn {
  flex: 1 1 0; height: 4.6rem; display: inline-flex; align-items: center; justify-content: space-between;
  padding: 0 1.6rem; text-decoration: none; cursor: pointer;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  text-transform: uppercase; letter-spacing: var(--letter-spacing-wide);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.new-design .order-status__btn--primary { background: #e7e0dd; color: var(--color-primary); }
.new-design .order-status__btn--primary:hover { background: #000; color: #fff; }
.new-design .order-status__btn--ghost { background: none; border: 1px solid var(--color-primary); color: var(--color-primary); }
.new-design .order-status__btn--ghost:hover { background: #000; color: #fff; border-color: #000; }
.new-design .order-status__btn-icon { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; background: currentColor; }
.new-design .order-status__btn-icon--arrow {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.new-design .order-status__btn-icon--user {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Товары (Figma 3799:18450): фото 130×180 слева + контент; название+цена (gap 4),
   ниже через gap 18 — размер и цвет (gap 2); «x1» прижат к низу карточки */
.new-design .order-status__items { display: flex; flex-direction: column; gap: 1.6rem; margin-bottom: 4rem; }
.new-design .order-status__item { display: flex; gap: 1.2rem; }
.new-design .order-status__item-photo { flex: 0 0 13rem; aspect-ratio: 13 / 18; background: #f6f2f0; display: block; }
.new-design .order-status__item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.new-design .order-status__item-info {
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  text-transform: uppercase; letter-spacing: var(--letter-spacing-wide);
}
.new-design .order-status__item-top { display: flex; flex-direction: column; gap: 1.8rem; }
.new-design .order-status__item-head { display: flex; flex-direction: column; gap: 0.4rem; }
.new-design .order-status__item-attrs { display: flex; flex-direction: column; gap: 0.2rem; }
.new-design .order-status__item-name { color: var(--color-muted); }
.new-design .order-status__item-color { display: inline-flex; align-items: center; gap: 0.4rem; }
.new-design .order-status__item-swatch { width: 1.8rem; height: 1.8rem; flex: 0 0 auto; border: 1px solid var(--color-border); display: inline-block; }
.new-design .order-status__item-qty { font-size: var(--font-size-sm); letter-spacing: 0.06rem; text-transform: none; }

/* Детали (gap 12) */
.new-design .order-status__details { display: flex; flex-direction: column; gap: 1.2rem; margin: 0 0 4rem; }
.new-design .order-status__detail {
  display: flex; flex-direction: column; gap: 0.4rem;
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  text-transform: uppercase; letter-spacing: var(--letter-spacing-wide);
}
.new-design .order-status__detail-label { color: var(--color-muted); }

/* Итоги (строки gap 8, «Итого» отделён gap 32) */
.new-design .order-status__totals { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0; }

/* Кнопка «Отменить заказ» — в самом низу, под итогами */
.new-design .order-status__cancel { margin-top: 4rem; }
.new-design .order-status__cancel .order-status__btn { width: 100%; }
.new-design .order-status__cancel .order-status__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.new-design .order-status__total-row {
  display: flex; justify-content: space-between; color: var(--color-muted);
  font-family: var(--font-secondary); font-size: var(--font-size-xs);
  text-transform: uppercase; letter-spacing: var(--letter-spacing-wide);
}
.new-design .order-status__total-row--grand {
  margin-top: 3.2rem; color: var(--color-primary);
  font-family: var(--font-price); font-weight: 800;
  font-size: 1.4rem; /* FIXME: Figma 14px — точного токена нет (sm 12 / md 16) */
}

/* Мобилка: действия — sticky снизу */
@media (max-width: 47.99em) {
  .new-design .order-status { padding-bottom: 10rem; }
  .new-design .order-status__item-photo { flex: 0 0 12rem; }
  /* Плавающая CTA снизу (Figma 3762:22183): градиент в белый, кнопка h52 */
  .new-design .order-status__actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 1.2rem; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-bg));
  }
  .new-design .order-status__actions .order-status__btn { height: 5.2rem; }
}

/* ============================================================
   Общий центрирующий враппер для «контентных» страниц (личный кабинет,
   статичные страницы и т.п.): узкая колонка по центру. Не привязан к
   .new-design — работает и на старой вёрстке. Каталожную плашку
   «Фильтр/Сортировка» убирает $this->params['hideFilterBar'] = true во вьюхе. */
.content-page {
  max-width: 52rem;
  margin: 0 auto;
  padding: 4.8rem 1.6rem 8rem;
}
@media screen and (max-width: 767px) {
  .content-page { padding: 3.2rem 1.6rem 6rem; }
}

/* Тёплый оверлей поверх фото товара. Был только у карточки каталога и плиток
   PDP-галереи, из-за чего «похожие товары», «на модели» и карточки в попапе
   лукбука выглядели холоднее остальных. Теперь общий для всех карточек.
   z-index 1 — ниже «+», лейблов и счётчика (у них 2 и 12). */
.new-design .products-grid__image::after,
.new-design .product-list-card-image::after,
.new-design .pdp__look-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 244, 230, 0.3);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}

.products-grid__row {
    /*background-color: #f0eeeb;*/
}

.new-design .products-grid__info {
    background-color: white;
 }

.dolyame-wrapper {
    flex-direction: column;
    /*justify-content: center;*/
    width: 40rem !important;
    margin: 0 auto !important;
}

@media screen and (max-width: 767px) {
    .dolyame-wrapper {
        width: 32rem !important;
    }
}

img:focus-visible {
    outline: none;
    shadow: none;
}