/* ============================================================
   COMMON STYLES — Extract Market
   Шапка, подвал, общие компоненты
   ============================================================ */

@import url('variables.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


@font-face {
  font-family: 'Tilda Sans';
  src: url('fonts/TildaSans-Light.eot');
  src:
          url('fonts/TildaSans-Light.eot?#iefix') format('embedded-opentype'),
          url('fonts/TildaSans-Light.woff2') format('woff2'),
          url('fonts/TildaSans-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Tilda Sans';
  src: url('fonts/TildaSans-Regular.eot');
  src:
          url('fonts/TildaSans-Regular.eot?#iefix') format('embedded-opentype'),
          url('fonts/TildaSans-Regular.woff2') format('woff2'),
          url('fonts/TildaSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Tilda Sans';
  src: url('fonts/TildaSans-Medium.eot');
  src:
          url('fonts/TildaSans-Medium.eot?#iefix') format('embedded-opentype'),
          url('fonts/TildaSans-Medium.woff2') format('woff2'),
          url('fonts/TildaSans-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Tilda Sans';
  src: url('fonts/TildaSans-Semibold.eot');
  src:
          url('fonts/TildaSans-Semibold.eot?#iefix') format('embedded-opentype'),
          url('fonts/TildaSans-Semibold.woff2') format('woff2'),
          url('fonts/TildaSans-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Tilda Sans';
  src: url('fonts/TildaSans-Bold.eot');
  src:
          url('fonts/TildaSans-Bold.eot?#iefix') format('embedded-opentype'),
          url('fonts/TildaSans-Bold.woff2') format('woff2'),
          url('fonts/TildaSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Tilda Sans';
  src: url('fonts/TildaSans-ExtraBold.eot');
  src:
          url('fonts/TildaSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
          url('fonts/TildaSans-ExtraBold.woff2') format('woff2'),
          url('fonts/TildaSans-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Tilda Sans';
  src: url('fonts/TildaSans-Black.eot');
  src:
          url('fonts/TildaSans-Black.eot?#iefix') format('embedded-opentype'),
          url('fonts/TildaSans-Black.woff2') format('woff2'),
          url('fonts/TildaSans-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}

/* ══════════════════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px; /* базовый — остаётся в px */
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-weight: 400;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%;
  height: auto;}
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ══════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════ */

.page-wrapper {
  padding: 1rem 1.25rem 0;
}

.page-wrapper > * + * {
  margin-top: 1.25rem;
}

@media (max-width: 767px) {
  .page-wrapper {
    padding: 0.5rem 0.75rem 0;
  }
  .page-wrapper > * + * {
    margin-top: 0.75rem;
  }
}

/* ── Контейнер (padding/margin — оставляем в px) ─────────── */
.container {
  max-width: 1770px;
  margin: 0 auto;
  width: 100%;
  padding: 0 45px;
}

@media (max-width: 1279px) {
  .container { padding: 0 32px; }
}

@media (max-width: 767px) {
  .container { padding: 0 20px; }
}

/* ══════════════════════════════════════════════════════════
   ОБЩИЕ ЗАГОЛОВКИ СЕКЦИЙ (h2 + catalog h1)
   ══════════════════════════════════════════════════════════ */

h2, .h2 {
  font-family: var(--font-display);
  font-size: 4rem;        /* 64px */
  font-weight: 800;
  line-height: 1.05;
  color: var(--color-dark);
  margin-bottom: 3rem;
}

/* Белый текст — секция "О нас" */


@media (max-width: 1279px) {
  h2, .h2 {
    font-size: 3rem;
    margin-bottom: 2.5rem;
  }
}

@media (max-width: 767px) {
  h2, .h2 {
    font-size: 2.25rem;
    margin-bottom: 1.75rem;
  }
}

@media (max-width: 575px) {
  h2, .h2 {
    font-size: 2rem;
    margin-bottom: 1.75rem;
  }
}

/* h3 — подзаголовки секций (например, .account-section__title 48px по Figma) */
h3, .h3 {
  font-family: var(--font-display);
  font-size: 3rem;        /* 48px */
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-dark);
}

@media (max-width: 1279px) {
  h3, .h3 { font-size: 2.25rem; }
}

@media (max-width: 767px) {
  h3, .h3 { font-size: 1.75rem; }
}

/* ══════════════════════════════════════════════════════════
   КНОПКИ
   ══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 1.5rem;
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--radius-btn);
  transition: opacity var(--transition);
  white-space: nowrap;
  gap: .5rem;
}

.btn:hover { opacity: 0.85; }

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

.btn--loading {
  pointer-events: none;
  opacity: 0.8;
}

.btn--loading::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.65s linear infinite;
  flex-shrink: 0;
}

.btn--dark {
  background-color: var(--color-dark);
  color: var(--color-white);
  min-width: 236px;
}

.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-dark);
  min-width: 235px;
}

.btn--accent-round {
  background-color: var(--color-accent);
  color: var(--color-dark);
  border-radius: var(--radius-card);
  min-width: 145px;
  padding: 0 1.25rem;
}

/* Большая кнопка (auth-форма / "Добавить в корзину" / "Купить в 1 клик")
   80px высота, скруглённый угол card, full-width. На мобильном — 60px. */
.btn--lg {
  height: 5rem;
  width: 100%;
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: var(--radius-card);
}

@media (max-width: 767px) {
  .btn--lg {
    height: 3.75rem;     /* 60px */
    font-size: 0.875rem;
  }
}

/* Средняя кнопка — между базовой (.btn 49px) и .btn--lg (80px).
   58px высота, full-width, шрифт чуть легче чем у --lg. Используется в корзине
   и других местах, где нужен ощутимый CTA, но не максимальной высоты. */
.btn--md {
  height: 3.625rem;      /* 58px */
  width: 100%;
  min-width: 0;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: var(--radius-card);
}

@media (max-width: 767px) {
  .btn--md {
    height: 3.75rem;     /* 60px — синхронизировано с .btn--lg mobile */
    font-size: 0.875rem;
  }
}

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

@media (max-width: 767px) {
  .btn {
    min-width: unset;
    width: 100%;
    justify-content: center;
  }
  .btn--accent-round { width: auto; }
}

/* ══════════════════════════════════════════════════════════
   НАВИГАЦИОННАЯ ТАБЛЕТКА
   ══════════════════════════════════════════════════════════ */

.nav-pill {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-nav);
  height: 49px;
  padding: 0.375rem;
}

.nav-pill__item {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  height: 37px;
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-dark);
  border-radius: var(--radius-btn);
  transition: background-color var(--transition), color var(--transition);
  white-space: nowrap;
}

.nav-pill__item--active,
.nav-pill__item:hover {
  background-color: var(--color-dark);
  color: var(--color-white);
}

@media (max-width: 1023px) {
  .nav-pill { display: none; }
}

/* ══════════════════════════════════════════════════════════
   ШАПКА
   ══════════════════════════════════════════════════════════ */

.site-header {
  background-color: var(--color-white);
  border-radius: var(--radius-hero);
  height: 89px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 1000;
}

@media (max-width: 767px) {
  .site-header {
    height: 64px;
    border-radius: var(--radius-card);
  }
}

/* ── Внутренний ряд ──────────────────────────────────────── */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

@media (max-width: 1279px) {
  .site-header__inner { gap: 1rem; }
}

@media (max-width: 767px) {
  .site-header__inner { gap: 0.625rem; }
}

/* ── Логотип ─────────────────────────────────────────────── */
.site-header__logo {
  font-family: var(--font-display);
  font-size: 1.375rem;    /* 22px */
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-dark);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .site-header__logo { font-size: 1rem; }
}

/* ── Телефон ─────────────────────────────────────────────── */
.site-header__phone {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .875rem;
  color: var(--color-dark);
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .site-header__phone { display: none; }
}

/* ── Навигация ───────────────────────────────────────────── */
.site-header__nav { flex-shrink: 0; }

/* ── Иконки (корзина / профиль ) ─────────────────── */
.site-header__icons {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--color-accent);
  overflow: hidden ;
  border-radius: 10px;
  transition: background-color var(--transition);
}

/* Залогиненное состояние — тёмный фон, белые иконки */
.site-header__icons--logged {
  background: var(--color-dark);
}
.site-header__icons--logged .icon-btn {
  color: var(--color-white);
}
.site-header__icons--logged .icon-btn:hover {
  background: var(--color-black);
}
.site-header__icons--logged .site-header__icons-divider {
  background: var(--color-white);
}
.site-header__icons--logged .icon-btn__badge {
  background: var(--color-accent);
  color: var(--color-dark);
}

/* Разделитель между иконками */
.site-header__icons-divider {
  width: 2px;
  height: 24px;
  background: var(--color-dark);
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .site-header__icons {
    margin-left: auto;
  }
}

@media (max-width: 767px) {
  .site-header__icons {
    margin-left: auto;
    height: 40px;
    padding: 0 0.625rem;
    gap: 0.5rem;
  }
  .site-header__icons-divider {
    height: 20px;
  }
}

/* ── Кнопка-иконка ───────────────────────────────────────── */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 49px;
  color: var(--color-dark);
  transition: opacity var(--transition), transform var(--transition);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.icon-btn:hover {
  background: var(--color-accent-dark);
}
.icon-btn svg { width: 24px; height: 24px; }

.icon-btn--cart { position: relative; }

.icon-btn__badge {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--color-white);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

@media (max-width: 767px) {
  .icon-btn { width: 32px; height: 32px; }
  .icon-btn svg { width: 20px; height: 20px; }
  .icon-btn__badge { min-width: 16px; height: 16px; line-height: 16px; font-size: 0.625rem; right: -4px; }
}

/* ── Бургер ───────────────────────────────────────── */
.menu-burger {
  width: 44px;
  height: 40px;
  padding: .5rem;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 1rem;
  display: none;
}

.menu-burger:before,
.menu-burger:after {
  content: "";
  height: 2px;
  width: 100%;
  color: var(--color-dark);
  display: block;
  background: var(--color-dark);
}

@media(max-width: 1023px) {
  .menu-burger {
    display: flex;
  }
}


.page-home .menu-burger:before,
.page-home .menu-burger:after {
  background: #fff;
}


/* ══════════════════════════════════════════════════════════
   ПОДВАЛ
   ══════════════════════════════════════════════════════════ */

.site-footer {
  background-color: var(--color-accent);
  border-radius: var(--radius-hero);
  padding: 3.75rem 0 3.125rem;
  overflow: hidden;
}

@media (max-width: 1279px) {
  .site-footer { padding: 3rem 0 2.5rem; }
}

@media (max-width: 767px) {
  .site-footer {
    padding: 2.5rem 0 2rem;
    border-radius: var(--radius-card);
  }
}

/* ── Верхняя часть: 3 колонки ────────────────────────────── */
.site-footer__top {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.5fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 1279px) {
  .site-footer__top {
    gap: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }
}

@media (max-width: 767px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

/* ── Название бренда ─────────────────────────────────────── */
.site-footer__brand {
  font-family: var(--font-display);
  font-size: 7rem;          /* 112px */
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-dark);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: right;
  flex-shrink: 0;
}

@media (max-width: 1279px) {
  .site-footer__brand {
    font-size: 4.5rem;      /* 72px */
  }
}

@media (max-width: 767px) {
  .site-footer__brand {
    font-size: 2.5rem;      /* 40px */
    text-align: left;
  }
}

/* ── Контакты ────────────────────────────────────────────── */
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-footer__contact-phone {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-dark);
  font-size: .875rem;
}

@media (max-width: 767px) {
  .site-footer__contact-phone { font-size: 1.125rem; }
}

.site-footer__contact-email {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-dark);
}

/* ── Заголовок колонки ───────────────────────────────────── */
.site-footer__col-title {
  font-family: var(--font-display);
  font-size: 1rem;      /* 18px */
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 1rem;
}

@media (max-width: 767px) {
  .site-footer__col-title {
    margin-bottom: 0.625rem;
  }
}

/* ── Список ──────────────────────────────────────────────── */
.site-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-footer__nav-list a {
  font-family: var(--font-body);
  font-size: 1rem;     /* 15px */
  color: var(--color-dark);
  opacity: 0.85;
  transition: opacity var(--transition);
}

.site-footer__nav-list_bold a {
  font-weight: 700;
}

.site-footer__nav-list a:hover { opacity: 1; }


/* ── Нижняя строка: юр. текст + бренд ───────────────────── */
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}

@media (max-width: 767px) {
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* ── Юридический блок ────────────────────────────────────── */
.site-footer__legal-block {
  font-family: var(--font-body);
  font-size: 0.8125rem;     /* 13px */
  color: var(--color-dark);
  opacity: 0.75;
  line-height: 1.8;
}

.site-footer__legal-block a {
  color: var(--color-dark);
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════
   БЛОК "ПОЧЕМУ НАС ВЫБИРАЮТ?"
   ══════════════════════════════════════════════════════════ */

.why-us {
  padding: 4rem 0;
  border-radius: var(--radius-hero);
}

/* .why-us__title — стиль задан в разделе ОБЩИЕ ЗАГОЛОВКИ */

/* ── Сетка ───────────────────────────────────────────────── */
.why-us__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

@media (max-width: 1279px) {
  .why-us__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 767px) {
  .why-us__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* Внутри каждого элемента — стат справа, заголовок слева */
  .why-us__item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label stat" "desc desc";
    column-gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-bg);
  }
  .why-us__item:last-child {
    border-bottom: none;
  }
}

/* ── Цифра ───────────────────────────────────────────────── */
.why-us__stat {
  font-family: var(--font-display);
  font-size: 3rem;          /* 48px */
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 2rem;
  text-align: right;
}

@media (max-width: 1279px) {
  .why-us__stat { font-size: 2.5rem; }
}

@media (max-width: 767px) {
  .why-us__stat {
    grid-area: stat;
    font-size: 2.5rem;
    margin-bottom: 0;
    align-self: center;
  }
}

/* ── Подпись ─────────────────────────────────────────────── */
.why-us__label {
  font-family: var(--font-display);
  font-size: 1.5rem;        /* 24px */
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

@media (max-width: 1279px) {
  .why-us__label { font-size: 1.25rem; }
}

@media (max-width: 767px) {
  .why-us__label {
    grid-area: label;
    font-size: 1.25rem;
    margin-bottom: 0;
    align-self: center;
  }
}

/* ── Описание ────────────────────────────────────────────── */
.why-us__desc {
  font-family: var(--font-body);
  font-size: 1.125rem;      /* 18px */
  color: var(--color-dark);
  line-height: 1.5;
  opacity: 0.85;
}

@media (max-width: 1279px) {
  .why-us__desc { font-size: 1rem; }
}

@media (max-width: 767px) {
  .why-us__desc {
    grid-area: desc;
    font-size: 0.9375rem;
    margin-top: 0.375rem;
  }
}

/* ══════════════════════════════════════════════════════════
   БАННЕР «О НАС» (переиспользуется на index + production)
   ══════════════════════════════════════════════════════════ */

.banner-about {
  position: relative;
  border-radius: var(--radius-hero);
  overflow: hidden;
  box-shadow: var(--shadow-hero);
}

@media (max-width: 767px) {
  .banner-about {
    border-radius: var(--radius-card);
  }
}

.banner-about__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.banner-about__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(22, 43, 44, 0.82) 0%,
    rgba(22, 43, 44, 0.4) 50%,
    rgba(22, 43, 44, 0.1) 100%
  );
}

