/**
 * Тема OptimaLife — стили, перенесённые из static/ (этап 2).
 * Каждая секция шапки/футера добавляется сюда по мере переноса.
 * Источник токенов и разметки: static/tokens.css, static/header-section.css
 * (Figma: https://www.figma.com/design/SjVnwq5oZYBSrcJBqeJJZi node 270:2110).
 */

/* Шрифты — самохостинг (не Google Fonts CDN: не гоняем IP посетителей из ЕС
   на сторонний домен при каждой загрузке страницы, актуально для PL/EU-рынка).
   Только latin + latin-ext — покрывает польские диакритики (ą ć ę ł ń ó ś ź ż),
   без кириллицы/греческого/вьетнамского, которые сайту не нужны.
   Inter — вариативный шрифт, один файл покрывает весь диапазон 400-700. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/cinzel-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/cinzel-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Сброс стилей — минимальный современный ресет (в духе Josh Comeau / modern
   CSS reset), чтобы Bootstrap-less вёрстка не зависела от дефолтов браузера. */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Все размеры темы заданы в rem. До 1920px корень равен 16px (или системной
     настройке пользователя) и вёрстка совпадает с макетом; выше 1920px корень
     растёт пропорционально ширине окна (0.8333vw == 16px на 1920), поэтому на
     2K/4K сайт выглядит так же, как в макете, только крупнее, а не «марка»
     по центру огромного экрана. Потолок 48px (= 5760px по ширине). */
  font-size: clamp(100%, 0.8333vw, 48px);
}

body {
  line-height: 1.5;
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  /* Явный фон обязателен: шапка полупрозрачная (rgba(255,253,250,.7)), и без
     него в тёмной системной теме браузер подставляет тёмный canvas — шапка
     становилась серой. Figma-фон всех страниц — кремовый #fffaf3. */
  background-color: var(--color-surface-cream);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

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

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

:root {
  /* Бренд фиксированно светлый: запрещаем браузерам (авто-тёмная тема
     Chrome/WebView) перекрашивать страницу — иначе полупрозрачная кремовая
     шапка ложится на подставленный тёмный canvas и выглядит серой. */
  color-scheme: light;
  --color-promo-bg: #f65f35;
  --color-text-white: #ffffff;
  --color-surface-dark: #040301;
  --color-header-overlay: rgba(255, 253, 250, 0.04);
  --color-divider-on-dark: rgba(228, 221, 210, 0.1);
  --color-divider-white: rgba(255, 255, 255, 0.1);
  --color-icon-btn-bg: rgba(255, 254, 253, 0.1);
  --color-brand-gold: #a9772d;
  --color-surface-footer: #141010;
  --color-surface-cream: #fffaf3;
  --color-surface-cream-alt: #f4efe7;
  --color-text-dark: #242220;
  --color-heading-dark: #2b2a29;
  --color-text-muted: #616161;
  --color-text-placeholder: #94918e;
  --color-brand-gold-light: #bf8a3c;
  --color-brand-gold-dark: #8f6323;
  --color-badge-discount-bg: rgba(246, 95, 53, 0.9);
  /* Тайминги интерактивных состояний — см. секцию «Интерактивные состояния»
     в конце файла. Короткая для цвета, плавная (без отскока) для движения. */
  --transition-fast: 160ms ease;
  --transition-smooth: 260ms cubic-bezier(0.22, 1, 0.36, 1);
  --color-input-bg: #f5f4f2;
  --color-border-cream: #e4ddd1;
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-shadow-soft: rgba(91, 97, 103, 0.2);
  --font-family-base: 'Inter', sans-serif;
  --font-family-display: 'Cinzel', serif;
  --font-size-base: 0.9375rem;
  --font-size-xs: 0.75rem;
  --font-size-xl: 1.25rem;
  --font-size-display: 5.375rem;
  --line-height-base: 1.5rem;
  --line-height-display: 6rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --gradient-gold-cta: linear-gradient(90deg, #c5872d 2.172%, #f6b74b 31.089%, #f6df9e 81.108%, #e6a83d 100%);
  --gradient-gold-text: linear-gradient(90deg, #c28d3d 0%, #dcad5c 12.5%, #f6cc7a 25%, #f7df9c 44.471%, #f7f1be 63.942%, #f6da95 81.971%, #f5c26b 100%);
  --gradient-divider-gold: linear-gradient(90deg, rgba(199, 147, 67, 0) 0%, #c79343 12.019%, #f7eeb9 50.481%, rgba(246, 200, 117, 0) 100%);
  --gradient-hero-scrim: linear-gradient(-90deg, rgba(18, 15, 10, 0) 0%, rgba(21, 15, 9, 0.171) 34.135%, rgba(22, 16, 8, 0.272) 66.346%, rgba(26, 17, 7, 0.5) 100%);
  --hero-min-height: 51.25rem;
  --header-promo-height: 2.75rem;
  --header-nav-height: 5.875rem;
  --header-logo-width: 13.8125rem;
  --header-logo-height: 3.625rem;
  --header-nav-lang-gap: 10.625rem;
  --cart-badge-size: 1.1875rem;
  /* 89rem (1424px), не 86rem: контейнер использует max-width ЗАЕДИНО с
     padding-inline (24px с каждой стороны). В Figma отступ до контента —
     272px от края экрана (layoutGrid offset), это ширина самого контента,
     а не контейнера. При max-width:1376 контент из-за padding уезжал на
     296px — контейнер добавлял ещё 24px поверх уже заложенных в макете.
     89rem = 86rem + 2×1.5rem (padding) возвращает контент на верные 272px
     на всех секциях сайта разом (hero/категории/товары/блог/Instagram/
     каталог), сохранив padding-inline как боковое поле на узких экранах. */
  --container-padding-inline: 1.5rem;
  --container-max-width: 89rem;
  --border-width-hairline: 1px;
  --icon-size-sm: 1.5rem;
  --icon-size-md: 1.75rem;
  --icon-btn-size: 3rem;
  --radius-pill: 6.25rem;
  --radius-circle: 3.125rem;
  --opacity-muted: 0.5;
  --space-6: 0.375rem;
  --space-7: 0.4375rem;
  --space-5: 0.3125rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-18: 1.125rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --icon-size-xs: 0.625rem;
}

/* Промо-плашка (common/header.twig, #top) */

.header__promo {
  position: relative;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-promo-height);
  background-color: var(--color-promo-bg);
  padding-block: 0.625rem;
  padding-inline: var(--container-padding-inline);
}

.header__promo-text {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-white);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.header__promo-text b,
.header__promo-text strong,
.header__promo-countdown {
  font-weight: var(--font-weight-bold);
}

.header__promo-text a {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

@media (max-width: 767px) {
  /* Figma 375:1806 — отступы 16/6, текст 13/20 */
  .header__promo {
    padding-block: 0.375rem;
    padding-inline: 1rem;
  }

  .header__promo-text {
    padding-inline: 0;
    font-size: 0.8125rem;
    line-height: 1.25rem;
  }
}

/* Навигационная панель (common/header.twig, .header). Две темы, обе из Figma:
   по умолчанию (все внутренние страницы: каталог, корзина, контакты и т.д.,
   ноды 304:4531/327:1628) — светлая полупрозрачная rgba(255,253,250,0.7) с
   тёмным текстом #2b2a29 и кружками иконок #f3eee9. На главной (класс
   route-common-home на body) — прежний тёмный вариант: полупрозрачный оверлей
   поверх hero-картинки, светлый текст. Все цвета шапки идут через локальные
   переменные --header-*, тема переключается их переопределением. */

.header {
  position: relative;
  z-index: 95;
  font-family: var(--font-family-base);
}

.header__nav {
  background-color: rgba(255, 253, 250, 0.7);
  border-bottom: var(--border-width-hairline) solid rgba(228, 221, 210, 0.3);
}

.route-common-home .header__nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-header-overlay);
  border-bottom-color: var(--color-divider-on-dark);
}

.header__container {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  max-width: var(--container-max-width);
  min-height: var(--header-nav-height);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  flex-wrap: wrap;
}

.header__logo {
  display: block;
  flex-shrink: 0;
}

.header__logo-image {
  display: block;
  width: var(--header-logo-width);
  height: var(--header-logo-height);
}

/* Два варианта логотипа: --dark (тёмный текст, для светлой шапки внутренних
   страниц, image/catalog/logo-dark.png) и --light (светлый текст, для тёмной
   шапки главной, image/catalog/logo.png из настроек магазина). */

.header__logo-image--light {
  display: none;
}

.route-common-home .header__logo-image--dark {
  display: none;
}

.route-common-home .header__logo-image--light {
  display: block;
}

/* Меню (common/menu.twig) */

.header__menu-nav {
  flex-shrink: 0;
}

.header__menu {
  display: flex;
  align-items: center;
  gap: var(--space-48);
  margin: 0;
  padding: 0;
  list-style: none;
}

.header__menu-item {
  position: relative;
}

/* У пункта "Katalog" надпись — ссылка на страницу каталога, а стрелка —
   отдельная кнопка-раскрывашка (иначе клик по пункту не мог бы одновременно
   и вести в каталог, и открывать подменю). Визуально это по-прежнему один
   пункт: inline-flex с тем же зазором, что был у иконки внутри ссылки. */

.header__menu-item--has-children {
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
}

.header__menu-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.header__menu-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  color: var(--color-heading-dark);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.route-common-home .header__menu-link {
  color: var(--color-text-white);
}

.header__menu-icon {
  width: 0.625rem;
  height: 0.4375rem;
  fill: none;
  stroke: var(--color-heading-dark);
  flex-shrink: 0;
}

.route-common-home .header__menu-icon {
  stroke: var(--color-text-white);
}

/* Выпадающее подменю категорий — раскрытое состояние не было в Figma-экспорте
   шапки, оформлено по аналогии с остальной палитрой/токенами. */

.header__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  display: none;
  gap: var(--space-24);
  min-width: 15rem;
  margin-top: var(--space-12);
  padding: var(--space-24);
  background-color: var(--color-surface-cream-alt);
  border-radius: 0.375rem;
  box-shadow: 0 0.75rem 1.5rem var(--color-shadow-soft);
}

.header__menu-item--has-children:hover .header__submenu,
.header__menu-item--has-children:focus-within .header__submenu,
.header__menu-item--has-children.is-open .header__submenu {
  display: flex;
  flex-wrap: wrap;
}

.header__submenu-group {
  min-width: 11.25rem;
}

.header__submenu-group-title {
  display: block;
  margin-bottom: var(--space-8);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-gold);
  text-decoration: none;
  white-space: nowrap;
}

.header__submenu-column {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header__submenu-link {
  display: block;
  padding-block: var(--space-6);
  font-size: var(--font-size-base);
  color: var(--color-text-dark);
  text-decoration: none;
  white-space: nowrap;
}

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

/* Правый блок: язык, действия, корзина */

.header__drawer {
  display: flex;
  align-items: center;
  gap: var(--header-nav-lang-gap);
  margin-left: auto;
}

.header__lang-actions {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.header__lang-wrap {
  display: contents;
}

.header__lang-form {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.header__utils {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-shrink: 0;
}

.header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.3125rem;
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  border: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.header__burger-line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 0.25rem;
  background-color: var(--color-heading-dark);
}

.route-common-home .header__burger-line {
  background-color: var(--color-text-white);
}

.header__lang {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.header__lang-item {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading-dark);
  text-transform: uppercase;
  cursor: pointer;
}

.route-common-home .header__lang-item {
  color: var(--color-text-white);
}

.header__lang-item:not(.header__lang-item--active) {
  opacity: var(--opacity-muted);
}

.header__lang-divider {
  width: var(--border-width-hairline);
  height: 0.6875rem;
  background-color: rgba(43, 42, 41, 0.1);
}

.route-common-home .header__lang-divider {
  background-color: var(--color-divider-white);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.header__mobile-actions {
  display: none;
  align-items: center;
  gap: var(--space-8);
}

.header__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  padding: var(--space-10);
  border: 0;
  border-radius: var(--radius-circle);
  background-color: #f3eee9;
  cursor: pointer;
}

.route-common-home .header__action {
  background-color: var(--color-icon-btn-bg);
}

.header__action-icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  fill: none;
  stroke: var(--color-heading-dark);
  stroke-width: 1.6;
}

.route-common-home .header__action-icon {
  stroke: var(--color-text-white);
}

.header__cart {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  text-decoration: none;
}

.header__cart-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  border-radius: var(--radius-circle);
}

.header__cart-icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  fill: none;
  stroke: var(--color-heading-dark);
  stroke-width: 1.6;
}

.route-common-home .header__cart-icon {
  stroke: var(--color-text-white);
}

.header__cart-badge {
  position: absolute;
  top: 0.1875rem;
  right: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cart-badge-size);
  height: var(--cart-badge-size);
  border-radius: var(--radius-pill);
  background-color: var(--color-brand-gold);
  color: var(--color-text-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

.header__cart-price {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading-dark);
  white-space: nowrap;
  min-width: 4.5rem; /* цена не должна двигать шапку при добавлении товара */
  text-align: right;
}

.route-common-home .header__cart-price {
  color: var(--color-text-white);
}

/* Hero-баннер (extension/module/slideshow.twig) — источник:
   static/hero-section.css + static/sliders.js (initHeroSlider), уже
   спроектированы под реальный контент из Figma (node 270:2114). */

.hero {
  position: relative;
  min-height: var(--hero-min-height);
  overflow: hidden;
  background-color: var(--color-surface-dark);
}

.hero__slides {
  position: relative;
  width: 100%;
  min-height: var(--hero-min-height);
}

/* Слайд — флекс-колонка с центрированием: текстовый блок стоит по центру
   баннера по вертикали, а не прижат к верхнему краю. */
.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.hero__slide--active {
  opacity: 1;
  pointer-events: auto;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Затемнение по макету (node 270:2117 "Rectangle 9446") покрывает не всю
   ширину баннера, а только левые 1451 из 1920px (75.573%) — там, где стоит
   текст. Правее, где бутылка, тёмного градиента в макете нет. */
.hero__scrim {
  position: absolute;
  inset: 0;
  right: auto;
  width: 75.573%;
  background: var(--gradient-hero-scrim);
}

.hero__container {
  position: relative;
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: var(--space-24);
}

.hero__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  text-transform: uppercase;
  color: var(--color-text-white);
  max-width: 56.25rem;
}

.hero__title-accent {
  background: var(--gradient-gold-text);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Порядок и отступы — по координатам макета (node 270:2118-2121): заголовок,
   затем разделитель (24px), затем подзаголовок (42px), затем кнопка (60px).
   В разметке разделитель и подзаголовок были переставлены местами. */
.hero__subtitle {
  margin: 2.625rem 0 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-white);
}

.hero__divider {
  width: 22.6875rem;
  max-width: 100%;
  height: 2px;
  margin-top: var(--space-24);
  background: var(--gradient-divider-gold);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  min-width: 15.6875rem;
  margin-top: 3.75rem;
  padding: var(--space-18) var(--space-24);
  border-radius: var(--radius-pill);
  background: var(--gradient-gold-cta);
  text-decoration: none;
}

.hero__cta-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.hero__cta-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 1.625rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.hero__dot {
  width: 0.875rem;
  height: 0.375rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.hero__dot--active {
  width: 1.4375rem;
  background-color: var(--color-text-white);
}

@media (max-width: 767px) {
  /* Раньше на мобильном герой собирался «стопкой»: картинка 420px сверху,
     текст под ней. Мобильный макет (Figma 375:1767) устроен как десктопный —
     картинка фоном на всю высоту 557px, текст поверх неё и прижат книзу. */
  .hero,
  .hero__slides {
    min-height: 34.8125rem;
  }

  .hero__slide {
    justify-content: flex-end;
  }

  /* Keep the right side of the product pack visible in the narrow hero crop. */
  .hero__image {
    object-position: 72% center;
    filter: brightness(0.75);
  }

  .hero__container {
    padding-block: var(--space-24) 4rem;
  }

  .hero__title {
    font-size: 2rem;
    line-height: 2.375rem;
  }
}

/* Полоса преимуществ (extension/module/usp.twig) — статика, сразу под hero. */

.usp {
  background-color: var(--color-surface-dark);
}

.usp__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-24);
  max-width: var(--container-max-width);
  min-height: 8.875rem;
  margin: 0 auto;
  padding: var(--space-24) var(--container-padding-inline);
  list-style: none;
}

.usp__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.usp__icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.usp__text {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-white);
  white-space: nowrap;
}

