/* Start:/local/templates/villa_decora/assets/css/styles.css?1779082367183096*/
/* ===== Базовые переменные и типографика (Figma VD node-id=1-39021, Geist) ===== */
:root {
  /* Библиотека цветов */
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --muted-line: #d7dce6;
  --muted-background: #f2f5fa;
  --foreground-alfa-50: rgba(24, 24, 24, 0.5);
  --base-background: #ffffff;
  --base-foreground: #181818;
  --muted-foreground: #71717a;
  --base-input: #e4e4e7;
  --base-primary-foreground: #fafafa;
  --base-secondary: #f4f4f5;
  --destructive: #dc2626;
  --destructive-foreground: #fef2f2;
  --base-muted: #000000;

  --base-primary: var(--base-foreground);
  --footer-bg: #eef0f4;
  --font-sans: "Geist", system-ui, -apple-system, sans-serif;
  --container-max: 1440px;
  --gap: 24px;
  --radius-md: 6px;

  /* Типографика: H1–H4, P1, P2, Label, Note (letter-spacing -1% = -0.01em) */
  --typo-h1-size: 40px;
  --typo-h1-height: 40px;
  --typo-h1-spacing: -0.01em;
  --typo-h1-weight: 700;
  --typo-h2-size: 32px;
  --typo-h2-height: 40px;
  --typo-h2-spacing: -0.01em;
  --typo-h2-weight: 700;
  --typo-h3-size: 24px;
  --typo-h3-height: 32px;
  --typo-h3-spacing: 0;
  --typo-h3-weight: 700;
  --typo-h4-size: 20px;
  --typo-h4-height: 24px;
  --typo-h4-spacing: -0.01em;
  --typo-h4-weight: 700;
  --typo-p1-size: 18px;
  --typo-p1-height: 24px;
  --typo-p1-spacing: -0.01em;
  --typo-p1-weight: 400;
  --typo-p2-size: 16px;
  --typo-p2-height: 24px;
  --typo-p2-spacing: -0.01em;
  --typo-label-size: 14px;
  --typo-label-height: 20px;
  --typo-label-spacing: -0.01em;
  --typo-label-spacing-r: 0;
  --typo-note-size: 12px;
  --typo-note-height: 16px;
  --typo-note-spacing: 0;
  --typo-note-weight: 400;
}

/* Классы типографики */
.typo-h1 { font-size: var(--typo-h1-size); line-height: var(--typo-h1-height); letter-spacing: var(--typo-h1-spacing); font-weight: var(--typo-h1-weight); }
.typo-h2 { font-size: var(--typo-h2-size); line-height: var(--typo-h2-height); letter-spacing: var(--typo-h2-spacing); font-weight: var(--typo-h2-weight); }
.typo-h3 { font-size: var(--typo-h3-size); line-height: var(--typo-h3-height); letter-spacing: var(--typo-h3-spacing); font-weight: var(--typo-h3-weight); }
.typo-h4 { font-size: var(--typo-h4-size); line-height: var(--typo-h4-height); letter-spacing: var(--typo-h4-spacing); font-weight: var(--typo-h4-weight); }
.typo-p1 { font-size: var(--typo-p1-size); line-height: var(--typo-p1-height); letter-spacing: var(--typo-p1-spacing); font-weight: var(--typo-p1-weight); }
.typo-p2-sb { font-size: var(--typo-p2-size); line-height: var(--typo-p2-height); letter-spacing: var(--typo-p2-spacing); font-weight: 600; }
.typo-p2-m { font-size: var(--typo-p2-size); line-height: var(--typo-p2-height); letter-spacing: var(--typo-p2-spacing); font-weight: 500; }
.typo-p2-r { font-size: var(--typo-p2-size); line-height: var(--typo-p2-height); letter-spacing: var(--typo-p2-spacing); font-weight: 400; }
.typo-label-xb { font-size: var(--typo-label-size); line-height: var(--typo-label-height); letter-spacing: var(--typo-label-spacing); font-weight: 800; }
.typo-label-sb { font-size: var(--typo-label-size); line-height: var(--typo-label-height); letter-spacing: var(--typo-label-spacing); font-weight: 600; }
.typo-label-m { font-size: var(--typo-label-size); line-height: var(--typo-label-height); letter-spacing: var(--typo-label-spacing); font-weight: 500; }
.typo-label-r { font-size: var(--typo-label-size); line-height: var(--typo-label-height); letter-spacing: var(--typo-label-spacing-r); font-weight: 400; }
.typo-note-r { font-size: var(--typo-note-size); line-height: var(--typo-note-height); letter-spacing: var(--typo-note-spacing); font-weight: var(--typo-note-weight); }

/* ===== Сброс и база ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
  min-width: 375px;
  scroll-padding-top: 94px;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding-top: 88px; /* высота фиксированного хедера */
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.25;
  color: var(--base-foreground);
  background: var(--base-background);
}

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

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

/* ===== Контейнер страницы ===== */
.page__container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
}

/* ===== Кнопки ===== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: var(--typo-label-size);
  font-weight: 500;
  line-height: var(--typo-label-height);
  letter-spacing: var(--typo-label-spacing);
  border-radius: var(--radius-md);
  transition: opacity 0.2s;
}

.button:hover {
  opacity: 0.85;
}

.button_theme_outline {
  height: 40px;
  background: var(--base-background);
  color: var(--base-foreground);
  border: 1px solid var(--base-input);
  transition: background-color 0.2s;
}

.button_theme_outline:hover {
  background: var(--base-secondary);
  opacity: 1;
}

.button_theme_ghost {
  width: 40px;
  height: 40px;
  padding: 2px;
  color: var(--base-foreground);
}

.button_shape_pill {
  border-radius: 9999px;
}

.button_theme_primary {
  height: 36px;
  background: var(--base-primary);
  color: var(--base-primary-foreground);
}

.button_theme_secondary {
  height: 36px;
  background: var(--base-secondary);
  color: var(--base-foreground);
}

.button_theme_destructive {
  height: 36px;
  background: var(--destructive);
  color: var(--destructive-foreground);
}

.button_theme_destructive:hover {
  opacity: 0.9;
}

.button_size_lg {
  height: 56px;
  padding-left: 32px;
  padding-right: 32px;
  font-size: var(--typo-label-size);
}

/* ===== Header (фиксирован на всех страницах) ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 105; /* выше catalog-overlay (100), дропдауны не перекрываются меню каталога */
  background: var(--base-background);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  padding-top: 24px;
  padding-bottom: 24px;
}

.header__left {
  flex-shrink: 0;
}

.header__logo img {
  width: 174px;
  height: 32px;
}

.header__right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header__right_mobile {
  display: none;
}

.header__phone {
  margin: 0;
  font-size: var(--typo-p2-size);
  line-height: 1;
  letter-spacing: var(--typo-p2-spacing);
  color: var(--base-foreground);
  text-decoration: none;
}

.header__phone:hover {
  color: var(--base-foreground);
  text-decoration: underline;
}

.header__divider {
  width: 1px;
  height: 20px;
  background: var(--base-input);
}

.header__info-wrap {
  position: relative;
  padding-bottom: 4px;
}

.header__info-btn,
.header__cart {
  width: 40px;
  height: 40px;
  padding: 2px;
}

.header__info-btn img,
.header__cart img {
  width: 24px;
  height: 24px;
}

.header__info-btn {
  border-radius: 50%;
}

.header__cart {
  border-radius: 50%;
}

.header__info-btn:hover,
.header__info-wrap:hover .header__info-btn,
.header__cart:hover {
  background: var(--base-secondary);
  opacity: 1;
}

.header__info-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  width: max-content;
  min-width: 140px;
  padding: 4px;
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  display: none;
  flex-direction: column;
  z-index: 10;
}

/* Невидимый «мостик» в просвете: область наведения дропдауна включает 8px над ним */
.header__info-dropdown::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 8px;
}

.header__info-wrap:hover .header__info-dropdown {
  display: flex;
}

.header__info-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 8px;
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-height);
  letter-spacing: var(--typo-label-spacing);
  color: var(--base-foreground);
  border-radius: 2px;
  transition: background-color 0.2s;
}

.header__info-dropdown-item:hover {
  background: var(--base-secondary);
}

.header__info-dropdown-item img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

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

.header__cart-badge {
  position: absolute;
  top: 2px;
  left: 22px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: var(--base-primary-foreground);
  background: var(--base-primary);
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header__user-wrap {
  position: relative;
  padding-bottom: 4px;
}

.header__user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  margin-top: 4px;
  width: max-content;
  min-width: 140px;
  padding: 4px;
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  display: none;
  flex-direction: column;
  z-index: 10;
}

.header__user-dropdown::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 8px;
}

.header__user-wrap:hover .header__user-dropdown {
  display: flex;
}

.header__user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-height);
  letter-spacing: var(--typo-label-spacing);
  color: var(--base-foreground);
  border-radius: 2px;
  transition: background-color 0.2s;
  text-decoration: none;
}

.header__user-dropdown-item:hover {
  background: var(--base-secondary);
}

.header__user-dropdown-item img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.header__user-dropdown-separator {
  height: 1px;
  margin: 4px 0;
  background: var(--base-input);
}

.header__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: var(--typo-p2-size);
  font-weight: 600;
  line-height: var(--typo-label-height);
  letter-spacing: var(--typo-p2-spacing);
  color: var(--base-foreground);
  background: var(--muted-line);
  border-radius: 99px;
  transition: background-color 0.2s;
}

/* Неавторизованный пользователь: иконка вместо аватара, подсказка при ховере */
.header__user-wrap_guest .header__user-dropdown {
  display: none !important;
}

.header__user-wrap_guest .header__user {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--muted-line);
  border-radius: 99px;
  transition: background-color 0.2s;
}

.header__user-wrap_guest .header__user:hover {
  background: var(--slate-300);
}

.header__user-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.header__user-tooltip {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  margin-top: 4px;
  padding: 6px 12px;
  background: var(--base-primary);
  color: var(--base-primary-foreground);
  font-size: var(--typo-note-size);
  font-weight: 400;
  line-height: var(--typo-note-height);
  letter-spacing: 0;
  white-space: nowrap;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 20;
}

.header__user-wrap_guest:hover .header__user-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Бургер (три линии) — показывается только на мобилке */
.header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
}

.header__burger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--base-foreground);
  border-radius: 1px;
}

/* ===== Nav — десктоп (≥1024px), рабочая версия, макет Figma 29-38352 ===== */
.nav {
  position: relative;
  z-index: 10;
  background: var(--base-background);
}

.nav__inner {
  position: relative;
}

/* Контейнер 1: левая часть (меню+подменю) и правая (кнопка), flex без gap */
.nav__main {
  display: flex;
  align-items: stretch;
}

/* Контейнер 2: меню и подменю, flex-колонка, скролл в каждой строке отдельно */
.nav__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Контейнер 3: кнопка справа, высота 100%, по центру по вертикали */
.nav__aside {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Строка меню: фиксированная высота 52px */
.nav__row {
  display: flex;
  align-items: center;
  height: 52px;
  flex-shrink: 0;
  min-width: 0;
}

/* Верхняя строка: градиент и линия — снаружи скролла (не скроллятся) */
.nav__row_top {
  position: relative;
}

/* Скролл-контейнер внутри строки — скроллится только контент */
.nav__row_scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav__row_top .nav__row_scroll::-webkit-scrollbar,
.nav__row_bottom .nav__row_scroll::-webkit-scrollbar {
  display: none;
}

/* Линия — поверх градиента (z-index: 2), в градиент уходят только пункты меню */
.nav__row_top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--base-foreground);
  z-index: 2;
}

.nav__row_top::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 45%);
  pointer-events: none;
  z-index: 1;
}

.nav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  width: max-content;
  padding-right: 50px; /* место для скролла — последний пункт полностью виден */
}

.nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav__link {
  display: block;
  padding: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.14px;
  color: var(--base-foreground);
  white-space: nowrap;
}

.nav__link:hover {
  text-decoration: underline;
}

.nav__item_current .nav__link {
  font-weight: 900;
}

/* Подкатегория: нижняя строка меню видна сразу (как в category.html для «Террасы») */
.page_catalog_subsection .nav__row_bottom {
  visibility: visible;
}

/* Стрелка: абсолютна внутри nav__inner, по центру линии (top: 42px по Figma 29-38352) */
.nav__arrow {
  display: none;
  position: absolute;
  top: 42px;
  left: 0;
  width: 24px;
  height: 24px;
  z-index: 10;
  background: var(--base-background);
  padding: 2px;
}

.nav_has-sub .nav__arrow {
  display: block;
}

/* Кнопка «Весь каталог» */
.nav__catalog-btn {
  height: 36px;
  padding: 8px 16px;
  gap: 8px;
  border: 1px solid var(--base-input);
  border-radius: 9999px;
}

.nav__catalog-btn img {
  width: 16px;
  height: 16px;
}

/* Нижняя строка: подкатегории, градиент снаружи скролла */
.nav__row_bottom {
  visibility: hidden;
  position: relative;
}

.nav__row_bottom::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 45%);
  pointer-events: none;
  z-index: 1;
}

.nav.nav_has-sub .nav__row_bottom {
  visibility: visible;
}

.nav__sub-panel {
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
}

.nav__sub-wrap {
  display: flex;
  flex-wrap: nowrap;
  padding-right: 50px; /* место для скролла — последний пункт полностью виден */
  width: max-content;
}

.nav__sub-panel.nav__sub-panel_active {
  display: flex;
  flex-shrink: 0;
  width: max-content;
}

.nav__sub-link {
  display: block;
  padding: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.14px;
  color: var(--base-foreground);
  white-space: nowrap;
}

.nav__sub-link:hover {
  text-decoration: underline;
}

.nav__sub-link.nav__sub-link_current {
  font-weight: 900;
}

/* ===== Intro (Figma 18-36341: gap 64 от меню, text-center, w 546, gap 8 между h и p, 80 до каталога) ===== */
.intro {
  padding-top: 64px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.intro__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--base-foreground);
  max-width: 546px;
}

.intro__text {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  font-weight: 400;
  color: var(--base-foreground);
  max-width: 546px;
}

/* ===== Catalog Overlay (Весь каталог) ===== */
.catalog-overlay {
  display: none;
  position: fixed;
  top: 88px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--base-background);
  overflow-y: auto;
}

.catalog-overlay[aria-hidden="false"] {
  display: block;
}

.catalog-overlay__inner {
  padding-top: 32px;
  padding-bottom: 16px;
}

.catalog-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  position: relative;
}

.catalog-overlay__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--base-foreground);
}

.catalog-overlay__close {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.catalog-overlay__close img {
  width: 16px;
  height: 16px;
}

.catalog-overlay__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 20px;
}

.catalog-overlay__section-header {
  display: flex;
  align-items: center;
  gap: 0;
}

.catalog-overlay__section-pic {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
}

.catalog-overlay__section-title {
  padding: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
  color: var(--base-foreground);
}

.catalog-overlay__section-title:hover {
  text-decoration: underline;
}

.catalog-overlay__list {
  padding-left: 56px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.catalog-overlay__link {
  display: inline-block;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
  color: var(--base-foreground);
}

.catalog-overlay__link:hover {
  text-decoration: underline;
}

/* ===== Мобильное меню (бургер) ===== */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--base-background);
  overflow-y: auto;
  width: 100vw;
}

.mobile-menu[aria-hidden="false"] {
  display: block;
}

.mobile-menu__inner {
  padding: 24px 0 40px;
}

/* Шапка мобильного меню: слева «Меню», справа в ряд — Связаться, иконка i, закрыть */
.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  padding: 0 24px;
}

.mobile-menu__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mobile-menu__btn-contact {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--base-foreground);
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: 9999px;
  height: 36px;
  flex-shrink: 0;
}

.mobile-menu__btn-contact:hover {
  background: var(--base-secondary);
}

.mobile-menu__btn-info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--base-foreground);
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: 50%;
  flex-shrink: 0;
}

.mobile-menu__icon-info {
  width: 16px;
  height: 16px;
}

.mobile-menu__btn-info:hover {
  opacity: 0.85;
}

.mobile-menu__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--base-foreground);
}

.mobile-menu__close {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--base-input);
  background: var(--base-background);
  flex-shrink: 0;
}

.mobile-menu__close:hover {
  background: var(--base-secondary);
}

.mobile-menu__close img {
  width: 16px;
  height: 16px;
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-menu__item {
  display: flex;
  flex-direction: column;
  padding: 7px 0;
  border-bottom: 1px solid var(--muted-line);
}

.mobile-menu__item:last-child {
  border-bottom: none;
}

.mobile-menu__divider {
  display: none;
}

.mobile-menu__row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 52px;
  flex-shrink: 0;
  padding: 0 24px;
}