.banner-about__content {
  min-height: 929px;
  position: relative;
  z-index: 10;
  padding: 10rem 0 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 1279px) {
  .banner-about__content {
    min-height: 640px;
    padding: 8rem 0 3rem;
  }
}

@media (max-width: 767px) {
  .banner-about__content {
    min-height: 480px;
    padding: 6rem 0 2.5rem;
  }
}

.banner-about__inner {
  max-width: 820px;
  margin-bottom: 5rem;
}

@media (max-width: 767px) {
  .banner-about__inner {
    margin-bottom: 2.5rem;
  }
}

.banner-about__logo {
  margin-bottom: 3rem;
}

@media (max-width: 767px) {
  .banner-about__logo {
    margin-bottom: 1.5rem;
  }
}

.banner-about__title {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--color-white);
  margin-bottom: 3rem;
}

@media (max-width: 1279px) {
  .banner-about__title {
    font-size: 3rem;
    margin-bottom: 2.5rem;
  }
}

@media (max-width: 767px) {
  .banner-about__title {
    font-size: 2.25rem;
    margin-bottom: 1.75rem;
  }
}

.banner-about__text {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  max-width: 600px;
}

@media (max-width: 767px) {
  .banner-about__text {
    font-size: 0.9375rem;
  }
}

.banner-about__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
}