.usp__headline {
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.usp__desc {
  font-weight: var(--font-weight-regular);
}

@media (max-width: 991px) {
  .usp__list {
    justify-content: center;
  }

  .usp__text {
    white-space: normal;
  }
}

/* Карусель категорий (extension/module/category_carousel.twig) */

.cat-carousel {
  background-color: #ffffff;
}

.cat-carousel__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  /* Вертикальный ритм секций главной выставлен по координатам фреймов
     макета, а не «на глаз»: 76px сверху и 65px снизу (node 270:2244). */
  padding: 4.75rem var(--container-padding-inline) 4.0625rem;
}

.cat-carousel__head {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  margin-bottom: 3.25rem;
}

.cat-carousel__title {
  margin: 0;
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.cat-carousel__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
  margin-left: auto;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: #26231f;
  text-decoration: none;
  white-space: nowrap;
}

.cat-carousel__link-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* Общий компонент стрелок карусели (data-carousel-nav, static/sliders.js
   initTrackNav) — переиспользуется в любой горизонтальной карусели сайта. */

.carousel-nav {
  display: flex;
  gap: var(--space-8);
  flex-shrink: 0;
}

.carousel-nav__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: #ffffff;
  box-shadow: 0 2px 0.1875rem var(--color-shadow-soft);
  cursor: pointer;
}

.carousel-nav__button--prev {
  opacity: var(--opacity-muted);
  transform: rotate(180deg);
}

/* Без явного размера inline-svg растягивался по ширине кнопки и вылезал
   за пределы круга с тенью (52x87 в поле 52x52).
   24px (--icon-size-sm) был взят «на глаз» и почти втрое растягивал глиф
   относительно его собственного viewBox 9x15 (path у макета — 7x14,
   Chevron right внутри Frame 34747/34996). Размер — нативный viewBox,
   без апскейла. */
.carousel-nav__icon {
  width: 0.5625rem;
  height: 0.9375rem;
  fill: none;
  stroke: var(--color-text-dark);
  stroke-width: 1.5;
  flex-shrink: 0;
}

.cat-carousel__track {
  display: flex;
  gap: 1.3125rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.cat-carousel__track::-webkit-scrollbar {
  display: none;
}

.cat-carousel__card {
  position: relative;
  flex: 0 0 25rem;
  height: 26.1875rem;
  border-radius: 0.375rem;
  overflow: hidden;
  scroll-snap-align: start;
}

.cat-carousel__card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cat-carousel__card-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7rem;
  background: linear-gradient(to bottom, rgba(38, 35, 31, 0), #171613);
}

.cat-carousel__card-title {
  position: absolute;
  z-index: 1;
  right: var(--space-24);
  bottom: var(--space-24);
  left: var(--space-24);
  color: var(--color-text-white);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-lg);
  text-transform: uppercase;
}

/* Preserve the breathing room around the temporary packshot reference. */
.product-card__image {
  object-fit: contain;
  background: #fff;
}

.cat-carousel__progress {
  height: 0.1875rem;
  margin-top: 3.9375rem;
  border-radius: var(--radius-pill);
  background-color: #f2f2f2;
}

.cat-carousel__progress-bar {
  width: 25%;
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: #bf8a3c;
  transition: width 0.2s ease, margin-left 0.2s ease;
}

@media (max-width: 767px) {
  /* Размер заголовка и карточек задаётся ниже по файлу (20/30px и 180x220 —
     node 375:2035/2037), эти значения были устаревшей прикидкой. */
  .cat-carousel__head {
    flex-wrap: wrap;
  }
}

/* Карточка товара в сетке (product/thumb.twig) — переиспользуемый партиал,
   рендерится из PHP через $this->load->view('product/thumb', ...), потому
   что Twig в этом проекте не умеет {% include %} между файлами (ArrayLoader,
   см. system/library/template/twig.php). */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  /* Поле вынесено в переменную: от него отсчитываются абсолютно
     спозиционированные стикер и кнопка избранного, а на мобильном оно
     другое (12px по мобильному фрейму). */
  --product-card-pad: 0.625rem;
  padding: var(--product-card-pad) var(--product-card-pad) 1.25rem;
  border-radius: 0.375rem;
  background-color: rgba(255, 255, 255, 0.6);
  /* Grid-элемент по умолчанию min-width:auto — длинное название товара без
     пробелов (клиент сам добавляет товары, длина не под контролем) раздуло
     бы карточку шире её грид-трека на мобильных, как это уже случилось с
     .blog-card. */
  min-width: 0;
}

/* Стикер скидки (Figma node 114:821 внутри карточки 270:2208).
   Координаты в макете заданы от внутренней колонки карточки, а у нас
   .product-card — это внешний бокс с полем, поэтому к обеим осям это поле
   добавлено: left 0 → поле, top 13px → поле + 13px. Так плашка встаёт по
   левому краю картинки, а не свисает с края карточки, как раньше.
   Скругление в макете одинаковое по всем углам — было 0 4px 4px 0, из-за
   чего стикер читался как «лента», приклеенная к краю. */
.product-card__badge {
  position: absolute;
  left: var(--product-card-pad);
  top: calc(var(--product-card-pad) + 0.8125rem);
  z-index: 1;
  padding: 0.4375rem 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background-color: var(--color-badge-discount-bg);
  color: var(--color-text-white);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 0.75rem;
}

.product-card__image-link {
  display: block;
  width: 100%;
}

.product-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.25rem;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  margin-top: 1.25rem;
}

.product-card__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5625rem;
  width: 100%;
}

.product-card__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  text-align: center;
}

.product-card__category {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: #bf8a3c;
}

.product-card__name {
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  text-decoration: none;
}

.product-card__rating {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.product-card__stars {
  display: flex;
  gap: 2px;
}

.product-card__stars svg {
  width: 1.0625rem;
  height: 1rem;
}

.product-card__rating-value {
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.product-card__quantity {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.product-card__quantity--unavailable {
  font-weight: var(--font-weight-medium);
  color: var(--color-badge-discount-bg);
}

.product-card__price {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  text-align: center;
}

.product-card__price-old {
  margin-left: var(--space-8);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.product-card__add {
  width: 100%;
  padding: var(--space-18) var(--space-24);
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-text-dark);
  color: var(--color-text-white);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.product-card__add--disabled {
  background-color: var(--color-border-cream);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.product-card__wishlist {
  position: absolute;
  /* В макете кнопка прижата к верхнему правому углу внутренней колонки,
     то есть отстоит от края карточки ровно на её поле. */
  top: var(--product-card-pad);
  right: var(--product-card-pad);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: var(--color-icon-btn-bg);
  cursor: pointer;
}

.product-card__wishlist-icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  fill: none;
  stroke: var(--color-text-dark);
  flex-shrink: 0;
}

/* Кремовый, как в макете (node 270:2204 — bg #FFFAF3). Белым он тут стоял
   ошибочно: белая в этом ряду только секция категорий выше. */
.product-grid-section {
  background-color: var(--color-surface-cream);
}

.product-grid-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 6.6875rem var(--container-padding-inline) 1.625rem;
}

.product-grid-section__head {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  margin-bottom: 2.5625rem; /* + 6px собственного padding трека = 47px из макета */
}

.product-grid-section__title {
  margin: 0;
  font-size: 2.75rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.product-grid-section__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
  margin-left: auto;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: #26231f;
  text-decoration: none;
  white-space: nowrap;
}

.product-grid-section__link-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.product-grid-section__progress {
  height: 0.1875rem;
  /* 8px здесь + 24px нижнего padding у трека = те же 32px отбивки.
     Padding треку нужен, чтобы hover-подъём карточки и её тень не
     обрезались краем скролл-контейнера, см. .product-grid ниже. */
  margin-top: 0.5rem;
  border-radius: var(--radius-pill);
  background-color: #f2f2f2;
}

.product-grid-section__progress-bar {
  width: 25%;
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: #bf8a3c;
  transition: width 0.2s ease, margin-left 0.2s ease;
}

.product-grid {
  --product-grid-gap: 1.5625rem;
  display: flex;
  gap: var(--product-grid-gap);
  overflow-x: auto;
  /* Треку нужен собственный воздух по всем четырём сторонам: overflow-x:
     auto обрезает по бокам, а по спеке превращает и overflow-y в auto —
     значит режет и сверху/снизу. Без этого на hover срезается подъём
     карточки и её мягкая тень: у первой и последней — сбоку, у всех —
     снизу (плюс браузер показывал лишний вертикальный скролл).

     Боковой padding гасится равным отрицательным margin, поэтому
     содержимое остаётся на прежнем месте: внешние края трека уезжают в
     собственные отступы секции, а его content-box (от него считается
     ширина карточек) не меняется. Отбивка снизу до полосы прогресса
     уменьшена на те же 24px.

     Величина бокового выпуска — в одной переменной: она обязана совпадать
     с горизонтальным полем секции, иначе трек вылезет за её край (на
     мобильном поле 15px, см. media ниже). */
  --product-grid-bleed: var(--container-padding-inline);
  padding: 0.375rem var(--product-grid-bleed) 1.5rem;
  margin-inline: calc(-1 * var(--product-grid-bleed));
  /* Без этого scroll-snap выравнивает карточку по border-боксу и «съедает»
     боковой padding: на мобильном лента приезжала прокрученной на его
     ширину, и первая карточка вставала вплотную к краю экрана. */
  scroll-padding-inline: var(--product-grid-bleed);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

/* Статичная сетка ничего не обрезает — ей эти компенсации не нужны. */
.product-grid--static {
  padding: 0;
  margin-inline: 0;
}

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

/* Ровно 4 карточки в видимой части — как в статичных сетках без сайдбара.
   Ширина была жёсткой (324px), и в контейнер 1328px четыре карточки не
   влезали: 4 * 324 + 3 * 25 = 1371px, у четвёртой обрезался край. Товаров
   в модуле как раз четыре, то есть листать было уже нечего — обрез читался
   как поломка, а не как приглашение прокрутить. */
.product-grid > .product-card {
  flex: 0 0 calc((100% - 3 * var(--product-grid-gap)) / 4);
  scroll-snap-align: start;
}

@media (max-width: 1199px) {
  .product-grid > .product-card {
    flex-basis: calc((100% - 2 * var(--product-grid-gap)) / 3);
  }
}

/* На планшете и телефоне ширина снова фиксированная: тут следующая карточка
   должна выглядывать из-за края — это единственная подсказка, что ленту
   можно листать. */
@media (max-width: 991px) {
  .product-grid > .product-card {
    flex-basis: 16.25rem;
  }
}

@media (max-width: 575px) {
  .product-grid-section__title {
    font-size: 1.75rem;
  }

  .product-grid-section__head {
    flex-wrap: wrap;
  }

  .product-grid > .product-card {
    flex-basis: 78vw;
  }
}

.blog-section {
  background-color: var(--color-surface-cream);
}

.blog-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 5.0625rem var(--container-padding-inline) 2rem;
}

.blog-section__head {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  margin-bottom: 3rem;
}

.blog-section__title {
  margin: 0;
  font-size: 2.75rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.blog-section__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
  margin-left: auto;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: #26231f;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 0.1875rem solid transparent;
  transition: border-color 0.2s ease;
}

.blog-section__link:hover {
  border-color: #a9772d;
}

.blog-section__link-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 19px по макету (node 270:2170: карточки x=272/621/970/1319, ширина 330) —
     было 39px, из-за чего 4 карточки с зазорами не помещались в контейнер. */
  gap: 1.1875rem;
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8, 0.5rem);
  text-decoration: none;
  color: inherit;
  /* Grid-элементы по умолчанию min-width:auto (= max-content содержимого),
     поэтому длинный неразрывный заголовок/текст раздувал карточку шире её
     же грид-трека на мобильных — 165px трек, а сама карточка выходила 260px. */
  min-width: 0;
}

.blog-card__image-wrap {
  height: 15.5625rem;
  border-radius: 0.375rem;
  overflow: hidden;
}

.blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.blog-card__date {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.625rem;
  color: #616161;
}

.blog-card__title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: var(--font-weight-bold);
  color: #2b2a29;
}

.blog-card__excerpt {
  margin: 0;
  font-size: 1rem;
  line-height: 1.625rem;
  color: #616161;
  /* Ровно три строки, дальше — многоточие. Контроллер режет текст по числу
     символов (configblog_article_description_length), а это даёт разную
     высоту в зависимости от длины слов: в сетке карточки разъезжались.
     -webkit-line-clamp работает во всех актуальных браузерах, безпрефиксный
     line-clamp добавлен на будущее. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

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

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

  .blog-section__title {
    font-size: 1.75rem;
  }

  .blog-section__head {
    flex-wrap: wrap;
  }
}

/* Keep two blog cards per row on every viewport below 768px. */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .blog-card__image-wrap {
    height: auto;
    aspect-ratio: 1 / 0.72;
  }

  .blog-card__title {
    font-size: 0.9375rem;
    line-height: 1.3125rem;
  }

  .blog-card__excerpt {
    font-size: 0.8125rem;
    line-height: 1.1875rem;
  }
}

/* Homepage product rail: unlike catalog/search grids, Figma keeps this as a
   horizontal carousel on mobile with the next card peeking into view.
   Scoped to #common-home — .product-grid is reused unscoped by the catalog/
   category listing (product/catalog.twig), which must stay a 2-col grid on
   mobile (see the shared rule below); without the scope this rule fired for
   both and turned the catalog listing into a carousel. */
@media (max-width: 768px) {
  #common-home .product-grid {
    display: flex;
    grid-template-columns: none;
    /* 16px по макету (node 375:1852, itemSpacing) — было 12px. */
    gap: 1rem;
    overflow-x: auto;
    padding-right: var(--container-padding-inline);
  }

  #common-home .product-grid > .product-card {
    flex: 0 0 13.75rem;
    width: 13.75rem;
    min-width: 13.75rem;
    max-width: 13.75rem;
  }
}

/* Homepage blog rail on mobile — was built as a two-column wrapped grid on
   the assumption Figma had no mobile source for it. It does (node 375:2061):
   a horizontal scroll rail of 4 fixed 260px cards, itemSpacing 16px — the
   same pattern as the product rail below, not a two-up grid. Corrected to
   match: values below are read off that node, not guessed. */
@media (max-width: 768px) {
  #common-home .blog-grid {
    display: flex;
    grid-template-columns: none;
    gap: 1rem;
    overflow-x: auto;
    padding-right: var(--container-padding-inline);
  }

  #common-home .blog-grid > .blog-card {
    flex: 0 0 16.25rem;
    width: 16.25rem;
    min-width: 16.25rem;
    max-width: 16.25rem;
    gap: 0.75rem;
  }

  #common-home .blog-grid .blog-card__image-wrap {
    height: 10rem;
    aspect-ratio: auto;
  }

  #common-home .blog-grid .blog-card__image {
    height: 100%;
  }

  #common-home .blog-grid .blog-card__body {
    gap: 0.5rem;
  }

  #common-home .blog-grid .blog-card__title {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  #common-home .blog-grid .blog-card__excerpt {
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
}

.insta-section {
  background-color: var(--color-surface-cream);
}

.insta-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 3.3125rem var(--container-padding-inline);
}

.insta-section__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2.875rem;
  font-size: 2.75rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

/* Иконка и слово «Instagramie» — вложенная группа с собственным зазором 6px
   (node 270:2235 "Frame 35026", itemSpacing 6); внешний gap 16px остаётся
   только между «Jesteśmy na» и этой группой (node 270:2233, itemSpacing 16). */