.mobile-menu__avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--base-secondary);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  color: var(--base-foreground);
}

.mobile-menu__avatar-icon {
  display: block;
  flex-shrink: 0;
}

.mobile-menu__pic {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
}

.mobile-menu__label-link {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
  color: var(--base-foreground);
}

.mobile-menu__label-link:hover {
  text-decoration: underline;
}

.mobile-menu__expand-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 0 8px 20px;
  min-width: 44px;
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-menu__expand-btn:hover {
  opacity: 0.85;
}

.mobile-menu__chevron {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: transform 0.5s ease;
}

.mobile-menu__item_expanded .mobile-menu__chevron {
  transform: rotate(180deg);
}

.mobile-menu__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease;
}

.mobile-menu__item_expanded .mobile-menu__panel {
  grid-template-rows: 1fr;
}

/* Неавторизованный пользователь: иконка, шеврон вправо, ссылка без аккордеона */
.mobile-menu__item_guest .mobile-menu__panel_guest-hidden {
  display: none !important;
}

.mobile-menu__row_link {
  text-decoration: none;
  color: inherit;
}

.mobile-menu__row_link:hover .mobile-menu__label-text {
  text-decoration: underline;
}

.mobile-menu__icon-user-wrap {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted-line);
  border-radius: 50%;
}

.mobile-menu__icon-user {
  width: 20px;
  height: 20px;
  display: block;
}

.mobile-menu__label-text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
  color: var(--base-foreground);
}

.mobile-menu__chevron_right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu__chevron_right img {
  transform: rotate(-90deg);
  width: 24px;
  height: 24px;
}

.mobile-menu__panel-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 80px;
}

.mobile-menu__panel-inner:not(:empty) .mobile-menu__link:last-child {
  padding-bottom: 16px;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
  color: var(--base-foreground);
}

.mobile-menu__link:hover {
  text-decoration: underline;
}

.mobile-menu__link img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.mobile-menu__link_no-icon {
  padding-left: 0;
}

.mobile-menu__link_no-icon img {
  display: none;
}

/* На десктопе мобильное меню скрыто */
@media (min-width: 768px) {
  .mobile-menu {
    display: none !important;
  }
}

/* ===== Страница «О компании» — аккордеон ===== */
/* Анимация как в мобильном меню: grid 0fr/1fr, transition 0.5s ease */
/* max-width 758px = 662px контент + 48px×2 паддинги page__container */
.about-page {
  width: 100%;
  max-width: 758px;
  margin: 0 auto;
}

.info-accordion {
  display: flex;
  flex-direction: column;
}

.info-accordion__item {
  border-bottom: 1px solid var(--base-input);
}

.info-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
  color: var(--base-foreground);
  text-align: left;
}

.info-accordion__trigger:hover {
  opacity: 0.85;
}

.info-accordion__trigger-text {
  flex: 1;
}

.info-accordion__chevron {
  flex-shrink: 0;
  transition: transform 0.5s ease;
}

.info-accordion__item_expanded .info-accordion__chevron {
  transform: rotate(180deg);
}

.info-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease;
}

.info-accordion__item_expanded .info-accordion__panel {
  grid-template-rows: 1fr;
}

.info-accordion__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.info-accordion__content {
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-accordion__content-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-accordion__heading {
  margin: 0;
  font-size: var(--typo-h2-size);
  line-height: var(--typo-h2-height);
  font-weight: var(--typo-h2-weight);
  color: var(--base-foreground);
}

.info-accordion__text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.info-accordion__stats {
  display: flex;
  gap: 20px;
}

.info-accordion__stat-value {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--base-foreground);
}

.info-accordion__stat-label {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--base-foreground);
}

.info-accordion__list {
  margin: 0;
  padding: 0 0 0 21px;
  list-style: disc;
}

.info-accordion__list li {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 8px;
  color: var(--base-foreground);
}

.info-accordion__list li:last-child {
  margin-bottom: 0;
}

.info-accordion__link {
  color: var(--base-foreground);
}

.info-accordion__link:hover {
  text-decoration: underline;
}

.info-accordion__map-link {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--base-foreground);
}

.info-accordion__map-link:hover {
  text-decoration: underline;
}

.info-accordion__payments {
  display: flex;
  gap: 8px;
  align-items: center;
}

.info-accordion__payment-icon {
  width: 35px;
  height: 24px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .info-accordion__stats {
    flex-wrap: wrap;
  }
}

/* ===== Попап «Все медиа» (галерея товара) ===== */
.media-popup {
  position: fixed;
  inset: 0;
  z-index: 110;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Закрыт: убрать из отрисовки полностью. Иначе у потомков visibility:visible (сбросы Битрикса/браузера для img)
   снова делает картинки сетки видимыми — они оказываются «в потоке» под шапкой */
.media-popup[aria-hidden="true"] {
  display: none !important;
}

.media-popup[aria-hidden="false"] {
  display: flex !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.media-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.media-popup__inner {
  position: relative;
  width: 100%;
  max-width: 1344px;
  height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  padding: 24px 48px;
  background: var(--base-background);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  margin: auto;
  transform: scale(0.98);
  transition: transform 0.4s ease;
}

.media-popup[aria-hidden="false"] .media-popup__inner {
  transform: scale(1);
}

.media-popup__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-right: -38px;
  padding-right: 38px;
}

.media-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-bottom: 28px;
}

.media-popup__logo {
  display: block;
}

.media-popup__logo img {
  display: block;
  height: 32px;
  width: auto;
}

.media-popup__close {
  position: absolute;
  top: 24px;
  right: 13px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.media-popup__close img {
  width: 16px;
  height: 16px;
  display: block;
}

.media-popup__breadcrumbs {
  flex-shrink: 0;
  padding-bottom: 24px;
}

.media-popup__breadcrumbs .breadcrumbs__list {
  gap: 4px;
}

/* Хлебные крошки: «Весь каталог» → «...» (как на странице товара), Figma 146-30366 */
.media-popup__breadcrumbs .breadcrumbs__item:first-child .breadcrumbs__link {
  font-size: 0;
  line-height: 0;
}

.media-popup__breadcrumbs .breadcrumbs__item:first-child .breadcrumbs__link::before {
  content: "...";
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-height);
  font-weight: 500;
  letter-spacing: var(--typo-label-spacing);
  color: var(--base-foreground);
}

/* Masonry: 2 колонки, без дыр. Fallback — CSS columns (работает везде) */
.media-popup__grid {
  display: block;
  column-count: 2;
  column-gap: 20px;
  flex: 1;
  min-height: 0;
}

.media-popup__grid > .media-popup__item {
  break-inside: avoid;
  margin-bottom: 20px;
}

.media-popup__grid > .media-popup__item:last-child {
  margin-bottom: 0;
}

/* Masonry grid — когда браузер поддерживает (пока только Firefox с флагом) */
@supports (grid-template-rows: masonry) {
  .media-popup__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: masonry;
    column-count: unset;
    column-gap: unset;
    gap: 20px;
  }

  .media-popup__grid > .media-popup__item {
    break-inside: unset;
    margin-bottom: 0;
  }
}

.media-popup__item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.media-popup__item-pic {
  width: 100%;
  background: var(--muted-background);
  overflow: hidden;
}

.media-popup__item-pic img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
}

.media-popup__item-pic[data-orientation="vertical"] {
  max-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-popup__item-pic[data-orientation="vertical"] img {
  max-height: 700px;
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.media-popup__caption {
  margin: 0;
  background: var(--base-background);
  font-size: var(--typo-label-size);
  font-weight: 400;
  line-height: var(--typo-label-height);
  letter-spacing: var(--typo-label-spacing-r);
  color: var(--base-foreground);
}

/* Кастомный скроллбар попапа «Все медиа» — 3px, серый трек, чёрный ползунок, 10px от края */
.media-popup__scroll::-webkit-scrollbar {
  width: 3px;
}

.media-popup__scroll::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 999px;
  margin: 2px 0;
}

.media-popup__scroll::-webkit-scrollbar-thumb {
  min-height: 200px;
  background: var(--base-foreground);
  border-radius: 999px;
}

.media-popup__scroll::-webkit-scrollbar-thumb:hover {
  background: var(--base-foreground);
}

/* Firefox — стандартные свойства (webkit не поддерживается) */
@supports not selector(::-webkit-scrollbar) {
  .media-popup__scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--base-foreground) #e5e7eb;
  }
}

/* Попап «Все медиа» — мобильная версия (≤767px) */
@media (max-width: 767px) {
  .media-popup {
    padding: 16px;
  }

  .media-popup__inner {
    padding: 16px;
    max-height: calc(100vh - 32px);
  }

  /* Скроллбар по центру между фото и краем попапа (16px паддинг) */
  .media-popup__scroll {
    margin-right: -8px;
    padding-right: 8px;
  }

  .media-popup__header {
    margin-bottom: 16px;
  }

  .media-popup .media-popup__breadcrumbs.breadcrumbs {
    padding-bottom: 20px;
  }

  /* Одна колонка фото */
  .media-popup__grid {
    column-count: 1;
    column-gap: 0;
  }

  .media-popup__grid > .media-popup__item {
    margin-bottom: 16px;
  }

  @supports (grid-template-rows: masonry) {
    .media-popup__grid {
      grid-template-columns: 1fr;
      column-count: unset;
      gap: 16px;
    }

    .media-popup__grid > .media-popup__item {
      margin-bottom: 0;
    }
  }

  /* Горизонтальные и квадратные: ширина 100%, высота авто */
  .media-popup__item-pic img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* Вертикальные: ограничение высоты 380px */
  .media-popup__item-pic[data-orientation="vertical"] {
    max-height: 380px;
  }

  .media-popup__item-pic[data-orientation="vertical"] img {
    max-height: 380px;
    width: auto;
    height: 100%;
    object-fit: contain;
  }

  .media-popup__close {
    top: 16px;
    right: 16px;
  }
}

/* ===== Форма обратной связи (попап) ===== */
.feedback {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 110;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.feedback[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.feedback__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.feedback__inner {
  position: relative;
  width: 100%;
  max-width: 920px;
  padding: 48px;
  background: var(--base-background);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin: auto;
  transform: scale(0.98);
  transition: transform 0.4s ease;
}

.feedback[aria-hidden="false"] .feedback__inner {
  transform: scale(1);
}

.feedback__close {
  position: absolute;
  top: 24px;
  right: 23px;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--base-foreground);
}

.feedback__close img {
  width: 16px;
  height: 16px;
  display: block;
}

.feedback__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feedback__row {
  display: flex;
  gap: 32px;
  align-items: stretch;
}

.feedback__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feedback__col_left {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.feedback__spacer {
  flex: 1;
  min-height: 0;
}

.feedback__col_right {
  padding-top: 24px;
  justify-content: flex-end;
}

.feedback__panel {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.feedback__panel_active {
  display: flex;
}

/* Линия заканчивается по низу последнего инпута: градиент обрезает низ (слот ошибки 16px + отступ 4px) */
.feedback__divider {
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--base-input) 0,
    var(--base-input) calc(100% - 20px),
    transparent calc(100% - 20px)
  );
  align-self: stretch;
  flex-shrink: 0;
}


/* Блок с заголовком, радиокнопками и областью для текста — фиксированная высота по макету (220px), форма не скачет */
.feedback__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 220px;
  flex-shrink: 0;
  min-height: 0;
}

.feedback__radio-desc-wrap {
  flex: 1;
  min-height: 0;
}

.feedback__radio-desc {
  display: none;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  font-weight: 400;
  color: var(--base-foreground);
  margin: 0;
}

.feedback__block:has(.radio-group__input[value="customer"]:checked) .feedback__radio-desc_customer,
.feedback__block:has(.radio-group__input[value="supplier"]:checked) .feedback__radio-desc_supplier,
.feedback__block:has(.radio-group__input[value="architect"]:checked) .feedback__radio-desc_architect,
.feedback__block:has(.radio-group__input[value="dealer"]:checked) .feedback__radio-desc_dealer,
.feedback__block:has(.radio-group__input[value="installer"]:checked) .feedback__radio-desc_installer {
  display: block;
}

.feedback__heading {
  margin: 0;
  color: var(--base-foreground);
}

.feedback__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.feedback__thanks {
  padding: 32px 16px 24px;
  text-align: center;
}

.feedback__thanks-text {
  margin: 0 0 8px;
  color: var(--base-foreground);
}

.feedback__thanks-sub {
  margin: 0;
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-height);
  color: var(--base-muted-foreground);
}

.feedback__form-error {
  width: 100%;
  margin: 0 0 8px;
}

/* Чекбокс согласия: во всю ширину, выравнивание по центру (десктоп) */
.feedback__consent {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  align-items: center;
}
.feedback__consent_error .feedback__consent-checkbox {
  border-color: var(--destructive);
}
.feedback__consent .input__error_hidden {
  display: block;
  visibility: hidden;
}

/* Блок ошибки под чекбоксом, резервирует место, выравнивание по левому краю */
.feedback__consent-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.feedback__consent .input__error {
  min-height: 16px;
}
.feedback__consent-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-height);
  font-weight: 500;
  color: var(--base-foreground);
  max-width: 100%;
}
.feedback__consent-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.feedback__consent-checkbox {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid var(--base-foreground);
  border-radius: 2px;
  background: var(--base-background);
  transition: background-color 0.2s, border-color 0.2s;
}
.feedback__consent-input:checked + .feedback__consent-checkbox {
  background: var(--base-foreground);
  border-color: var(--base-foreground);
}
.feedback__consent-checkbox .feedback__consent-icon {
  opacity: 0;
  transition: opacity 0.2s;
}
.feedback__consent-input:checked + .feedback__consent-checkbox .feedback__consent-icon {
  opacity: 1;
}
.feedback__consent-text {
  flex: 1;
  min-width: 0;
}
.feedback__consent-text a {
  text-decoration: underline;
  color: inherit;
}
.feedback__consent-text a:hover {
  color: var(--muted-foreground);
}

/* Радиогруппа (по макету 20-37618) */
.radio-group {
  display: flex;
  flex-direction: column;
  gap:8px;
}

.radio-group__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  margin: 0;
}

.radio-group__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.radio-group__circle {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  border: 1px solid var(--base-foreground);
  border-radius: 9999px;
  background: var(--base-background);
  position: relative;
}

.radio-group__input:checked + .radio-group__circle {
  background: var(--base-background);
}

.radio-group__input:checked + .radio-group__circle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: var(--base-foreground);
}

.radio-group__input:focus-visible + .radio-group__circle {
  outline: 2px solid var(--base-foreground);
  outline-offset: 2px;
}

.radio-group__text {
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-height);
  letter-spacing: -0.14px;
  font-weight: 500;
  color: var(--base-foreground);
}

/* Инпуты (по макету 20-37359: default, hover, focus, error) */
.input {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input__label {
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-height);
  letter-spacing: -0.14px;
  font-weight: 500;
  color: var(--base-foreground);
  margin: 0;
}

.input__wrap {
  display: flex;
  align-items: stretch;
  min-height: 36px;
}

.input__field {
  width: 100%;
  height: 36px;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.input__field::placeholder {
  color: var(--muted-foreground);
}

.input__field:hover {
  border-color: var(--base-foreground);
}

.input__field:focus {
  outline: none;
  border-color: var(--base-foreground);
}

.input_error .input__field {
  border-color: var(--destructive);
}

.input_error .input__field:hover,
.input_error .input__field:focus {
  border-color: var(--destructive);
}

/* Место под текст ошибки зарезервировано (min-height), форма не скачет при появлении ошибки */
.input__error {
  font-size: 12px;
  line-height: 16px;
  min-height: 16px;
  margin: 0;
  color: var(--destructive);
}

.input__error.input__error_hidden {
  visibility: hidden;
}

/* Ошибка роли в feedback: скрыта — не занимает место, подсказка остаётся близко к радиогруппе (Figma 158-36312) */
#feedback-role-error.input__error_hidden {
  display: none;
}

.input_variant_textarea .input__wrap {
  min-height: auto;
}

.input_variant_textarea .input__field {
  height: 70px;
  min-height: 70px;
  resize: none;
  padding: 8px 12px;
}


/* Телефон: префикс 🇷🇺 + chevron внутри одного поля с обводкой */
.input_phone .input__wrap {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 36px;
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease;
}

.input_phone .input__wrap:hover {
  border-color: var(--base-foreground);
}

.input_phone .input__wrap:has(.input__field:focus) {
  border-color: var(--base-foreground);
}

