@font-face {
   font-family: "EBGaramond";
   src: url("../fonts/EBGaramond-Regular.woff") format("woff");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "EBGaramond";
   src: url("../fonts/EBGaramond-Italic.woff") format("woff");
   font-weight: 400;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: "EBGaramond";
   src: url("../fonts/EBGaramond-Medium.woff") format("woff");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "EBGaramond";
   src: url("../fonts/EBGaramond-MediumItalic.woff") format("woff");
   font-weight: 500;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: "EBGaramond";
   src: url("../fonts/EBGaramond-SemiBold.woff") format("woff");
   font-weight: 600;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "EBGaramond";
   src: url("../fonts/EBGaramond-SemiBoldItalic.woff") format("woff");
   font-weight: 600;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: "EBGaramond";
   src: url("../fonts/EBGaramond-Bold.woff") format("woff");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "EBGaramond";
   src: url("../fonts/EBGaramond-BoldItalic.woff") format("woff");
   font-weight: 700;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: "EBGaramond";
   src: url("../fonts/EBGaramond-ExtraBold.woff") format("woff");
   font-weight: 800;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "EBGaramond";
   src: url("../fonts/EBGaramond-ExtraBoldItalic.woff") format("woff");
   font-weight: 800;
   font-style: italic;
   font-display: swap;
}