.insta-section__title-group {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.insta-section__title-icon {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
}

.insta-section__title-icon img {
  width: 100%;
  height: 100%;
}

.insta-section__title-accent {
  background: var(--gradient-gold-text);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

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

.insta-grid__item {
  aspect-ratio: 1 / 1;
  border-radius: 0.375rem;
  overflow: hidden;
}

.insta-grid__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

@media (max-width: 575px) {
  .insta-section__title {
    font-size: 1.75rem;
    gap: 0.625rem;
  }

  .insta-section__title-icon {
    width: 2rem;
    height: 2rem;
  }

  .insta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

/* Мобильная шапка (< 768px, по мобильному фрейму из Figma "Home page_mobile"):
   бургер вместо инлайн-меню/языка/иконок, всё это уезжает в полноэкранную
   выезжающую панель. Корзина остаётся видимой в верхней строке. */

@media (max-width: 991px) {
  .header__burger {
    display: flex;
  }

  .header__drawer {
    display: none;
    margin-left: 0;
  }

  .header__drawer.is-open {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* top is set inline by common.js to the header bar's actual rendered
       height (promo bar can wrap to multiple lines) so the drawer starts
       right below it instead of covering it */
    /* Выше баннера cookie (z-index 100), иначе баннер перекрывает меню */
    z-index: 110;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-24);
    margin: 0;
    padding: var(--space-24);
    background-color: var(--color-surface-cream);
    overflow-y: auto;
  }

  .route-common-home .header__drawer.is-open {
    background-color: var(--color-surface-dark);
  }

  .header__lang-actions {
    display: contents;
  }

  .header__lang-wrap {
    display: block;
  }

  .header__menu-nav {
    flex-shrink: initial;
  }

  .header__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .header__menu-item {
    border-bottom: var(--border-width-hairline) solid rgba(43, 42, 41, 0.1);
  }

  .route-common-home .header__menu-item {
    border-bottom-color: var(--color-divider-on-dark);
  }

  .header__menu-link {
    width: 100%;
    justify-content: space-between;
    padding-block: var(--space-12);
  }

  /* Katalog: ссылка занимает строку, стрелка-раскрывашка прижата вправо,
     подменю переносится на свою строку. */
  .header__menu-item--has-children {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .header__menu-item--has-children .header__menu-link {
    width: auto;
    flex: 1;
  }

  .header__menu-toggle {
    padding-block: var(--space-12);
  }

  .header__menu-item--has-children .header__submenu {
    flex-basis: 100%;
  }

  .header__submenu {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    padding: 0 0 var(--space-12);
    background: none;
    box-shadow: none;
    border-radius: 0;
    flex-direction: column;
  }

  .header__menu-item--has-children.is-open .header__submenu {
    display: flex;
  }

  .header__lang {
    padding-block: var(--space-12);
    border-bottom: var(--border-width-hairline) solid rgba(43, 42, 41, 0.1);
  }

  .route-common-home .header__lang {
    border-bottom-color: var(--color-divider-on-dark);
  }

  .header__actions {
    display: none;
  }

  /* Матчим Figma 1:1: в закрытом состоянии моб. шапки — только лого/корзина/
     гамбургер; иконки избранного/аккаунта появляются в самой строке шапки
     (не в выезжающей панели) только когда меню открыто. */
  .header__container:has(#header-drawer.is-open) .header__mobile-actions {
    display: flex;
  }
}

/* ------------------------------------------------------------------ *
   Мобильная шапка и меню — Figma 375:1765 (главная) и 375:2274 (меню).
   Замеры фрейма 375px: полоса шапки 51px, логотип 145x38 при отступе 15px,
   справа корзина 24px с бейджем и гамбургер 24px, всё в одну строку.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .header__container {
    /* Без nowrap утилиты переносились на вторую строку и шапка вырастала
       до 131px вместо 51px по макету. */
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--space-12);
    min-height: 3.1875rem;
    padding-inline: 0.9375rem;
  }

  .header__logo-image {
    width: 9.0625rem;
    height: 2.375rem;
  }

  .header__utils {
    gap: 1rem;
  }

  /* В макете у корзины на мобильном только иконка с бейджем, без суммы */
  .header__cart-price {
    display: none;
  }

  .header__cart-icon-wrap {
    width: 1.5rem;
    height: 1.5rem;
  }

  .header__cart-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .header__cart-badge {
    top: -0.25rem;
    right: -0.25rem;
    width: 1rem;
    height: 1rem;
    font-size: 0.625rem;
  }

  .header__burger {
    width: 2rem;
    height: 2rem;
    gap: 0.3125rem;
    padding: 0.25rem;
  }

  .header__burger-line {
    width: 1.5rem;
    height: 2px;
    border-radius: 0.25rem;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  /* Открытое меню: гамбургер превращается в крестик */
  .header__burger[aria-expanded="true"] .header__burger-line:nth-child(1) {
    transform: translateY(0.4375rem) rotate(45deg);
  }

  .header__burger[aria-expanded="true"] .header__burger-line:nth-child(2) {
    opacity: 0;
  }

  .header__burger[aria-expanded="true"] .header__burger-line:nth-child(3) {
    transform: translateY(-0.4375rem) rotate(-45deg);
  }

  /* Пока меню открыто, шапка и панель — одна тёмная плоскость, как в макете,
     независимо от того, светлая шапка страницы или тёмная.
     Красим именно .header__nav: на главной он position:absolute и лежит
     поверх hero, поэтому фон родительского .header ничего бы не закрыл и
     сквозь полупрозрачную полосу просвечивала бы картинка баннера.
     Цвет — результат наложения rgba(255,255,255,0.04) на #15110a из макета. */
  .header__nav:has(#header-drawer.is-open) {
    background-color: #1e1b14;
  }

  /* .header с z-index: 95 создаёт контекст наложения, поэтому z-index панели
     считается внутри него и баннер cookie (100) перекрывал открытое меню.
     Поднимаем весь заголовок, пока меню раскрыто. */
  .header:has(#header-drawer.is-open) {
    z-index: 120;
  }

  .header__nav:has(#header-drawer.is-open) .header__logo-image--dark {
    display: none;
  }

  .header__nav:has(#header-drawer.is-open) .header__logo-image--light {
    display: block;
  }

  .header__nav:has(#header-drawer.is-open) .header__burger-line,
  .header__nav:has(#header-drawer.is-open) .header__cart-icon,
  .header__nav:has(#header-drawer.is-open) .header__action-icon {
    stroke: var(--color-text-white);
  }

  .header__nav:has(#header-drawer.is-open) .header__burger-line {
    background-color: var(--color-text-white);
  }

  .header__drawer.is-open,
  .route-common-home .header__drawer.is-open {
    gap: 0;
    padding: 1.4375rem 0.9375rem;
    background-color: #15110a;
  }

  /* Иконки избранного/аккаунта в строке шапки — 40x40 без подложки */
  .header__mobile-actions {
    gap: 0;
  }

  .header__mobile-actions .header__action {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.625rem;
    background-color: transparent;
  }

  .header__mobile-actions .header__action-icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  /* Пункты меню: 20px uppercase, шаг 75px, разделитель снизу */
  .header__menu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .route-common-home .header__menu-item {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .header__menu-link,
  .route-common-home .header__menu-link {
    padding-block: 1.375rem 1.3125rem;
    font-size: 1.25rem;
    line-height: 1.875rem;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    color: var(--color-text-white);
  }

  .header__menu-toggle {
    padding-block: 1.375rem 1.3125rem;
  }

  .header__menu-icon,
  .route-common-home .header__menu-icon {
    stroke: var(--color-text-white);
  }

  .header__submenu-link,
  .header__submenu-group-title {
    color: rgba(255, 255, 255, 0.85);
  }

  /* Переключатель языка: PL | En */
  .header__lang,
  .route-common-home .header__lang {
    padding-block: 1rem 0;
    border-bottom: 0;
    gap: 0.75rem;
  }

  .header__lang-item,
  .route-common-home .header__lang-item {
    font-size: 0.9375rem;
    line-height: 1.40625rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
  }

  .header__lang-item--active,
  .route-common-home .header__lang-item--active {
    color: var(--color-text-white);
  }

  .header__lang-divider,
  .route-common-home .header__lang-divider {
    width: 1px;
    height: 1rem;
    background-color: rgba(255, 255, 255, 0.3);
  }
}

.footer {
  background-color: var(--color-surface-footer);
  color: var(--color-text-white);
  padding: 3.5rem 0 2rem;
}

.footer__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-inline);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem 2.5rem;
  justify-content: space-between;
}

.footer__col {
  min-width: 10rem;
}

/* justify-content:space-between spaces columns by their own (min-)content
   width, which doesn't match the Figma footer (node 270:2135): its 4
   columns sit at fixed x=272/615/879/1299 — not evenly distributed, e.g.
   "O firmie" 's own text is much narrower than the gap Figma gives it.
   Pin the desktop layout to those exact track widths; mobile keeps the
   existing wrapping flex behaviour untouched. */
@media (min-width: 992px) {
  .footer__top {
    display: grid;
    /* fr, не rem: 4 колонки суммарно шире (86rem), чем контейнер на
       ноутбучных ширинах между 992px и ~1450px (контейнер у'же 89rem там),
       из-за чего футер вылезал за экран горизонтальным скроллом. fr держит
       ТЕ ЖЕ пропорции, что и Figma-ширины, но масштабирует их под реальную
       ширину контейнера вместо жёсткой суммы. */
    grid-template-columns: 21.4375fr 16.5fr 26.25fr 21.8125fr;
    gap: 0;
  }
}

.footer__col--newsletter {
  max-width: 21.8125rem;
}

.footer__heading {
  margin: 0 0 var(--space-24);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-text-white);
}

.footer__contact-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-16, 1rem);
}

.footer__contact-label {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--color-text-white);
  opacity: var(--opacity-muted);
}

.footer__contact-value {
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.875rem;
  color: var(--color-text-white);
  text-decoration: none;
}

.footer__contact-value--phone {
  font-size: 1.375rem;
  font-weight: var(--font-weight-bold);
}

.footer__contact-value--email {
  font-size: 1.125rem;
}

.footer__contact-value:hover {
  color: var(--color-brand-gold);
}

/* Иконка Instagram: по макету — бокс 30x30 с глифом 24x24 внутри (node
   270:2157, вложение inset 10%) и приглушённый серый #898885, а не золотая
   заливка, которая тут стояла раньше. */
.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  margin-top: var(--space-8, 0.5rem);
  color: #898885;
}

.footer__social-icon {
  width: 1.5rem;
  height: 1.5rem;
}

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

.footer__list a {
  display: block;
  font-size: 0.9375rem;
  line-height: 2.25rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.footer__list a:hover {
  color: var(--color-brand-gold);
}

/* Строка подписки: светлый инпут-пилюля на всю ширину, золотая кнопка-пилюля
   лежит поверх правого края (Figma 308:2387). */

.footer-newsletter__row {
  position: relative;
}

.footer-newsletter__input {
  width: 100%;
  height: 3.1875rem;
  padding: 0.75rem 7.1875rem 0.75rem 1rem;
  border: var(--border-width-hairline) solid #e4e2df;
  border-radius: var(--radius-pill);
  background-color: #f5f4f2;
  color: var(--color-text-dark);
  font-size: 0.9375rem;
  font-family: var(--font-family-base);
}

.footer-newsletter__input::placeholder {
  color: #94918e;
}

.footer-newsletter__input:focus {
  outline: none;
  border-color: var(--color-brand-gold);
}

.footer-newsletter__submit {
  position: absolute;
  top: 0;
  right: 0;
  height: 3.1875rem;
  padding: 0 1.5rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--gradient-gold-cta);
  color: var(--color-text-white);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  font-size: 1rem;
  cursor: pointer;
  white-space: nowrap;
}

.footer-newsletter__consent {
  margin: 0.9375rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--color-text-white);
}

.footer-newsletter__consent a {
  color: var(--color-brand-gold);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.footer-newsletter__message {
  margin: var(--space-8, 0.5rem) 0 0;
  font-size: 0.8125rem;
  min-height: 1.125rem;
}

.footer-newsletter__message--success {
  color: #7fd88f;
}

.footer-newsletter__message--error {
  color: #f28b82;
}

.footer__divider {
  margin: 2.5rem 0 1.5rem;
  border: none;
  border-top: var(--border-width-hairline, 1px) solid var(--color-divider-white);
}

/* Раскладка нижней строки по макету (node 270:2135): копирайт стоит сразу
   за логотипом — 88px от его правого края, — а не растянут по центру, как
   получалось при justify-content: space-between. Правовые ссылки прижаты
   вправо через margin-left: auto. */
.footer__bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer__logo img {
  height: 3.5rem;
  width: auto;
  display: block;
}

.footer__copyright {
  /* 24px gap контейнера + 64px = 88px до логотипа, как в макете. */
  margin: 0 0 0 4rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer__legal {
  display: flex;
  gap: 2.5rem;
  margin-left: auto;
}

.footer__legal a {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.footer__legal a:hover {
  color: var(--color-brand-gold);
}

@media (max-width: 991px) {
  .footer__top {
    gap: 2rem;
  }

  .footer__col {
    min-width: 45%;
  }

  .footer__col--newsletter {
    max-width: 100%;
    flex-basis: 100%;
  }
}

@media (max-width: 575px) {
  .footer__col {
    min-width: 100%;
  }

  /* В колонку отступ до логотипа и прижатие вправо теряют смысл. */
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer__copyright {
    margin-left: 0;
  }

  .footer__legal {
    margin-left: 0;
  }
}

/* Страница "O nas" (information_id=4, custom-layout по Figma node 317:1751,
   см. catalog/controller/information/information.php + template/information/about.twig) */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-5, 0.3125rem);
  margin-bottom: var(--space-24);
}

.breadcrumb__home {
  display: flex;
  align-items: center;
}

.breadcrumb__home svg {
  width: 0.875rem;
  height: 0.8125rem;
}

.breadcrumb__sep,
.breadcrumb__current {
  font-size: 0.8125rem;
  color: var(--color-brand-gold);
}

.about-hero {
  position: relative;
  min-height: 50.5rem;
  overflow: hidden;
  background-color: #575757;
  display: flex;
  align-items: stretch;
}

.about-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 10, 0, 0.85) 0%, rgba(17, 10, 0, 0.65) 45%, rgba(16, 10, 0, 0.4) 58%, rgba(15, 10, 0, 0.05) 100%),
    linear-gradient(0deg, rgba(15, 10, 0, 0.55) 0%, rgba(15, 10, 0, 0) 35%);
}

.about-hero__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: 7.1875rem var(--container-padding-inline) 4rem;
}

.about-hero__title {
  /* 5.25rem + .breadcrumb margin-bottom (1.5rem) = 108px breadcrumb→title
     gap per Figma node 317:2078 (y=238) minus breadcrumb bottom (y=130) */
  margin: 5.25rem 0 0;
  max-width: 79.625rem;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: 3.5rem;
  line-height: 4.125rem;
  text-transform: uppercase;
  color: var(--color-text-white);
}

.about-hero__title-accent {
  background: var(--gradient-gold-text);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.about-hero__divider {
  width: 22.6875rem;
  max-width: 100%;
  height: 2px;
  margin-top: var(--space-24);
  background: var(--gradient-divider-gold);
}

.about-hero__subtitle {
  max-width: 56.6875rem;
  margin: var(--space-24) 0 0;
  font-size: 1.25rem;
  line-height: 1.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-white);
}

.about-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: auto;
  padding-top: 4rem;
}

.about-hero__stat {
  flex: 1 1 12.5rem;
  text-align: center;
}

.about-hero__stat-number {
  margin: 0;
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
}

.about-hero__stat-label {
  margin: var(--space-8) 0 0;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-white);
}

.about-mission {
  background-color: var(--color-surface-cream);
  padding: 6rem 0;
}

.about-mission__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-inline: var(--container-padding-inline);
}

.about-mission__title {
  margin: 0 0 var(--space-24);
  font-size: 3rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.about-mission__text {
  margin: 0 0 var(--space-24);
  font-size: 1rem;
  line-height: 1.75rem;
  color: var(--color-text-muted);
}

.about-mission__card {
  margin-top: 2rem;
  padding: 2.0625rem;
  border-radius: 0.625rem;
  background-color: rgba(169, 119, 45, 0.05);
  border: 1px solid rgba(180, 135, 70, 0.2);
}

.about-mission__card-title {
  margin: 0 0 var(--space-16, 1rem);
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

.about-mission__card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.about-mission__card-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.about-mission__card-item svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.about-mission__image {
  display: block;
  width: 100%;
  height: 41.6875rem;
  border-radius: 0.375rem;
  object-fit: cover;
}

.about-values {
  background-color: var(--color-surface-cream);
  padding-bottom: 6rem;
}

.about-values__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-inline: var(--container-padding-inline);
}

.about-values__header {
  max-width: 38.8125rem;
  margin: 0 auto 4rem;
  text-align: center;
}

.about-values__title {
  margin: 0 0 var(--space-16, 1rem);
  font-size: 3rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.about-values__subtitle {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-text-muted);
}

.about-values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.about-values__card {
  padding: 2rem;
  border-radius: 0.625rem;
  background-color: #ffffff;
  border: 1px solid rgba(180, 135, 70, 0.2);
}

.about-values__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-circle);
  background-color: rgba(169, 119, 45, 0.1);
}

.about-values__icon svg {
  width: 2rem;
  height: 2rem;
}

.about-values__card-title {
  margin: 0 0 var(--space-12);
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

.about-values__card-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-text-muted);
}