.input_phone.input_error .input__wrap {
  border-color: var(--destructive);
}

.input_phone.input_error .input__wrap:has(.input__field:focus) {
  border-color: var(--destructive);
}

.input_phone .input__field {
  flex: 1;
  min-width: 0;
  padding-left: 8px;
  border: none;
  background: transparent;
}

.input_phone .input__field:focus,
.input_phone .input__field:focus-visible {
  outline: none;
  border: none;
  padding: 8px 12px 8px 8px;
}

/* Пароль: иконка показа/скрытия справа */
.input_password .input__wrap {
  display: flex;
  align-items: center;
  gap: 0;
  padding-right: 8px;
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease;
}

.input_password .input__wrap:hover {
  border-color: var(--base-foreground);
}

.input_password .input__wrap:has(.input__field:focus) {
  border-color: var(--base-foreground);
}

.input_password.input_error .input__wrap {
  border-color: var(--destructive);
}

.input_password .input__field {
  flex: 1;
  min-width: 0;
  border: none;
  padding-right: 8px;
  background: transparent;
}

.input_password .input__field:focus,
.input_password .input__field:focus-visible {
  outline: none;
  border: none;
}

.input__password-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted-foreground);
}

.input__password-toggle:hover {
  color: var(--base-foreground);
}

.input__password-toggle:focus-visible {
  outline: none;
}

.input__password-icon {
  display: block;
}

.input__password-icon[hidden] {
  display: none !important;
}

.input__prefix-wrap {
  position: relative;
  flex-shrink: 0;
}

.input__prefix-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 8px 12px;
  margin: 0;
  border: none;
  background: none;
  color: var(--base-foreground);
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
}

.input__prefix-btn:hover,
.input__prefix-btn:focus-visible {
  outline: none;
}

.input__prefix-flag {
  display: inline-block;
}

.input__prefix-chevron {
  width: 18px;
  height: 18px;
  display: block;
  transition: transform 0.2s ease;
}

.input__prefix-wrap_open .input__prefix-chevron {
  transform: rotate(180deg);
}

.input__prefix-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 260px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  background: var(--base-background);
  border: 1px solid var(--base-secondary);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  list-style: none;
  z-index: 10;
  display: none;
}

.input__prefix-wrap_open .input__prefix-dropdown {
  display: block;
}

.input__prefix-dropdown li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.input__prefix-dropdown-left {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.input__prefix-dropdown-code {
  flex-shrink: 0;
}

.input__prefix-dropdown li:hover {
  background: var(--base-secondary);
}

.input__prefix-dropdown li[aria-selected="true"] {
  background: var(--base-secondary);
}

.feedback__submit {
  width: 100%;
  height: 56px;
  padding: 0 32px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.2s;
}

.feedback__submit.feedback__submit_loading {
  pointer-events: none;
  cursor: wait;
  opacity: 0.85;
  user-select: none;
}

/* ===== Catalog ===== */
.catalog {
  padding-bottom: 148px;
}

.catalog__load-more {
  margin-top: 80px;
  display: flex;
  justify-content: center;
}

.catalog__load-more-btn {
  padding-left: 32px;
  padding-right: 32px;
}

.catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
}

.catalog__item {
  min-width: 0;
}

/* Разделитель ряда: полная ширина, линия и отступы */
.catalog__row-divider {
  grid-column: 1 / -1;
  height: 1px;
  margin-top: 48px;
  margin-bottom: 48px;
  background: var(--muted-line);
  display: none;
}

/* Десктоп: структура item,div,item,div… — dividers на позициях 6,12,18… (каждые 3 карточки) */
@media (min-width: 1024px) {
  .catalog__row-divider:nth-child(6n) {
    display: block;
  }
}

/* Карточка товара: соотношение сторон сохраняем, фото 1/3 высоты контейнера по правилам */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--base-background);
}

.product-card__image-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-card__image-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.product-card__image-wrap[data-orientation="vertical"] {
  max-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted-background);
}

.product-card__slider {
  position: relative;
  overflow-x: hidden;
  touch-action: pan-y pinch-zoom;
  user-select: none;
}

/* В блоке «Приобретается отдельно» свайп по фото не должен прокручивать слайдер товаров */
.product-related__scroll .product-card__slider {
  touch-action: none;
}

.product-card__slider img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.product-card__track {
  display: flex;
  width: calc(var(--product-card-slide-count, 3) * 100%);
  transition: transform 0.3s ease;
}

.product-card__slide {
  flex: 0 0 calc(100% / var(--product-card-slide-count, 3));
  width: calc(100% / var(--product-card-slide-count, 3));
  overflow: hidden;
}

.product-card__slide .product-card__image {
  width: 100%;
  height: auto;
  display: block;
}

/* Галерея карточки: первое горизонтальное фото задаёт пропорции блока; остальные кадры — cover в этом контейнере */
.product-card__image-wrap[data-product-card-gallery="y"]:not([data-orientation="vertical"]) {
  position: relative;
  aspect-ratio: var(--product-card-gallery-aspect, 4 / 3);
}

.product-card__image-wrap[data-product-card-gallery="y"]:not([data-orientation="vertical"]) .product-card__slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.product-card__image-wrap[data-product-card-gallery="y"]:not([data-orientation="vertical"]) .product-card__track {
  height: 100%;
}

.product-card__image-wrap[data-product-card-gallery="y"]:not([data-orientation="vertical"]) .product-card__slide {
  align-self: stretch;
  height: 100%;
}

.product-card__image-wrap[data-product-card-gallery="y"]:not([data-orientation="vertical"]) .product-card__slide .product-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.product-card__image-wrap[data-product-card-gallery="y"]:not([data-orientation="vertical"]) .product-card__slide:not(:first-child) .product-card__image {
  object-fit: cover;
}

.product-card__image-wrap:not([data-orientation="vertical"]) .product-card__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.product-card__image-wrap[data-orientation="vertical"] .product-card__image {
  max-height: 540px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.product-card__image-wrap[data-orientation="vertical"] .product-card__slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-card__image-wrap[data-orientation="vertical"] .product-card__slide .product-card__image {
  max-height: 540px;
  max-width: 100%;
  width: auto;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
  flex-grow: 1;
}

.product-card:not(:has(.product-card__slider)) .product-card__body {
  margin-top: 8px;
}

.product-card__pagination {
  display: flex;
  justify-content: center;
  gap: 3px;
  align-items: center;
  width: 100%;
  margin-top: 8px;
  flex-shrink: 0;
}

.product-card__dot {
  width: 4px;
  height: 4px;
  padding: 0;
  border: none;
  border-radius: 99px;
  background: var(--slate-200);
  cursor: pointer;
  transition: background 0.2s;
}

.product-card__dot:hover {
  background: var(--slate-300);
}

.product-card__dot_active {
  width: 6px;
  height: 4px;
  background: var(--slate-300);
}

.product-card__title {
  margin: 0;
  font-size: var(--typo-label-size);
  font-weight: 500;
  line-height: var(--typo-label-height);
  letter-spacing: var(--typo-label-spacing);
  color: var(--base-foreground);
}

.product-card__title-link {
  color: inherit;
  text-decoration: none;
}

.product-card__title-link:hover {
  text-decoration: underline;
}

.product-card__subtitle {
  margin: 0 0 8px 0;
  font-size: var(--typo-label-size);
  font-weight: 400;
  line-height: var(--typo-label-height);
  letter-spacing: var(--typo-label-spacing-r);
  color: var(--base-foreground);
  opacity: 0.5;
}

.product-card__footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-card__price {
  font-size: var(--typo-p2-size);
  font-weight: 400;
  line-height: var(--typo-p2-height);
  letter-spacing: var(--typo-p2-spacing);
  color: var(--base-foreground);
}

.product-card__currency {
  font-size: inherit;
  font-weight: inherit;
}

.product-card__cart-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

.product-card__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.product-card__add[hidden] {
  display: none;
}

.product-card__add:hover {
  opacity: 0.9;
}

.product-card__add img {
  width: 36px;
  height: 36px;
}

.product-card__cart-qty {
  display: flex;
  align-items: center;
  gap: 4px;
}

.product-card__cart-qty[hidden] {
  display: none;
}

.product-card__cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--base-foreground);
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.product-card__cart-btn:hover {
  background: var(--base-secondary);
  opacity: 1;
}

.product-card__cart-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.product-card__cart-btn:disabled:hover {
  background: transparent;
}

.product-card__cart-btn img {
  width: 16px;
  height: 16px;
}

.product-card__cart-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.product-card__cart-icon img {
  width: 36px;
  height: 36px;
}

.product-card__cart-qty-num {
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: var(--base-foreground);
}

/* ===== Cart Empty (Desktop) ===== */
.cart-empty {
  display: flex;
  justify-content: center;
  padding-top: 48px;
  padding-bottom: 140px;
}

.cart-empty__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 440px;
  gap: 48px;
}

.cart-empty__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  color: var(--base-foreground);
}

.cart-empty__title {
  margin: 0;
  font-size: var(--typo-h2-size);
  line-height: var(--typo-h2-height);
  letter-spacing: -0.01em;
  font-weight: var(--typo-h2-weight);
}

.cart-empty__text {
  margin: 0;
}

.cart-empty__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

.cart-empty__btn {
  width: 100%;
  height: 56px;
  padding: 0 32px;
  font-size: 16px;
  line-height: 24px;
  border-radius: 9999px;
}

.cart-empty__btn_primary,
.cart-empty__btn_outline {
  box-shadow: none;
}

/* 404: хедер + контент = 100vh, футер только при скролле */
.page_404 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page_404 main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: calc(100vh - 88px);
}

.page_404 .cart-empty {
  flex: 1;
  align-items: flex-start;   /* по верху */
  justify-content: center;   /* по центру горизонтально */
  padding-top: 160px;
  padding-bottom: 48px;
}

/* new-password: хедер + контент = 100vh, футер только при скролле, отступы main без изменений */
.page_new-password {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page_new-password main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: calc(100vh - 88px);
}

/* Профиль, Мои заказы, Настройки, restore, auth, register: хедер + контент = 100vh, футер только при скролле */
.page_account-profile,
.page_account-my-orders,
.page_account-settings,
.page_restore,
.page_auth,
.page_register {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page_account-profile main,
.page_account-my-orders main,
.page_account-settings main,
.page_restore main,
.page_auth main,
.page_register main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: calc(100vh - 88px);
}

.page_auth main,
.page_restore main,
.page_register main {
  align-items: center;
  justify-content: flex-start;
  padding-top: 64px;
  padding-bottom: 80px;
}

/* ===== Auth (Личный кабинет) ===== */
.page_auth .nav,
.page_restore .nav,
.page_new-password .nav,
.page_register .nav,
.page_about .nav,
.page_account .nav {
  display: none;
}

.main_auth,
.main_restore,
.main_new-password,
.main_register,
.main_about {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 64px;
  padding-bottom: 200px;
}

.main_account {
  padding-top: 24px;
  padding-bottom: 180px;
  border-top: 1px solid var(--base-input);
}

.page_order-detail .main_account,
.page_order-detail-pay .main_account {
  padding-bottom: 240px;
}

.main_auth > [hidden] {
  display: none !important;
}

.auth-form {
  width: 100%;
  max-width: 384px;
  padding: 24px;
  gap: 24px;
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.auth-form__title {
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.2px;
  text-align: center;
}

.auth-form__form_phone {
  gap: 8px;
}

/* Чекбокс согласия (форма телефона) */
.auth-form__consent {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.auth-form__consent_error .auth-form__consent-checkbox {
  border-color: var(--destructive);
}
.auth-form__consent-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-height);
  font-weight: 500;
  color: var(--base-foreground);
}
.auth-form__consent-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.auth-form__consent-checkbox {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid var(--base-foreground);
  border-radius: 2px;
  background: var(--base-background);
  transition: background-color 0.2s, border-color 0.2s;
}
.auth-form__consent-input:checked + .auth-form__consent-checkbox {
  background: var(--base-foreground);
  border-color: var(--base-foreground);
}
.auth-form__consent-checkbox .auth-form__consent-icon {
  opacity: 0;
  transition: opacity 0.2s;
}
.auth-form__consent-input:checked + .auth-form__consent-checkbox .auth-form__consent-icon {
  opacity: 1;
}
.auth-form__consent-text {
  flex: 1;
  min-width: 0;
}
.auth-form__consent-text a {
  text-decoration: underline;
  color: inherit;
}
.auth-form__consent-text a:hover {
  color: var(--muted-foreground);
}

.auth-form__toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  width: 100%;
}

.auth-form__toggle-icon {
  flex-shrink: 0;
}

.auth-form__panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}

.auth-form__panel[hidden] {
  display: none !important;
}

.auth-form__panel_email .auth-form__form {
  gap: 2px;
}

.auth-form__password-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.auth-form__forgot {
  font-weight: 400;
  color: var(--muted-foreground);
  text-decoration: underline;
}

.auth-form__forgot:hover {
  color: var(--base-foreground);
}

.auth-form__register {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: var(--base-foreground);
}

.auth-form__register a {
  text-decoration: underline;
}

.auth-form__register a:hover {
  color: var(--muted-foreground);
}

.auth-form__separator-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
}

.auth-form__separator-line {
  flex: 1;
  height: 1px;
  background: var(--base-input);
}

.auth-form__separator-text {
  flex-shrink: 0;
  font-size: var(--typo-note-size);
  line-height: var(--typo-note-height);
  color: var(--muted-foreground);
  padding: 0 8px;
}

.auth-form__form {
  display: flex;
  flex-direction: column;
}

.auth-form__phone {
  margin: 0;
}

.auth-form__submit {
  width: 100%;
  height: 40px;
  border-radius: 9999px;
}

.auth-form__legal {
  margin: 0;
  margin-top: -12px; /* 24 (gap) - 12 (Figma) = 12px от кнопки */
  font-size: var(--typo-note-size);
  line-height: var(--typo-note-height);
  color: var(--muted-foreground);
  text-align: center;
}