@media (max-width: 767px) {
  .banner-about__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

.banner-about__em {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--color-accent);
  text-transform: uppercase;
  line-height: 1;
}

@media (max-width: 767px) {
  .banner-about__em {
    font-size: 2.25rem;
  }
}

/* ══════════════════════════════════════════════════════════
   ФОРМА ЗАЯВКИ
   ══════════════════════════════════════════════════════════ */

.lead-form {
  background-color: var(--color-white);
  border-radius: var(--radius-hero);
  padding: 4rem 0;
  overflow: hidden;
  position: relative;
}

@media (max-width: 767px) {
  .lead-form { border-radius: var(--radius-card); }
}

.lead-form__inner {
  max-width: 1200px;
}


/* ── Декоративный текст ──────────────────────────────────── */
.lead-form__bg-text {
  position: absolute;
  font-family: var(--font-display);
  font-size: 8rem;          /* 128px */
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-dark);
  opacity: 0.05;
  right: 2rem;
  top: 2rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 767px) {
  .lead-form__bg-text { font-size: 4.5rem; }
}


/* ── Форма ───────────────────────────────────────────────── */
.lead-form__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

/* ── Поля ввода ──────────────────────────────────────────── */
.lead-form__input,
.lead-form__textarea {
  width: 100%;
  padding: 0.875rem 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--color-dark);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-dark);
  background-color: var(--color-white);
  outline: none;
  transition: border-color var(--transition);
  height: 59px;
}