@media (max-width: 991px) {
  .about-hero__title {
    font-size: 2.5rem;
    line-height: 3rem;
  }

  .about-hero__stats {
    gap: 1.5rem;
  }

  .about-hero__stat {
    flex-basis: 45%;
  }

  .about-mission__container {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-mission__image {
    height: 25rem;
    order: -1;
  }

  .about-values__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .about-hero {
    min-height: 0;
  }

  .about-hero__container {
    padding-top: 5.625rem;
    padding-bottom: 2.5rem;
  }

  .about-hero__title {
    font-size: 2rem;
    line-height: 2.375rem;
  }

  .about-hero__subtitle {
    font-size: 1rem;
    line-height: 1.625rem;
  }

  .about-hero__stat-number {
    font-size: 2rem;
    line-height: 2.375rem;
  }

  .about-mission,
  .about-values {
    padding: 3.5rem 0;
  }

  .about-mission__title,
  .about-values__title {
    font-size: 2rem;
  }

  .about-values__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Страница "Katalog" — все товары без привязки к категории
   (product/catalog.php + template/product/catalog.twig, Figma node 128:605).
   Существующие product/category&path=N (отдельные категории) не трогаем. */

/* Фон кремовый, как в макете (замер пипеткой по рендеру Katalog: #FFFAF3 =
   --color-surface-cream). На белом полупрозрачная подложка карточки товара
   (--color-surface-card) не читалась вовсе. */
.catalog-page {
  background-color: var(--color-surface-cream);
  padding-bottom: 4rem;
}

.catalog-page__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  /* header→breadcrumb gap 21px per Figma (catalog 128:605 / blog 306:1462:
     breadcrumb y=115, header height 94) — was 2rem (32px). */
  padding: 1.3125rem var(--container-padding-inline) 0;
}

.catalog-page__title {
  /* breadcrumb→title gap 46px per Figma (catalog node 128:605, blog node
     306:1462: both breadcrumb bottom=130, title y=176). Margins collapse in
     normal flow, so this alone (not summed with .breadcrumb's 24px) sets it. */
  margin: 2.875rem 0 2rem;
  font-size: 2.75rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.catalog-page__layout {
  display: grid;
  grid-template-columns: 20.5rem 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* Border + fill match .ocf-container (ocfilter-overrides.css, node 135:1339)
   so the "Categories" card reads as the same component as "Filter by" right
   below it — was a flat grey fill with no border, which stood out as a
   different, unfinished-looking card, especially collapsed on mobile. */
.catalog-sidebar__card {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 1.5rem;
  border: 1px solid #e4ddd2;
  border-radius: 0.375rem;
  background-color: #fffaf2;
}

.catalog-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.catalog-sidebar__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

/* Collapse toggle (node 130:1102's rotated "Chevron right" instance) — same
   border-corner chevron shape as the OCFilter card's own header toggle in
   ocfilter-overrides.css, so both sidebar cards read as one interaction. */
.catalog-sidebar__toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.catalog-sidebar__toggle::after {
  width: 0.5625rem;
  height: 0.5625rem;
  border-right: 2px solid var(--color-heading-dark);
  border-bottom: 2px solid var(--color-heading-dark);
  content: '';
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.catalog-sidebar__toggle[aria-expanded="false"]::after {
  transform: rotate(225deg);
}

.catalog-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.catalog-category-list[hidden] {
  display: none;
}

.catalog-category-list a {
  display: block;
  padding-block: 0.5rem;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.catalog-category-list a:hover {
  color: var(--color-brand-gold);
}

/* "Tagi" (node 138:1649) — sits under the OCFilter card with no card
   background of its own, unlike "Kategorie" above it. */
.catalog-sidebar__tags {
  display: flex;
  flex-direction: column;
  gap: 1.4375rem;
  margin-top: 1.125rem;
}

.catalog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.catalog-tags__item {
  padding: 0.75rem;
  border: 1px solid var(--color-brand-gold-light);
  border-radius: 0.25rem;
  color: var(--color-brand-gold-light);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.catalog-tags__item:hover {
  background-color: var(--color-brand-gold-light);
  color: var(--color-text-white);
}

.catalog-category-list a.is-active {
  color: var(--color-brand-gold);
  font-weight: var(--font-weight-bold);
}

/* Описание категории из админки (на product/catalog его нет) */

.catalog-page__description {
  max-width: 45rem;
  margin: -1rem 0 2rem;
  font-size: 1rem;
  line-height: 1.625rem;
  color: var(--color-text-muted);
}

.catalog-page__description p {
  margin: 0 0 0.75rem;
}

.catalog-page__description p:last-child {
  margin-bottom: 0;
}

.catalog-main__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e4ddd2;
}

.catalog-main__results {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* .catalog-main__control — тот же контрол, но не только для сортировки:
   на поиске рядом с ней стоит ещё выбор количества товаров на странице. */

.catalog-main__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12) var(--space-24);
}

.catalog-main__sort,
.catalog-main__control {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.catalog-main__sort select,
.catalog-main__control select {
  padding: 0.625rem 0.875rem;
  border: 1px solid #e4ddd2;
  border-radius: 0.375rem;
  background-color: #ffffff;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--color-text-dark);
}

.catalog-main__empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--color-text-muted);
}

/* Пустое состояние с кнопкой возврата — сейчас только на «Promocje»
   (product/special.twig): в отличие от каталога, у него есть button_continue. */

.catalog-main__empty-text {
  margin: 0;
}

.catalog-main__continue {
  display: inline-block;
  margin-top: var(--space-24);
  padding: 1rem 3rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-text-dark);
  color: var(--color-text-white);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

/* Статичная сетка карточек (в отличие от .product-grid — карусели на главной).
   Количество колонок зависит от того, делит ли сетка строку с сайдбаром:
   на всю ширину контента — 4 в ряд, рядом с сайдбаром категорий — 3.
   .product-grid--static  → product/search.twig, product/special.twig,
                            блок «похожие товары» в product/product.twig
   + --with-sidebar       → product/catalog.twig (каталог и категории) */

.product-grid--static {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow-x: visible;
}

.product-grid--with-sidebar {
  grid-template-columns: repeat(3, 1fr);
}

.product-grid--static > .product-card {
  flex-basis: auto;
}

.catalog-pagination,
.account-pagination {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}

.catalog-pagination .pagination,
.account-pagination .pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.catalog-pagination .pagination li a,
.catalog-pagination .pagination li span,
.account-pagination .pagination li a,
.account-pagination .pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid #e4ddd2;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  color: var(--color-text-dark);
  text-decoration: none;
}

.catalog-pagination .pagination li a:hover,
.account-pagination .pagination li a:hover {
  border-color: var(--color-brand-gold);
}

.catalog-pagination .pagination li.active span,
.account-pagination .pagination li.active span {
  border-color: #bf8a3c;
  background-color: #bf8a3c;
  color: var(--color-text-white);
}

/* Ниже --bp-desktop (1200px) карточка в четырёх колонках становится уже
   ~270px, а в трёх рядом с сайдбаром — ~250px, поэтому обе сетки теряют
   по колонке. */
@media (max-width: 1199px) {
  .product-grid--static {
    grid-template-columns: repeat(3, 1fr);
  }

  .product-grid--with-sidebar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .catalog-page__layout {
    /* minmax(0, 1fr), не голый 1fr: у 1fr неявный минимум — max-content
       содержимого сайдбара (длинные названия категорий/фильтров), трек
       раздувался под него и тянул весь layout шире вьюпорта на мобильных. */
    grid-template-columns: minmax(0, 1fr);
  }

  /* Сайдбар встаёт над сеткой, ширина у обеих сеток снова одинаковая. */
  .product-grid--static,
  .product-grid--with-sidebar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .catalog-page__title {
    font-size: 1.75rem;
  }

  .catalog-main__toolbar {
    flex-wrap: wrap;
  }

  .product-grid--static,
  .product-grid--with-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Страница результатов поиска (product/search.php + template/product/search.twig).
   Отдельного фрейма в Figma нет, поэтому оболочка (крошки, заголовок, тулбар,
   сетка карточек, пагинация) переиспользуется со страницы каталога — здесь
   только специфичная для поиска форма запроса и подзаголовок выдачи. */

/* Кремовый фон теперь базовый для .catalog-page, здесь остаётся только
   увеличенный нижний отступ у листингов без сайдбара. */

.catalog-page--search,
.catalog-page--special {
  padding-bottom: 5rem;
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-18);
  margin-bottom: var(--space-32);
  padding: var(--space-32);
  border: 1px solid var(--color-border-cream);
  border-radius: 0.5rem;
  background-color: var(--color-white-70);
}

.search-form__row {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: var(--space-24);
  align-items: end;
}

.search-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.search-form__label {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.325px;
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.search-form__input,
.search-form__select {
  width: 100%;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--color-border-cream);
  border-radius: 0.375rem;
  background-color: var(--color-input-bg);
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text-dark);
}

.search-form__input::placeholder {
  color: var(--color-text-placeholder);
}

.search-form__submit {
  padding: 0.9375rem 2.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-text-dark);
  color: var(--color-text-white);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.search-form__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
}

.search-form__check {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

/* Чекбокс с отключённой подкатегорией (категория не выбрана) не должен
   выглядеть кликабельным. */
.search-form__check:has(input:disabled) {
  opacity: var(--opacity-muted);
  cursor: default;
}

.search-form__check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-brand-gold);
  cursor: inherit;
}

.search-page__subtitle {
  margin: 0 0 var(--space-24);
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

@media (max-width: 991px) {
  .search-form__row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .search-form__submit {
    justify-self: start;
  }
}

@media (max-width: 575px) {
  .search-form {
    padding: var(--space-24);
  }

  .search-form__options {
    flex-direction: column;
    gap: var(--space-12);
  }

  .search-form__submit {
    width: 100%;
  }
}

/* Карточка товара (product/product.php + template/product/product.twig,
   Figma node 150:1078). Часть макета отложена по договорённости с
   пользователем: карусель миниатюр (используем одно реальное фото),
   блок "Kluczowe Korzyści", переключатель вариантов 60/90/120 kaps
   (нет реальных SKU), разбивка описания на вкладки Skład/Sposób użycia/
   Dodatkowe informacje (описание уже содержит эти секции внутри одного
   HTML-блока). */

.product-page {
  background-color: var(--color-surface-cream);
  padding-bottom: 4rem;
}

.product-page__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  /* header→breadcrumb gap 21px per Figma (node 150:1078: breadcrumb
     y=115, header height 94) — was 2rem (32px). */
  padding: 1.3125rem var(--container-padding-inline) 0;
}

.breadcrumb__link {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb__link:hover {
  color: var(--color-brand-gold);
}

.breadcrumb__current--accent {
  color: var(--color-brand-gold);
}

.product-page__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 20px per Figma node 150:1078: two 678px columns (gallery ends x=950,
     info starts x=970) — was 4rem (64px), which squeezed both columns to
     656px and pushed the whole info column 22px right of the design. */
  gap: 1.25rem;
  margin-bottom: 4rem;
}

.product-page__main-image {
  position: relative;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: var(--color-surface-cream-alt);
  aspect-ratio: 562 / 600;
}

.product-page__main-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-page__main-image img[data-gallery-main] {
  cursor: zoom-in;
}

/* Полноэкранный просмотр фото — вне макета, см. комментарий в product.twig. */
.product-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: rgba(20, 19, 18, 0.92);
}

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

.product-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-out;
}

.product-lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
}

.product-lightbox__close svg {
  width: 1.5rem;
  height: 1.5rem;
}

.product-lightbox__close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.product-lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
}

.product-lightbox__nav svg {
  width: 1.5rem;
  height: 1.5rem;
}

.product-lightbox__nav:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.product-lightbox__nav--prev {
  left: 1.5rem;
}

.product-lightbox__nav--next {
  right: 1.5rem;
}

@media (max-width: 575px) {
  .product-lightbox__nav {
    width: 2.5rem;
    height: 2.5rem;
  }

  .product-lightbox__nav--prev {
    left: 0.5rem;
  }

  .product-lightbox__nav--next {
    right: 0.5rem;
  }
}

/* Галерея-карусель по макету (node 150:1078): лента миниатюр 96x96 слева
   (картинка внутри 81x81, шаг 106px) и большой кадр со стрелками. В макете
   миниатюр четыре; у нас их может быть сколько угодно, поэтому лента
   прокручивается, а не растёт по высоте. */

.product-gallery {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* Единственный кадр — ленты нет, большой кадр занимает всю ширину. */
.product-gallery:not(:has(.product-gallery__thumbs)) {
  grid-template-columns: minmax(0, 1fr);
}

.product-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-height: 37.5rem;
  overflow-y: auto;
  scrollbar-width: none;
}

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

.product-gallery__thumb {
  flex: 0 0 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  padding: 0;
  border: 1px solid var(--color-border-cream);
  border-radius: 0.375rem;
  background-color: var(--color-surface-cream-alt);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.product-gallery__thumb img {
  width: 5.0625rem;
  height: 5.0625rem;
  object-fit: cover;
  border-radius: 0.25rem;
}

.product-gallery__thumb:hover {
  border-color: var(--color-brand-gold-light);
}

.product-gallery__thumb.is-active {
  border-color: var(--color-brand-gold);
}

/* Стрелки — тот же круг с мягкой тенью, что у карусельных стрелок на
   главной, но по центру кадра: так привычнее, чем смещение из макета. */
.product-gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: var(--color-text-white);
  box-shadow: 0 2px 0.1875rem var(--color-shadow-soft);
  color: var(--color-text-dark);
  cursor: pointer;
  transform: translateY(-50%);
  transition: box-shadow var(--transition-smooth);
}

.product-gallery__nav svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.product-gallery__nav--prev {
  left: 0.75rem;
}

.product-gallery__nav--next {
  right: 0.75rem;
}

.product-gallery__nav:hover {
  box-shadow: 0 0.375rem 1rem var(--color-shadow-soft);
}