.auth-form__legal a {
  color: var(--muted-foreground);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.auth-form__legal a:hover {
  color: var(--base-foreground);
}

/* Шаг 2: OTP */
/* OTP-шаг: убираем gap формы, чтобы слоты кода не разъезжались */
.auth-form_step_otp.auth-form {
  gap: 0;
}

.auth-form_step_otp .auth-form__title_small {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.16px;
  text-align: left;
  padding-top: 0;
  padding-bottom: 16px;
}

.auth-form__otp-hint {
  margin: 0 0 32px;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.auth-form__form_otp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* OTP поля 36×36 px — как в попапе и макете Figma 158-36562 */
.auth-form__form_otp .auth-otp {
  width: auto;
  flex: none;
}

.auth-form__form_otp .auth-otp__slot {
  flex: none;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
}

.auth-otp {
  display: flex;
  gap: 0;
  width: 100%;
}

.auth-otp__slot {
  flex: 1;
  min-width: 36px;
  max-width: 56px;
  height: 36px;
  padding: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: var(--base-foreground);
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: 0;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.auth-otp__slot:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.auth-otp__slot:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.auth-otp__slot + .auth-otp__slot {
  border-left: none;
}

.auth-otp__slot:focus {
  outline: none;
  border-color: var(--base-input);
}

.auth-form__resend {
  align-self: stretch; /* полная ширина, текст центрирован внутри */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 0;
  text-align: center;
}

.auth-form__resend-text {
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.auth-form__resend-text_disabled {
  opacity: 0.5;
  cursor: default;
}

.auth-form__resend-text_active {
  opacity: 1;
  cursor: pointer;
  color: var(--base-foreground);
  text-decoration: none;
}

.auth-form__resend-text_active:hover {
  text-decoration: underline;
}

.auth-form__resend-text_timeout {
  opacity: 0.5;
  cursor: default;
}

.auth-form__actions {
  align-self: stretch; /* полная ширина при align-items: center у родителя */
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  padding-top: 24px;
}

.auth-form__btn-back,
.auth-form__btn-confirm {
  flex: 1;
  height: 40px;
}

/* Модалка: обязательное ФИО после входа по телефону (без крестика) */
body.auth-name-modal_open {
  overflow: hidden;
}

.auth-name-modal[hidden] {
  display: none !important;
}

.auth-name-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

.auth-name-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.auth-name-modal__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 384px;
  padding: 24px;
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-name-modal__title {
  margin: 0;
  text-align: center;
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.auth-name-modal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-name-modal__submit {
  width: 100%;
  height: 40px;
  border-radius: 9999px;
}

/* ===== Register (Регистрация) ===== */
.register-form {
  width: 100%;
  max-width: 384px;
  padding: 24px;
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}

.register-form__title {
  margin: 0;
  text-align: center;
  font-weight: 600;
}

.register-form__btn-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  width: 100%;
}

.register-form__btn-icon {
  flex-shrink: 0;
}

.register-form__separator-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.register-form__separator-line {
  flex: 1;
  height: 1px;
  background: var(--base-input);
}

.register-form__separator-text {
  flex-shrink: 0;
  font-size: var(--typo-note-size);
  line-height: var(--typo-note-height);
  color: var(--muted-foreground);
  padding: 0 8px;
}

.register-form__form {
  display: flex;
  flex-direction: column;
}

/* Чекбокс согласия на обработку персональных данных */
.register-form__consent {
  margin-top: 8px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.register-form__consent_error .register-form__consent-checkbox {
  border-color: var(--destructive);
}
.register-form__consent-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-height);
  font-weight: 500;
  color: var(--base-foreground);
}
.register-form__consent-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.register-form__consent-checkbox {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid var(--base-foreground);
  border-radius: 2px;
  background: var(--base-background);
  transition: background-color 0.2s, border-color 0.2s;
}
.register-form__consent-input:checked + .register-form__consent-checkbox {
  background: var(--base-foreground);
  border-color: var(--base-foreground);
}
.register-form__consent-checkbox .register-form__consent-icon {
  opacity: 0;
  transition: opacity 0.2s;
}
.register-form__consent-input:checked + .register-form__consent-checkbox .register-form__consent-icon {
  opacity: 1;
}
.register-form__consent-text {
  flex: 1;
  min-width: 0;
}
.register-form__consent-text a {
  text-decoration: underline;
  color: inherit;
}
.register-form__consent-text a:hover {
  color: var(--muted-foreground);
}

.register-form__submit {
  width: 100%;
  height: 40px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.register-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.register-form__login {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: var(--base-foreground);
}

.register-form__login a {
  text-decoration: underline;
}

.register-form__login a:hover {
  color: var(--muted-foreground);
}

.register-form__legal {
  margin: 0;
  font-size: var(--typo-note-size);
  line-height: var(--typo-note-height);
  color: var(--muted-foreground);
  text-align: center;
}

.register-form__legal a {
  color: var(--muted-foreground);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.register-form__legal a:hover {
  color: var(--base-foreground);
}

/* ===== Account (Профиль пользователя) ===== */
.account-profile {
  width: 100%;
  max-width: 662px;
  margin-left: auto;
  margin-right: auto;
}

.account-profile__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.account-profile__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-profile__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--base-input);
  border-radius: 9999px;
  flex-shrink: 0;
}

.account-profile__icon-wrap img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

.account-profile__title {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.account-profile__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-profile__nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  color: var(--base-foreground);
  transition: background-color 0.2s, opacity 0.2s;
}

.account-profile__nav-item:hover {
  background: var(--base-secondary);
  opacity: 1;
}

.account-profile__nav-item_accent:hover {
  background: var(--base-secondary);
}

.account-profile__nav-divider {
  width: 1px;
  height: 24px;
  background: var(--base-input);
  flex-shrink: 0;
}

.account-profile__nav-item img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  filter: brightness(0);
}

.account-profile__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.account-profile__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-profile__value {
  color: var(--base-foreground);
}

.account-profile__value_placeholder {
  color: var(--muted-foreground);
}

.account-profile__name-row .account-profile__value {
  color: #09090B;
}

.account-profile__edit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.account-profile__edit img {
  width: 16px;
  height: 16px;
  display: block;
}

.account-profile__fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-width: 0;
}

.account-profile__fields-row > * {
  min-width: 0;
}

.account-profile__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 12px 12px 16px;
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: var(--radius-md);
  text-align: left;
  font-family: inherit;
  transition: border-color 0.2s;
  cursor: pointer;
}

.account-profile__card:hover {
  border-color: var(--base-foreground);
}

/* При ховере на карточку кнопка тоже в состоянии hover */
.account-profile__card:hover .account-profile__edit-btn {
  background: var(--base-secondary);
}
.account-profile__card:hover .account-profile__edit-btn_add {
  background: #F4F4F5;
}

.account-profile__edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s;
}

.account-profile__edit-btn:hover {
  background: var(--base-secondary);
}

.account-profile__edit-btn img {
  width: 16px;
  height: 16px;
  display: block;
}

.account-profile__edit-btn_add {
  width: auto;
  height: 40px;
  padding: 0 16px;
  font-size: var(--typo-label-size);
  font-weight: 500;
  color: var(--base-foreground);
  border: none;
  border-radius: 9999px;
}

.account-profile__edit-btn_add:hover {
  background: #F4F4F5;
}

.account-profile__card-content {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 0;
}

.account-profile__card-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

.account-profile__card_full {
  width: 100%;
}

/* Подсказка «Установите пароль» — под блоком адреса, серый фон, во всю ширину, кнопка чёрная (по макету: 44 Hug) */
.account-profile__email-toast {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 16px;
  width: 100%;
  background: var(--base-secondary);
  border-radius: var(--radius-md);
}

.account-profile__email-toast[aria-hidden="false"]:not([hidden]) {
  display: flex;
}

.account-profile__email-toast-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
}

.account-profile__email-toast-title,
.account-profile__email-toast-desc {
  margin: 0;
}

.account-profile__email-toast-title {
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-height);
  font-weight: 500;
  letter-spacing: var(--typo-label-spacing);
  color: var(--base-foreground);
}

.account-profile__email-toast-desc {
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-height);
  color: var(--muted-foreground);
  opacity: 0.9;
}

.account-profile__email-toast-btn {
  flex-shrink: 0;
  height: 36px;
  padding: 0 16px;
}

.account-profile__email-toast_pending-email .account-profile__email-toast-address {
  word-break: break-all;
}

.account-profile__email-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.account-profile__pending-hint {
  margin: 0;
  font-size: var(--typo-label-size);
  line-height: 14px;
  color: var(--muted-foreground);
  opacity: 0.9;
}

.account-profile__value_pending {
  color: var(--base-foreground);
}

/* Страница подтверждения email (/personal/confirm-email/) */
.villa-confirm-email {
  padding-top: 48px;
  padding-bottom: 64px;
}

.villa-confirm-email__inner {
  max-width: 560px;
  margin: 0 auto;
}

.villa-confirm-email__title {
  margin: 0 0 16px;
}

.villa-confirm-email__text {
  margin: 0 0 24px;
  color: var(--muted-foreground);
}

.villa-confirm-email__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.villa-confirm-email__link {
  display: inline-block;
  color: var(--accent);
  text-decoration: underline;
}

/* Адаптив: мобильный — поля в столбик; шапка в один ряд (иконка + Профиль | иконки нав) */
@media (max-width: 767px) {
  .main_account {
    margin-top: 1px;
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .page_order-detail .main_account,
  .page_order-detail-pay .main_account {
    padding-bottom: 240px;
  }

  .account-profile {
    max-width: none;
  }

  .account-profile__fields-row {
    grid-template-columns: 1fr;
  }

  .account-profile__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .account-profile__nav {
    width: auto;
    justify-content: flex-end;
  }
}

/* ===== Мои заказы (account-my-orders) ===== */
.account-my-orders {
  width: 100%;
  max-width: 662px;
  margin-left: auto;
  margin-right: auto;
}

.account-my-orders__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.account-my-orders__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-my-orders__nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 9999px;
  color: var(--base-foreground);
  transition: background-color 0.2s, opacity 0.2s;
}

.account-my-orders__nav-item:hover {
  background: var(--base-secondary);
  opacity: 1;
}

.account-my-orders__nav-divider {
  width: 1px;
  height: 24px;
  background: var(--base-input);
  flex-shrink: 0;
}

.account-my-orders__nav-item img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  filter: brightness(0);
}

/* Активный таб: иконка в круге с обводкой + текст */
.account-my-orders__active-tab {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-my-orders__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: 9999px;
  flex-shrink: 0;
}

.account-my-orders__icon-wrap img {
  width: 16px;
  height: 16px;
  display: block;
  filter: brightness(0);
}

.account-my-orders__active-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
  color: var(--base-foreground);
  white-space: nowrap;
}

.account-my-orders__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-my-orders__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Карточка заказа (order-card) */
.order-card {
  padding: 12px 12px 24px 24px;
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-card__link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.order-card__link:hover {
  opacity: 0.85;
}

.order-card__number {
  flex: 1;
  font-size: var(--typo-p2-size);
  line-height: 24px;
  font-weight: 600;
  color: var(--base-foreground);
  min-width: 0;
}

.order-card__status {
  flex-shrink: 0;
  font-size: var(--typo-label-size);
  line-height: 20px;
  color: var(--base-foreground);
}

.order-card__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 12px;
}

.order-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.order-card__row {
  display: flex;
  gap: 4px;
  align-items: baseline;
}

.order-card__label {
  font-size: var(--typo-label-size);
  font-weight: 500;
  line-height: 20px;
  color: var(--base-foreground);
}

.order-card__value {
  font-size: var(--typo-label-size);
  font-weight: 400;
  line-height: 20px;
  color: var(--base-foreground);
}

.order-card__pics {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.order-card__pic_hidden {
  display: none;
}

.order-card__pic {
  width: var(--order-pic-size, 96px);
  height: var(--order-pic-size, 96px);
  flex-shrink: 0;
  overflow: hidden;
  background: var(--muted-background);
  position: relative;
}

.order-card__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Badge «+N» — сколько ещё товаров в заказе */
.order-card__pic-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: 9999px;
  font-size: var(--typo-label-size);
  font-weight: 500;
  line-height: 20px;
  color: var(--base-foreground);
}

@media (max-width: 767px) {
  .account-my-orders {
    max-width: none;
  }

  .order-card__pics {
    position: relative;
    overflow: hidden;
  }

  .order-card__pics::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 100%;
    background: linear-gradient(to right, transparent, white);
    pointer-events: none;
  }

  /* Badge «+N» у правого края контейнера (мобилка), не привязан к фото */
  .order-card__pics > .order-card__pic-badge {
    right: 0;
    left: auto;
    transform: translateY(-50%);
    z-index: 1;
  }

  .order-card__pic {
    width: var(--order-pic-size, 64px);
    height: var(--order-pic-size, 64px);
  }
}

/* ===== Детальная страница заказа (account-order-detail) ===== */
.account-order-detail {
  width: 100%;
  max-width: 662px;
  margin-left: auto;
  margin-right: auto;
}

.order-detail__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 48px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.14px;
}

.order-detail__breadcrumb-link {
  color: var(--base-foreground);
  text-decoration: none;
}

.order-detail__breadcrumb-link:hover {
  text-decoration: underline;
}

.order-detail__breadcrumb-sep {
  color: var(--base-foreground);
}

.order-detail {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.order-detail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.order-detail__title {
  margin: 0;
}

.order-detail__status {
  flex-shrink: 0;
  color: var(--base-foreground);
}

.order-detail__timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-detail__timeline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.order-detail__timeline-label {
  font-weight: 400;
}

.order-detail__timeline-date {
  flex-shrink: 0;
  color: var(--base-foreground);
}

.order-detail__divider {
  height: 1px;
  background: var(--muted-line);
}

.order-detail__section-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--base-foreground);
}

.order-detail__customer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-detail__customer-name,
.order-detail__customer-phone,
.order-detail__customer-email,
.order-detail__customer-address {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.order-detail__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Карточка товара в заказе (order-detail-item) — без qty/удаления, с артикулом и «Количество» */
.order-detail-item {
  display: flex;
  gap: 16px;
  align-items: center;
}

.order-detail-item__pic {
  flex-shrink: 0;
  display: block;
  width: 104px;
  height: 104px;
  background: var(--muted-background);
  overflow: hidden;
}

.order-detail-item__pic-img,
.order-detail-item__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-detail-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  height: 112px;
}

.order-detail-item__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: space-between;
  height: 100%;
}

.order-detail-item__info {
  display: flex;
  flex-direction: column;
}

.order-detail-item__name {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.14px;
  color: var(--base-foreground);
  text-decoration: none;
  display: inline-block;
}

a.order-detail-item__name:hover {
  text-decoration: underline;
}

.order-detail-item__meta {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
  opacity: 0.5;
}

.order-detail-item__unit-price {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
  opacity: 0.5;
}

.order-detail-item__sku {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.order-detail-item__qty {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.order-detail-item__qty-label {
  font-weight: 500;
}

.order-detail-item__qty-num {
  font-weight: 800;
  letter-spacing: -0.14px;
}

.order-detail-item__price {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--base-foreground);
  white-space: nowrap;
}

.order-detail-item__currency {
  font-weight: inherit;
}

.order-detail-summary__value .order-detail-item__currency {
  font-size: var(--typo-p2-size);
  line-height: var(--typo-p2-height);
}

.order-detail-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-detail-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--base-foreground);
}

.order-detail-summary__row_secondary {
  font-size: 14px;
  line-height: 20px;
}

.order-detail-summary__label {
  margin: 0;
}

.order-detail-summary__value {
  margin: 0;
  white-space: nowrap;
}

/* Кнопка «Оплатить» и иконка отмены заказа в заголовке (order-detail-pay) */
.order-detail-pay__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.order-detail-pay__actions[hidden] {
  display: none !important;
}

.order-detail-pay__btn {
  padding: 0 16px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
  border-radius: 999px;
}

.order-detail-pay__cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 9999px;
  background: transparent;
  transition: background-color 0.2s, opacity 0.2s;
}

.order-detail-pay__cancel:hover {
  background: var(--base-secondary);
  opacity: 1;
}

.order-detail-pay__cancel img {
  width: 16px;
  height: 16px;
}

.order-detail-pay__repeat-wrap {
  flex-shrink: 0;
}

.order-detail-pay__repeat-btn {
  padding: 0 16px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
  border-radius: 999px;
}

/* Попап подтверждения отмены заказа (Figma 137-37936) */
.cancel-order-popup {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 114;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.cancel-order-popup[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cancel-order-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.cancel-order-popup__inner {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  background: var(--base-background);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  margin: auto;
  transform: scale(0.98);
  transition: transform 0.4s ease;
}

.cancel-order-popup[aria-hidden="false"] .cancel-order-popup__inner {
  transform: scale(1);
}

.cancel-order-popup__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.cancel-order-popup__close:hover {
  opacity: 1;
}

.cancel-order-popup__close img {
  width: 16px;
  height: 16px;
  display: block;
}

.cancel-order-popup__title {
  margin: 0 0 16px;
  padding-right: 24px;
  font-size: var(--typo-h4-size);
  line-height: var(--typo-h4-height);
  font-weight: 600;
  letter-spacing: -0.16px;
  color: var(--base-foreground);
}

.cancel-order-popup__text {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.cancel-order-popup__actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.cancel-order-popup__btn-back,
.cancel-order-popup__btn-confirm {
  flex: 1;
  height: 40px;
}

@media (max-width: 767px) {
  .account-order-detail {
    max-width: none;
  }

  /* Заголовок и статус — колонкой (макеты 1-9737, 1-9786) */
  .order-detail__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* «Оплатить» + trash: gap 24px между заголовком и кнопками (1-9737) */
  .order-detail__head_pay {
    gap: 24px;
  }

  /* «В работе»: gap 4px между заголовком и статусом (1-9786) */
  .order-detail__head_pay.order-detail__head_in-progress {
    gap: 4px;
  }

  /* «Повторить»: gap 24px, кнопка во всю ширину */
  .order-detail__head_pay.order-detail__head_cancelled {
    gap: 24px;
  }

  .order-detail-pay__repeat-wrap {
    width: 100%;
  }

  .order-detail-pay__repeat-btn {
    width: 100%;
  }

  /* Статус под заголовком: 16px / 20px (1-9786) */
  .order-detail__head .order-detail__status,
  .order-detail__head_pay .order-detail-pay__status {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.16px;
  }

  /* Кнопка Оплатить на полную ширину, trash 40×40 (1-9737) */
  .order-detail-pay__actions {
    width: 100%;
  }

  .order-detail-pay__actions .order-detail-pay__btn {
    flex: 1;
  }

  .order-detail-item__content {
    height: auto;
  }

  /* Картинка товара 80×80 на мобилке */
  .order-detail-item__pic {
    width: 80px;
    height: 80px;
  }
}

/* ===== Настройки (account-settings) ===== */
.account-settings {
  width: 100%;
  max-width: 662px;
  margin-left: auto;
  margin-right: auto;
}

.account-settings__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.account-settings__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-settings__nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 9999px;
  color: var(--base-foreground);
  transition: background-color 0.2s, opacity 0.2s;
}

.account-settings__nav-item:hover {
  background: var(--base-secondary);
  opacity: 1;
}

.account-settings__nav-divider {
  width: 1px;
  height: 24px;
  background: var(--base-input);
  flex-shrink: 0;
}

.account-settings__nav-item img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  filter: brightness(0);
}

.account-settings__active-tab {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-settings__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: 9999px;
  flex-shrink: 0;
}

.account-settings__icon-wrap img {
  width: 16px;
  height: 16px;
  display: block;
  filter: brightness(0);
}

.account-settings__active-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
  color: var(--base-foreground);
  white-space: nowrap;
}