.lead-form__input:focus,
.lead-form__textarea:focus { border-color: var(--color-dark); }

.lead-form__input::placeholder,
.lead-form__textarea::placeholder { color: var(--color-gray); }


/* ── Контейнер сообщения AJAX-ответа (успех / ошибки) ────── */
.lead-form__msg {
  position: relative;
  z-index: 1;
}

.lead-form__msg:empty {
  display: none;
}

/* ── Строка кнопка + чекбокс ─────────────────────────────── */
.lead-form__row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

@media (max-width: 767px) {
  .lead-form__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* ── Согласие ────────────────────────────────────────────── */
.lead-form__privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-gray);
  cursor: pointer;
}

.lead-form__privacy input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--color-dark);
  cursor: pointer;
}

.lead-form__privacy a {
  color: var(--color-dark);
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════
   СЕТКА КАРТОЧЕК СТАТЕЙ / ПУБЛИКАЦИЙ
   ══════════════════════════════════════════════════════════ */

.articles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1500px) {
  .articles__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

@media (max-width: 767px) {
  .articles__grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* ── Карточка статьи / публикации ────────────────────────── */
.article-card {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition);
}

.article-card:hover {
  box-shadow: 0 8px 32px rgba(22, 43, 44, 0.1);
}

/* ── Изображение ─────────────────────────────────────────── */
.article-card__img-wrapper {
  padding-bottom: 66%;
  position: relative;
  background-color: var(--color-white);
}

.article-card__img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  left: 0;
  top: 0;
}