@media (max-width: 767px) {
  /* На узком экране лента уезжает под кадр и листается по горизонтали. */
  .product-gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-gallery__stage {
    order: 1;
  }

  .product-gallery__thumbs {
    order: 2;
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

.product-page__badge {
  position: absolute;
  left: 0;
  top: 1rem;
  z-index: 1;
  padding: 0.4375rem 0.625rem 0.5rem;
  border-radius: 0 0.25rem 0.25rem 0;
  background-color: rgba(246, 95, 53, 0.9);
  color: var(--color-text-white);
  font-size: 0.8125rem;
  font-weight: 600;
}

.product-page__wishlist {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: rgba(255, 254, 253, 0.7);
  cursor: pointer;
}

/* node 292:2335 — иконка сама нарисована внутри viewBox 0 0 48 48 (как и
   в шапке, только со сдвигом под круглую подложку), так что она уже
   правильных пропорций сама по себе; ужимать svg до 1.5rem поверх этого
   масштабировало путь ещё раз и рисовало сердечко вдвое мельче макета. */
.product-page__wishlist svg {
  width: 100%;
  height: 100%;
}

.product-page__category {
  margin: 0 0 var(--space-12);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: #bf8a3c;
}

.product-page__title {
  margin: 0 0 1.5rem;
  font-size: 2.25rem;
  line-height: 2.875rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.product-page__meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.product-page__rating {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.product-page__stars {
  display: flex;
  gap: 2px;
}

.product-page__stars svg {
  width: 1.0625rem;
  height: 1rem;
}

.product-page__rating-value {
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.product-page__stock {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: #43b02a;
}

.product-page__stock svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.product-page__stock--unavailable {
  color: var(--color-badge-discount-bg);
}

.product-page__quantity-note {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  color: var(--color-text-muted);
}

.product-page__divider {
  height: 1px;
  margin-bottom: 1.5rem;
  background-color: #ebdddd;
}

.product-page__price {
  margin: 0 0 1.5rem;
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-gold);
}

.product-page__price-old {
  margin-left: var(--space-12);
  font-size: 1rem;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.product-page__qty {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  height: 3.25rem;
  border: 1px solid #d2d2d2;
  border-radius: 0.25rem;
  overflow: hidden;
}

.product-page__qty-btn {
  width: 3.25rem;
  border: 0;
  background: none;
  font-size: 1.125rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

.product-page__qty-btn:hover {
  background-color: var(--color-surface-cream-alt);
}

.product-page__qty-input {
  width: 3.5rem;
  border: 0;
  border-left: 1px solid #d2d2d2;
  border-right: 1px solid #d2d2d2;
  text-align: center;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text-dark);
}

.product-page__add {
  flex: 1;
  padding: var(--space-18) var(--space-24);
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-text-dark);
  color: var(--color-text-white);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.product-page__add--disabled {
  background-color: var(--color-border-cream);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.product-page__qty-btn:disabled,
.product-page__qty-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.product-page__section-title {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

.product-page__description {
  max-width: 50rem;
  margin-bottom: 4rem;
}

.product-page__description-body {
  padding: 2rem;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 0.625rem;
  font-size: 1rem;
  line-height: 1.625rem;
  color: var(--color-text-muted);
}

.product-page__description-body h3 {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

.product-page__description-body h3:first-child {
  margin-top: 0;
}

.product-page__description-body p {
  margin: 0 0 1rem;
}

.product-page__description-body ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.product-page__description-body li {
  margin-bottom: 0.5rem;
}

/* Раскладка сетки похожих товаров — из общих правил .product-grid--static
   (сайдбара на карточке нет, значит 4 в ряд). Локальный оверрайд убран:
   он дублировал общее значение и при этом не имел ступени на 1199px. */

@media (max-width: 991px) {
  .product-page__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .product-page__title {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }

}

@media (max-width: 575px) {
  .product-page__buy-row {
    flex-direction: column;
  }

  .product-page__qty {
    align-self: flex-start;
  }

  .product-page__description-body {
    padding: 1.25rem;
  }

}

/* Страница отдельной статьи блога (blog/article.php + template/blog/article.twig,
   Figma node 310:2522). Related-статьи переиспользуют .blog-card/.blog-grid,
   уже построенные для секции блога на главной и для blog/latest.twig. */

.article-page {
  background-color: #ffffff;
  /* header→breadcrumb gap 21px per Figma (node 310:2522) — was 2rem (32px). */
  padding: 1.3125rem 0 4rem;
}

.article-page__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-inline);
}

.article-page__card {
  /* Figma (node 310:2522): card is a full-width rectangle (x=272 w=1372,
     essentially the whole container), not a centered narrower box — text
     content inside is what's capped narrower (.article-page__date/__title/
     __body below), while the image is allowed to fill the full card width. */
  margin: 0 0 4rem;
  padding: 3.8125rem 7.25rem 2.5rem;
  border-radius: 0.25rem;
  background-color: rgba(255, 255, 255, 0.6);
}

.article-page__date,
.article-page__title,
.article-page__body {
  max-width: 53.25rem;
}

.article-page__date {
  margin: 0 0 var(--space-12);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.article-page__title {
  margin: 0 0 2rem;
  font-size: 2.25rem;
  line-height: 3rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

.article-page__image {
  margin-bottom: 2rem;
  border-radius: 0.375rem;
  overflow: hidden;
  aspect-ratio: 1146 / 680;
}

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

.article-page__body,
.legal-page__body {
  font-size: 1rem;
  line-height: 1.625rem;
  color: var(--color-text-muted);
}

.article-page__body p,
.legal-page__body p {
  margin: 0 0 1.5rem;
}

.article-page__body h3,
.legal-page__body h3 {
  margin: 2.5rem 0 1rem;
  font-size: 1.625rem;
  line-height: 2.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

.article-page__body h3:first-child,
.legal-page__body h3:first-child {
  margin-top: 0;
}

.article-page__body ul,
.legal-page__body ul {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.article-page__body li,
.legal-page__body li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
}

.article-page__body li::before,
.legal-page__body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.625rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background-color: var(--color-brand-gold);
}

.article-page__body strong,
.legal-page__body strong {
  color: var(--color-heading-dark);
  font-weight: var(--font-weight-bold);
}

.article-page__body em,
.legal-page__body em {
  display: block;
  font-style: italic;
  font-size: 0.875rem;
  color: #94918e;
}

.article-page__related-title {
  margin: 0 0 var(--space-24);
  font-size: 2.25rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

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

  .article-page__title {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }

  .article-page__body h3,
.legal-page__body h3 {
    font-size: 1.375rem;
    line-height: 1.875rem;
  }

  .article-page__related-title {
    font-size: 1.75rem;
  }
}

/* Корзина (checkout/cart.php + template/checkout/cart.twig, Figma node 304:4296).
   Степпер количества переиспользует визуальный язык .product-page__qty, но
   собственные классы — на странице корзины несколько строк товаров одновременно. */

.cart-page {
  background-color: var(--color-surface-cream);
  /* header→title gap 90px per Figma node 304:4296 (Basket): container
     y=184, header height 94. Was 2rem (32px), way tighter than the design. */
  padding: 5.625rem 0 6rem;
}

.cart-page__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-inline: var(--container-padding-inline);
}

.cart-page__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  margin-bottom: var(--space-32);
}

.cart-page__title {
  margin: 0;
  font-size: 3rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.cart-page__count {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
  padding: 0.5625rem 1.0625rem;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: var(--radius-pill);
  background-color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading-dark);
  white-space: nowrap;
}

.cart-page__count-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.cart-page__steps {
  display: flex;
  align-items: center;
  gap: var(--space-16, 1rem);
  margin-bottom: var(--space-32);
}

.cart-page__step {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
}

.cart-page__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid rgba(169, 119, 45, 0.3);
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.cart-page__step--active .cart-page__step-num {
  border: none;
  background-color: var(--color-brand-gold);
  color: #ffffff;
}

.cart-page__step-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.cart-page__step--active .cart-page__step-label {
  color: var(--color-brand-gold);
}

.cart-page__step-divider {
  flex: 1;
  height: 1px;
  background-color: rgba(169, 119, 45, 0.1);
}

.cart-page__alert {
  margin-bottom: var(--space-24);
  padding: 1rem 1.25rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.3125rem;
}

.cart-page__alert--danger {
  background-color: rgba(220, 53, 69, 0.08);
  color: #b3212f;
}

.cart-page__alert--info {
  background-color: rgba(169, 119, 45, 0.08);
  color: var(--color-text-dark);
}

.cart-page__alert--success {
  background-color: rgba(67, 176, 42, 0.08);
  color: #2f7a1d;
}

.cart-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26rem;
  gap: var(--space-32);
  align-items: start;
}

.cart-page__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.cart-card {
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 0.625rem;
  background-color: #ffffff;
  overflow: hidden;
}

.cart-card__head {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(180, 135, 70, 0.1);
}

.cart-card__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

.cart-item {
  display: flex;
  gap: var(--space-24);
  padding: 1.5rem;
  border-bottom: 1px solid rgba(180, 135, 70, 0.1);
  transition: opacity 0.15s ease;
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item--updating {
  opacity: 0.5;
  pointer-events: none;
}

.cart-item__thumb {
  display: block;
  flex-shrink: 0;
  width: 8rem;
  height: 8rem;
  border: 1px solid #f1f1f1;
  border-radius: 0.625rem;
  overflow: hidden;
}

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

.cart-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart-item__name {
  display: block;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-heading-dark);
  text-decoration: none;
}

.cart-item__name:hover {
  color: var(--color-brand-gold);
}

.cart-item__variant {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.cart-item__stock {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
}

.cart-item__stock-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.cart-item__stock--in {
  color: #43b02a;
}

.cart-item__stock--in .cart-item__stock-dot {
  background-color: #43b02a;
}

.cart-item__stock--out {
  color: #d0342c;
}

.cart-item__stock--out .cart-item__stock-dot {
  background-color: #d0342c;
}

.cart-item__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
  margin-top: 1rem;
}

.cart-item__qty {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  height: 3.125rem;
  border: 1px solid #d2d2d2;
  border-radius: 0.375rem;
  overflow: hidden;
}

.cart-item__qty-btn {
  width: 2.5rem;
  border: 0;
  background: none;
  font-size: 1rem;
  color: var(--color-text-dark);
  cursor: pointer;
}

.cart-item__qty-btn:hover {
  background-color: var(--color-surface-cream-alt);
}

.cart-item__qty-input {
  width: 3rem;
  border: 0;
  border-left: 1px solid #d2d2d2;
  border-right: 1px solid #d2d2d2;
  text-align: center;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text-dark);
}

.cart-item__price-remove {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.cart-item__price {
  text-align: right;
}

.cart-item__total {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
  font-variant-numeric: tabular-nums;
}

.cart-item__old-total {
  margin: 2px 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.cart-item__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 0.625rem;
  background: none;
  cursor: pointer;
}

.cart-item__remove:hover {
  background-color: var(--color-surface-cream-alt);
}

.cart-item__remove img {
  width: 1.25rem;
  height: 1.25rem;
}

.cart-page__continue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  align-self: flex-start;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-gold);
  text-decoration: none;
}

.cart-page__continue:hover {
  text-decoration: underline;
}

.cart-page__continue img {
  width: 1.25rem;
  height: 1.25rem;
}

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: 1.5625rem;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 0.625rem;
  background-color: #ffffff;
}

.cart-summary__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

.cart-summary__coupon {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.cart-summary__coupon-label {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-heading-dark);
}

.cart-summary__coupon-label img {
  width: 1rem;
  height: 1rem;
}

.cart-summary__coupon-row {
  display: flex;
  gap: var(--space-8);
}

.cart-summary__coupon-input {
  flex: 1;
  min-width: 0;
  height: 2.9375rem;
  padding: 0.75rem 1rem;
  border: 1px solid #e4e2df;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--color-text-dark);
}

.cart-summary__coupon-input::placeholder {
  color: rgba(43, 42, 41, 0.5);
}

.cart-summary__coupon-btn {
  flex-shrink: 0;
  padding: 0 1.25rem;
  height: 2.9375rem;
  border: 0;
  border-radius: 0.375rem;
  background-color: var(--color-brand-gold);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.cart-summary__coupon-btn:hover {
  background-color: #8f6323;
}

.cart-summary__coupon-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cart-summary__totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid rgba(180, 135, 70, 0.1);
}

.cart-summary__totals:empty {
  display: none;
  padding: 0;
  border: 0;
}

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

.cart-summary__label {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

.cart-summary__value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading-dark);
  font-variant-numeric: tabular-nums;
}

.cart-summary__row--total {
  margin-top: -0.5rem;
}

.cart-summary__row--total .cart-summary__label {
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

.cart-summary__row--total .cart-summary__value {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-gold);
}

.cart-summary__note {
  padding: 1.0625rem;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 0.625rem;
  background-color: rgba(169, 119, 45, 0.05);
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--color-text-muted);
}

.cart-summary__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: 3.40625rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-text-dark);
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.cart-summary__checkout img {
  width: 1.25rem;
  height: 1.25rem;
}

.cart-summary__secure {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-top: 1.5625rem;
  border-top: 1px solid rgba(180, 135, 70, 0.1);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.cart-summary__secure img {
  width: 1.25rem;
  height: 1.25rem;
}

.cart-page__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  padding: 6rem 1.5rem;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 0.625rem;
  background-color: #ffffff;
  text-align: center;
}

.cart-page__empty-text {
  margin: 0;
  font-size: var(--font-size-xl);
  color: var(--color-text-muted);
}

.cart-page__continue--empty {
  padding: 1rem 2rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-text-dark);
  color: #ffffff;
}

.cart-page__continue--empty:hover {
  text-decoration: none;
}

@media (max-width: 991px) {
  .cart-page__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-page__title {
    font-size: 2rem;
  }

  .cart-page__steps {
    display: none;
  }
}

@media (max-width: 575px) {
  .cart-page__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
  }

  /* Компактная строка вместо большого фото на всю ширину — тот же принцип,
     что в .checkout-summary__product (checkout/checkout.twig): небольшой
     квадратный превью слева, текст справа, ничего не переносится и не
     разъезжается на узких экранах. Цена по-прежнему под "In stock".
     Количество и удаление — в одной строке ниже: удаление в правом углу той
     же строки, где меняется количество (в углу карточки оно терялось/
     наезжало на разную длину названия — раньше пробовали абсолютным
     позиционированием, ненадёжно). */
  .cart-item__thumb {
    width: 5rem;
    height: 5rem;
  }

  .cart-item__body {
    justify-content: flex-start;
    gap: 0.625rem;
  }

  .cart-item__info {
    order: 1;
  }

  /* .cart-item__row — обёртка для desktop-раскладки (количество и цена в
     одну строку); на мобильном ей просто нужен flex-wrap, чтобы цена
     (flex-basis: 100%) переносилась на свою строку, а количество с
     удалением оставались на следующей. .cart-item__price-remove детям
     (цена, удаление) незачем оставаться в отдельном контейнере — display:
     contents поднимает их на уровень .cart-item__row. */
  .cart-item__row {
    order: 2;
    flex-wrap: wrap;
    align-items: center;
    /* column-gap: 0 — базовый gap: var(--space-24) (24px) добавлялся к
       ширине количества (130px) и удаления (40px) даже при margin-left:
       auto (gap считается между соседними элементами независимо от auto-
       отступов) и на узкой строке (тут ~189px) их не хватало на 5px —
       удаление переносилось под количество вместо места рядом с ним. */
    column-gap: 0;
    row-gap: 0.625rem;
  }

  .cart-item__price-remove {
    display: contents;
  }

  .cart-item__price {
    order: 1;
    flex: 0 0 100%;
    text-align: left;
  }

  /* .cart-item__row — flex, и по умолчанию align-items: stretch растягивал
     .cart-item__qty (у него нет своей ширины, только border) на всю ширину
     строки — три сегмента степпера расползались в это широкое поле.
     align-self: flex-start возвращает ему собственную ширину по
     содержимому, как в обычном компактном степпере. */
  .cart-item__qty {
    order: 2;
    align-self: flex-start;
  }

  /* margin-left: auto прижимает удаление к правому краю той же строки, где
     редактируется количество — не отдельный угол карточки. Рамка — та же,
     что у .cart-item__qty (1px solid #d2d2d2), чтобы кнопка визуально
     принадлежала той же группе controls; убрана только сплошная белая
     заливка (была белым пятном на бежевом фоне карточки) — фон прозрачный,
     подсветка при наведении остаётся от базового .cart-item__remove:hover.
     2.25rem = 36px — минимальный размер тач-таргета, совпадает с desktop
     (.cart-item__remove, строка 4171); раньше на мобильном было 2.5rem
     (40px) без особой причины. */
  .cart-item__remove {
    order: 3;
    margin-left: auto;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #d2d2d2;
    border-radius: 0.375rem;
  }

  .cart-item__remove img {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Оформление заказа, этап 2 (checkout/checkout.php + template/checkout/checkout.twig,
   Figma node 304:5160). Один сплошной шаг вместо стокового AJAX-визарда
   OpenCart: контактные данные + адрес + способ доставки + способ оплаты +
   резюме заказа, единая форма с одной кнопкой отправки. Переиспользует
   .cart-summary__coupon* (extension/total/coupon.twig) как есть. */

.checkout-page {
  background-color: var(--color-surface-cream);
  /* header→title gap 77px per Figma node 304:5160 (Placing an order):
     container y=171, header height 94. Was 2rem (32px), too tight. */
  padding: 4.8125rem 0 6rem;
}

.checkout-page__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-inline: var(--container-padding-inline);
}

.checkout-page__title {
  margin: 0 0 var(--space-32);
  font-size: 3rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.checkout-page__steps {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: var(--space-32);
}

.checkout-page__step {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
}

.checkout-page__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid rgba(169, 119, 45, 0.3);
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.checkout-page__step--active .checkout-page__step-num,
.checkout-page__step:first-child .checkout-page__step-num {
  border: none;
  background-color: var(--color-brand-gold);
  color: #ffffff;
}

.checkout-page__step-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.checkout-page__step--active .checkout-page__step-label,
.checkout-page__step:first-child .checkout-page__step-label {
  color: var(--color-brand-gold);
}

.checkout-page__step-divider {
  flex: 1;
  height: 1px;
  background-color: rgba(169, 119, 45, 0.3);
}

.checkout-page__step-divider--muted {
  background-color: rgba(169, 119, 45, 0.1);
}

.checkout-page__alert {
  margin-bottom: var(--space-24);
  padding: 1rem 1.25rem;
  border-radius: 0.625rem;
  background-color: rgba(220, 53, 69, 0.08);
  color: #b3212f;
  font-size: 0.875rem;
  line-height: 1.3125rem;
}

.checkout-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26rem;
  gap: var(--space-32);
  align-items: start;
}

.checkout-page__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.checkout-card {
  padding: 2rem;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 0.625rem;
  background-color: #ffffff;
}

.checkout-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-24);
}

.checkout-card__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.checkout-card__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

.checkout-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.checkout-field--wide,
.account-field--wide {
  grid-column: 1 / -1;
}

.checkout-field,
.account-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.checkout-field label,
.account-field label {
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-heading-dark);
}

.checkout-field__required,
.account-field__required {
  color: var(--color-brand-gold);
}

.checkout-field__input,
.account-field__input {
  height: 2.9375rem;
  padding: 0.75rem 1rem;
  border: 1px solid #e4e2df;
  border-radius: 0.375rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--color-text-dark);
}

.checkout-field__input::placeholder,
.account-field__input::placeholder {
  color: rgba(43, 42, 41, 0.5);
}

.checkout-field__input--error,
.account-field__input--error {
  border-color: #d0342c;
}

.checkout-field__error,
.account-field__error {
  font-size: 0.8125rem;
  color: #d0342c;
}

.checkout-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.checkout-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: 1.125rem;
  border: 2px solid #e4e2df;
  border-radius: 0.625rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.checkout-option--active {
  border-color: var(--color-brand-gold);
  background-color: rgba(169, 119, 45, 0.05);
}

.checkout-option input[type='radio'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkout-option__radio {
  position: relative;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #d2d2d2;
  border-radius: 50%;
}

.checkout-option--active .checkout-option__radio {
  border-color: var(--color-brand-gold);
}

.checkout-option--active .checkout-option__radio::after {
  content: '';
  position: absolute;
  inset: 0.1875rem;
  border-radius: 50%;
  background-color: var(--color-brand-gold);
}

.checkout-option__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.checkout-option__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading-dark);
}