a,
button,
input,
textarea,
select,
summary {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html,
body {
   overflow-x: clip;
}

body {
   margin: 0;
   font-family: "EBGaramond", Arial, Helvetica, sans-serif;
   color: var(--color-text-primary);
   background: var(--color-bg-page);
   font-size: var(--font-size-service-body-mobile);
}

button,
input,
textarea {
   font-family: inherit;
}

.page {
   width: 100%;
   margin: 0 auto;
   background: #fff;
   overflow-x: clip;
}

.container {
   padding-left: var(--container-padding-x);
   padding-right: var(--container-padding-x);
}

:root {
   /* ----------------------------------------------------------
     1. ЦВЕТА
  ---------------------------------------------------------- */
   --header-height: 200px;

   /* Текст */
   --color-text-primary: #1a1a1a;
   --color-text-secondary: #666666;
   --color-text-muted: #999999;
   --color-text-inverse: #ffffff;
   --color-text-link: #1a1a1a;
   --color-text-link-hover: #1a1a1a;

   /* Фоны */
   --color-bg-page: #ffffff;
   --color-bg-utility-bar: #f5f5f3;
   --color-bg-header: #ffffff;
   --color-bg-header-sticky: #ffffff;
   --color-bg-nav-dropdown: #ffffff;
   --color-bg-card: #f5f5f3;
   --color-bg-drawer: #ffffff;
   --color-bg-overlay: rgba(0, 0, 0, 0.4);
   --color-bg-footer: #ffffff;

   /* Кнопки */
   --color-btn-primary-bg: #1a1a1a;
   --color-btn-primary-text: #ffffff;
   --color-btn-primary-bg-hover: #333333;
   --color-btn-secondary-bg: #ffffff;
   --color-btn-secondary-text: #1a1a1a;
   --color-btn-secondary-border: #1a1a1a;
   --color-btn-secondary-bg-hover: #f5f5f3;
   --color-btn-tertiary-text: #1a1a1a;
   /* ghost / text-кнопка */
   --color-btn-disabled-bg: #cccccc;
   --color-btn-disabled-text: #ffffff;

   /* Линии и рамки */
   --color-border: #d8d8d0;
   --color-border-light: #ebebeb;
   --color-border-input: #1a1a1a;
   --color-border-input-focus: #1a1a1a;
   --color-border-separator: #d8d8d0;

   /* Состояния */
   --color-error: #c0392b;
   --color-error-bg: #fdf0ef;
   --color-success: #2d7a2d;
   --color-disabled: #cccccc;

   /* Спецэффекты */
   --color-wishlist-icon: #1a1a1a;
   --color-wishlist-icon-active: #1a1a1a;
   --color-tag-bg: rgba(255, 255, 255, 0.85);
   --color-tag-text: #1a1a1a;
   --color-undo-bg: #f5f5f3;
   --color-undo-text: #1a1a1a;

   /* ----------------------------------------------------------
     2. ТИПОГРАФИКА — FONT FAMILY
  ---------------------------------------------------------- */

   --font-family-base: "EB Garamond", Georgia, "Times New Roman", serif;
   --font-family-mono: "Courier New", monospace;

   /* базовые веса */
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;

   /* ----------------------------------------------------------
     3. ТИПОГРАФИКА — UTILITY BAR
  ---------------------------------------------------------- */

   --font-size-utility: 1.199rem;
   --font-weight-utility: 400;
   --line-height-utility: 1.4;
   --letter-spacing-utility: 0.08em;
   --text-transform-utility: uppercase;
   --color-text-utility: #1a1a1a;

   /* ----------------------------------------------------------
     4. ТИПОГРАФИКА — HEADER / ЛОГОТИП
  ---------------------------------------------------------- */

   --font-size-logo: 0.8125rem;
   --font-weight-logo: 400;
   --letter-spacing-logo: 0.25em;
   --text-transform-logo: uppercase;

   /* ----------------------------------------------------------
     5. ТИПОГРАФИКА — MAIN NAVIGATION
  ---------------------------------------------------------- */

   --font-size-nav: 0.6875rem;
   --font-weight-nav: 400;
   --line-height-nav: 1.4;
   --letter-spacing-nav: 0.12em;
   --text-transform-nav: uppercase;
   --color-text-nav: #1a1a1a;
   --color-text-nav-hover: #666666;
   --color-text-nav-active: #1a1a1a;

   /* ----------------------------------------------------------
     6. ТИПОГРАФИКА — DROPDOWN
  ---------------------------------------------------------- */

   --font-size-dropdown: 0.75rem;
   --font-weight-dropdown: 400;
   --line-height-dropdown: 2;
   --letter-spacing-dropdown: 0.06em;
   --text-transform-dropdown: none;
   --color-text-dropdown: #1a1a1a;
   --color-text-dropdown-hover: #666666;

   /* ----------------------------------------------------------
     7. ТИПОГРАФИКА — BREADCRUMBS
  ---------------------------------------------------------- */

   --font-size-breadcrumb: 0.8rem;
   --font-weight-breadcrumb: 400;
   --letter-spacing-breadcrumb: 0.04em;
   --text-transform-breadcrumb: none;
   --line-height-breadcrumb: 1.4;
   --color-text-breadcrumb: #666666;
   --color-text-breadcrumb-sep: #999999;
   --color-text-breadcrumb-current: #1a1a1a;

   /* ----------------------------------------------------------
     8. ТИПОГРАФИКА — ЗАГОЛОВКИ
  ---------------------------------------------------------- */

   /* H1 страницы (PLP: "Мужчины") */
   --font-size-h1: 1.625rem;
   --font-weight-h1: 400;
   --line-height-h1: 1.2;
   --letter-spacing-h1: 0.02em;
   --text-transform-h1: none;

   /* H1 Hero (главная: "ПОДЛИННЫЙ КАШЕМИР") */
   --font-size-hero-title: 2rem;
   --font-weight-hero-title: 400;
   --line-height-hero-title: 1.15;
   --letter-spacing-hero-title: 0.08em;
   --text-transform-hero-title: uppercase;
   --color-text-hero-title: #ffffff;

   /* Подзаголовок Hero */
   --font-size-hero-subtitle: 1.25rem;
   --font-weight-hero-subtitle: 400;
   --line-height-hero-subtitle: 1.5;
   --letter-spacing-hero-subtitle: 0.02em;
   --color-text-hero-subtitle: #ffffff;

   /* CTA на Hero */
   --font-size-hero-cta: 1.25rem;
   --font-weight-hero-cta: 400;
   --letter-spacing-hero-cta: 0.14em;
   --text-transform-hero-cta: uppercase;
   --color-text-hero-cta: #ffffff;

   /* H2 (блоки главной, editorial) */
   --font-size-h2: 1.32rem;
   --font-weight-h2: 500;
   --line-height-h2: 1.3;
   --letter-spacing-h2: 0.02em;

   /* H3 */
   --font-size-h3: 1.25rem;
   --font-weight-h3: 500;
   --line-height-h3: 1.4;
   --letter-spacing-h3: 0.02em;

   /* H4 (блоки аккордеонов, подзаголовки секций) */
   --font-size-h4: 1.199rem;
   --font-weight-h4: 500;
   --line-height-h4: 1.5;
   --letter-spacing-h4: 0.06em;
   --text-transform-h4: uppercase;

   /* ----------------------------------------------------------
     9. ТИПОГРАФИКА — PLP (КАТАЛОГ)
  ---------------------------------------------------------- */

   /* Название товара на карточке */
   --font-size-card-title: 1.199rem;
   --font-weight-card-title: 400;
   --line-height-card-title: 1.5;
   --letter-spacing-card-title: 0.01em;
   --text-transform-card-title: none;
   --color-text-card-title: #1a1a1a;
   --catalog-header-text: #111111;

   /* Цвет под названием */
   --font-size-card-color: 0.75rem;
   --font-weight-card-color: 400;
   --letter-spacing-card-color: 0.01em;
   --color-text-card-color: #666666;

   /* Цена */
   --font-size-card-price: 0.8125rem;
   --font-weight-card-price: 400;
   --letter-spacing-card-price: 0.02em;
   --color-text-card-price: #1a1a1a;

   /* Тег ("БАЗА", "4 ЦВЕТА") */
   --font-size-card-tag: 0.625rem;
   --font-weight-card-tag: 400;
   --letter-spacing-card-tag: 0.1em;
   --text-transform-card-tag: uppercase;
   --color-text-card-tag: #1a1a1a;

   /* Кнопка/ссылка "ФИЛЬТРЫ" */
   --font-size-filter-btn: 1.199rem;
   --font-weight-filter-btn: 400;
   --letter-spacing-filter-btn: 0.12em;
   --text-transform-filter-btn: uppercase;

   /* Control row (сортировка, количество) */
   --font-size-control-row: 0.9rem;
   --letter-spacing-control-row: 0.08em;
   --text-transform-control-row: uppercase;

   /* Пагинация */
   --font-size-pagination: 0.8rem;
   --letter-spacing-pagination: 0.12em;
   --text-transform-pagination: uppercase;

   /* ----------------------------------------------------------
     10. ТИПОГРАФИКА — PDP (КАРТОЧКА ТОВАРА)
  ---------------------------------------------------------- */

   /* Название */
   --font-size-pdp-title: 1.375rem;
   --font-weight-pdp-title: 400;
   --line-height-pdp-title: 1.35;
   --letter-spacing-pdp-title: 0.01em;
   --color-text-pdp-title: #1a1a1a;

   /* Цена */
   --font-size-pdp-price: 1.199rem;
   --font-weight-pdp-price: 400;
   --letter-spacing-pdp-price: 0.02em;
   --color-text-pdp-price: #1a1a1a;

   /* Код/артикул */
   --font-size-pdp-sku: 0.6875rem;
   --font-weight-pdp-sku: 400;
   --letter-spacing-pdp-sku: 0.04em;
   --color-text-pdp-sku: #666666;

   /* Метки характеристик ("ЦВЕТ", "ВЫБЕРИТЕ РАЗМЕР") */
   --font-size-pdp-label: 0.6875rem;
   --font-weight-pdp-label: 400;
   --letter-spacing-pdp-label: 0.12em;
   --text-transform-pdp-label: uppercase;
   --color-text-pdp-label: #1a1a1a;

   /* Название цвета под свотчами */
   --font-size-pdp-color-name: 0.75rem;
   --font-weight-pdp-color-name: 400;
   --color-text-pdp-color-name: #666666;

   /* Заголовки аккордеонов (ОПИСАНИЕ, МАТЕРИАЛЫ...) */
   --font-size-pdp-accordion: 0.6875rem;
   --font-weight-pdp-accordion: 400;
   --letter-spacing-pdp-accordion: 0.12em;
   --text-transform-pdp-accordion: uppercase;

   /* Тело аккордеонов */
   --font-size-pdp-body: 0.875rem;
   --font-weight-pdp-body: 400;
   --line-height-pdp-body: 1.7;
   --letter-spacing-pdp-body: 0.01em;
   --color-text-pdp-body: #1a1a1a;

   /* Сервисные строки ("*Бесплатная доставка...") */
   --font-size-pdp-service: 1.1rem;
   --font-weight-pdp-service: 400;
   --letter-spacing-pdp-service: 0.02em;
   --color-text-pdp-service: #666666;

   /* Строка про маркетплейсы */
   --font-size-pdp-note: 0.6875rem;
   --color-text-pdp-note: #666666;
   --letter-spacing-pdp-note: 0.02em;

   /* ----------------------------------------------------------
     11. ТИПОГРАФИКА — CART / CHECKOUT
  ---------------------------------------------------------- */

   --font-size-cart-item-title: 1.25rem;
   --font-weight-cart-item-title: 400;
   --letter-spacing-cart-item-title: 0.01em;

   --font-size-checkout: 1.25rem;
   --font-weight-checkout: 400;
   --letter-spacing-checkout: 0.1em;
   --text-transform-checkout: uppercase;
   --color-text-checkout: #666666;

   /* ----------------------------------------------------------
     12. ТИПОГРАФИКА — SERVICE PAGES / EDITORIAL
  ---------------------------------------------------------- */

   --font-size-service-body: 1.32rem;
   --font-size-service-body-mobile: 1.126rem;
   --font-weight-service-body: 400;
   --line-height-service-body: 1.5;
   --line-height-service-body-mobile: 1.5;
   --letter-spacing-service-body: 0.01em;
   --color-text-service-body: #1a1a1a;

   /* FAQ аккордеон */
   --font-size-faq-question: 0.875rem;
   --font-weight-faq-question: 400;
   --letter-spacing-faq-question: 0.04em;
   --color-text-faq-question: #1a1a1a;

   --font-size-faq-answer: 0.875rem;
   --font-weight-faq-answer: 400;
   --line-height-faq-answer: 1.7;
   --color-text-faq-answer: #333333;

   /* Blog листинг */
   --font-size-blog-card-title: 1rem;
   --font-weight-blog-card-title: 400;
   --line-height-blog-card-title: 1.4;
   --letter-spacing-blog-card-title: 0.01em;

   --font-size-blog-meta: 0.6875rem;
   --letter-spacing-blog-meta: 0.06em;
   --color-text-blog-meta: #666666;

   /* Blog статья */
   --font-size-article-body: 1rem;
   --line-height-article-body: 1.8;
   --letter-spacing-article-body: 0.01em;

   /* ----------------------------------------------------------
     13. ТИПОГРАФИКА — FOOTER
  ---------------------------------------------------------- */

   --font-size-footer-heading: 1rem;
   --font-weight-footer-heading: 400;
   --letter-spacing-footer-heading: 0.12em;
   --text-transform-footer-heading: uppercase;
   --color-text-footer-heading: #1a1a1a;

   --font-size-footer-link: 0.75rem;
   --font-weight-footer-link: 400;
   --line-height-footer-link: 2.2;
   --letter-spacing-footer-link: 0.02em;
   --text-transform-footer-link: none;
   --color-text-footer-link: #1a1a1a;
   --color-text-footer-link-hover: #666666;

   --font-size-footer-copy: 0.6875rem;
   --font-weight-footer-copy: 400;
   --letter-spacing-footer-copy: 0.04em;
   --color-text-footer-copy: #666666;

   /* ----------------------------------------------------------
     14. ТИПОГРАФИКА — ФОРМЫ (глобально)
  ---------------------------------------------------------- */

   --font-size-input: 0.8125rem;
   --font-weight-input: 400;
   --line-height-input: 1.5;
   --letter-spacing-input: 0.02em;
   --color-text-input: #1a1a1a;
   --color-placeholder: #999999;

   --font-size-input-label: 0.6875rem;
   --font-weight-input-label: 400;
   --letter-spacing-input-label: 0.08em;
   --text-transform-input-label: uppercase;
   --color-text-input-label: #666666;

   --font-size-input-error: 0.6875rem;
   --color-text-input-error: #c0392b;
   --letter-spacing-input-error: 0.02em;

   --font-size-checkbox-label: 0.75rem;
   --letter-spacing-checkbox-label: 0.02em;
   --color-text-checkbox-label: #666666;

   /* ----------------------------------------------------------
     15. КНОПКИ — РАЗМЕРЫ И ОТСТУПЫ
  ---------------------------------------------------------- */

   /* Primary */
   --btn-primary-height: 48px;
   --btn-primary-padding-x: 32px;
   --btn-primary-font-size: 1rem;
   --btn-primary-letter-spacing: 0.14em;
   --btn-primary-text-transform: uppercase;
   --btn-primary-border-radius: 0px;
   /* прямые углы */

   /* Secondary (outline) */
   --btn-secondary-height: 48px;
   --btn-secondary-padding-x: 32px;
   --btn-secondary-border-width: 1px;
   --btn-secondary-font-size: 0.6875rem;
   --btn-secondary-letter-spacing: 0.14em;
   --btn-secondary-text-transform: uppercase;
   --btn-secondary-border-radius: 0px;

   /* Tertiary (текстовая кнопка / ghost) */
   --btn-tertiary-font-size: 0.6875rem;
   --btn-tertiary-letter-spacing: 0.1em;
   --btn-tertiary-text-transform: uppercase;
   --color-btn-tertiary-border-bottom: 1px solid #1a1a1a;
   /* underline-стиль */

   /* Анимации кнопок */
   --btn-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;

   /* ----------------------------------------------------------
     16. КОНТЕЙНЕРЫ И СЕТКА
  ---------------------------------------------------------- */

   --container-max-width: 1440px;
   --container-padding-x: 16px;
   /* base / mobile */
   --container-padding-x-tablet: 16px;
   --container-padding-x-desktop: 20px;

   /* PLP сетка */
   --grid-cols-desktop: 3;
   --grid-cols-tablet: 2;
   --grid-cols-mobile: 2;
   --grid-gap-desktop: 16px;
   --grid-gap-tablet: 12px;
   --grid-gap-mobile: 8px;

   /* Вертикальные отступы между секциями */
   --section-gap-xl: 60px;
   --section-gap-lg: 40px;
   --section-gap-md: 32px;
   --section-gap-sm: 24px;
   --section-gap-xs: 16px;

   /* ----------------------------------------------------------
     17. ВЫСОТЫ ЗОНАЛЬНЫХ БЛОКОВ
  ---------------------------------------------------------- */

   --height-utility-bar: 34px;
   --height-header-logo-area: 86px;
   --height-header-nav: 50px;
   --height-header-total: 170px;
   --height-header-total-mob: 70px;
   /* utility + logo + nav */
   --height-header-sticky: 80px;
   /* sticky: без utility bar */

   --height-breadcrumb-row: 40px;
   --height-control-row: 48px;
   /* строка фильтров/сортировки PLP */
   --height-footer-bottom-bar: 48px;

   /* ----------------------------------------------------------
     18. ОТСТУПЫ (SPACING SCALE)
  ---------------------------------------------------------- */

   --spacing-1: 4px;
   --spacing-2: 8px;
   --spacing-3: 12px;
   --spacing-4: 16px;
   --spacing-5: 20px;
   --spacing-6: 24px;
   --spacing-7: 32px;
   --spacing-8: 40px;
   --spacing-9: 48px;
   --spacing-10: 60px;
   --spacing-11: 80px;
   --spacing-12: 120px;

   /* ----------------------------------------------------------
     19. BORDER RADIUS
  ---------------------------------------------------------- */

   --radius-none: 0px;
   /* кнопки, карточки, инпуты — прямые углы */
   --radius-sm: 2px;
   /* теги, плашки */
   --radius-md: 4px;
   /* модалки, drawer */
   --radius-round: 50%;
   /* swatches цветов */

   /* ----------------------------------------------------------
     20. ТЕНИ
  ---------------------------------------------------------- */

   --shadow-none: none;
   --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
   --shadow-dropdown: 0 4px 20px rgba(0, 0, 0, 0.08);
   --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.12);
   --shadow-sticky: 0 1px 4px rgba(0, 0, 0, 0.06);

   /* ----------------------------------------------------------
     21. АНИМАЦИИ И ПЕРЕХОДЫ
  ---------------------------------------------------------- */

   --transition-base: 0.2s ease;
   --transition-slow: 0.35s ease;
   --transition-fast: 0.12s ease;
   --transition-drawer: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   --transition-dropdown: 0.25s ease;
   --transition-overlay: 0.25s ease;

   /* ----------------------------------------------------------
     22. Z-INDEX SCALE
  ---------------------------------------------------------- */

   --z-base: 1;
   --z-card-hover: 2;
   --z-sticky: 100;
   --z-dropdown: 200;
   --z-overlay: 300;
   --z-drawer: 400;
   --z-modal: 500;
   --z-toast: 600;

   /* ----------------------------------------------------------
     24. СВОТЧИ ЦВЕТОВ (PDP / PLP)
  ---------------------------------------------------------- */

   --swatch-size-desktop: 40px;
   --swatch-size-mobile: 36px;
   --swatch-gap: 8px;
   --swatch-border-width: 1px;
   --swatch-border-color: #d8d8d0;
   --swatch-border-selected: 1px solid #1a1a1a;
   --swatch-border-radius: 50%;
   --swatch-outline-offset: 2px;

   /* ----------------------------------------------------------
     25. ГАЛЕРЕЯ PDP
  ---------------------------------------------------------- */

   --gallery-thumb-size: 80px;
   --gallery-thumb-gap: 8px;
   --gallery-main-aspect: 4 / 5;
   /* соотношение сторон основного фото */

   /* ----------------------------------------------------------
     26. КАРТОЧКА ТОВАРА (PLP tile)
  ---------------------------------------------------------- */

   --card-image-aspect: 3 / 4;
   /* соотношение сторон фото на карточке */
   --card-padding-bottom: 16px;
   --card-title-mt: 12px;
   --card-color-mt: 4px;
   --card-price-mt: 4px;
   --card-tag-gap: 8px;

   /* ----------------------------------------------------------
     27. UTILITY BAR — ГЕОМЕТРИЯ
  ---------------------------------------------------------- */

   --utility-bar-height: 34px;
   --utility-bar-padding-x: 20px;
   --utility-bar-icon-size: 18px;
   --utility-bar-gap: 24px;
   /* gap между иконками справа */

   /* ----------------------------------------------------------
     28. HEADER — ГЕОМЕТРИЯ
  ---------------------------------------------------------- */

   --header-logo-area-height: 86px;
   --header-logo-padding-y: 20px;
   --header-nav-height: 50px;
   --header-nav-item-gap: 40px;
   /* gap между пунктами меню */
   --header-sticky-height: 80px;

   /* ----------------------------------------------------------
     29. DROPDOWN — ГЕОМЕТРИЯ
  ---------------------------------------------------------- */

   --dropdown-padding-x: 20px;
   --dropdown-padding-y: 40px;
   --dropdown-col-gap: 40px;
   --dropdown-link-py: 6px;

   /* ----------------------------------------------------------
     30. MOBILE DRAWER — ГЕОМЕТРИЯ
  ---------------------------------------------------------- */

   --drawer-width: 100vw;
   /* полноэкранный на мобиле */
   --drawer-padding-x: 20px;
   --drawer-padding-y: 24px;
   --drawer-header-height: 56px;

   /* ----------------------------------------------------------
     31. FOOTER — ГЕОМЕТРИЯ
  ---------------------------------------------------------- */

   --footer-padding-top: 60px;
   --footer-padding-bottom: 32px;
   --footer-col-gap: 40px;
   --footer-bottom-bar-pt: 24px;
   --footer-newsletter-mb: 40px;

   /* ----------------------------------------------------------
     32. ФОРМЫ — ГЕОМЕТРИЯ
  ---------------------------------------------------------- */

   --input-height: 48px;
   --input-padding-x: 12px;
   --input-padding-y: 12px;
   --input-border-width: 1px;
   --input-border-radius: 0px;
   --input-gap-y: 16px;
   /* gap между полями формы */

   --checkbox-size: 16px;
   --checkbox-border-width: 1px;
   --checkbox-border-radius: 0px;

   /* ----------------------------------------------------------
     33. КОРЗИНА — ГЕОМЕТРИЯ
  ---------------------------------------------------------- */

   --cart-item-image-size: 120px;
   --cart-item-padding-y: 24px;
   --cart-col-left-width: 65%;
   --cart-col-right-width: 35%;
   --cart-summary-padding: 24px;
   --cart-separator-color: #d8d8d0;

   /* ----------------------------------------------------------
     34. CHECKOUT — ГЕОМЕТРИЯ
  ---------------------------------------------------------- */

   --checkout-col-left-width: 55%;
   --checkout-col-right-width: 45%;
   --checkout-section-gap: 32px;
   --checkout-field-gap: 16px;
   --checkout-padding-x: 40px;

   /* ----------------------------------------------------------
     35. МОДАЛКИ И ОВЕРЛЕИ
  ---------------------------------------------------------- */

   --modal-max-width: 560px;
   --modal-padding: 40px;
   --modal-border-radius: 0px;

   /* Форма "Купить в 1 клик" */
   --quick-buy-modal-width: 480px;
   --quick-buy-padding: 32px;

   /* ----------------------------------------------------------
     36. UNDO / TOAST УВЕДОМЛЕНИЯ
  ---------------------------------------------------------- */

   --toast-padding-x: 20px;
   --toast-padding-y: 12px;
   --toast-font-size: 0.75rem;
   --toast-letter-spacing: 0.04em;
   --toast-bg: #f5f5f3;
   --toast-color: #1a1a1a;
   --toast-border: 1px solid #d8d8d0;
   --toast-border-radius: 0px;
   --toast-duration: 4s;

   /* ----------------------------------------------------------
     37. WISHLIST
  ---------------------------------------------------------- */

   --wishlist-icon-size: 20px;
   --wishlist-icon-top: 12px;
   --wishlist-icon-right: 12px;

   /* ----------------------------------------------------------
     38. SEARCH
  ---------------------------------------------------------- */

   --search-input-height: 48px;
   --search-input-font-size: 0.875rem;
   --search-input-letter-spacing: 0.02em;
   --search-overlay-bg: rgba(255, 255, 255, 0.98);
   --search-padding-x: 20px;

   /* ----------------------------------------------------------
     39. ПАГИНАЦИЯ
  ---------------------------------------------------------- */

   --pagination-gap: 8px;
   --pagination-item-size: 40px;
   --pagination-font-size: 0.6875rem;
   --pagination-letter-spacing: 0.12em;
   --pagination-text-transform: uppercase;
   --pagination-color: #1a1a1a;
   --pagination-color-active: #1a1a1a;
   --pagination-border-active: 1px solid #1a1a1a;

   /* ----------------------------------------------------------
     40. 404 СТРАНИЦА
  ---------------------------------------------------------- */

   --error-page-title-size: 32px;
   --error-page-body-size: 15px;
   --error-page-padding-y: 120px;
}