@media (max-width: 767px) {
  .article-card__img-wrapper {
    height: 180px;
  }
}

/* ── Тело ────────────────────────────────────────────────── */
.article-card__body {
  padding: 3rem 3rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (max-width: 575px) {
  .article-card__body {
    padding: 1.5rem;
  }
}

/* ── Заголовок ───────────────────────────────────────────── */
.article-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1.3;
  margin-bottom: 1.5rem;
  flex: 1;
}

/* ── Описание ────────────────────────────────────────────── */
.article-card__desc {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--color-dark);
  opacity: 0.75;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Ссылка "Читать" ─────────────────────────────────────── */
.article-card__read {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-dark);
  margin-top: auto;
  transition: gap var(--transition);
}

.article-card__read:hover {
  gap: 0.875rem;
}

.article-card__read svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 575px) {
  .article-card__read-text {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════
   ОБЩИЕ СТРЕЛКИ-КНОПКИ СЛАЙДЕРОВ
   Класс .pub-related__arrow исторически назван по первому потребителю
   (статья), но теперь шерится и в .about-awards. Цвет фона дефолтный —
   var(--color-white); страницы с белым контентом (.about-awards) могут
   локально переопределить bg (см. about.css).
   ══════════════════════════════════════════════════════════ */

.pub-related__arrows {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.pub-related__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 49px;
  background-color: var(--color-white);
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition);
}

.pub-related__arrow:hover {
  background-color: var(--color-bg);
}

.pub-related__arrow svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 767px) {
  .pub-related__arrows { display: none; }
}

/* ══════════════════════════════════════════════════════════
   ОБЩИЕ ТОЧКИ-ИНДИКАТОРЫ СЛАЙДЕРОВ
   Используются в .articles__slider, .pub-related, .shortcode-products
   и любых будущих слайдерах — через классы .slider-dots / .slider-dot.
   ══════════════════════════════════════════════════════════ */

.slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 1.5rem;
}

.slider-dot {
  height: 8px;
  width: 8px;
  border-radius: 10px;
  background-color: var(--color-gray);
  transition: width var(--transition), background-color var(--transition);
  cursor: pointer;
}

.slider-dot--active {
  width: 49px;
  background-color: var(--color-dark);
}

/* Если хелпер не построил точки (totalPages <= 1) — схлопываем контейнер,
   чтобы не оставался пустой margin-top. */
.slider-dots:empty { display: none; }

/* ── Слайдер главной (.articles__slider) — активен на всех viewport ── */
/* Карточки никогда не переносятся: пока 4 шт. помещаются — totalPages=1, */
/* как только нет — slider пагинирует через translateX (initArticlesSlider). */
/* Снаружи .articles__slider (blogs.tpl) .articles__grid остаётся grid-сеткой. */
.articles__slider {
  overflow: hidden;
}

.articles__slider .articles__grid {
  display: flex;
  gap: 1.25rem;
  transition: transform 0.35s ease;
  will-change: transform;
}

/* Десктоп ≥1501px: 4 карточки/стр (3 промежутка по 1.25rem) */
.articles__slider .article-card {
  flex: 0 0 calc((100% - 3 * 1.25rem) / 4);
}

/* 1280-1500px: 3 карточки/стр */
@media (max-width: 1500px) {
  .articles__slider .article-card {
    flex: 0 0 calc((100% - 2 * 1.25rem) / 3);
  }
}

/* 768-1279px: 2 карточки/стр */
@media (max-width: 1279px) {
  .articles__slider .article-card {
    flex: 0 0 calc((100% - 1 * 1.25rem) / 2);
  }
}