.checkout-option__price {
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
  font-variant-numeric: tabular-nums;
}

.checkout-option__price--free {
  color: #43b02a;
}

.checkout-options--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}

/* Способ оплаты — только радио + название, без __body/__price справа
   (в отличие от способа доставки). space-between базового .checkout-option
   с двумя детьми без flex:1 разъезжался на края карточки, утаскивая текст
   от радио-кнопки к правому краю. */
.checkout-option--compact {
  justify-content: flex-start;
}

.checkout-options--grid .checkout-option {
  padding: 1rem 1.125rem;
}

.checkout-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: 1.5625rem;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 0.625rem;
  background-color: #ffffff;
}

.checkout-summary__head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.checkout-summary__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

.checkout-summary__products {
  display: flex;
  flex-direction: column;
  gap: var(--space-16, 1rem);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid rgba(180, 135, 70, 0.1);
}

.checkout-summary__product {
  display: flex;
  gap: var(--space-16, 1rem);
}

.checkout-summary__thumb {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  border: 1px solid #f1f1f1;
  border-radius: 0.625rem;
  overflow: hidden;
}

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

.checkout-summary__product-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.checkout-summary__product-name {
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-heading-dark);
}

.checkout-summary__product-variant {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.checkout-summary__product-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.checkout-summary__product-qty {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.checkout-summary__product-total {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
  font-variant-numeric: tabular-nums;
}

.checkout-summary__totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.checkout-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.checkout-summary__label {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

.checkout-summary__value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading-dark);
  font-variant-numeric: tabular-nums;
}

.checkout-summary__row--total {
  padding-top: var(--space-12);
  border-top: 1px solid rgba(180, 135, 70, 0.1);
}

.checkout-summary__row--total .checkout-summary__label {
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

.checkout-summary__row--total .checkout-summary__value {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-gold);
}

.checkout-summary__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.40625rem;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-text-dark);
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.checkout-summary__agree {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

/* Тот же чекбокс, что у фильтра каталога (ocfilter-overrides.css,
   .ocf-value-input-checkbox) — квадрат с рамкой цвета токена, на отметке
   заливка золотом C9872D и белая галочка тем же SVG. Там переключение идёт
   через JS-класс .ocf-selected (кастомный виджет), здесь — обычный
   input[type=checkbox], поэтому то же оформление навешено на :checked
   вместо класса. Раньше был нативный чекбокс браузера (синий) — выбивался
   из стиля сайта. */
.checkout-summary__agree input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1875rem 0 0;
  flex-shrink: 0;
  border: 1px solid #d5c8b8;
  border-radius: 4px;
  background-color: #fffdf9;
  cursor: pointer;
}

.checkout-summary__agree input:checked {
  border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' rx='4' fill='%23C9872D'/%3E%3Cpath d='M15.3333 6L7.99996 13.3333L4.66663 10' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.checkout-summary__agree a {
  color: var(--color-brand-gold);
  text-decoration: underline;
}

.checkout-summary__secure {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-top: 1.5625rem;
  border-top: 1px solid rgba(180, 135, 70, 0.1);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.checkout-summary__secure img {
  width: 1.25rem;
  height: 1.25rem;
}

@media (max-width: 991px) {
  .checkout-page__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .checkout-page__title {
    font-size: 2rem;
  }

  .checkout-card__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .checkout-options--grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575px) {
  .checkout-page__steps {
    gap: 0.5rem;
  }

  .checkout-page__step-label {
    display: none;
  }

  .checkout-card {
    padding: 1.25rem;
  }

  .checkout-option {
    flex-wrap: wrap;
  }
}

/* Kontakt (information/contact.php + template/information/contact.twig,
   Figma node 327:1624). "Adres"/mapa z макета replaced with a real "Wysyłka"
   card + honest "we're online-only" notice, see project notes - no real
   street address exists for this store yet. */

.contact-page {
  background-color: var(--color-surface-cream);
  /* header→breadcrumb gap 17px per Figma (node 327:1624: breadcrumb
     absolute y=111, header height 94) — was 2rem (32px). */
  padding: 1.0625rem 0 0;
}

.contact-page__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-inline) 5rem;
}

.contact-page__title {
  margin: 1.5rem 0 2rem;
  font-size: 2.75rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.contact-page__intro {
  max-width: 40rem;
  margin-bottom: 2.5rem;
}

.contact-page__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #bf8a3c;
}

.contact-page__intro-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.625rem;
  color: var(--color-text-muted);
}

.contact-page__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.contact-page__side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-page__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.contact-card {
  display: flex;
  gap: 1rem;
}

.contact-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  background-color: #f4efe7;
}

.contact-card__icon img {
  width: 1.5rem;
  height: 1.5rem;
}

.contact-card__body {
  min-width: 0;
}

.contact-card__label {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #bf8a3c;
}

.contact-card__value {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

.contact-card__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.contact-page__notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 1.5rem;
  border: 1px solid rgba(207, 196, 179, 0.4);
  border-radius: 1rem;
  background-color: #f4efe7;
  text-align: center;
  flex: 1;
  min-height: 13.75rem;
}

.contact-page__notice-icon {
  width: 2.5rem;
  height: 2.5rem;
}

.contact-page__notice-text {
  margin: 0;
  max-width: 16.25rem;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-gold);
}

.contact-form {
  padding: 3rem;
  border: 1px solid rgba(207, 196, 179, 0.4);
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.7);
}

.contact-form__title {
  margin: 0 0 2rem;
  font-size: 1.75rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
}

.contact-field--wide {
  grid-column: 1 / -1;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.contact-field label {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.325px;
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.contact-field__input,
.contact-field__textarea {
  padding: 0.875rem 1.25rem;
  border: 1px solid #e4ddd1;
  border-radius: 0.375rem;
  background-color: #f5f4f2;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--color-text-dark);
}

.contact-field__textarea {
  resize: vertical;
  min-height: 7.5rem;
}

.contact-field__input::placeholder,
.contact-field__textarea::placeholder {
  color: #94918e;
}

.contact-field__input--error {
  border-color: #d0342c;
}

.contact-field__error {
  font-size: 0.8125rem;
  color: #d0342c;
}

.contact-form__consent {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--color-text-muted);
}

.contact-form__consent a {
  color: var(--color-brand-gold);
  text-decoration: underline;
}

.contact-form__submit {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: 0.5rem;
  padding: 1rem 2.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-text-dark);
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.contact-faq {
  background-color: #f4efe7;
  padding: 4rem 0;
}

.contact-faq__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-inline);
}

.contact-faq__title {
  margin: 0 0 3rem;
  font-size: 2.25rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-dark);
}

.contact-faq__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.contact-faq__card {
  padding: 1.5625rem;
  border: 1px solid rgba(207, 196, 179, 0.4);
  border-radius: 1rem;
  background-color: #ffffff;
}

.contact-faq__question {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

.contact-faq__answer {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-text-muted);
}

@media (max-width: 991px) {
  .contact-page__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-page__title {
    font-size: 2rem;
  }

  .contact-faq__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 575px) {
  .contact-page__cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form__submit {
    width: 100%;
  }
}

/* Служебная страница-уведомление (template/common/success.twig). Общий шаблон
   для «спасибо за сообщение» (information/contact/success), «спасибо за заказ»
   (checkout/success), а также checkout/failure, logout, возвратов и т.п. —
   поэтому нейтральная карточка с золотым разделителем, без «праздничной»
   галочки, которая смотрелась бы неуместно на странице ошибки оплаты. */

.success-page {
  background-color: var(--color-surface-cream);
  padding: 6rem 0 8rem;
}

.success-page__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-inline: var(--container-padding-inline);
}

.success-page__card {
  max-width: 42.5rem;
  margin: 0 auto;
  padding: 3.5rem 3rem;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 1rem;
  background-color: #ffffff;
  text-align: center;
}

.success-page__title {
  margin: 0 0 1.5rem;
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.success-page__divider {
  width: 13.75rem;
  height: 2px;
  margin: 0 auto 1.75rem;
  background: var(--gradient-divider-gold);
}

.success-page__message {
  font-size: 1rem;
  line-height: 1.625rem;
  color: var(--color-text-muted);
}

.success-page__message p {
  margin: 0 0 0.875rem;
}

.success-page__message p:last-child {
  margin-bottom: 0;
}

.success-page__message a {
  color: var(--color-brand-gold);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.success-page__continue {
  display: inline-block;
  margin-top: 2rem;
  padding: 1rem 3rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-text-dark);
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

@media (max-width: 575px) {
  .success-page {
    padding: 3rem 0 5rem;
  }

  .success-page__card {
    padding: 2.5rem 1.5rem;
  }

  .success-page__title {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .success-page__continue {
    width: 100%;
  }
}

/* Информационные страницы из админки: Polityka prywatności, Regulamin sklepu
   (information/information.php + template/information/information.twig).
   Типографика тела делит правила с .article-page__body — теги в контенте те
   же (h3/p/ul/li), см. блок статьи блога выше. */

.legal-page {
  background-color: var(--color-surface-cream);
  padding: 2rem 0 6rem;
}

.legal-page__container {
  max-width: 57.5rem;
  margin: 0 auto;
  padding-inline: var(--container-padding-inline);
}

.legal-page__card {
  margin-top: var(--space-24);
  padding: 3.5rem;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 1rem;
  background-color: #ffffff;
}

.legal-page__title {
  margin: 0 0 var(--space-24);
  font-size: 2.25rem;
  line-height: 2.75rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.legal-page__divider {
  width: 13.75rem;
  height: 2px;
  margin-bottom: 2.5rem;
  background: var(--gradient-divider-gold);
}

/* 404 (error/not_found.twig) */

.notfound-page {
  background-color: var(--color-surface-cream);
  padding: 6rem 0 8rem;
}

.notfound-page__container {
  max-width: 40rem;
  margin: 0 auto;
  padding-inline: var(--container-padding-inline);
  text-align: center;
}

.notfound-page__code {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 7.5rem;
  line-height: 1;
  font-weight: var(--font-weight-bold);
  background: var(--gradient-gold-text);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.notfound-page__title {
  margin: var(--space-24) 0 var(--space-12);
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.notfound-page__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.625rem;
  color: var(--color-text-muted);
}

.notfound-page__continue {
  display: inline-block;
  margin-top: var(--space-32);
  padding: 1rem 3rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-text-dark);
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.notfound-page__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  margin-top: 2.5rem;
  padding-top: var(--space-24);
  border-top: 1px solid rgba(180, 135, 70, 0.2);
  font-size: var(--font-size-base);
}

.notfound-page__links-label {
  color: var(--color-text-muted);
}

.notfound-page__links a {
  color: var(--color-brand-gold);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.notfound-page__links a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .legal-page__card {
    padding: 2rem 1.5rem;
  }

  .legal-page__title {
    font-size: 1.625rem;
    line-height: 2.125rem;
  }

  .notfound-page {
    padding: 3rem 0 5rem;
  }

  .notfound-page__code {
    font-size: 5.5rem;
  }

  .notfound-page__title {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .notfound-page__continue {
    width: 100%;
  }
}

/* Личный кабинет и авторизация (account/*, affiliate/*). Макетов в Figma нет —
   собрано из уже существующих в теме паттернов: карточка как у .legal-page,
   поля формы делят правила с .checkout-field (см. выше), кнопки — тёмная
   пилюля как .checkout-summary__submit, таблицы — по мотивам .cart-card. */

.account-page {
  background-color: var(--color-surface-cream);
  padding: 2rem 0 6rem;
}

.account-page__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-inline: var(--container-padding-inline);
}

.account-page__container--narrow {
  max-width: 57.5rem;
}

.account-page__title {
  margin: var(--space-24) 0 var(--space-32);
  font-size: 2.25rem;
  line-height: 2.75rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.account-page__intro {
  margin: -1rem 0 var(--space-32);
  font-size: 1rem;
  line-height: 1.625rem;
  color: var(--color-text-muted);
}

.account-card {
  padding: 2.5rem;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 1rem;
  background-color: #ffffff;
}

.account-card__title {
  margin: 0 0 var(--space-8);
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

.account-card__text {
  margin: 0 0 var(--space-24);
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--color-text-muted);
}

.account-card__text:last-child {
  margin-bottom: 0;
}

/* Две колонки: «новый клиент» / «уже есть аккаунт», список+форма и т.п. */

.account-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
  align-items: start;
}

/* Формы */

.account-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
}

.account-form--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 28.75rem;
}

.account-form__row {
  grid-column: 1 / -1;
}

.account-form__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-16, 1rem);
  margin-top: var(--space-8);
}

.account-field select,
.account-field textarea {
  padding: 0.75rem 1rem;
  border: 1px solid #e4e2df;
  border-radius: 0.375rem;
  background-color: #ffffff;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--color-text-dark);
}

.account-field select {
  height: 2.9375rem;
}

.account-field textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.account-field__hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.account-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

.account-checkbox input {
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.account-radio-row {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  font-size: 0.9375rem;
  color: var(--color-text-dark);
}

.account-radio-row label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
}

/* Кнопки */

.account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9375rem 2.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-text-dark);
  color: #ffffff;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
}

.account-btn--ghost {
  background-color: transparent;
  border: 1px solid rgba(180, 135, 70, 0.4);
  color: var(--color-brand-gold);
}

.account-btn--ghost:hover {
  background-color: rgba(169, 119, 45, 0.06);
  opacity: 1;
}

.account-btn--small {
  padding: 0.625rem 1.375rem;
  font-size: 0.875rem;
}

.account-link {
  color: var(--color-brand-gold);
  font-size: 0.875rem;
  text-decoration: none;
}

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

/* Навигация кабинета (список разделов) */

.account-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}

.account-nav a {
  display: block;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 0.625rem;
  background-color: var(--color-surface-cream);
  color: var(--color-heading-dark);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.account-nav a:hover {
  border-color: var(--color-brand-gold);
  color: var(--color-brand-gold);
}

/* Таблицы (заказы, транзакции, загрузки) */

.account-table-wrap {
  overflow-x: auto;
}

.account-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.account-table th,
.account-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgba(180, 135, 70, 0.15);
  text-align: left;
  vertical-align: top;
}

.account-table th {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-heading-dark);
  white-space: nowrap;
}

.account-table td {
  color: var(--color-text-muted);
}

.account-table tbody tr:last-child td {
  border-bottom: 0;
}

.account-table__right {
  text-align: right;
}

.account-table__total td {
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

/* Уведомления */

.account-alert {
  margin-bottom: var(--space-24);
  padding: 1rem 1.25rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.3125rem;
}

.account-alert--success {
  background-color: rgba(67, 176, 42, 0.08);
  color: #2f7a1d;
}

.account-alert--danger {
  background-color: rgba(220, 53, 69, 0.08);
  color: #b3212f;
}

.account-alert--info {
  background-color: rgba(169, 119, 45, 0.08);
  color: var(--color-text-dark);
}

.account-empty {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-muted);
}

/* Список (адреса, возвраты) */

.account-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.account-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-12);
  padding: 1.25rem;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 0.625rem;
}

.account-list__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--color-text-muted);
}

.account-list__actions {
  display: flex;
  gap: var(--space-8);
  flex-shrink: 0;
}

.account-pagination {
  margin-top: var(--space-24);
}

@media (max-width: 991px) {
  .account-columns,
  .account-form,
  .account-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-page__title {
    font-size: 1.625rem;
    line-height: 2.125rem;
  }

  .account-card {
    padding: 1.5rem;
  }

  .account-card + .account-card {
    margin-top: var(--space-24);
  }
}

@media (max-width: 575px) {
  .account-form__actions .account-btn {
    width: 100%;
  }
}

.account-card__agree {
  margin-top: var(--space-24);
}

.account-radio-row + .account-card__agree {
  margin-top: var(--space-16, 1rem);
}

.account-table__thumb {
  width: 4rem;
  height: 4rem;
  border: 1px solid #f1f1f1;
  border-radius: 0.5rem;
  object-fit: cover;
}

/* Плавающие уведомления (.toast) — добавление в корзину, в список желаний,
   в сравнение. Движок рисует под это свои бутстраповские .alert и вставляет
   их через $('#content').parent().before(), но #content в нашей теме нет,
   поэтому сообщения не показывались вообще; перехват ответов и отрисовка —
   в theme/javascript/common.js.
   Палитра статусов взята у .account-alert, чтобы серверные сообщения в
   кабинете и плавающие читались как один компонент.
   Позиция — под шапкой справа: шапка не липкая, но одинаковая точка появления
   предсказуемее, чем привязка к скроллу, а низ экрана занят баннером cookie. */