@media (max-width: 374px) {
   :root {
      --font-size-hero-title: 1.5rem;
      --container-padding-x: 12px;
      --grid-gap-mobile: 6px;
   }
}

@media (min-width: 768px) {
   :root {
      --container-padding-x: var(--container-padding-x-tablet);

      --font-size-h1: 1.625rem;
      --font-size-hero-title: 2rem;
      --font-size-hero-subtitle: 0.9375rem;
      --font-size-h2: 1.69rem;

      --section-gap-xl: 60px;
      --section-gap-lg: 40px;
      --section-gap-md: 32px;

      --height-utility-bar: 34px;
      --height-header-total: 130px;
      --height-header-sticky: 64px;

      --btn-primary-height: 48px;
      --btn-primary-padding-x: 32px;

      --input-height: 48px;

      --cart-col-left-width: 60%;
      --cart-col-right-width: 40%;
      --cart-item-image-size: 120px;

      --checkout-col-left-width: 100%;
      --checkout-col-right-width: 100%;
      --checkout-padding-x: 24px;

      --gallery-thumb-size: 80px;

      --prose-max-width: 680px;

      --footer-padding-top: 60px;
      --footer-col-gap: 40px;

      --dropdown-padding-y: 32px;
      --header-nav-item-gap: 28px;
   }

   body {
      margin: 0;
      font-family: "EBGaramond", Arial, Helvetica, sans-serif;
      color: var(--color-text-primary);
      background: var(--color-bg-page);
      font-size: var(--font-size-service-body);
   }
}