/* Mobile ≤767px: 1 карточка/стр */
@media (max-width: 767px) {
  .articles__slider .articles__grid { gap: 0; }
  .articles__slider .article-card { flex: 0 0 100%; }
}

/* ══════════════════════════════════════════════════════════
   SHORTCODE-PRODUCTS — слайдер карточек товара в контенте
   (генерирует system/traits/shortcode.php → productsShortcode).
   Тот же UX-паттерн, что .articles__slider: только точки + свайп,
   без стрелок.
   ══════════════════════════════════════════════════════════ */

.shortcode-products {
  margin: 2.5rem 0;
}

.shortcode-products__slider { overflow: hidden; }

.shortcode-products__track {
  display: flex;
  gap: 1.25rem;
  transition: transform 0.35s ease;
  will-change: transform;
}

/* Десктоп: 3 карточки на страницу (контент уже сайдбара статьи) */
.shortcode-products__track .product-card {
  flex: 0 0 calc((100% - 2 * 1.25rem) / 3);
}

/* Планшет: 2 карточки на страницу */
@media (max-width: 1279px) {
  .shortcode-products__track .product-card {
    flex: 0 0 calc((100% - 1 * 1.25rem) / 2);
  }
}

/* Mobile: 1 карточка на страницу */
@media (max-width: 767px) {
  .shortcode-products__track { gap: 0; }
  .shortcode-products__track .product-card { flex: 0 0 100%; }
}

/* ══════════════════════════════════════════════════════════
   ХЛЕБНЫЕ КРОШКИ
   ══════════════════════════════════════════════════════════ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem 1rem;
  flex-wrap: wrap;
}

.breadcrumb__item {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-gray);
}

.breadcrumb__sep {
  color: var(--color-gray);
  opacity: 0.6;
}

.breadcrumb__item--active {
  color: var(--color-dark);
}

/* ══════════════════════════════════════════════════════════
   МЕГА-МЕНЮ КАТАЛОГА
   ══════════════════════════════════════════════════════════ */

/* Обёртка — якорь для абсолютного позиционирования меню */
.header-wrap {
  position: relative;
  z-index: 1000;
}

/* Сбросить кнопочные стили для nav-pill__item на <button> */
button.nav-pill__item {
  border: none;
  cursor: pointer;
  background: transparent;
}

/* Активное (открытое) состояние триггера «Каталог» */
.nav-pill__item--catalog-open {
  background-color: var(--color-accent) !important;
  color: var(--color-dark) !important;
}

/* Само мега-меню */
.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-radius: 0 0 var(--radius-hero) var(--radius-hero);
  box-shadow: 0 20px 60px rgba(22, 43, 44, 0.12);
  padding: 2.5rem 0 3rem;
}

.mega-menu.is-open {
  display: block;
}

/* Двухколоночная раскладка: категории | по применению + кнопки */
.mega-menu__inner {
  display: grid;
  grid-template-columns: 1fr 30rem;       /* правая шире — теперь там и список, и две кнопки */
  gap: 4rem;
  align-items: start;
}

/* Заголовки разделов */
.mega-menu__section-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 1.75rem;
}

/* Трёхколоночная сетка категорий */
.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2rem;
}

.mega-menu__group {
  margin-bottom: 2rem;
}

/* Заголовок группы (Экстракты, Отдушки…) */
.mega-menu__group-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}

/* Список подкатегорий */
.mega-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-menu__list li a {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-dark);
  text-decoration: none;
  display: block;
  line-height: 2.1875rem;   /* 35px — межстрочный интервал из Figma */
  transition: opacity var(--transition);
}

.mega-menu__list li a:hover {
  opacity: 0.5;
}

/* Кнопки внизу ПРАВОЙ части под списком «По применению» (Figma 393:573). */
/* Две кнопки делят ширину поровну; min-width базовых .btn--dark/--accent  */
/* перебиваем здесь, чтобы они помещались в правой панели. */
.mega-menu__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.mega-menu__actions .btn {
  min-width: 0;
  width: 100%;
}

.mega-menu__actions .btn img {
  flex-shrink: 0;
}

/* Правая панель «По применению» */
.mega-menu__apply {
  padding-left: 2.5rem;
  align-self: center;
}

.mega-menu__apply-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-menu__apply-list li a {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: none;
  display: block;
  line-height: 1.3;
  padding: 0.5rem 0;
  transition: opacity var(--transition);
}

.mega-menu__apply-list li a:hover {
  opacity: 0.6;
}