.toast-stack {
  position: fixed;
  top: calc(var(--header-promo-height) + var(--header-nav-height) + var(--space-24));
  right: var(--container-padding-inline);
  z-index: 105;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: min(23.75rem, calc(100vw - 2 * var(--container-padding-inline)));
  /* Сам стек прозрачен для мыши, кликается только карточка уведомления. */
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: 1rem 1.125rem;
  border: 1px solid var(--color-border-cream);
  border-radius: 0.75rem;
  background-color: var(--color-text-white);
  box-shadow: 0 0.75rem 2rem var(--color-shadow-soft);
  font-size: 0.875rem;
  line-height: 1.3125rem;
  color: var(--color-text-dark);
  /* Стартовое состояние: чуть правее и меньше — «выплывает» из-за края. */
  opacity: 0;
  transform: translateX(1rem) scale(0.98);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.toast.is-visible {
  opacity: 1;
  transform: none;
}

/* Уход быстрее прихода: появление хочется заметить, исчезновение — нет. */
.toast[data-leaving] {
  transition-duration: 260ms;
}

.toast__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-circle);
}

.toast__icon svg {
  width: 1rem;
  height: 1rem;
}

.toast--success .toast__icon {
  background-color: rgba(67, 176, 42, 0.12);
  color: #2f7a1d;
}

.toast--error .toast__icon {
  background-color: rgba(220, 53, 69, 0.12);
  color: #b3212f;
}

.toast__body {
  flex: 1;
  min-width: 0;
}

.toast__body a {
  color: var(--color-brand-gold);
  text-decoration: underline;
}

.toast__close {
  flex-shrink: 0;
  margin: -2px -0.25rem 0 0;
  padding: 0.25rem;
  border: 0;
  background: none;
  line-height: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 160ms ease;
}

.toast__close svg {
  width: 0.75rem;
  height: 0.75rem;
}

.toast__close:hover {
  color: var(--color-text-dark);
}

@media (max-width: 767px) {
  .toast-stack {
    top: auto;
    bottom: var(--space-24);
    left: var(--container-padding-inline);
    width: auto;
  }

  /* Снизу логичнее «выплывать» вверх, а не вбок. */
  .toast {
    transform: translateY(1rem) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transform: none;
    transition-duration: 1ms;
  }
}

/* Баннер согласия на cookie. Оформлен по образцу карточек кабинета
   (.account-card) и кнопок .account-btn, чтобы не заводить отдельный
   визуальный язык под один элемент. */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: var(--space-24);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.cookie-banner--visible {
  transform: translateY(0);
}

.cookie-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: var(--space-24) var(--space-32);
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 1rem;
  background-color: #ffffff;
  box-shadow: 0 0.25rem 1.5rem var(--color-shadow-soft);
}

.cookie-banner__text {
  flex: 1;
}

.cookie-banner__title {
  margin: 0 0 var(--space-8);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

.cookie-banner__body {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.cookie-banner__body a {
  color: var(--color-brand-gold);
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-12);
  flex-shrink: 0;
}

.cookie-banner__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9375rem 2rem;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-text-dark);
  color: #ffffff;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  cursor: pointer;
}

.cookie-banner__button--ghost {
  background-color: transparent;
  border: 1px solid rgba(180, 135, 70, 0.4);
  color: var(--color-brand-gold);
}

@media (max-width: 767px) {
  .cookie-banner {
    padding: var(--space-12);
  }

  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-18);
    padding: var(--space-18);
  }

  .cookie-banner__actions {
    flex-direction: column-reverse;
  }
}

/* Анимация появления не нужна тем, кто просил её отключить */
@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
}

/* ------------------------------------------------------------------ *
   Мобильная главная — Figma 375:1765.
   Ширина фрейма 375px, поля 15px, герой 557px.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .hero,
  .hero__slides {
    min-height: 34.8125rem;
  }

  /* Мобильный фрейм (375:1767) не содержит отдельного слоя затемнения —
     только фото. Десктопный частичный scrim (75.573% ширины) здесь лишний. */
  .hero__scrim {
    display: none;
  }

  .hero__container {
    padding-inline: 0.9375rem;
  }

  .hero__title {
    font-size: 2rem;
    line-height: 2.375rem;
  }

  /* Отступы — по координатам мобильного фрейма (node 375:1767): заголовок
     → 14px → разделитель → 16px → подзаголовок → 20px → кнопка. Было
     18/18px и кнопка наследовала desktop-овые 60px. */
  .hero__subtitle {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: normal;
  }

  .hero__divider {
    width: 10.4375rem;
    margin-top: 0.875rem;
  }

  /* В макете кнопка растянута на всю ширину контента, текст и стрелка
     разнесены по краям */
  .hero__cta {
    display: inline-flex;
    width: auto;
    min-width: 0;
    justify-content: center;
    margin-top: 1.25rem;
    padding: 0.875rem 1.5rem;
  }

  .hero__cta-text {
    font-size: 0.9375rem;
    line-height: 1.40625rem;
  }

  .hero__cta-icon {
    width: 0.75rem;
    height: 0.75rem;
  }

  .hero__dots {
    bottom: 1rem;
    gap: 0.3125rem;
  }

  .hero__dot {
    width: 0.875rem;
    height: 0.375rem;
    border-radius: 6.25rem;
  }

  .hero__dot--active {
    width: 1.4375rem;
  }

  /* Секции главной: поля 15px и заголовки 20px, как во фрейме */
  .cat-carousel__container,
  .product-grid-section__container,
  .blog-section__container,
  .insta-section__container,
  .usp__container {
    padding-inline: 0.9375rem;
  }

  /* Вертикальный ритм макета рассчитан на десктоп: 107px сверху у «Wybrane»
     на телефоне съедали бы пол-экрана. Сжимаем примерно вдвое, сохраняя
     соотношение между секциями. */
  .cat-carousel__container {
    padding-block: 2.5rem 2.125rem;
  }

  .product-grid-section__container {
    padding-block: 3.5rem 1rem;
  }

  .blog-section__container {
    padding-block: 2.625rem 1.25rem;
  }

  .insta-section__container {
    padding-block: 2rem;
  }

  .cat-carousel__head,
  .blog-section__head {
    margin-bottom: 1.75rem;
  }

  .product-grid-section__head {
    margin-bottom: 1.375rem;
  }

  .insta-section__title {
    margin-bottom: 1.5rem;
  }

  .cat-carousel__progress {
    margin-top: 2rem;
  }

  /* Боковой выпуск трека карусели гасится полем секции — значит должен
     равняться ему, иначе лента вылезет за край. */
  .product-grid {
    --product-grid-bleed: 0.9375rem;
  }

  .cat-carousel__title,
  .product-grid-section__title,
  .blog-section__title,
  .insta-section__title {
    font-size: 1.25rem;
    line-height: 1.875rem;
  }

  /* Карточки категорий — 180x220 c шагом 12px */
  .cat-carousel__card {
    flex-basis: 11.25rem;
    height: 13.75rem;
  }

  .cat-carousel__track {
    gap: 0.75rem;
  }

  /* Ссылка «Przejdź do katalogu / Zobacz wszystkie» — один и тот же
     Figma-компонент (Frame 34993, mainComponentId 49:646) во всех трёх
     секциях; на мобильном фрейме его текст 14px (было 16px везде). */
  .cat-carousel__link,
  .product-grid-section__link,
  .blog-section__link {
    font-size: 0.875rem;
  }
}

@media (max-width: 767px) {
  /* Figma 375:1809 — USP идут колонкой по левому краю, с разделителями
     между пунктами; раньше на мобильном список центрировался. */
  .usp__list {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.6875rem;
    min-height: 0;
    padding: var(--space-24) 0.9375rem;
  }

  .usp__item {
    align-items: flex-start;
    padding-bottom: 0.6875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .usp__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

@media (max-width: 767px) {
  /* Instagram: во фрейме 375px это 3 колонки по 107px с шагом ~12px,
     а не 2 крупные плитки. Радиус скругления в макете 4px. */
  .insta-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  .insta-grid__item {
    border-radius: 0.25rem;
  }

  /* Карточка товара — 220x437 по макету (сейчас растягивалась на 293).
     Только для горизонтальной ленты "Picked for you" на главной — эти же
     .product-card используются и как обычные грид-элементы (каталог,
     похожие товары), там им нужна ширина от грид-трека, а не фиксированная
     260px, иначе карточка шире вьюпорта на мобильных (было). */
  #common-home .product-grid > .product-card {
    flex-basis: 13.75rem;
    min-width: 13.75rem;
    max-width: 13.75rem;
    --product-card-pad: 0.75rem;
    padding: var(--product-card-pad);
    gap: 1rem;
    border-radius: 0.5rem;
  }

  #common-home .product-grid > .product-card .product-card__image {
    width: 11.25rem;
    height: 11.25rem;
  }

  /* Карточка блога — 260 в ширину, картинка 160 в высоту. .blog-card тоже
     переиспользуется на странице блога как обычный грид-элемент — см.
     комментарий выше про .product-card, та же причина той же ловушки. */
  .blog-section__card {
    flex-basis: 16.25rem;
    min-width: 16.25rem;
    max-width: 16.25rem;
  }

  .blog-card__image,
  .blog-section__card-image {
    height: 10rem;
    border-radius: 0.375rem;
  }
}

@media (max-width: 767px) {
  /* В мобильном макете карусели листаются свайпом: стрелок нет, вместо них
     полоса прогресса под лентой. У нас стрелки ещё и вылезали за правый край. */
  .carousel-nav {
    display: none;
  }

  .cat-carousel__head,
  .product-grid-section__head,
  .blog-section__head {
    gap: var(--space-12);
  }
}

@media (max-width: 767px) {
  /* В мобильном макете (Figma 375:1853) на карточке товара нет кнопки
     «в избранное» — только бейдж скидки слева сверху. У нас она наезжала
     тёмным кругом на картинку. Добавление в избранное остаётся доступным
     с карточки товара и из шапки. */
  .product-card__wishlist {
    display: none;
  }
}

/* ------------------------------------------------------------------ *
 * Интерактивные состояния (hover / focus / active)
 *
 * Слой намеренно собран в одном месте и лежит последним. До этого
 * состояния задавались вразнобой по секциям: у части элементов hover не
 * было вовсе (карточка товара целиком, «Dodaj do koszyka», иконки шапки,
 * корзина), а все тёмные CTA гасили себя до opacity: .92 — это читается
 * как «кнопка выключилась», а не «отзывается на курсор».
 *
 * Договорённости:
 *  - цвет и фон меняются за --transition-fast, движение и тень — за
 *    --transition-smooth (плавный выход, без отскока);
 *  - основной жест наведения — уход в бренд-золото;
 *  - нажатие всегда «придавливает» элемент на 1px;
 *  - на главной шапка лежит поверх тёмного hero (.route-common-home),
 *    поэтому там своя пара состояний — золото на тёмном не читается.
 * ------------------------------------------------------------------ */

/* Видимый фокус с клавиатуры. Раньше в теме не было ни одного правила
   :focus, то есть навигация табом шла вслепую. :focus-visible, а не
   :focus — чтобы обводка не появлялась на клик мышью. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-brand-gold);
  outline-offset: 2px;
}

/* --- Тёмные CTA-«пилюли» -------------------------------------------- */

.product-card__add,
.catalog-main__continue,
.search-form__submit,
.contact-form__submit,
.success-page__continue,
.notfound-page__continue,
.cart-page__continue--empty,
.cart-summary__checkout,
.checkout-summary__submit,
.account-btn:not(.account-btn--ghost) {
  transition: background-color var(--transition-fast),
              box-shadow var(--transition-smooth),
              transform var(--transition-smooth);
}

.product-card__add:hover,
.catalog-main__continue:hover,
.search-form__submit:hover,
.contact-form__submit:hover,
.success-page__continue:hover,
.notfound-page__continue:hover,
.cart-page__continue--empty:hover,
.cart-summary__checkout:hover,
.checkout-summary__submit:hover,
.account-btn:not(.account-btn--ghost):hover {
  background-color: var(--color-brand-gold);
  color: var(--color-text-white);
  box-shadow: 0 0.625rem 1.375rem rgba(169, 119, 45, 0.26);
}

.product-card__add:active,
.catalog-main__continue:active,
.search-form__submit:active,
.contact-form__submit:active,
.success-page__continue:active,
.notfound-page__continue:active,
.cart-page__continue--empty:active,
.cart-summary__checkout:active,
.checkout-summary__submit:active,
.account-btn:active,
.cart-summary__coupon-btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

.cart-summary__coupon-btn,
.account-btn--ghost {
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-smooth);
}

/* --- Карточка товара ------------------------------------------------ */

.product-card {
  transition: transform var(--transition-smooth),
              box-shadow var(--transition-smooth),
              background-color var(--transition-smooth);
}

.product-card:hover {
  transform: translateY(-0.25rem);
  background-color: var(--color-text-white);
  box-shadow: 0 1.125rem 2.375rem var(--color-shadow-soft);
}

/* Маска под зум: без overflow картинка вылезает за скруглённый угол. */
.product-card__image-link {
  overflow: hidden;
  border-radius: 0.25rem;
}

.product-card__image,
.blog-card__image {
  transition: transform var(--transition-smooth);
}

.product-card:hover .product-card__image,
.blog-card:hover .blog-card__image {
  transform: scale(1.04);
}

.product-card__name,
.blog-card__title {
  transition: color var(--transition-fast);
}

.product-card__name:hover,
.blog-card:hover .blog-card__title {
  color: var(--color-brand-gold);
}

.product-card__wishlist {
  transition: background-color var(--transition-fast);
}

.product-card__wishlist:hover {
  background-color: rgba(169, 119, 45, 0.14);
}

.product-card__wishlist-icon {
  transition: stroke var(--transition-fast), fill var(--transition-fast);
}

.product-card__wishlist:hover .product-card__wishlist-icon {
  stroke: var(--color-brand-gold);
  fill: rgba(169, 119, 45, 0.18);
}

/* --- Шапка ---------------------------------------------------------- */

.header__menu-link,
.header__lang-item,
.header__cart-price {
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.header__menu-link:hover,
.header__lang-item:hover,
.header__cart:hover .header__cart-price {
  color: var(--color-brand-gold);
}

.header__lang-item:not(.header__lang-item--active):hover {
  opacity: 1;
}

.header__action,
.header__cart-icon-wrap {
  transition: background-color var(--transition-fast);
}

.header__action:hover {
  background-color: #e9e0d5;
}

.header__cart:hover .header__cart-icon-wrap {
  background-color: #f3eee9;
}

.header__action-icon,
.header__cart-icon,
.header__menu-icon {
  transition: stroke var(--transition-fast);
}

.header__action:hover .header__action-icon,
.header__cart:hover .header__cart-icon,
.header__menu-link:hover .header__menu-icon {
  stroke: var(--color-brand-gold);
}

/* Шапка поверх тёмного hero на главной: золото на почти чёрном фоне
   теряется, поэтому там подсветка светлым золотом и мягким бликом. */
.route-common-home .header__menu-link:hover,
.route-common-home .header__lang-item:hover,
.route-common-home .header__cart:hover .header__cart-price {
  color: var(--color-brand-gold-light);
}

.route-common-home .header__action:hover,
.route-common-home .header__cart:hover .header__cart-icon-wrap {
  background-color: rgba(255, 254, 253, 0.22);
}

.route-common-home .header__action:hover .header__action-icon,
.route-common-home .header__cart:hover .header__cart-icon,
.route-common-home .header__menu-link:hover .header__menu-icon {
  stroke: var(--color-text-white);
}

/* --- Текстовые ссылки ----------------------------------------------- */

.breadcrumb__link,
.breadcrumb__home,
.catalog-category-list a,
.footer__social,
.footer__list a,
.footer__legal a,
.footer__contact-value,
.account-link,
.account-nav a,
.notfound-page__links a,
.cart-item__name,
.blog-section__link,
.product-grid-section__link,
.header__submenu-link,
.toast__body a {
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

/* Ссылок без собственного hover не осталось — добираем те, у которых
   его не было: «показать всё» над каруселью и ссылки внутри плашек. */
.product-grid-section__link:hover,
.toast__body a:hover {
  color: var(--color-brand-gold);
}

/* Иконка Instagram: подсвечиваем светлым золотом — подвал тёмный, обычное
   --color-brand-gold на нём глухое. Правило бьёт только по ссылке: когда
   ключ с адресом пуст, иконка выводится как <span> и не «отзывается». */
a.footer__social:hover {
  color: var(--color-brand-gold-light);
}

.breadcrumb__home:hover {
  opacity: 0.7;
}

/* --- Пагинация, поля, карусель -------------------------------------- */

.catalog-pagination .pagination li a,
.account-pagination .pagination li a {
  transition: border-color var(--transition-fast),
              color var(--transition-fast),
              background-color var(--transition-fast);
}

.catalog-pagination .pagination li a:hover,
.account-pagination .pagination li a:hover {
  color: var(--color-brand-gold);
}

.catalog-main__sort select,
.catalog-main__control select,
.search-form__input,
.search-form__select,
.contact-field__input,
.contact-field__textarea {
  transition: border-color var(--transition-fast);
}

.catalog-main__sort select:hover,
.catalog-main__control select:hover,
.search-form__input:hover,
.search-form__select:hover,
.contact-field__input:hover,
.contact-field__textarea:hover {
  border-color: var(--color-brand-gold-light);
}

/* У стрелок карусели transform уже занят поворотом (--prev), поэтому
   отзыв только тенью и проявлением приглушённой стрелки. */
.carousel-nav__button {
  transition: box-shadow var(--transition-smooth), opacity var(--transition-fast);
}

.carousel-nav__button:hover {
  box-shadow: 0 0.375rem 1rem var(--color-shadow-soft);
  opacity: 1;
}

/* --- Меньше движения -------------------------------------------------
   Пользователям с prefers-reduced-motion оставляем смену цвета (она
   информативна), но убираем сдвиги и зум. */

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card__image,
  .blog-card__image {
    transition-duration: 1ms;
  }

  .product-card:hover,
  .product-card:hover .product-card__image,
  .blog-card:hover .blog-card__image {
    transform: none;
  }

  .product-card__add:active,
  .catalog-main__continue:active,
  .search-form__submit:active,
  .contact-form__submit:active,
  .success-page__continue:active,
  .notfound-page__continue:active,
  .cart-page__continue--empty:active,
  .cart-summary__checkout:active,
  .checkout-summary__submit:active,
  .account-btn:active,
  .cart-summary__coupon-btn:active {
    transform: none;
  }
}

/* Опции товара (product.twig, node 150:1078 → Frame 35199): три пилюли
   60 / 90 / 120 kaps, 110x52 с шагом 6px. Радиокнопку прячем и красим
   саму пилюлю — так состояние видно и клавиатурой, и мышью. */

.product-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-18);
  margin-bottom: var(--space-24);
}