@media (min-width: 1440px) {
   :root {
      --container-padding-x: var(--container-padding-x-desktop);

      --font-size-h1: 2.5rem;
      --font-size-hero-title: 2.5rem;
      --font-size-hero-subtitle: 1rem;
      --font-size-h2: 1.69rem;
      --font-size-h3: 1.125rem;
      --font-size-pdp-title: 1.375rem;
      --font-size-pdp-price: 1.125rem;

      --section-gap-xl: 80px;
      --section-gap-lg: 40px;
      --section-gap-md: 40px;
      --section-gap-sm: 24px;

      --height-utility-bar: 34px;
      --height-header-total: 170px;
      --height-header-sticky: 80px;

      --btn-primary-height: 48px;
      --btn-primary-padding-x: 32px;

      --input-height: 48px;

      --cart-col-left-width: 65%;
      --cart-col-right-width: 35%;
      --cart-item-image-size: 120px;

      --checkout-col-left-width: 55%;
      --checkout-col-right-width: 45%;
      --checkout-padding-x: 40px;

      --gallery-thumb-size: 80px;

      --prose-max-width: 680px;

      --footer-padding-top: 60px;
      --footer-col-gap: 40px;

      --dropdown-padding-y: 40px;
      --header-nav-item-gap: 40px;
   }
}