/* На мобильных и планшетах мега-меню не показываем */
@media (max-width: 1023px) {
  .mega-menu { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   МОБИЛЬНОЕ МЕНЮ (все страницы)
   ══════════════════════════════════════════════════════════ */

.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(22, 43, 44, 0.96);
  z-index: 1000;
  overflow-y: auto;
}

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  padding: 32px 24px 40px;
  width: 100%;
  min-height: 100%;
}

.mobile-menu__close {
  align-self: flex-end;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.mobile-menu__close svg {
  width: 28px;
  height: 28px;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 48px;
}

.mobile-menu__item {
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.mobile-menu__item--active {
  color: var(--color-accent);
}

/* Кнопка «Каталог» со стрелкой */
button.mobile-menu__item {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

button.mobile-menu__item svg {
  opacity: 0.6;
  flex-shrink: 0;
}

.mobile-menu__contacts {
  margin-top: auto;
  padding-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-menu__phone,
.mobile-menu__email {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ПАНЕЛЬ КАТАЛОГА
   ══════════════════════════════════════════════════════════ */

.mobile-catalog {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 1001;
  overflow-y: auto;
  display: none;
}

.mobile-catalog__inner {
  display: flex;
  flex-direction: column;
  padding: 23px 28px 40px;
  min-height: 100%;
}

.mobile-catalog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.mobile-catalog__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-dark);
}

.mobile-catalog__close {
  width: 19px;
  height: 19px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  flex-shrink: 0;
}

.mobile-catalog__close svg {
  width: 19px;
  height: 19px;
}

.mobile-catalog__body {
  flex: 1;
}

.mobile-catalog__group {
  margin-bottom: 1.75rem;
}

.mobile-catalog__group-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--color-dark);
  margin-bottom: 0.25rem;
}

.mobile-catalog__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-catalog__list li a {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-dark);
  text-decoration: none;
  display: block;
  line-height: 2.1875rem;
  transition: opacity var(--transition);
}

.mobile-catalog__list li a:hover {
  opacity: 0.5;
}

.mobile-catalog__actions {
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-bg);
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mobile-catalog__actions .btn {
  width: 100%;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════
   AUTH-ФОРМЫ — общие компоненты (регистрация, вход, восстановление)
   ══════════════════════════════════════════════════════════ */

/* ── Поле ввода (скруглённое) ──────────────────────────────── */
.auth-input {
  width: 100%;
  height: 3.625rem;          /* 58px */
  padding: 0 1.875rem;
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-dark);
  background: transparent;
  outline: none;
  transition: border-color var(--transition);
}

.auth-input:focus {
  border-color: var(--color-dark);
}

.auth-input::placeholder {
  color: var(--color-gray);
}

/* ── Поле с ошибкой ────────────────────────────────────────── */
.auth-input.field--error,
.lead-form__input.field--error,
.lead-form__textarea.field--error {
  border-color: #d93d3c;
  outline-color: #d93d3c;
}

/* ── Согласие (чекбокс + текст) ────────────────────────────── */
.auth-privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-dark);
  line-height: 1.2;
  cursor: pointer;
}

.auth-privacy input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.auth-privacy a {
  color: var(--color-dark);
  text-decoration: underline;
}

/* ── Ссылка-переключатель (уже зарегистрированы / ещё нет) ── */
.auth-switch {
  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--color-dark);
  text-align: center;
  font-weight: 800;
}

.auth-switch a {
  color: var(--color-accent);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .auth-input {
    height: 2.8125rem;        /* 45px */
    font-size: 1rem;          /* 16px */
    padding: 0 1.375rem;
  }

  .auth-switch {
    font-size: 0.875rem;      /* 14px */
  }
}

/* ══════════════════════════════════════════════════════════
   МОДАЛКИ AUTH (login-modal, forgot-modal)
   ══════════════════════════════════════════════════════════ */

.login-modal,
.forgot-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(22, 43, 44, 0.5);
  justify-content: center;
  align-items: flex-start;
  padding: 6rem 1.25rem 3rem;
  overflow-y: auto;
}

.login-modal.is-open,
.forgot-modal.is-open {
  display: flex;
}

.login-modal__card,
.forgot-modal__card {
  background: var(--color-white);
  border-radius: var(--radius-hero);
  width: 100%;
  max-width: 31.5625rem;     /* 505px */
  padding: 2rem 2.5rem 3rem;
  position: relative;
}

.login-modal__close,
.forgot-modal__close {
  position: absolute;
  top: 1.125rem;
  right: 1.125rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.login-modal__close svg,
.forgot-modal__close svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-dark);
  stroke-width: 2;
}

.login-modal__title,
.forgot-modal__title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--color-dark);
  line-height: 1.1;
  margin-bottom: 1.75rem;
}