.product-options__group {
  margin: 0;
  padding: 0;
  border: 0;
}

.product-options__label {
  padding: 0;
  margin-bottom: var(--space-12);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.325px;
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.product-options__required {
  color: #d0342c;
}

.product-options__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.product-options__pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 6.875rem;
  min-height: 3.25rem;
  padding: 0.375rem 1.5rem;
  border: 1px solid var(--color-border-cream);
  border-radius: 0.375rem;
  background-color: var(--color-input-bg);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

/* Прячем нативный кружок, но оставляем его доступным для фокуса и Tab. */
.product-options__pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.product-options__pill-text {
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-dark);
  white-space: nowrap;
}

.product-options__pill-price {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.product-options__pill:hover {
  border-color: var(--color-brand-gold-light);
}

.product-options__pill:has(input:checked) {
  border-color: var(--color-brand-gold);
  background-color: rgba(169, 119, 45, 0.08);
}

.product-options__pill:has(input:focus-visible) {
  outline: 2px solid var(--color-brand-gold);
  outline-offset: 2px;
}

.product-options__select {
  width: 100%;
  max-width: 21.8125rem;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--color-border-cream);
  border-radius: 0.375rem;
  background-color: var(--color-input-bg);
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text-dark);
  transition: border-color var(--transition-fast);
}

.product-options__select:hover {
  border-color: var(--color-brand-gold-light);
}

/* Бренд, код товара и таблица состава на карточке (product.twig).
   Собраны на штатных полях OpenCart: manufacturer, model и атрибутах. */

.product-page__reviews {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.product-page__specs {
  list-style: none;
  margin: 0 0 var(--space-24);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-32);
}

.product-page__spec {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 0.875rem;
}

.product-page__spec-label {
  color: var(--color-text-muted);
}

.product-page__spec-value {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-dark);
}

.product-page__spec-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-gold);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.product-page__spec-link svg {
  width: 1rem;
  height: 1rem;
}

.product-page__spec-link:hover {
  color: var(--color-brand-gold-dark);
}

.product-specs {
  margin-bottom: 4rem;
}

.product-specs__list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border-cream);
  border-radius: 0.5rem;
  overflow: hidden;
}

.product-specs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-24);
  padding: 0.875rem 1.5rem;
}

/* Зебра вместо разделителей: спокойнее на кремовом фоне страницы. */
.product-specs__row:nth-child(odd) {
  background-color: var(--color-surface-cream-alt);
}

.product-specs__key {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.product-specs__value {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-dark);
}

@media (max-width: 575px) {
  .product-specs__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ------------------------------------------------------------------ *
 * Карточка товара: подложка, вкладки описания, плитки преимуществ
 * Макет — node 150:1078. Замеры по рендеру: подложка #FFFCFA (это
 * rgba(255,255,255,0.6) поверх кремового фона), плитки — чистый #FFFFFF.
 * ------------------------------------------------------------------ */

.product-page__card {
  /* Вынос за контентную сетку, как Rectangle 9459 в макете. */
  margin: 0 calc(-1 * var(--space-48)) 4rem;
  padding: var(--space-48);
  border-radius: 1rem;
  background-color: var(--color-surface-card, rgba(255, 255, 255, 0.6));
}

.product-page__card .product-page__layout {
  margin-bottom: var(--space-48);
}

/* --- Строка покупки: степпер и цена рядом, кнопка во всю ширину ---
   node 295:2404/292:2331 — цена сидит сразу за степпером (gap 21px), а не
   прижата к правому краю: justify-content:space-between растягивал её на
   всю ширину колонки. */

.product-page__buy-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.3125rem;
  margin-bottom: var(--space-24);
}

.product-page__buy-row .product-page__price {
  margin: 0;
}

.product-page__add {
  width: 100%;
}

/* --- Низ: описание слева, преимущества справа --- */

.product-page__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* 20px per Figma (description 299:2475 x=272 w=678, benefits 299:2174
     x=970): was var(--space-48) (48px), squeezing both columns to 664px. */
  gap: 1.25rem;
  align-items: start;
}

/* --- Вкладки --- */

.product-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--color-border-cream);
  border-radius: 0.5rem 0.5rem 0 0;
  border-bottom: 0;
  overflow: hidden;
}

.product-tabs__btn {
  padding: 1rem 2rem;
  border: 0;
  border-right: 1px solid var(--color-border-cream);
  background: none;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.product-tabs__btn:last-child {
  border-right: 0;
}

.product-tabs__btn:hover {
  color: var(--color-text-dark);
}

.product-tabs__btn.is-active {
  background-color: var(--color-text-white);
  color: var(--color-text-dark);
  /* Золотая подсветка активной вкладки — тем же приёмом, что у полосы
     прогресса каруселей: тонкая линия внизу. */
  box-shadow: inset 0 -0.1875rem 0 var(--color-brand-gold);
}

.product-tabs__panels {
  padding: var(--space-32);
  border: 1px solid var(--color-border-cream);
  border-radius: 0 0 0.5rem 0.5rem;
  background-color: var(--color-text-white);
}

.product-tabs__panel {
  display: none;
}

.product-tabs__panel.is-active {
  display: block;
}

/* Внутри вкладки таблица уже в белой панели — рамка была бы двойной. */
.product-tabs__panel .product-specs__list {
  border: 0;
  border-radius: 0;
}

/* --- Плитки преимуществ --- */

.product-benefits__lead {
  margin: -0.75rem 0 var(--space-24);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.product-benefits__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
}

.product-benefits__tile {
  padding: 1.5625rem;
  border: 1px solid var(--color-border-cream);
  border-radius: 0.75rem;
  background-color: var(--color-text-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-smooth);
}

.product-benefits__tile:hover {
  border-color: var(--color-brand-gold-light);
  box-shadow: 0 0.625rem 1.5rem var(--color-shadow-soft);
}

.product-benefits__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-18);
  border-radius: 0.75rem;
  background-color: rgba(169, 119, 45, 0.1);
}

.product-benefits__title {
  margin: 0 0 var(--space-8);
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

.product-benefits__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-text-muted);
}

@media (max-width: 991px) {
  .product-page__card {
    margin-inline: 0;
    padding: var(--space-24);
  }

  .product-page__bottom {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575px) {
  .product-page__buy-row {
    flex-wrap: wrap;
  }

  .product-benefits__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-tabs__btn {
    flex: 1 1 auto;
    padding: 0.875rem 1.125rem;
    font-size: 0.875rem;
  }
}

.product-page__intro {
  margin: 0 0 var(--space-18);
  max-width: 56ch;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--color-text-muted);
}

/* Правки после первого прогона вкладок:
   1) четыре вкладки не влезали в колонку и переносились второй строкой —
      ужимаем и, если и этого мало, даём ленте горизонтальную прокрутку;
   2) описание несло собственную рамку и padding, из-за чего внутри белой
      панели вкладки рисовалась вторая карточка. */

.product-tabs__nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.product-tabs__btn {
  flex: 0 0 auto;
  padding: 0.9375rem 1.25rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.product-tabs__panel .product-page__description-body {
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* На узком экране строка «рейтинг / отзывы / наличие» переносилась посреди
   фразы («6 / opinie», «W / magazynie»). Переносим её целыми блоками. */
.product-page__meta {
  flex-wrap: wrap;
}

.product-page__reviews,
.product-page__stock {
  white-space: nowrap;
}

/* Заголовок блока похожих товаров в макете набран капсом и крупнее
   секционных — в отличие от «Szczegółowy opis produktu» рядом. */
.product-page__related .product-page__section-title {
  font-size: 2.25rem;
  text-transform: uppercase;
}

/* Единый мобильный ритм страницы товара: до 768px внутренние поля не
   должны съедать ширину контента, особенно в карточке, описании и форме
   покупки. Сохраняем touch-friendly размеры контролов. */
@media (max-width: 768px) {
  .product-page__container {
    padding-inline: 1rem;
  }

  .product-page__card {
    margin-inline: 0;
    padding-inline: 0;
    border-radius: 0;
  }

  .product-page__layout {
    gap: 1.25rem;
    margin-bottom: 2rem;
  }

  .product-page__gallery,
  .product-page__info,
  .product-gallery__stage,
  .product-gallery__thumbs {
    min-width: 0;
  }

  .product-page__title {
    margin-bottom: 1rem;
    font-size: clamp(1.5rem, 7vw, 1.875rem);
    line-height: 1.18;
  }

  .product-page__meta {
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .product-page__quantity-note {
    margin-bottom: 1rem;
  }

  .product-page__specs {
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
  }

  .product-options {
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .product-options__group {
    min-width: 0;
  }

  .product-options__pills {
    gap: 0.5rem;
  }

  .product-options__pill {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.625rem 0.75rem;
  }

  .product-options__select {
    max-width: none;
    padding: 0.75rem 0.875rem;
  }

  .product-page__divider {
    margin-bottom: 1rem;
  }

  .product-page__buy-row {
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .product-page__price {
    font-size: 1.75rem;
  }

  .product-page__qty-btn {
    width: 2.75rem;
  }

  .product-page__qty-input {
    width: 2.75rem;
  }

  .product-page__add {
    padding: 0.875rem 1rem;
  }

  .product-page__bottom {
    gap: 2rem;
  }

  .product-tabs__panels {
    padding: 1rem;
  }

  .product-page__description-body {
    font-size: 0.9375rem;
    line-height: 1.5rem;
  }

  .product-specs__row {
    gap: 2px;
    padding: 0.75rem 1rem;
  }

  .product-benefits__tile {
    padding: 1rem;
  }
}

/* Одна горизонтальная сетка на всём сайте. Раньше отдельные секции главной,
   карточка товара и внутренние панели имели свои 15/24px, из-за чего на
   телефоне соседние блоки начинались на разных X-координатах. */
@media (max-width: 768px) {
  .header__container,
  .hero__container,
  .cat-carousel__container,
  .product-grid-section__container,
  .blog-section__container,
  .insta-section__container,
  .usp__container,
  .about-hero__container,
  .about-mission__container,
  .about-values__container,
  .catalog-page__container,
  .article-page__container,
  .cart-page__container,
  .checkout-page__container,
  .contact-page__container,
  .contact-faq__container,
  .success-page__container,
  .legal-page__container,
  .notfound-page__container,
  .account-page__container,
  .product-page__container {
    padding-left: var(--container-padding-inline);
    padding-right: var(--container-padding-inline);
  }

  .product-page__card,
  .product-page__card .product-page__layout,
  .product-page__card .product-page__bottom {
    width: 100%;
  }

  .product-page__card .product-page__layout,
  .product-page__card .product-page__bottom {
    padding-inline: 0;
  }

  .product-page__card .product-tabs__panels {
    padding-inline: 1rem;
  }
}

/* На мобильных все товарные блоки остаются двухколоночными: каталог,
   поиск, спецпредложения, похожие товары и товары на главной. */
@media (max-width: 768px) {
  .product-grid,
  .product-grid--static,
  .product-grid--with-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
    padding: 0;
    margin-inline: 0;
    overflow: visible;
  }

  .product-grid > .product-card,
  .product-grid--static > .product-card {
    min-width: 0;
    width: 100%;
    max-width: none;
    flex: none;
    padding: 0.375rem 0.375rem 0.875rem;
    border-radius: 0.375rem;
  }

  .product-grid .product-card__image,
  .product-grid--static .product-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .product-grid .product-card__body,
  .product-grid--static .product-card__body {
    gap: 0.875rem;
    margin-top: 0.875rem;
  }

  .product-grid .product-card__info,
  .product-grid--static .product-card__info {
    gap: 0.75rem;
  }

  .product-grid .product-card__name,
  .product-grid--static .product-card__name {
    font-size: 0.9375rem;
    line-height: 1.25rem;
    text-align: center;
  }

  .product-grid .product-card__add,
  .product-grid--static .product-card__add {
    padding: 0.75rem 0.5rem;
    font-size: 0.8125rem;
  }
}

/* Одинаковая высота карточек в каждой строке. Контент может занимать разное
   число строк, но цена и CTA всегда остаются на одной нижней линии. */
.product-grid > .product-card,
.product-grid--static > .product-card {
  height: 100%;
  align-self: stretch;
}

.product-grid > .product-card .product-card__body,
.product-grid--static > .product-card .product-card__body {
  flex: 1 1 auto;
}

.product-grid > .product-card .product-card__info,
.product-grid--static > .product-card .product-card__info {
  flex: 1 1 auto;
}

.product-grid > .product-card .product-card__add,
.product-grid--static > .product-card .product-card__add {
  margin-top: auto;
}

@media (max-width: 575px) {
  .product-page__related .product-page__section-title {
    font-size: 1.5rem;
  }
}
/* OCFilter — compact sidebar treatment aligned with the OptimaLife catalog */
.catalog-sidebar__filter {
  margin-top: 1.125rem;
}

/* .ocf-container/.ocf-header/.ocf-body/.ocf-filter/.ocf-filter-header/
   .ocf-value-name — see ocfilter-overrides.css, loaded after this file
   and cited to Figma node 135:1339; this file's older Cinzel-font
   versions of those rules were dead (always overridden). */

.catalog-sidebar__filter .ocf-btn {
  border-radius: 0;
}

@media (max-width: 767px) {
  .catalog-sidebar__filter {
    margin-top: 0.875rem;
  }

  .catalog-sidebar__tags {
    margin-top: 0.875rem;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding-inline: 1rem;
  }

  .catalog-page__container {
    padding: 1.25rem 1rem 0;
  }

  .catalog-page__layout {
    gap: 1rem;
  }

  .catalog-sidebar__card {
    padding: 1rem;
  }

  .breadcrumb {
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    gap: 0.5rem;
    font-size: 0.75rem;
  }

  .product-grid--with-sidebar {
    gap: 0.75rem;
  }

  .product-grid--with-sidebar > .product-card {
    min-width: 0;
    width: 100%;
    --product-card-pad: 0.375rem;
    padding: var(--product-card-pad) var(--product-card-pad) 1rem;
    border-radius: 0.375rem;
  }

  .product-grid--with-sidebar .product-card__body {
    gap: 1.125rem;
    margin-top: 0.875rem;
  }

  .product-grid--with-sidebar .product-card__info {
    gap: 0.875rem;
  }
}

/* Must remain after the shared mobile grid rules above: the homepage product
   section is a horizontal rail in the Figma mobile frame. Scoped to
   #common-home — was bare .product-grid, which also matches the catalog/
   category grid (product/catalog.twig) and turned it into a carousel too. */
@media (max-width: 768px) {
  #common-home .product-grid {
    display: flex;
    grid-template-columns: none;
    gap: 1rem;
    overflow-x: auto;
  }

  #common-home .product-grid > .product-card {
    flex: 0 0 13.75rem;
    width: 13.75rem;
    min-width: 13.75rem;
    max-width: 13.75rem;
  }
}