.account-settings__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-settings__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.account-settings__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 12px 12px 24px;
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.account-settings__card:hover {
  background: var(--base-secondary);
}

.account-settings__card-title {
  flex: 1;
  font-size: var(--typo-p2-size);
  font-weight: 500;
  line-height: 24px;
  color: var(--base-foreground);
}

.account-settings__card_destructive .account-settings__card-title {
  color: var(--destructive);
}

.account-settings__card_destructive:hover {
  border-color: var(--destructive);
}

.account-settings__card-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 12px;
}

.account-settings__card-chevron img {
  width: 16px;
  height: 16px;
  display: block;
}

.account-settings__card_destructive .account-settings__card-chevron img {
  filter: none;
  opacity: 0.7;
}

@media (max-width: 767px) {
  .account-settings__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Попап редактирования имени (account) ===== */
.edit-name-popup {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 110;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.edit-name-popup[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.edit-name-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.edit-name-popup__inner {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  background: var(--base-background);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  margin: auto;
  transform: scale(0.98);
  transition: transform 0.4s ease;
}

.edit-name-popup[aria-hidden="false"] .edit-name-popup__inner {
  transform: scale(1);
}

.edit-name-popup__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.edit-name-popup__close:hover {
  opacity: 1;
}

.edit-name-popup__close img {
  width: 16px;
  height: 16px;
  display: block;
}

.edit-name-popup__title {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.16px;
  color: var(--base-foreground);
}

.edit-name-popup__hint {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.edit-name-popup__input {
  margin-bottom: 24px;
}

.edit-name-popup__actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.edit-name-popup__btn-back,
.edit-name-popup__btn-save {
  flex: 1;
  height: 40px;
}

/* ===== Попап редактирования телефона (account) ===== */
.edit-phone-popup {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 110;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.edit-phone-popup[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.edit-phone-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.edit-phone-popup__inner {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  background: var(--base-background);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  margin: auto;
  transform: scale(0.98);
  transition: transform 0.4s ease;
}

.edit-phone-popup[aria-hidden="false"] .edit-phone-popup__inner {
  transform: scale(1);
}

.edit-phone-popup__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.edit-phone-popup__close:hover {
  opacity: 1;
}

.edit-phone-popup__close img {
  width: 16px;
  height: 16px;
  display: block;
}

.edit-phone-popup__title {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.16px;
  color: var(--base-foreground);
}

.edit-phone-popup__hint {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.edit-phone-popup__input {
  margin-bottom: 24px;
}

.edit-phone-popup__actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.edit-phone-popup__btn-back,
.edit-phone-popup__btn-save {
  flex: 1;
  height: 40px;
}

/* ===== Попап подтверждения телефона OTP (account) ===== */
.edit-phone-otp-popup {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 110;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.edit-phone-otp-popup[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.edit-phone-otp-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.edit-phone-otp-popup__inner {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  background: var(--base-background);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  margin: auto;
  transform: scale(0.98);
  transition: transform 0.4s ease;
}

.edit-phone-otp-popup[aria-hidden="false"] .edit-phone-otp-popup__inner {
  transform: scale(1);
}

.edit-phone-otp-popup__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.edit-phone-otp-popup__close:hover {
  opacity: 1;
}

.edit-phone-otp-popup__close img {
  width: 16px;
  height: 16px;
  display: block;
}

.edit-phone-otp-popup__title {
  margin: 0 0 16px;
  padding-right: 40px; /* место под крестик 16×16 */
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.16px;
  color: var(--base-foreground);
}

.edit-phone-otp-popup__hint {
  margin: 0 0 32px;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.edit-phone-otp-popup__otp-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

/* Поля OTP — фикс. 36×36 px по макету Figma 92-31093 */
.edit-phone-otp-popup__otp {
  width: auto;
  flex: none;
}

.edit-phone-otp-popup__otp .auth-otp__slot {
  flex: none;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
}

.edit-phone-otp-popup__resend {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.edit-phone-otp-popup__resend-text_disabled {
  opacity: 0.5;
  cursor: default;
}

.edit-phone-otp-popup__resend-text_active {
  opacity: 1;
  cursor: pointer;
  color: var(--base-foreground);
  text-decoration: none;
}

.edit-phone-otp-popup__resend-text_active:hover {
  text-decoration: underline;
}
.edit-phone-otp-popup__resend-link {
  color: inherit;
  text-decoration: none;
}
.edit-phone-otp-popup__resend-link:hover {
  text-decoration: underline;
}

.edit-phone-otp-popup__actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.edit-phone-otp-popup__btn-back,
.edit-phone-otp-popup__btn-confirm {
  flex: 1;
  height: 40px;
}

/* ===== Попап редактирования почты (account) ===== */
.edit-email-popup {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 110;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.edit-email-popup[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.edit-email-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.edit-email-popup__inner {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  background: var(--base-background);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  margin: auto;
  transform: scale(0.98);
  transition: transform 0.4s ease;
}

.edit-email-popup[aria-hidden="false"] .edit-email-popup__inner {
  transform: scale(1);
}

.edit-email-popup__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.edit-email-popup__close:hover {
  opacity: 1;
}

.edit-email-popup__close img {
  width: 16px;
  height: 16px;
  display: block;
}

.edit-email-popup__title {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.16px;
  color: var(--base-foreground);
}

.edit-email-popup__hint {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.edit-email-popup__input {
  margin-bottom: 24px;
}

.edit-email-popup__actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.edit-email-popup__btn-back,
.edit-email-popup__btn-save {
  flex: 1;
  height: 40px;
}

/* ===== Попап «Добавьте email» (гейт перед паролем) ===== */
.add-email-gate-popup {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 112;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.add-email-gate-popup[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.add-email-gate-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.add-email-gate-popup__inner {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  background: var(--base-background);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  margin: auto;
  transform: scale(0.98);
  transition: transform 0.4s ease;
}

.add-email-gate-popup[aria-hidden="false"] .add-email-gate-popup__inner {
  transform: scale(1);
}

.add-email-gate-popup__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.add-email-gate-popup__close:hover {
  opacity: 1;
}

.add-email-gate-popup__close img {
  width: 16px;
  height: 16px;
  display: block;
}

.add-email-gate-popup__title {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.16px;
  color: var(--base-foreground);
}

.add-email-gate-popup__hint {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.add-email-gate-popup__input {
  margin-bottom: 24px;
}

.add-email-gate-popup__actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.add-email-gate-popup__btn-back,
.add-email-gate-popup__btn-save {
  flex: 1;
  height: 40px;
}

/* ===== Попап подтверждения почты (account) ===== */
.edit-email-confirm-popup {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 111;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.edit-email-confirm-popup[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.edit-email-confirm-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.edit-email-confirm-popup__inner {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  background: var(--base-background);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  margin: auto;
  transform: scale(0.98);
  transition: transform 0.4s ease;
}

.edit-email-confirm-popup[aria-hidden="false"] .edit-email-confirm-popup__inner {
  transform: scale(1);
}

.edit-email-confirm-popup__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.edit-email-confirm-popup__close:hover {
  opacity: 1;
}

.edit-email-confirm-popup__close img {
  width: 16px;
  height: 16px;
  display: block;
}

.edit-email-confirm-popup__title {
  margin: 0 0 16px;
  padding-right: 24px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.16px;
  color: var(--base-foreground);
}

.edit-email-confirm-popup__text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

/* ===== Попап установки пароля (account) ===== */
.set-password-popup {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 112;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.set-password-popup[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.set-password-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.set-password-popup__inner {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  background: var(--base-background);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  margin: auto;
  transform: scale(0.98);
  transition: transform 0.4s ease;
}

.set-password-popup[aria-hidden="false"] .set-password-popup__inner {
  transform: scale(1);
}

.set-password-popup__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.set-password-popup__close:hover {
  opacity: 1;
}

.set-password-popup__close img {
  width: 16px;
  height: 16px;
  display: block;
}

.set-password-popup__title {
  margin: 0 0 16px;
  padding-right: 24px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.16px;
  color: var(--base-foreground);
}

.set-password-popup__hint {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.set-password-popup__input {
  margin-bottom: 4px;
}

.set-password-popup__input:last-of-type {
  margin-bottom: 24px;
}

.set-password-popup__actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.set-password-popup__btn-cancel,
.set-password-popup__btn-save {
  flex: 1;
  height: 40px;
}

/* ===== Попап успешной установки пароля (account) ===== */
.set-password-success-popup {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 113;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.set-password-success-popup[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.set-password-success-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.set-password-success-popup__inner {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  background: var(--base-background);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  margin: auto;
  transform: scale(0.98);
  transition: transform 0.4s ease;
}

.set-password-success-popup[aria-hidden="false"] .set-password-success-popup__inner {
  transform: scale(1);
}

.set-password-success-popup__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.set-password-success-popup__close:hover {
  opacity: 1;
}

.set-password-success-popup__close img {
  width: 16px;
  height: 16px;
  display: block;
}

.set-password-success-popup__title {
  margin: 0 0 16px;
  padding-right: 24px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.16px;
  color: var(--base-foreground);
}

.set-password-success-popup__text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

/* ===== Попап удаления аккаунта (account-settings) ===== */
.delete-account-popup {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 114;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.delete-account-popup[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.delete-account-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.delete-account-popup__inner {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  background: var(--base-background);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  margin: auto;
  transform: scale(0.98);
  transition: transform 0.4s ease;
}

.delete-account-popup[aria-hidden="false"] .delete-account-popup__inner {
  transform: scale(1);
}

.delete-account-popup__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.delete-account-popup__close:hover {
  opacity: 1;
}

.delete-account-popup__close img {
  width: 16px;
  height: 16px;
  display: block;
}

.delete-account-popup__title {
  margin: 0 0 16px;
  padding-right: 24px;
  font-size: var(--typo-h4-size);
  line-height: var(--typo-h4-height);
  font-weight: 600;
  letter-spacing: -0.16px;
  color: var(--base-foreground);
}

.delete-account-popup__text {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.delete-account-popup__input {
  margin-bottom: 24px;
}

.delete-account-popup__actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.delete-account-popup__btn-back,
.delete-account-popup__btn-delete {
  flex: 1;
  height: 40px;
}

/* Ссылка на всю ширину в мобильном меню */
.mobile-menu__link_full {
  display: block;
  padding: 12px 16px;
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-height);
  color: var(--base-foreground);
}

.mobile-menu__link_full:hover {
  background: var(--base-secondary);
}

/* ===== Restore (Восстановление пароля) ===== */
.restore-form {
  width: 100%;
  max-width: 384px;
  padding: 24px;
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}

.restore-form__title {
  margin: 0;
  text-align: center;
  font-weight: 600;
}

.restore-form__text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.restore-form__not-found {
  border-left: 2px solid var(--destructive);
  padding: 4px 16px;
  font-size: 12px;
  line-height: 16px;
  color: var(--base-foreground);
}

.restore-form__not-found[hidden] {
  display: none !important;
}

.restore-form__not-found-text {
  margin: 0;
}

.restore-form__not-found-text + .restore-form__not-found-text {
  margin-top: 4px;
}

.restore-form__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.restore-form__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 0;
}

.restore-form__submit {
  width: 100%;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.restore-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.button__spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: button-spin 0.6s linear infinite;
}
@keyframes button-spin {
  to { transform: rotate(360deg); }
}

.restore-form__back {
  width: 100%;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.restore-form__panel[hidden] {
  display: none !important;
}

.restore-form__panel_success {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
}

.restore-form__success-text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.restore-form__back_success {
  width: 100%;
}

/* ===== New password (новый пароль) ===== */
.new-password-form {
  width: 100%;
  max-width: 384px;
  padding: 24px;
  background: var(--base-background);
  border: 1px solid var(--base-input);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}
.new-password-form[hidden] {
  display: none;
}

.new-password-form__title {
  margin: 0;
  text-align: center;
  font-weight: 600;
}

.new-password-form__text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
}

.new-password-form__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.new-password-form__submit {
  width: 100%;
  height: 40px;
}

/* Скрыть бейдж корзины на пустой странице */
.header__cart_empty .header__cart-badge {
  display: none;
}

/* ===== Cart (Desktop ≥1024px) ===== */
.page_cart .nav {
  display: none;
}

.page_cart-empty .nav {
  display: none;
}

/* Меньше горизонтального «скачка» при смене высоты (оверлей / удаление строки) из-за полосы прокрутки */
.page_cart,
.page_cart-empty {
  scrollbar-gutter: stable;
}

.cart {
  padding-top: 48px;
  padding-bottom: 240px;
}

/* 758px = 662px контент + 48px×2 паддинги page__container */
.cart__inner {
  max-width: 758px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.cart__title {
  margin: 0;
  color: var(--base-foreground);
}

.cart__title-count {
  color: var(--muted-foreground);
  font-weight: 700;
}

.cart__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.cart-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  height: 140px;
}

.cart-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 140px;
}

.cart-item__pic {
  flex-shrink: 0;
  display: block;
  width: 140px;
  height: 140px;
  background: var(--muted-background);
  overflow: hidden;
}

.cart-item__pic-img,
.cart-item__pic img {
  display: block;
  width: 140px;
  height: 140px;
  object-fit: cover;
}

.cart-item__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.cart-item__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-item__name {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--base-foreground);
}

.cart-item__meta {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
  opacity: 0.5;
}

.cart-item__unit-price {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--base-foreground);
  opacity: 0.5;
}

.cart-item__unit-price[hidden] {
  display: none !important;
}

.cart-item__price {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--base-foreground);
  white-space: nowrap;
}

.cart-item__currency {
  font-weight: inherit;
}

.cart-summary_total .cart-item__currency {
  font-size: var(--typo-h3-size);
  line-height: var(--typo-h3-height);
}

.cart-item__actions {
  display: flex;
  align-items: center;
  align-self: flex-end;
  gap: 12px;
  width: 100%;
}

.cart-item__qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 120px;
  height: 44px;
  padding: 4px;
  border: 1px solid var(--muted-line);
  border-radius: 9999px;
}

.cart-item__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}

.cart-item__qty-btn:hover:not(.cart-item__qty-btn_disabled) {
  background: #F4F4F5;
}

.cart-item__qty-btn_disabled {
  opacity: 0.5;
  pointer-events: none;
}

.cart-item__qty-num {
  font-size: var(--typo-p2-size);
  font-weight: 500;
  line-height: var(--typo-p2-height);
  letter-spacing: var(--typo-p2-spacing);
  color: var(--base-foreground);
}

.cart-item__delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cart-item__delete:hover {
  background: #F4F4F5;
}

.cart__divider {
  height: 1px;
  background: var(--muted-line);
}

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--base-foreground);
}

.cart-summary__label {
  margin: 0;
}

.cart-summary__value {
  margin: 0;
  white-space: nowrap;
}

.cart-summary_total .cart-summary__value {
  font-size: var(--typo-h2-size);
  line-height: var(--typo-h2-height);
  font-weight: var(--typo-h2-weight);
}

.cart__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cart__disclaimer {
  margin: 0;
  text-align: center;
  color: var(--base-foreground);
  max-width: 100%;
}

.cart__disclaimer-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
}

.cart__disclaimer-link:hover {
  text-decoration: underline;
  color: inherit;
  opacity: 0.75;
}

.cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.cart__btn {
  width: 100%;
  height:56px;
  padding: 0 32px;
  font-size: var(--typo-p2-size);
  line-height: 20px;
  border-radius: 9999px;
  box-shadow: none;
}

/* ===== Корзина: компонент bitrix:sale.basket.basket (шаблон villa_decora, классы .cart-bx) =====
   Переопределения разметки/классов Битрикса; базовые .cart / .cart-item — выше. */

.cart-bx .basket-items-list-wrapper,
.cart-bx .basket-items-list-wrapper-compact {
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.cart-bx .basket-items-list-container {
  border: none;
  padding: 0;
}

/* Bitrix .default/style.css задаёт .basket-items-list { padding: 0 25px } — из-за этого блок товара
   смещён вправо относительно заголовка; при AJAX-перерисовке строки отступ может «отпадать» и картинка прыгает. */
.cart-bx .basket-items-list,
.cart-bx .basket-items-list.cart-bx__item-list,
.cart-bx #basket-item-list {
  padding: 0 !important;
  margin-left: 0;
  margin-right: 0;
  /* Не создавать контекст позиционирования для строк: оверлей строки цепляется к .cart-bx__item */
  position: static !important;
}

.cart-bx .cart__inner {
  padding-bottom: 0;
}

/* Заголовок «Корзина» и #basket-root внутри #cart-bx-active — тот же шаг, что gap у .cart__inner */
/* :not([hidden]) — иначе display:flex перебивает display:none у [hidden] и блок итогов остаётся на экране */
.cart-bx #cart-bx-active:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.cart-bx #cart-bx-active[hidden] {
  display: none !important;
}

.cart-bx #cart-bx-empty-ui[hidden] {
  display: none !important;
}

.cart-bx__root {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Отступ между списком товаров и блоком итогов — как gap у .cart__inner между секциями */
.cart-bx__total_bottom {
  margin-top: 48px;
}

.cart-bx__list-header_hidden {
  display: none !important;
}

.cart-bx__table {
  display: block;
  width: 100%;
  border: 0;
  border-collapse: collapse;
}

.cart-bx__table tbody,
.cart-bx__table tr,
.cart-bx__table td {
  display: block;
  width: 100%;
  border: 0 !important;
  padding: 0;
  margin: 0;
}

.cart-bx__row {
  margin-bottom: 0;
}

.cart-bx__row + .cart-bx__row {
  margin-top: 48px;
}

.cart-bx__cell {
  padding: 0;
}

.cart-bx__item.cart-item {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  min-height: 140px;
  height: auto;
  max-width: 100%;
  contain: layout;
}

/* Оверлей загрузки — жёстко внутри строки (.cart-bx__item), иначе картинка «прыгает» при AJAX */
.cart-bx .basket-items-list-item-overlay,
.cart-bx .cart-bx__item .basket-items-list-item-overlay {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  box-sizing: border-box;
  border-radius: inherit;
}

.cart-bx__item .cart-item__pic-wrap {
  flex-shrink: 0;
}

.cart-bx__item .cart-item__pic {
  display: block;
  width: 140px;
  height: 140px;
  background: var(--muted-background);
  border-radius: 0;
  overflow: hidden;
}

.cart-bx__item .cart-item__pic-img,
.cart-bx__item .cart-item__pic img {
  width: 140px;
  height: 140px;
  object-fit: cover;
}

.cart-bx__item .cart-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 140px;
  height: auto;
}

.cart-bx__item .cart-item__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.cart-bx__item .cart-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-bx__item .cart-item__name {
  margin: 0;
}

.cart-bx__item .cart-item__sum {
  text-align: right;
  flex-shrink: 0;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.cart-bx__item .cart-item__sum-old {
  margin: 0;
  opacity: 0.5;
  font-size: 14px;
}

.cart-bx__item .cart-item__price {
  margin: 0;
}

.cart-bx__item .cart-item__sum-diff {
  font-size: 12px;
  opacity: 0.7;
  text-align: right;
  max-width: 220px;
}

.cart-bx__item .cart-item__props .cart-item__meta,
.cart-bx__item .cart-item__props .basket-item-property {
  margin: 0;
}

.cart-bx__item .basket-item-scu-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.cart-bx__item .alert {
  margin-top: 8px;
  margin-bottom: 0;
  padding: 8px 12px;
}

.cart-bx__item .cart-item__actions {
  display: flex;
  align-items: center;
  align-self: flex-end;
  gap: 12px;
  width: 100%;
  margin-top: 0;
}

.cart-bx__item .cart-item__qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 120px;
  height: 44px;
  padding: 4px;
  border: 1px solid var(--muted-line);
  border-radius: 9999px;
  background: #fff;
  box-sizing: border-box;
}

.cart-bx__item .cart-item__qty-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  border: none !important;
  border-radius: 0;
  background: transparent;
  padding: 0;
  height: 100%;
}

.cart-bx__item .cart-item__qty-field-wrap.basket-item-amount-filed-block {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.cart-bx__item .cart-item__qty-input.basket-item-amount-filed {
  width: 100%;
  max-width: 48px;
  height: 36px;
  border: 0;
  text-align: center;
  font: inherit;
  font-size: var(--typo-p2-size);
  font-weight: 500;
  background: transparent;
  padding: 0;
}

.cart-bx__item .cart-item__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}

.cart-bx__item .cart-item__qty-btn:hover:not(:disabled):not(.cart-item__qty-btn_disabled) {
  background: #f4f4f5;
}

.cart-bx__item .cart-item__qty-btn:disabled,
.cart-bx__item .cart-item__qty-btn.cart-item__qty-btn_disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

.cart-bx__item .cart-item__delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
  opacity: 1;
  transition: background-color 0.2s;
}

.cart-bx__item .cart-item__delete:hover {
  background: #f4f4f5;
}

.cart-bx__item .cart-item__unit-price {
  margin: 0;
}

.cart-bx__warning {
  margin-bottom: 16px;
}

.cart-bx__warning.alert {
  border-radius: 8px;
}

.cart-bx__checkout.basket-checkout-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 48px;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.cart-bx__divider {
  width: 100%;
  margin: 0;
  flex-shrink: 0;
}

.cart-bx__summary {
  margin: 0;
}

.cart-bx__summary-total {
  margin: 0;
}

.cart-bx__summary-total .cart-summary__row {
  align-items: flex-start;
}

.cart-bx__summary-total .cart-summary__value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

.cart-bx__summary-total .cart-item__sum-old {
  font-size: 14px;
  opacity: 0.5;
}

.cart-bx__economy {
  margin-top: 4px;
}

.cart-bx__actions {
  margin-top: 0;
}

.cart-bx__actions .basket-btn-checkout {
  width: 100%;
}

@media (max-width: 767px) {
  .cart-bx__hide-sm {
    display: none !important;
  }

  .cart-bx__item.cart-item {
    min-height: 0;
  }

  .cart-bx__item .cart-item__pic,
  .cart-bx__item .cart-item__pic-img,
  .cart-bx__item .cart-item__pic img {
    width: 80px;
    height: 80px;
  }

  .cart-bx__item .cart-item__content {
    min-height: 80px;
  }

  /* Строка: название слева (в .cart-item__info), итоговая цена справа (.cart-item__sum), как в макете */
  .cart-bx__item .cart-item__body {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .cart-bx__item .cart-item__sum {
    text-align: right;
    align-items: flex-end;
    width: auto;
    flex-shrink: 0;
    padding-top: 0;
  }

  .cart-bx__item .cart-item__sum-diff {
    text-align: right;
  }
}

/* ===== Order (оформление заказа, Desktop ≥1024px) ===== */
.page_order .nav {
  display: none;
}

/* Футер на странице оформления заказа — компактный, без верхней части (Figma 146-30483) */
.page_order .footer__top,
.page_order .footer__bg {
  display: none !important;
}

.page_order .footer {
  padding-top: 24px;
  padding-bottom: 48px;
}

.page_order .footer__middle {
  padding-top: 0;
  padding-bottom: 24px;
}

.order {
  padding-top: 48px;
  padding-bottom: 240px;
  background: #F4F4F5;
}

.order__inner {
  max-width: 662px;
  margin: 0 auto;
  padding: 64px 80px 88px;
  background: var(--base-background);
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Страница подтверждения после заказа (confirm.php) */
.page_order .order__confirm {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: var(--typo-p2-size);
  line-height: 24px;
  color: var(--base-foreground);
}

.page_order .order__confirm-block {
  margin: 0;
}

.page_order .order__confirm .pay_name {
  margin: 0 0 8px;
  font-size: var(--typo-p2-size);
  font-weight: 600;
}

.page_order .order__confirm-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.page_order .order__confirm-error {
  background: rgba(220, 38, 38, 0.08);
  color: var(--destructive);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}

.order__title {
  margin: 0;
  color: var(--base-foreground);
}

.order__summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order__summary-label {
  margin: 0;
  color: var(--base-foreground);
}

.order__summary-sum {
  display: flex;
  align-items: baseline;
  gap: 1px;
}

.order__summary-value {
  font-size: var(--typo-h3-size);
  line-height: var(--typo-h3-height);
  font-weight: 700;
  color: var(--base-foreground);
}

.order__summary-currency {
  margin: 0;
  color: var(--base-foreground);
}

.order__summary-row_secondary {
  margin: 0;
  color: var(--base-foreground);
}

.order__divider {
  margin: 0;
  border: none;
  height: 1px;
  background: var(--muted-line);
}

.order__form {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.order__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order__delivery-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order__delivery-label {
  margin: 0;
  color: var(--base-foreground);
}

.radio-group_vertical .radio-group__item {
  display: flex;
}

.radio-group__item_block {
  align-items: flex-start;
  width: 100%;
}

/* Способ доставки: кликабельная область только по блоку, не на всю ширину */
.order__delivery-block .radio-group__item_block {
  width: fit-content;
}

.radio-group__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.radio-group__desc {
  margin: 0;
  margin-top: 0;
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-height);
  font-weight: 400;
  color: var(--muted-foreground);
}

.order__address-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order__address-panel[hidden] {
  display: none !important;
}


.order__address-input .order__address-hint {
  margin: 4px 0 0;
  color: var(--base-foreground);
}

.order__map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  height: 40px;
  padding: 0 16px;
  font-size: var(--typo-label-size);
  font-weight: 500;
  border-radius: 9999px;
}

.order__map-btn-icon {
  flex-shrink: 0;
}

/* Чекбокс согласия на странице заказа: 48px сверху и снизу, блок ошибки не занимает место когда скрыт */
.order__consent {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: -24px;
}
.order__consent_error .order__consent-checkbox {
  border-color: var(--destructive);
}
.order__consent .input__error_hidden {
  display: none;
}
.order__consent-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-height);
  font-weight: 500;
  color: var(--base-foreground);
}
.order__consent-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.order__consent-checkbox {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid var(--base-foreground);
  border-radius: 2px;
  background: var(--base-background);
  transition: background-color 0.2s, border-color 0.2s;
}
.order__consent-input:checked + .order__consent-checkbox {
  background: var(--base-foreground);
  border-color: var(--base-foreground);
}
.order__consent-checkbox .order__consent-icon {
  opacity: 0;
  transition: opacity 0.2s;
}
.order__consent-input:checked + .order__consent-checkbox .order__consent-icon {
  opacity: 1;
}
.order__consent-text {
  flex: 1;
  min-width: 0;
}
.order__consent-text a {
  text-decoration: underline;
  color: inherit;
}
.order__consent-text a:hover {
  color: var(--muted-foreground);
}

.order__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order__submit,
.order__back {
  width: 100%;
  height: 56px;
  padding: 0 32px;
  font-size: var(--typo-p2-size);
  line-height: 24px;
  font-weight: 500;
  border-radius: 9999px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Map popup (попап «Укажите на карте») */
.map-popup {
  position: fixed;
  inset: 0;
  z-index: 110; /* выше хедера (105), как форма обратной связи */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}

.map-popup[aria-hidden="true"] {
  visibility: hidden;
}

.map-popup[aria-hidden="false"] {
  pointer-events: auto;
  visibility: visible;
}

.map-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.map-popup__inner {
  position: relative;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  background: var(--base-background);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.98);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.map-popup[aria-hidden="false"] .map-popup__inner {
  transform: scale(1);
  opacity: 1;
}

.map-popup__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 2;
}

.map-popup__close:hover {
  opacity: 0.7;
}

.map-popup__title {
  margin: 0;
  padding: 24px 24px 0;
  font-size: var(--typo-p2-size);
  line-height: 20px;
  color: var(--base-foreground);
}

.map-popup__content {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.map-popup__desc {
  margin: 0;
  font-size: var(--typo-label-size);
  line-height: 20px;
  color: var(--base-foreground);
}

.map-popup__address-wrap {
  flex-shrink: 0;
}

.map-popup__map {
  flex: 1;
  min-height: 320px;
  width: 100%;
  background: var(--muted-background);
}

.map-popup__actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  padding: 24px;
  flex-shrink: 0;
}

.map-popup__btn {
  padding: 0 16px;
  height: 40px;
  font-size: var(--typo-label-size);
  font-weight: 500;
  width: 50%;
  border-radius: 9999px;
}

.product-card__unit {
  font-size: inherit;
  font-weight: inherit;
  color: var(--muted-foreground);
}

/* ===== Product page (Desktop ≥1024px) ===== */
.page_product .nav {
  display: none;
}

.page_product .product-page__above-related {
  position: relative;
}

/*
 * Служебный DOM для JCCatalogElement (цены, корзина, setOffer): картинки не показывать —
 * галерея только .product-gallery и попап «Все медиа».
 */
.page_product .villa-ce-jccatalog-slider,
.page_product #villa-ce-jccatalog-slider-anchor {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}


.page_product .product-gallery__nav,
.page_product .product-gallery__media-btn,
.page_product .product-docs__download,
.page_product .product-sidebar__add,
.villa-decora-product .product-related__nav,
.page_product .product-page .button {
  box-shadow: none;
}

.breadcrumbs {
  padding-bottom: 40px;
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs__item:not(:last-child)::after {
  content: ">";
  font-size: var(--typo-label-size);
  font-weight: 500;
  line-height: var(--typo-label-height);
  color: var(--base-foreground);
}

.breadcrumbs__link {
  font-size: var(--typo-label-size);
  font-weight: 500;
  line-height: var(--typo-label-height);
  letter-spacing: var(--typo-label-spacing);
  color: var(--base-foreground);
  text-decoration: none;
}

.breadcrumbs__link:hover {
  text-decoration: underline;
}

.breadcrumbs__item[aria-current="page"] {
  font-size: var(--typo-label-size);
  font-weight: 500;
  line-height: var(--typo-label-height);
  color: var(--base-foreground);
}

.product-page__content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 64px;
  min-width: 0;
}

/* Десктоп: flex — main-col (left + desc) + sidebar. Сначала сжимается сайдбар до 300px, потом левая колонка */
@media (min-width: 1024px) {
  .page_product .product-page__content {
    display: flex;
    flex-direction: row;
  }

  .page_product .product-page__main-col {
    flex: 1 1 776px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .page_product .product-page__left {
    flex: 0 0 auto;
  }

  .page_product .product-page__sidebar-wrap {
    flex: 0 100 548px;
    min-width: 300px;
    max-width: 548px;
    align-self: stretch;
  }
}

/* Левая часть: сжимается после того как сайдбар достиг 300px */
.product-page__left {
  flex: 1 1 776px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Сайдбар: первым сжимается до 300px, затем левая часть */
.product-page__sidebar-wrap {
  flex: 0 100 548px;
  min-width: 300px;
  max-width: 548px;
  align-self: stretch;
}

.product-page__sidebar {
  width: 100%;
  position: sticky;
  top: 150px; 
  align-self: flex-start;
}

/* Галерея: превью 94px (без изменений) + основное фото (сжимается), высота превью следует за основным */
.product-gallery {
  display: flex;
  gap: 20px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  margin-bottom: 64px;
}

.product-gallery__thumbs-wrap {
  position: relative;
  flex-shrink: 0;
  width: 94px;
  min-height: 0; /* сжатие под высоту основного фото */
  max-height: 560px;
  align-self: stretch;
  overflow: hidden;
}

.product-gallery__thumbs {
  width: 94px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.product-gallery__thumbs .swiper-slide {
  width: 94px;
  height: 94px;
  overflow: hidden;
  background: var(--muted-background);
  cursor: pointer;
  transition: opacity 0.2s;
  outline: 1.5px solid #F2F5FA;
  outline-offset: -1.5px;
}

.product-gallery__thumbs .swiper-slide:hover {
  opacity: 0.9;
}

.product-gallery__thumbs .swiper-slide-thumb-active {
  outline-color: var(--base-foreground);
}

.product-gallery__thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.product-gallery__thumbs-less,
.product-gallery__thumbs-more {
  position: absolute;
  left: 0;
  width: 94px;
  height: 50px;
  z-index: 10;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-gallery__thumbs-more {
  bottom: 0;
}

.product-gallery__thumbs-less {
  top: 0;
}

.product-gallery__thumbs-less.is-hidden,
.product-gallery__thumbs-more.is-hidden {
  display: none;
}

.product-gallery__thumb-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), white);
  pointer-events: none;
}

.product-gallery__thumb-fade_up {
  background: linear-gradient(to top, rgba(255,255,255,0.4), white);
}

.product-gallery__thumbs-less > img {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  transform: rotate(180deg);
}

.product-gallery__thumbs-more > img {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
}

/* Основное фото: пропорционально до min-height 497px, затем только по ширине (обрезка) */
.product-gallery__main {
  position: relative;
  flex: 1;
  min-width: 0;
  align-self: flex-start;
  aspect-ratio: 662 / 560;
  min-height: 497px;
  max-height: 560px;
  background: var(--muted-background);
  overflow: hidden;
}

.product-gallery__main .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Вертикальное фото: по центру, фон по краям */
.product-gallery__main .swiper-slide[data-orientation="vertical"] img {
  object-fit: contain;
  object-position: center;
}

.product-gallery__nav {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--base-secondary);
  cursor: pointer;
  transition: opacity 0.2s;
  z-index: 10;
}

.product-gallery__nav:hover {
  opacity: 0.9;
}

.product-gallery__nav_prev {
  left: 12px;
  right: auto;
}

.product-gallery__nav_prev img {
  transform: rotate(180deg);
}

.product-gallery__nav_next {
  right: 12px;
}

.product-gallery__nav.swiper-button-disabled {
  display: none;
}

.product-gallery__media-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  border-radius: 9999px;
  z-index: 10;
}

.product-desc {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.product-desc__text {
  margin: 0;
  color: var(--base-foreground);
  line-height: 28px;
}

.product-specs__title,
.product-docs__title,
.product-kit__title {
  margin: 0 0 24px;
  color: var(--base-foreground);
}

.product-specs__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-specs__row {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.product-specs__term {
  margin: 0;
  color: var(--base-foreground);
}

.product-specs__value {
  margin: 0;
  color: var(--base-foreground);
}

.product-docs__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-docs__item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.product-docs__icon-link {
  flex-shrink: 0;
  display: block;
  color: var(--base-foreground);
  text-decoration: none;
  transition: opacity 0.2s;
}

.product-docs__icon-link:hover {
  opacity: 0.8;
}

.product-docs__icon {
  display: block;
  width: 40px;
  height: 40px;
}

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

.product-docs__name {
  display: inline-block;
  width: fit-content;
  font-size: var(--typo-label-size);
  font-weight: 500;
  line-height: var(--typo-label-height);
  letter-spacing: -0.14px;
  color: var(--base-foreground);
  text-decoration: none;
}

.product-docs__name:hover {
  text-decoration: underline;
}

.product-docs__size {
  font-size: var(--typo-label-size);
  font-weight: 400;
  line-height: var(--typo-label-height);
  letter-spacing: 0;
  color: var(--muted-foreground);
}

.product-docs__download {
  display: inline-flex;
  height: 40px;
  align-self: flex-start;
  border-radius: 9999px;
}

.product-kit__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-kit__item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.product-kit__pic {
  flex-shrink: 0;
  width: 94px;
  height: 94px;
  overflow: hidden;
  background: var(--muted-background);
}

.product-kit__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-kit__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-kit__name {
  margin: 0 0 4px;
  color: var(--base-foreground);
}

.product-kit__desc {
  margin: 0 0 4px;
  color: var(--base-foreground);
  opacity: 0.5;
}

.product-kit__size {
  margin: 0;
  color: var(--base-foreground);
  opacity: 0.5;
}

.product-sidebar {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 8px;
}

.product-sidebar__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.product-sidebar__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-sidebar__title-block {
  display: flex;
  flex-direction: column;
}

.product-sidebar__title {
  margin: 0;
  color: var(--base-foreground);
}

.product-sidebar__subtitle {
  margin: 0;
  color: var(--base-foreground);
}

.product-sidebar__price {
  display: flex;
  align-items: baseline;
  gap: 1px;
}

.product-sidebar__price-value {
  margin: 0;
  color: var(--base-foreground);
}

.product-sidebar__price-currency {
  margin: 0;
  color: var(--base-foreground);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.2px;
}

.product-sidebar__divider {
  height: 1px;
  background: var(--base-input);
}

.product-sidebar__color {
  display: flex;
  flex-direction: column;
}

.product-sidebar__color-title {
  margin: 0;
  color: var(--base-foreground);
}

.product-sidebar__color-selected {
  margin: 0;
  color: var(--base-foreground);
}

.product-sidebar__color-options {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 16px;
}

.product-sidebar__color-option {
  display: block;
  width: 64px;
  height: 64px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: opacity 0.2s;
  text-decoration: none;
  color: inherit;
}

.product-sidebar__color-option:hover {
  opacity: 0.9;
}

.product-sidebar__color-option img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.product-sidebar__color-option_active img {
  outline: 2px solid var(--base-foreground);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Скрытый SKU-tree для JCCatalogElement; выбор варианта в вёрстке — villa-offer-swatches */
.product-sidebar__color-tree_villa-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.product-sidebar__color-option-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 4px;
  text-align: center;
  line-height: 1.2;
  border-radius: 8px;
  background: var(--base-secondary);
  font-size: 11px;
}

.product-sidebar__color-option_active .product-sidebar__color-option-fallback {
  outline: 2px solid var(--base-foreground);
  outline-offset: 2px;
}

.product-sidebar__delivery {
  display: flex;
  flex-direction: column;
}

.product-sidebar__delivery-title {
  margin: 0;
  color: var(--base-foreground);
}

.product-sidebar__delivery-text {
  margin: 0;
  color: var(--base-foreground);
}

.product-sidebar__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  max-width: 548px;
}

.product-sidebar__qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 132px;
  height: 56px;
  padding: 8px;
  background: var(--base-input);
  border-radius: 9999px;
}

.product-sidebar__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}

.product-sidebar__qty-btn:hover {
  background: var(--muted-background);
}

.product-sidebar__qty-btn_disabled {
  opacity: 0.5;
  pointer-events: none;
}

.product-sidebar__qty-num {
  font-size: var(--typo-p2-size);
  font-weight: 500;
  line-height: var(--typo-p2-height);
  letter-spacing: var(--typo-p2-spacing);
  color: var(--base-foreground);
}

.product-sidebar__add {
  flex: 1;
  height: 56px;
  padding-left: 32px;
  padding-right: 32px;
  border-radius: 9999px;
}

/* Состояние «Добавлено в корзину» по макету */
.product-sidebar__add_added {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.product-related {
  padding-top: 64px;
  padding-bottom: 148px;
}

.product-related__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
}

.product-related__title {
  margin: 0;
  color: var(--base-foreground);
}

/* На планшете и десктопе — typo-h2 (на мобилке typo-h3 для отступа от стрелок) */
@media (min-width: 768px) {
  .villa-decora-product .product-related__title {
    font-size: var(--typo-h2-size);
    line-height: var(--typo-h2-height);
    letter-spacing: var(--typo-h2-spacing);
    font-weight: var(--typo-h2-weight);
  }
}

.product-related__nav-wrap {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Стрелки напротив заголовка, чёрные, icon-chevron-right-light */
.product-related__nav {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--base-foreground);
  cursor: pointer;
  transition: opacity 0.2s;
}

.product-related__nav:hover {
  opacity: 0.9;
}

.product-related__nav_prev img {
  transform: rotate(180deg);
}

/* Обе стрелки всегда видны; неактивная — opacity 25% */
.product-related__nav.swiper-button-disabled {
  opacity: 0.25;
  pointer-events: none;
}

.product-related__wrap {
  position: relative;
}

.product-related__swiper {
  position: relative;
  overflow: hidden;
}

.product-related__swiper .swiper-wrapper {
  align-items: stretch;
  justify-content: flex-start;
}

.product-related__item {
  flex-shrink: 0;
  width: 321px;
}

/* Детальная товара (Битрикс): сетка слайдера — не фиксированная 321px */
.villa-decora-product .product-related__wrap,
.villa-decora-product .product-related__swiper {
  width: 100%;
  max-width: 100%;
}

.villa-decora-product .product-related__item {
  width: auto;
  box-sizing: border-box;
}

.villa-decora-product .product-related__item .product-card {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .villa-decora-product .product-related__item .product-card__image-wrap {
    max-height: none;
    aspect-ratio: 1;
    max-width: 100%;
  }

  .villa-decora-product .product-related__item .product-card__image-wrap[data-orientation="vertical"] {
    max-height: none;
    aspect-ratio: 3 / 4;
  }

  .villa-decora-product .product-related__item .product-card__image-wrap[data-orientation="vertical"] .product-card__image,
  .villa-decora-product .product-related__item .product-card__image-wrap[data-orientation="vertical"] .product-card__slide .product-card__image {
    max-height: none;
  }

  .villa-decora-product .product-related__item .product-card__image,
  .villa-decora-product .product-related__item .product-card__slide .product-card__image {
    max-height: none;
  }
}

/* Планшет и десктоп: стрелки скрыты, если товаров ≤ 4 (!important — перебить display:flex у .product-related__nav-wrap) */
@media (min-width: 768px) {
  .villa-decora-product .product-related.product-related_hide-nav-tablet .product-related__nav-wrap {
    display: none !important;
  }
}

/* Мобилка: стрелки скрыты, если товаров ≤ 2 */
@media (max-width: 767px) {
  .villa-decora-product .product-related.product-related_hide-nav-mobile .product-related__nav-wrap {
    display: none !important;
  }
}

.product-related__item .product-card {
  height: 100%;
}

.product-related__item .product-card__image-wrap {
  max-height: 321px;
}

.product-related__item .product-card__image-wrap[data-orientation="vertical"] {
  max-height: 321px;
}

.product-related__item .product-card__image-wrap[data-orientation="vertical"] .product-card__image,
.product-related__item .product-card__image-wrap[data-orientation="vertical"] .product-card__slide .product-card__image {
  max-height: 321px;
}

/* ===== Footer (Desktop ≥1024px) ===== */
.footer {
  position: relative;
  background: var(--footer-bg);
  padding-top: 100px;
  padding-bottom: 48px;
}

.footer__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.footer__watermark-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 100%;
  max-width: 1440px;
  padding: 0;
  box-sizing: border-box;
}

.footer__watermark {
  display: block;
  width: 100%;
  height: auto;
  max-height: 257px;
  object-fit: contain;
  object-position: top center;
}

.footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
}

.footer__cols {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
  margin-left: auto;
}

.footer__cols .footer__col {
  width: 208px;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 321px;
}

.footer__brand-name {
  margin: 0;
  font-size: var(--typo-h4-size);
  font-weight: var(--typo-h4-weight);
  line-height: var(--typo-h4-height);
  letter-spacing: -0.01em;
  color: var(--base-foreground);
}

.footer__brand-desc {
  margin: 0;
  font-size: var(--typo-p2-size);
  font-weight: 400;
  line-height: var(--typo-p2-height);
  letter-spacing: -0.01em;
  color: var(--base-foreground);
}

.footer__col-title {
  margin: 0 0 16px;
  font-size: var(--typo-h4-size);
  font-weight: var(--typo-h4-weight);
  line-height: var(--typo-h4-height);
  letter-spacing: -0.01em;
  color: var(--base-foreground);
}

.footer__col-title a {
  color: inherit;
  text-decoration: none;
}

.footer__col-title a:hover {
  text-decoration: underline;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__links a {
  display: inline-block;
  font-size: var(--typo-label-size);
  font-weight: 500;
  line-height: var(--typo-label-height);
  letter-spacing: -0.01em;
  color: var(--base-foreground);
}

.footer__links a:hover {
  text-decoration: underline;
}

.footer__btn-partners_pill {
  border-radius: 9999px;
  margin-top: 48px;
  width: 200px;
  height: 40px;
}

.footer__middle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 130px 0 24px 0;
}

.footer__social {
  display: flex;
  gap: 8px;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--base-input);
  border-radius: 50%;
}

.footer__social-link:hover {
  opacity: 0.85;
}

.footer__social-icon {
  display: block;
  width: 16px;
  height: 16px;
}

.footer__payments {
  display: flex;
  gap: 8px;
  align-items: center;
}

.footer__payment-icon {
  display: block;
  width: 35px;
  height: 24px;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--base-input);
}

.footer__copy {
  margin: 0;
  font-size: var(--typo-label-size);
  font-weight: 500;
  line-height: var(--typo-label-height);
  letter-spacing: -0.01em;
  color: var(--base-foreground);
  opacity: 0.5;
}

.footer__legal {
  display: flex;
  gap: 20px;
}

.footer__legal a {
  font-size: var(--typo-label-size);
  font-weight: 500;
  line-height: var(--typo-label-height);
  letter-spacing: -0.01em;
  color: var(--base-foreground);
  opacity: 0.5;
}

.footer__legal a:hover {
  text-decoration: underline;
}

/* ===== Tablet + Mobile (≤ 1023) ===== */
@media (max-width: 1023px) {
  .page__container {
    padding-left: 32px;
    padding-right: 32px;
  }

  .header__inner {
    height: 88px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .header__phone {
    display: none;
  }

  .header__right {
    gap: 24px;
  }

  .nav__row {
    height: auto;
  }

  /* Кнопка «Весь каталог»: Figma 29-38496 — right 32px на планшете */
  .nav__catalog-btn {
    top: 18px;
  }

  .nav__list {
    flex-wrap: wrap;
    gap: 20px;
  }

  .nav__link {
    padding: 16px;
  }

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

  /* Планшет: dividers на позициях 4,8,12… (каждые 2 карточки) */
  .catalog__row-divider:nth-child(4n) {
    display: block;
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .footer__top {
    flex-wrap: wrap;
    gap: 32px;
  }

  .footer__middle {
    flex-wrap: wrap;
    gap: 16px;
  }

  .footer__inner {
    gap: 0;
  }

  .footer {
    padding-top: 60px;
    padding-bottom: 32px;
  }

  /* Планшет: Figma 36-35200 — gap 16px, бренд 254px, описание Label 14px */
  /* Водяной знак 1440px без паддингов — не переопределяем footer__watermark-wrap */
  .footer__cols {
    gap: 16px;
  }

  .footer__cols .footer__col {
    width: 160px;
  }

  .footer__brand {
    max-width: 254px;
  }

  .footer__brand-desc {
    font-size: var(--typo-label-size);
    line-height: var(--typo-label-height);
  }

  .feedback__inner {
    padding: 32px 24px;
    gap: 32px;
  }

  .feedback__row {
    flex-direction: column;
    gap: 32px;
  }

  .feedback__divider {
    width: 100%;
    height: 1px;
  }

  .feedback__col_right {
    padding-top: 0;
  }

  .feedback__block {
    flex: none;
  }

  .feedback__radio-desc-wrap {
    flex: none;
  }

  .feedback__spacer {
    display: none;
  }

  /* Страница товара: фоллбек для планшета/мобилки (ориентир — десктоп). Порядок left → sidebar → desc (+ блоки под описанием) */
  .product-page__content {
    flex-direction: column;
  }

  .page_product .product-page__content {
    gap: 48px;
  }

  .page_product .product-page__main-col {
    display: contents;
  }

  .page_product .product-page__left {
    order: 1;
  }

  .page_product .product-page__sidebar-wrap {
    order: 2;
  }

  .page_product .product-page__desc {
    order: 3;
  }

  /*
   * В статической вёрстке характеристики/доки/комплектация лежат внутри .product-page__desc.
   * В шаблоне catalog.element они — отдельные секции-сёстры; при display:contents у main-col
   * без order они остаются с order:0 и оказываются выше галереи (order:1).
   */
  .page_product .product-page__specs,
  .page_product .product-page__tech-docs,
  .page_product .product-page__complect,
  .page_product .product-page__presentation-pdf {
    order: 3;
  }

  .product-page__left {
    width: 100%;
    flex: 0 0 auto;
  }

  .product-gallery {
    width: 100%;
  }

  .product-gallery__main {
    width: auto;
    flex: 1;
  }

  .product-page__sidebar-wrap {
    flex: 0 0 auto;
    align-self: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .product-page__sidebar {
    position: static;
    width: 100%;
  }

  .product-sidebar {
    height: auto;
    justify-content: flex-start;
    padding-bottom: 32px;
  }

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

/* ===== Tablet only (768–1023): градиент, скролл меню — Figma 29-38496; форма «Связаться» — Figma 29-38695; пустая корзина — Figma 1-8589; страница товара — Figma 1-8318 ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 628px = 564px контент + 32px×2 паддинги page__container */
  .cart__inner {
    max-width: 628px;
  }

  .cart-empty__inner {
    width: 344px;
  }

  /* Галерея: main сверху, превью горизонтально снизу */
  .page_product .product-gallery {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0;
  }

  .page_product .product-gallery__thumbs-wrap {
    order: 2;
    width: 100%;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
  }

  .page_product .product-gallery__main {
    order: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 600px;
    aspect-ratio: 768 / 570;
  }

  .page_product .product-gallery__thumbs {
    flex: 1;
    min-width: 0;
    height: 94px;
    overflow: hidden;
  }

  .page_product .product-gallery__thumbs .swiper-wrapper {
    flex-direction: row;
  }

  .page_product .product-gallery__thumbs .swiper-slide {
    width: 94px;
    height: 94px;
    flex-shrink: 0;
  }

  .page_product .product-gallery__thumbs-less,
  .page_product .product-gallery__thumbs-more {
    width: 48px;
    height: 94px;
    top: 0;
    bottom: 0;
  }

  .page_product .product-gallery__thumbs-less {
    left: 0;
    right: auto;
  }

  .page_product .product-gallery__thumbs-more {
    left: auto;
    right: 0;
  }

  .page_product .product-gallery__thumbs-more .product-gallery__thumb-fade {
    background: linear-gradient(to left, white, rgba(255,255,255,0));
  }

  .page_product .product-gallery__thumbs-less .product-gallery__thumb-fade_up {
    background: linear-gradient(to right, white, rgba(255,255,255,0));
  }

  .page_product .product-gallery__thumbs-less > img {
    transform: rotate(90deg);
  }

  .page_product .product-gallery__thumbs-more > img {
    transform: rotate(-90deg);
  }

  .product-card__image-wrap[data-orientation="vertical"] {
    max-height: 460px;
  }

  .product-card__image-wrap[data-orientation="vertical"] .product-card__image,
  .product-card__image-wrap[data-orientation="vertical"] .product-card__slide .product-card__image {
    max-height: 460px;
  }

  /* Размеры по макету: row 52px, padding 16px */
  .nav__row {
    height: 52px;
  }

  .nav__link {
    padding: 16px;
  }

  /* Кнопка: right 32px, top 34px по макету, выше градиента */
  .nav__catalog-btn {
    right: 32px;
    top: 34px;
    z-index: 10;
  }

  /* Форма «Связаться» — планшет, Figma 29-38695 */
  .feedback__inner {
    padding: 48px;
    gap: 48px;
  }

  .feedback__form {
    gap: 12px;
  }

  .feedback__row {
    flex-direction: row;
    gap: 32px;
    align-items: stretch;
  }

  .feedback__divider {
    width: 1px;
    height: auto;
    align-self: stretch;
  }

  .feedback__col_right {
    padding-top: 24px;
    gap: 4px;
  }

  .feedback__panel {
    gap: 4px;
  }

  .feedback__block {
    flex: none;
    height: 220px;
    gap: 16px;
  }

  .feedback__radio-desc-wrap {
    flex: none;
  }

  .feedback__spacer {
    display: block;
    flex: 1;
    min-height: 0;
  }

  .feedback .input__field {
    height: 36px;
    padding: 8px 12px;
  }

  .feedback .input_variant_textarea .input__field {
    min-height: 60px;
    padding: 8px 12px;
  }


  .nav__row_bottom::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 45%);
    pointer-events: none;
    z-index: 1;
  }
}

/* ===== Mobile (≤ 767) ===== */
@media (max-width: 767px) {
  .page__container {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Страница оформления заказа — белое поле на сером фоне */
  .order {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 200px;
  }

  .order__inner {
    padding: 40px 24px 64px;
  }

  .order__title {
    text-align: center;
  }

  /* Попап карты — мобильная версия по макету Figma */
  .map-popup {
    padding: 20px 24px;
    align-items: stretch;
  }

  .map-popup__backdrop {
    background: rgba(24, 24, 27, 0.5);
  }

  .map-popup__inner {
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .map-popup__title {
    padding-top: 24px;
    padding-bottom: 16px;
    padding-left: 24px;
    padding-right: 24px;
    font-size: var(--typo-p2-size);
    font-weight: 600;
    line-height: 20px;
  }

  .map-popup__content {
    padding: 0 24px 24px;
    gap: 16px;
  }

  .map-popup__map {
    min-height: 350px;
    flex: 1;
  }

  .map-popup__actions {
    flex-direction: column-reverse;
  }

  .map-popup__btn {
    width: 100%;
  }

  .header__inner {
    height: auto;
    min-height: 80px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .page_account .header__inner {
    height: 80px;
  }

  body {
    padding-top: 80px; /* высота хедера на мобилке */
  }

  /* Страница товара: sticky footer — убирает «дырку» между блоком «Приобретается отдельно» и футером */
  body.page_product {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  body.page_product .product-page {
    flex: 1;
  }

  /* На мобилке скрываем десктопный блок, показываем только лого + корзина + бургер */
  .header__right:not(.header__right_mobile) {
    display: none;
  }

  .header__right_mobile {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .header__burger {
    display: flex;
  }

  .header__logo img {
    width: auto;
    max-width: 160px;
    height: 32px;
  }

  /* Меню с кнопкой — только для десктопа и планшета */
  .nav {
    display: none;
  }

  /* Оверлей каталога скрыт на мобильной, при переключении на мобилку — закрывается через JS */
  .catalog-overlay {
    display: none !important;
  }

  .nav__row {
    height: auto;
  }

  .nav__list {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .nav__link {
    padding: 8px 0;
  }

  /* Форма «Связаться» — мобильная версия */
  .feedback {
    padding: 20px;
    overflow: hidden;
    align-items: stretch;
  }

  .feedback__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 32px;
    gap: 64px;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .feedback__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 0 auto;
  }

  .feedback__row {
    flex-direction: column;
    gap: 32px;
    flex: 0 0 auto;
  }

  .feedback__row .feedback__col {
    flex: 0 0 auto;
    min-width: unset;
  }

  .feedback__col_left {
    flex: 0 0 auto;
    gap: 24px;
  }

  .feedback__block {
    height: auto;
    gap: 16px;
  }

  .feedback__radio-desc-wrap {
    flex: none;
  }

  .feedback__spacer {
    display: none;
  }

  .feedback__divider {
    width: 100%;
    height: 1px;
    flex-shrink: 0;
    background: var(--base-input);
  }

  .feedback__col_right {
    flex: 0 0 auto;
    flex-direction: column;
    padding-top: 0;
    gap: 4px;
    justify-content: flex-start;
  }

  .feedback__panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .feedback__panel[hidden] {
    display: none !important;
  }

  /* Чекбокс согласия на мобилке — по левому краю */
  .feedback__consent {
    align-items: flex-start;
  }

  .intro {
    padding-top: 32px;
    padding-bottom: 40px;
  }

  .intro__title {
    font-size: 18px;
    line-height: 22px;
  }

  .intro__text {
    font-size: 14px;
    line-height: 20px;
  }

  .catalog {
    padding-bottom: 120px;
  }

  .catalog__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Мобилка: dividers после каждой карточки */
  .catalog__row-divider {
    display: block;
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .product-card__image-wrap[data-orientation="vertical"] {
    max-height: 430px;
  }

  .product-card__image-wrap[data-orientation="vertical"] .product-card__image,
  .product-card__image-wrap[data-orientation="vertical"] .product-card__slide .product-card__image {
    max-height: 430px;
  }

  .product-card__title {
    font-size: var(--typo-label-size);
  }

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

  .product-card__currency {
    font-size: 16px;
  }

  /* Страница товара: gap 36px между блоками на мобилке */
  .page_product .product-page__content {
    gap: 36px;
  }

  .page_product .breadcrumbs {
    padding-top: 8px;
  }

  /* Хлебные крошки: «Весь каталог» → «...», без названия товара (категория и подкатегория) */
  .page_product .breadcrumbs__item:first-child .breadcrumbs__link {
    font-size: 0;
    line-height: 0;
  }

  .page_product .breadcrumbs__item:first-child .breadcrumbs__link::before {
    content: "...";
    font-size: var(--typo-label-size);
    line-height: var(--typo-label-height);
    font-weight: 500;
    letter-spacing: var(--typo-label-spacing);
    color: var(--base-foreground);
  }

  .page_product .breadcrumbs__item[aria-current="page"] {
    display: none;
  }

  .page_product .breadcrumbs__item:has(+ .breadcrumbs__item[aria-current="page"])::after {
    content: none;
  }

  /* Страница товара: галерея — main на всю ширину вьюпорта (без паддингов), превью с паддингами 64×64 */
  .page_product .product-gallery {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0;
  }

  .page_product .product-gallery__main {
    order: 1;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: 0;
    aspect-ratio: 1;
  }

  .page_product .product-gallery__thumbs-wrap {
    order: 2;
    width: 100%;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
  }

  .page_product .product-gallery__thumbs .swiper-wrapper {
    flex-direction: row;
  }

  .page_product .product-gallery__thumbs {
    flex: 1;
    min-width: 0;
    height: 64px;
  }

  .page_product .product-gallery__thumbs .swiper-slide {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
  }

  .page_product .product-gallery__thumbs-less,
  .page_product .product-gallery__thumbs-more {
    width: 48px;
    height: 64px;
    top: 0;
    bottom: 0;
  }

  .page_product .product-gallery__thumbs-less {
    left: 0;
    right: auto;
  }

  .page_product .product-gallery__thumbs-more {
    left: auto;
    right: 0;
  }

  .page_product .product-gallery__thumbs-more .product-gallery__thumb-fade {
    background: linear-gradient(to left, white, rgba(255,255,255,0));
  }

  .page_product .product-gallery__thumbs-less .product-gallery__thumb-fade_up {
    background: linear-gradient(to right, white, rgba(255,255,255,0));
  }

  .page_product .product-gallery__thumbs-less > img {
    transform: rotate(90deg);
  }

  .page_product .product-gallery__thumbs-more > img {
    transform: rotate(-90deg);
  }

  /* Приобретается отдельно: 2 карточки, стрелки справа от заголовка, заголовок в 2 строки */
  .villa-decora-product .product-related__header {
    margin-bottom: 32px;
  }

  .villa-decora-product .product-related__title {
    white-space: normal;
    min-width: 0;
  }

  /* Ширину слайдов задаёт Swiper (slidesPerView: 2), фиксированная ширина ломала вёрстку */

  .villa-decora-product .product-related__swiper .swiper-wrapper {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .villa-decora-product .product-related {
    padding-bottom: 96px;
  }

  .page_product .product-docs__download {
    width: 100%;
  }

  /* Пустая корзина — мобильная: паддинги 24px слева-справа */
  .cart-empty {
    padding-left: 24px;
    padding-right: 24px;
  }

  .page_404 main {
    min-height: calc(100vh - 80px);
  }

  .page_new-password main {
    min-height: calc(100vh - 80px);
  }

  .page_account-profile main,
  .page_account-my-orders main,
  .page_account-settings main,
  .page_restore main,
  .page_auth main,
  .page_register main {
    min-height: calc(100vh - 80px);
  }

  .cart-empty__inner {
    width: 100%;
    max-width: 344px;
  }

  .main_auth,
  .main_restore,
  .main_new-password,
  .main_register {
    padding-left: 24px;
    padding-right: 24px;
  }

  .auth-form,
  .restore-form,
  .new-password-form,
  .register-form {
    max-width: 100%;
  }

  /* Корзина с товарами — мобильная */
  .cart-item {
    height: auto;
    min-height: 80px;
  }

  .cart-item__content {
    height: auto;
    min-height: 80px;
    gap: 12px;
  }

  .cart-item__pic {
    width: 80px;
    height: 80px;
  }

  .cart-item__pic-img,
  .cart-item__pic img {
    width: 80px;
    height: 80px;
  }

  .cart-item__name {
    font-size: 14px;
  }

  .cart-item__meta {
    font-size: 14px;
  }

  .cart-item__price {
    font-size: 16px;
  }

  /* Мобильный футер — Figma 37-35407 */
  .footer {
    padding-top: 48px;
    padding-bottom: 40px;
  }

  .footer__inner {
    gap: 48px;
  }

  .footer__top {
    flex-direction: column;
    gap: 64px;
  }

  .footer__cols {
    margin-left: 0;
    width: 100%;
    gap: 16px;
  }

  .footer__cols .footer__col {
    flex: 1;
    min-width: 0;
  }

  .footer__brand {
    width: 100%;
    max-width: 100%;
    gap: 12px;
  }

  .footer__brand-desc {
    font-size: var(--typo-label-size);
    line-height: var(--typo-label-height);
  }

  .footer__btn-partners {
    width: 100%;
    margin-top: 12px;
  }

  .footer__middle {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-top: 24px;
  }

  .footer__bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 24px;
    padding-top: 24px;
  }

  .footer__legal {
    flex-direction: row;
    gap: 16px;
  }

  .page_order .footer {
    padding-top: 24px;
    padding-bottom: 32px;
  }
}

/* ===== Tablet only (768–1023): полная шапка, без бургера ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .header__right:not(.header__right_mobile) {
    display: flex;
  }

  .header__right_mobile {
    display: none;
  }
}

/* ===== Toast уведомления ===== */
.toast-container {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast {
  width: 388px;
  max-height: 120px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  padding: 16px 24px 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: auto;
  transform: translateX(calc(100% + 60px));
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
  position: relative;
}

.toast__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.7;
}

.toast__close:hover {
  opacity: 1;
}

.toast__close img {
  display: block;
  width: 16px;
  height: 16px;
}

.toast_has-close .toast__content {
  padding-right: 24px;
}

.toast.toast_visible {
  transform: translateX(0);
  opacity: 1;
}

.toast.toast_hiding {
  transform: translateX(calc(100% + 60px));
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}

.toast__content {
  flex: 1;
  min-width: 0;
}

.toast__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 2px 0;
}

.toast__subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  margin: 0;
  opacity: 0.9;
}

.toast__subtitle + .toast__subtitle {
  margin-top: 6px;
}

.toast__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--base-foreground);
  background: transparent;
  border: 1px solid #e4e4e7;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.2s, color 0.2s;
}

.toast__btn:hover {
  background: var(--base-secondary);
  opacity: 1;
}

.toast__btn_primary {
  background: var(--base-foreground);
  color: var(--base-primary-foreground);
  border-color: var(--base-foreground);
}

.toast__btn_primary:hover {
  background: var(--base-foreground);
  opacity: 0.9;
}

/* ===== Toast: мобильные стили ===== */
@media (max-width: 767px) {
  .toast-container {
    left: 16px;
    right: 16px;
    top: 16px;
    align-items: flex-end;
  }

  .toast {
    width: min(388px, calc(100vw - 32px));
    min-width: 335px;
    padding: 16px;
    gap: 6px;
  }

  .toast__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .toast__title {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.01em;
    margin: 0;
  }

  .toast__subtitle {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
    color: var(--muted-foreground);
  }

  .toast__btn {
    height: 36px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 999px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }
}

/* ===== Страница «Политика конфиденциальности» ===== */
.privacy {
  padding-top: 40px;
  padding-bottom: 200px;
}

.privacy .breadcrumbs {
  padding-bottom: 48px;
}

.privacy__content {
  max-width: 776px;
  text-align: left;
}

.privacy__content h1 {
  margin: 0 0 24px 0;
  font-size: var(--typo-h2-size);
  line-height: var(--typo-h2-height);
  letter-spacing: var(--typo-h2-spacing);
  font-weight: var(--typo-h2-weight);
}

.privacy__content h2 {
  margin: 24px 0 8px 0;
  font-size: var(--typo-p2-size);
  font-weight: 600;
  line-height: var(--typo-p2-height);
  letter-spacing: var(--typo-p2-spacing);
}

.privacy__content p {
  margin: 0 0 1em 0;
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-height);
  letter-spacing: var(--typo-label-spacing-r);
  font-weight: 400;
}

.privacy__content p:last-child {
  margin-bottom: 0;
}

.privacy__content ul {
  list-style: disc;
  list-style-position: outside;
  margin: 0 0 1em 0;
  padding-left: 1.25em;
}

.privacy__content ul li {
  margin: 0 0 0.35em 0;
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-height);
  letter-spacing: var(--typo-label-spacing-r);
  font-weight: 400;
}

.privacy__content ul li:last-child {
  margin-bottom: 0;
}

/* Tablet и Mobile: ширина 100% */
@media (max-width: 1023px) {
  .privacy__content {
    max-width: none;
  }
}

/* Mobile: заголовок H3 */
@media (max-width: 767px) {
  .privacy {
    padding-top: 24px;
    padding-bottom: 200px;
  }

  .privacy__content h1 {
    font-size: var(--typo-h3-size);
    line-height: var(--typo-h3-height);
    margin-bottom: 20px;
  }
}

/* End */
/* /local/templates/villa_decora/assets/css/styles.css?1779082367183096 */