/* ── Универсальные сообщения (alert) ─────────────────────── */
.alert {
  font-family: var(--font-body);
  font-size: 0.875rem;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.alert a {
  color: inherit;
  text-decoration: underline;
}

.alert-danger {
  color: #d93d3c;
  background: #fef2f2;
  border-color: #fecaca;
}

.alert-success {
  color: #15803d;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.alert-warning {
  color: #b45309;
  background: #fffbeb;
  border-color: #fde68a;
}

.alert-info {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.alert--inline {
  display: block;
  margin: 0.375rem 0 0;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
}

.login-modal__fields,
.forgot-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.login-modal__extras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
}

.login-modal__forgot {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: underline;
}

.login-modal__remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-gray);
  cursor: pointer;
}

.login-modal__remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-dark);
  cursor: pointer;
}

.login-modal__btn,
.forgot-modal__btn {
  margin-top: 1.5rem;
  max-width: 100%;
}

.login-modal__privacy,
.forgot-modal__privacy {
  margin-top: 1.25rem;
}

.login-modal__switch {
  margin-top: 2.5rem;
}

/* ── Подзаголовок (forgot-modal) ──────────────────────────── */
.forgot-modal__subtitle {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.2;
  margin-bottom: 1.75rem;
}

@media (max-width: 767px) {
  .login-modal,
  .forgot-modal {
    padding: 0;
    align-items: stretch;
  }

  .login-modal__card,
  .forgot-modal__card {
    max-width: 100%;
    min-height: 100%;
    border-radius: 0;
    padding: 2.875rem 1.75rem 2rem;  /* 46px top (как в макете) */
  }

  .login-modal__title,
  .forgot-modal__title {
    font-size: 2.25rem;              /* 36px */
  }

  .login-modal__extras {
    font-size: 0.875rem;             /* 14px */
  }

  .login-modal__forgot {
    font-size: 0.875rem;             /* 14px */
  }

  .login-modal__remember {
    font-size: 0.75rem;              /* 12px */
  }
}

/* ============================================================
   404 / ПУСТАЯ КОРЗИНА — страница "Не найдено"
   Используется на странице /error/not_found и при пустой корзине
   (OpenCart-контроллер `checkout/cart` для пустой корзины рендерит
   `error/not_found.tpl`). Стили в common.css, чтобы при SPA-замене
   `section.cart` → `section.not-found` они уже были подключены.
   ============================================================ */

.page-404 .site-header {
  border-radius: var(--radius-hero) var(--radius-hero) 0 0;
}

.not-found {
  background-color: var(--color-white);
  padding-bottom: 5rem;
}

.not-found__inner {
  padding-top: 1.5rem;
}

.not-found__heading {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 400;
  color: var(--color-dark);
  line-height: 1.1;
  margin-bottom: 2.5rem;
}

.not-found__text {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.2;
  max-width: 45rem;
  margin-bottom: 2.5rem;
}

.not-found__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 300px;
  height: 5rem;
  background-color: var(--color-accent);
  color: var(--color-dark);
  border-radius: var(--radius-card);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: opacity var(--transition);
}

.not-found__btn:hover {
  opacity: 0.85;
}

@media (max-width: 1279px) {
  .not-found__heading {
    font-size: 3rem;
  }
}

@media (max-width: 767px) {
  .not-found {
    padding-bottom: 3rem;
  }

  .not-found__inner {
    padding-top: 1rem;
  }

  .not-found__heading {
    font-size: 2.25rem;
    margin-bottom: 1.75rem;
  }

  .not-found__text {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .not-found__btn {
    width: 100%;
    min-width: unset;
    height: 3.75rem;
    font-size: 0.875rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   МОДАЛКА «КУПИТЬ В 1 КЛИК» / «БЫСТРЫЙ ЗАКАЗ»
   Используется на странице товара и в корзине — поэтому в common.css
   ═══════════════════════════════════════════════════════════ */

.oneclick-modal {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 43, 44, 0.6);
}

.oneclick-modal__card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: 2.5rem 2rem;
  margin: 1rem;
}

.oneclick-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-dark);
}

.oneclick-modal__close svg {
  width: 24px;
  height: 24px;
}

.oneclick-modal__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}

.oneclick-modal__subtitle {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-gray);
  margin-bottom: 1.5rem;
}

.oneclick-modal__product {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-bg);
  border-radius: var(--radius-btn);
  margin-bottom: 1.5rem;
}

.oneclick-modal__product-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 4px;
}

.oneclick-modal__product-name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-dark);
}

.oneclick-modal__product-weight {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-gray);
  margin-top: 0.25rem;
}

.oneclick-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.oneclick-modal__note {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-gray);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

#oneclick-submit {
  margin-top: 0.5rem;
}

@media (max-width: 767px) {
  .oneclick-modal__card {
    padding: 2rem 1.25rem;
  }
}