/**
 * Тема 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%;
}

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: 15px;
  --font-size-xs: 12px;
  --font-size-xl: 20px;
  --font-size-display: 86px;
  --line-height-base: 24px;
  --line-height-display: 96px;
  --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: 820px;
  --header-promo-height: 44px;
  --header-nav-height: 94px;
  --header-logo-width: 221px;
  --header-logo-height: 58px;
  --header-nav-lang-gap: 170px;
  --cart-badge-size: 19px;
  --container-padding-inline: 24px;
  --container-max-width: 1376px;
  --border-width-hairline: 1px;
  --icon-size-sm: 24px;
  --icon-size-md: 28px;
  --icon-btn-size: 48px;
  --radius-pill: 100px;
  --radius-circle: 50px;
  --opacity-muted: 0.5;
  --space-6: 6px;
  --space-7: 7px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-18: 18px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --icon-size-xs: 10px;
}

/* Промо-плашка (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: 10px;
  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: 6px;
    padding-inline: 16px;
  }

  .header__promo-text {
    padding-inline: 0;
    font-size: 13px;
    line-height: 20px;
  }
}

/* Навигационная панель (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: 10px;
  height: 7px;
  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: 240px;
  margin-top: var(--space-12);
  padding: var(--space-24);
  background-color: var(--color-surface-cream-alt);
  border-radius: 6px;
  box-shadow: 0 12px 24px 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: 180px;
}

.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: 5px;
  width: 32px;
  height: 32px;
  padding: 4px;
  border: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.header__burger-line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 4px;
  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: 11px;
  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: 3px;
  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;
}

.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;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  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: 900px;
}

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

.hero__subtitle {
  margin: var(--space-24) 0 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-white);
}

.hero__divider {
  width: 363px;
  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: 251px;
  margin-top: var(--space-32);
  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: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 32px;
  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: 14px;
  height: 6px;
  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: 23px;
  background-color: var(--color-text-white);
}

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

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

  .hero__container {
    padding-block: var(--space-24) 64px;
  }

  .hero__title {
    font-size: 32px;
    line-height: 38px;
  }
}

/* Полоса преимуществ (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: 142px;
  margin: 0 auto;
  padding: var(--space-24) var(--container-padding-inline);
  list-style: none;
}

.usp__item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.usp__icon {
  width: 32px;
  height: 32px;
  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: 76px var(--container-padding-inline) 65px;
}

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

.cat-carousel__title {
  margin: 0;
  font-size: 40px;
  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: 16px;
  font-weight: var(--font-weight-bold);
  color: #26231f;
  text-decoration: none;
  white-space: nowrap;
}

.cat-carousel__link-icon {
  width: 14px;
  height: 14px;
}

/* Общий компонент стрелок карусели (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: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: #ffffff;
  box-shadow: 0 2px 3px var(--color-shadow-soft);
  cursor: pointer;
}

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

/* Без явного размера inline-svg растягивался по ширине кнопки и вылезал
   за пределы круга с тенью (52x87 в поле 52x52). Размер — из статики. */
.carousel-nav__icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  fill: none;
  stroke: var(--color-text-dark);
  stroke-width: 1.5;
  flex-shrink: 0;
}

.cat-carousel__track {
  display: flex;
  gap: 21px;
  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 400px;
  height: 419px;
  border-radius: 6px;
  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: 112px;
  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: 3px;
  margin-top: 63px;
  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) {
  .cat-carousel__title {
    font-size: 28px;
  }

  .cat-carousel__head {
    flex-wrap: wrap;
  }

  .cat-carousel__card {
    flex-basis: 280px;
    height: 293px;
  }
}

/* Карточка товара в сетке (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: 10px;
  padding: var(--product-card-pad) var(--product-card-pad) 20px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.6);
}

/* Стикер скидки (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) + 13px);
  z-index: 1;
  padding: 7px 4px 8px;
  border-radius: 4px;
  background-color: var(--color-badge-discount-bg);
  color: var(--color-text-white);
  font-size: 12px;
  font-weight: 600;
  line-height: 12px;
}

/* Плашка отсутствия товара живёт в том же слоте, что и скидка. Скидок и
   нулевого остатка одновременно не бывает: товар без остатка не участвует
   в акциях, а если это когда-то совпадёт — плашки встанут друг под друга. */
.product-card__badge--stock {
  top: calc(var(--product-card-pad) + 13px);
  background-color: var(--color-text-dark);
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 8px;
}

.product-card__badge + .product-card__badge--stock {
  top: calc(var(--product-card-pad) + 13px + 27px + 6px);
}

/* Кнопка недоступного товара остаётся кнопкой (её читает скринридер),
   но не кликается и визуально гасится. */
.product-card__add--disabled,
.product-card__add--disabled:hover {
  background-color: var(--color-text-dark);
  opacity: 0.45;
  cursor: not-allowed;
}

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

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

.product-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  margin-top: 20px;
}

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

.product-card__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  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: 18px;
  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: 17px;
  height: 16px;
}

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

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

.product-card__price {
  margin: 0;
  font-size: 20px;
  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__image-link {
  display: block;
  width: 100%;
}

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

.product-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  margin-top: 20px;
}

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

.product-card__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  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: 18px;
  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: 17px;
  height: 16px;
}

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

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

.product-card__price {
  margin: 0;
  font-size: 20px;
  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__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: 48px;
  height: 48px;
  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: 107px var(--container-padding-inline) 26px;
}

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

.product-grid-section__title {
  margin: 0;
  font-size: 44px;
  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: 16px;
  font-weight: var(--font-weight-bold);
  color: #26231f;
  text-decoration: none;
  white-space: nowrap;
}

.product-grid-section__link-icon {
  width: 14px;
  height: 14px;
}

.product-grid-section__progress {
  height: 3px;
  /* 8px здесь + 24px нижнего padding у трека = те же 32px отбивки.
     Padding треку нужен, чтобы hover-подъём карточки и её тень не
     обрезались краем скролл-контейнера, см. .product-grid ниже. */
  margin-top: 8px;
  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: 25px;
  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: 6px var(--product-grid-bleed) 24px;
  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: 260px;
  }
}

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

  .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: 81px var(--container-padding-inline) 32px;
}

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

.blog-section__title {
  margin: 0;
  font-size: 44px;
  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: 16px;
  font-weight: var(--font-weight-bold);
  color: #26231f;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: border-color 0.2s ease;
}

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

.blog-section__link-icon {
  width: 14px;
  height: 14px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 39px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8, 8px);
  text-decoration: none;
  color: inherit;
}

.blog-card__image-wrap {
  height: 249px;
  border-radius: 6px;
  overflow: hidden;
}

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

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.blog-card__date {
  margin: 0;
  font-size: 15px;
  line-height: 26px;
  color: #616161;
}

.blog-card__title {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--font-weight-bold);
  color: #2b2a29;
}

.blog-card__excerpt {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  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: 1fr;
  }

  .blog-section__title {
    font-size: 28px;
  }

  .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: 12px;
  }

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

  .blog-card__title {
    font-size: 15px;
    line-height: 21px;
  }

  .blog-card__excerpt {
    font-size: 13px;
    line-height: 19px;
  }
}

/* Homepage product rail: unlike catalog/search grids, Figma keeps this as a
   horizontal carousel on mobile with the next card peeking into view. */
@media (max-width: 768px) {
  .product-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    padding-right: var(--container-padding-inline);
  }

  .product-grid > .product-card {
    flex: 0 0 220px;
    width: 220px;
    min-width: 220px;
    max-width: 220px;
  }
}

/* Homepage blog cards must use the two grid columns on narrow screens.
   Older shared mobile rules give .blog-card a fixed 260px width, which
   causes horizontal overflow and prevents the Figma two-up layout. */
@media (max-width: 768px) {
  #common-home .blog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
  }

  #common-home .blog-grid > .blog-card {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

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

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

  #common-home .blog-grid .blog-card__title {
    font-size: 15px;
    line-height: 21px;
  }

  #common-home .blog-grid .blog-card__excerpt {
    font-size: 13px;
    line-height: 19px;
  }
}

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

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

.insta-section__title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 46px;
  font-size: 44px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.insta-section__title-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  margin-left: -8px;
}

.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: 20px;
}

.insta-grid__item {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  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: 28px;
    gap: 10px;
  }

  .insta-section__title-icon {
    width: 32px;
    height: 32px;
  }

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

/* Мобильная шапка (< 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: 51px;
    padding-inline: 15px;
  }

  .header__logo-image {
    width: 145px;
    height: 38px;
  }

  .header__utils {
    gap: 16px;
  }

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

  .header__cart-icon-wrap {
    width: 24px;
    height: 24px;
  }

  .header__cart-icon {
    width: 24px;
    height: 24px;
  }

  .header__cart-badge {
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    font-size: 10px;
  }

  .header__burger {
    width: 32px;
    height: 32px;
    gap: 5px;
    padding: 4px;
  }

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

  /* Открытое меню: гамбургер превращается в крестик */
  .header__burger[aria-expanded="true"] .header__burger-line:nth-child(1) {
    transform: translateY(7px) 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(-7px) 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: 23px 15px;
    background-color: #15110a;
  }

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

  .header__mobile-actions .header__action {
    width: 40px;
    height: 40px;
    padding: 10px;
    background-color: transparent;
  }

  .header__mobile-actions .header__action-icon {
    width: 28px;
    height: 28px;
  }

  /* Пункты меню: 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: 22px 21px;
    font-size: 20px;
    line-height: 30px;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    color: var(--color-text-white);
  }

  .header__menu-toggle {
    padding-block: 22px 21px;
  }

  .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: 16px 0;
    border-bottom: 0;
    gap: 12px;
  }

  .header__lang-item,
  .route-common-home .header__lang-item {
    font-size: 15px;
    line-height: 22.5px;
    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: 16px;
    background-color: rgba(255, 255, 255, 0.3);
  }
}

.footer {
  background-color: var(--color-surface-footer);
  color: var(--color-text-white);
  padding: 56px 0 32px;
}

.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: 48px 40px;
  justify-content: space-between;
}

.footer__col {
  min-width: 160px;
}

.footer__col--newsletter {
  max-width: 349px;
}

.footer__heading {
  margin: 0 0 var(--space-24);
  font-size: 18px;
  line-height: 28px;
  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, 16px);
}

.footer__contact-label {
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-white);
  opacity: var(--opacity-muted);
}

.footer__contact-value {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 30px;
  color: var(--color-text-white);
  text-decoration: none;
}

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

.footer__contact-value--email {
  font-size: 18px;
}

.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: 30px;
  height: 30px;
  margin-top: var(--space-8, 8px);
  color: #898885;
}

.footer__social-icon {
  width: 24px;
  height: 24px;
}

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

.footer__list a {
  display: block;
  font-size: 15px;
  line-height: 36px;
  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: 51px;
  padding: 12px 115px 12px 16px;
  border: var(--border-width-hairline) solid #e4e2df;
  border-radius: var(--radius-pill);
  background-color: #f5f4f2;
  color: var(--color-text-dark);
  font-size: 15px;
  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: 51px;
  padding: 0 24px;
  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: 16px;
  cursor: pointer;
  white-space: nowrap;
}

.footer-newsletter__consent {
  margin: 15px 0 0;
  font-size: 13px;
  line-height: 20px;
  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, 8px) 0 0;
  font-size: 13px;
  min-height: 18px;
}

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

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

.footer__divider {
  margin: 40px 0 24px;
  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: 24px;
}

.footer__logo img {
  height: 56px;
  width: auto;
  display: block;
}

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

.footer__legal {
  display: flex;
  gap: 40px;
  margin-left: auto;
}

.footer__legal a {
  font-size: 15px;
  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: 32px;
  }

  .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, 5px);
  margin-bottom: var(--space-24);
}

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

.breadcrumb__home svg {
  width: 14px;
  height: 13px;
}

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

.about-hero {
  position: relative;
  min-height: 808px;
  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: 115px var(--container-padding-inline) 64px;
}

.about-hero__title {
  margin: 32px 0 0;
  max-width: 900px;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: 56px;
  line-height: 66px;
  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: 363px;
  max-width: 100%;
  height: 2px;
  margin-top: var(--space-24);
  background: var(--gradient-divider-gold);
}

.about-hero__subtitle {
  max-width: 907px;
  margin: var(--space-24) 0 0;
  font-size: 20px;
  line-height: 30px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-white);
}

.about-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: auto;
  padding-top: 64px;
}

.about-hero__stat {
  flex: 1 1 200px;
  text-align: center;
}

.about-hero__stat-number {
  margin: 0;
  font-size: 48px;
  line-height: 56px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
}

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

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

.about-mission__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  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: 48px;
  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: 16px;
  line-height: 28px;
  color: var(--color-text-muted);
}

.about-mission__card {
  margin-top: 32px;
  padding: 33px;
  border-radius: 10px;
  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, 16px);
  font-size: 20px;
  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: 15px;
  color: var(--color-text-muted);
}

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

.about-mission__image {
  display: block;
  width: 100%;
  height: 667px;
  border-radius: 6px;
  object-fit: cover;
}

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

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

.about-values__header {
  max-width: 621px;
  margin: 0 auto 64px;
  text-align: center;
}

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

.about-values__subtitle {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-muted);
}

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

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

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

.about-values__icon svg {
  width: 32px;
  height: 32px;
}

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

.about-values__card-text {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-muted);
}

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

  .about-hero__stats {
    gap: 24px;
  }

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

  .about-mission__container {
    grid-template-columns: 1fr;
  }

  .about-mission__image {
    height: 400px;
    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: 90px;
    padding-bottom: 40px;
  }

  .about-hero__title {
    font-size: 32px;
    line-height: 38px;
  }

  .about-hero__subtitle {
    font-size: 16px;
    line-height: 26px;
  }

  .about-hero__stat-number {
    font-size: 32px;
    line-height: 38px;
  }

  .about-mission,
  .about-values {
    padding: 56px 0;
  }

  .about-mission__title,
  .about-values__title {
    font-size: 32px;
  }

  .about-values__grid {
    grid-template-columns: 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: 64px;
}

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

.catalog-page__title {
  margin: 0 0 32px;
  font-size: 44px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.catalog-page__layout {
  display: grid;
  grid-template-columns: 328px 1fr;
  gap: 24px;
  align-items: start;
}

.catalog-sidebar__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: 6px;
  background-color: var(--color-surface-cream-alt);
}

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

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

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

.catalog-category-list a {
  display: block;
  padding-block: 8px;
  font-size: 15px;
  color: var(--color-text-muted);
  text-decoration: none;
}

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

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

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

.catalog-page__description {
  max-width: 720px;
  margin: -16px 0 32px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

.catalog-page__description p {
  margin: 0 0 12px;
}

.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: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e4ddd2;
}

.catalog-main__results {
  margin: 0;
  font-size: 14px;
  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: 14px;
  color: var(--color-text-muted);
}

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

.catalog-main__empty {
  padding: 48px 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: 16px 48px;
  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: 40px;
  display: flex;
  justify-content: center;
}

.catalog-pagination .pagination,
.account-pagination .pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  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: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e4ddd2;
  border-radius: 4px;
  font-size: 13px;
  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 {
    grid-template-columns: 1fr;
  }

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

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

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

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

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

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

.catalog-page--search,
.catalog-page--special {
  padding-bottom: 80px;
}

.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: 8px;
  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: 13px;
  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: 14px 20px;
  border: 1px solid var(--color-border-cream);
  border-radius: 6px;
  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: 15px 40px;
  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: 14px;
  color: var(--color-text-muted);
  cursor: pointer;
}

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

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

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

@media (max-width: 991px) {
  .search-form__row {
    grid-template-columns: 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: 64px;
}

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

.breadcrumb__link {
  font-size: 13px;
  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;
  gap: 64px;
  margin-bottom: 64px;
}

.product-page__main-image {
  position: relative;
  border-radius: 6px;
  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;
}

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

.product-gallery {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 20px;
  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: 10px;
  max-height: 600px;
  overflow-y: auto;
  scrollbar-width: none;
}

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

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

.product-gallery__thumb img {
  width: 81px;
  height: 81px;
  object-fit: cover;
  border-radius: 4px;
}

.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: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: var(--color-text-white);
  box-shadow: 0 2px 3px 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: 12px;
}

.product-gallery__nav--next {
  right: 12px;
}

.product-gallery__nav:hover {
  box-shadow: 0 6px 16px 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: 16px;
  z-index: 1;
  padding: 7px 10px 8px;
  border-radius: 0 4px 4px 0;
  background-color: rgba(246, 95, 53, 0.9);
  color: var(--color-text-white);
  font-size: 13px;
  font-weight: 600;
}

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

.product-page__wishlist svg {
  width: 24px;
  height: 24px;
}

.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 24px;
  font-size: 36px;
  line-height: 46px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.product-page__meta {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
}

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

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

.product-page__stars svg {
  width: 17px;
  height: 16px;
}

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

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

.product-page__stock svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.product-page__quantity-note {
  margin: 0 0 24px;
  font-size: 16px;
  color: var(--color-text-muted);
}

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

.product-page__price {
  margin: 0 0 24px;
  font-size: 32px;
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-gold);
}

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

.product-page__buy-row {
  display: flex;
  gap: var(--space-12);
}

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

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

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

.product-page__qty-input {
  width: 56px;
  border: 0;
  border-left: 1px solid #d2d2d2;
  border-right: 1px solid #d2d2d2;
  text-align: center;
  font-size: 16px;
  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__section-title {
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

.product-page__description {
  max-width: 800px;
  margin-bottom: 64px;
}

.product-page__description-body {
  padding: 32px;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 10px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

.product-page__description-body h3 {
  margin: 24px 0 12px;
  font-size: 20px;
  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 16px;
}

.product-page__description-body ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.product-page__description-body li {
  margin-bottom: 8px;
}

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

@media (max-width: 991px) {
  .product-page__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .product-page__title {
    font-size: 28px;
    line-height: 36px;
  }

}

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

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

  .product-page__description-body {
    padding: 20px;
  }

}

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

.article-page {
  background-color: #ffffff;
  padding: 32px 0 64px;
}

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

.article-page__card {
  max-width: 1146px;
  margin: 0 auto 64px;
  padding: 40px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.6);
}

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

.article-page__title {
  margin: 0 0 32px;
  font-size: 36px;
  line-height: 48px;
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

.article-page__image {
  margin-bottom: 32px;
  border-radius: 6px;
  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: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

.article-page__body p,
.legal-page__body p {
  margin: 0 0 24px;
}

.article-page__body h3,
.legal-page__body h3 {
  margin: 40px 0 16px;
  font-size: 26px;
  line-height: 36px;
  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 24px;
  padding: 0;
  list-style: none;
}

.article-page__body li,
.legal-page__body li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
}

.article-page__body li::before,
.legal-page__body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  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: 14px;
  color: #94918e;
}

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

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

  .article-page__title {
    font-size: 28px;
    line-height: 36px;
  }

  .article-page__body h3,
.legal-page__body h3 {
    font-size: 22px;
    line-height: 30px;
  }

  .article-page__related-title {
    font-size: 28px;
  }
}

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

.cart-page {
  background-color: var(--color-surface-cream);
  padding: 32px 0 96px;
}

.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: 48px;
  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: 9px 17px;
  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: 20px;
  height: 20px;
}

.cart-page__steps {
  display: flex;
  align-items: center;
  gap: var(--space-16, 16px);
  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: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(169, 119, 45, 0.3);
  font-size: 14px;
  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: 16px 20px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 21px;
}

.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) 416px;
  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: 10px;
  background-color: #ffffff;
  overflow: hidden;
}

.cart-card__head {
  padding: 24px;
  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: 24px;
  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: 128px;
  height: 128px;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  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: 16px;
  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: 4px 0 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

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

.cart-item__stock-dot {
  width: 8px;
  height: 8px;
  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: 16px;
}

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

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

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

.cart-item__qty-input {
  width: 48px;
  border: 0;
  border-left: 1px solid #d2d2d2;
  border-right: 1px solid #d2d2d2;
  text-align: center;
  font-size: 16px;
  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: 14px;
  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: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: pointer;
}

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

.cart-item__remove img {
  width: 20px;
  height: 20px;
}

.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: 20px;
  height: 20px;
}

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: 25px;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 10px;
  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: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-heading-dark);
}

.cart-summary__coupon-label img {
  width: 16px;
  height: 16px;
}

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

.cart-summary__coupon-input {
  flex: 1;
  min-width: 0;
  height: 47px;
  padding: 12px 16px;
  border: 1px solid #e4e2df;
  border-radius: 6px;
  font-size: 14px;
  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 20px;
  height: 47px;
  border: 0;
  border-radius: 6px;
  background-color: var(--color-brand-gold);
  color: #ffffff;
  font-size: 14px;
  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: -8px;
}

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

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

.cart-summary__note {
  padding: 17px;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 10px;
  background-color: rgba(169, 119, 45, 0.05);
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-muted);
}

.cart-summary__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: 54.5px;
  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: 20px;
  height: 20px;
}

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

.cart-summary__secure img {
  width: 20px;
  height: 20px;
}

.cart-page__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  padding: 96px 24px;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 10px;
  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: 16px 32px;
  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: 32px;
  }

  .cart-page__steps {
    display: none;
  }
}

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

  .cart-item {
    flex-direction: column;
  }

  .cart-item__row {
    flex-wrap: wrap;
  }
}

/* Оформление заказа, этап 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);
  padding: 32px 0 96px;
}

.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: 48px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.checkout-page__steps {
  display: flex;
  align-items: center;
  gap: 16px;
  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: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(169, 119, 45, 0.3);
  font-size: 14px;
  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: 16px 20px;
  border-radius: 10px;
  background-color: rgba(220, 53, 69, 0.08);
  color: #b3212f;
  font-size: 14px;
  line-height: 21px;
}

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

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

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

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

.checkout-card__icon {
  width: 24px;
  height: 24px;
  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: 24px;
}

.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: 14px;
  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: 47px;
  padding: 12px 16px;
  border: 1px solid #e4e2df;
  border-radius: 6px;
  font-size: 15px;
  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: 13px;
  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: 18px;
  border: 2px solid #e4e2df;
  border-radius: 10px;
  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: 20px;
  height: 20px;
  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: 3px;
  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: 16px;
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
  font-variant-numeric: tabular-nums;
}

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

.checkout-options--grid .checkout-option {
  padding: 16px 18px;
}

.checkout-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: 25px;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 10px;
  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, 16px);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid rgba(180, 135, 70, 0.1);
}

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

.checkout-summary__thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  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: 6px;
}

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

.checkout-summary__product-variant {
  margin: 0;
  font-size: 13px;
  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: 14px;
  color: var(--color-text-muted);
}

.checkout-summary__product-total {
  font-size: 16px;
  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: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--color-heading-dark);
}

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

.checkout-summary__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54.5px;
  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: 12px;
  line-height: 18px;
  color: var(--color-text-muted);
  cursor: pointer;
}

.checkout-summary__agree input {
  margin-top: 3px;
  flex-shrink: 0;
}

.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: 25px;
  border-top: 1px solid rgba(180, 135, 70, 0.1);
  font-size: 13px;
  color: var(--color-text-muted);
}

.checkout-summary__secure img {
  width: 20px;
  height: 20px;
}

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

  .checkout-page__title {
    font-size: 32px;
  }

  .checkout-card__grid {
    grid-template-columns: 1fr;
  }

  .checkout-options--grid {
    grid-template-columns: 1fr;
  }
}

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

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

  .checkout-card {
    padding: 20px;
  }

  .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);
  padding: 32px 0 0;
}

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

.contact-page__title {
  margin: 24px 0 32px;
  font-size: 44px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.contact-page__intro {
  max-width: 640px;
  margin-bottom: 40px;
}

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

.contact-page__intro-text {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

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

.contact-page__side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-page__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.contact-card {
  display: flex;
  gap: 16px;
}

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

.contact-card__icon img {
  width: 24px;
  height: 24px;
}

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

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

.contact-card__value {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

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

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

.contact-page__notice-icon {
  width: 40px;
  height: 40px;
}

.contact-page__notice-text {
  margin: 0;
  max-width: 260px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-gold);
}

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

.contact-form__title {
  margin: 0 0 32px;
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}

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

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-field label {
  font-size: 13px;
  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: 14px 20px;
  border: 1px solid #e4ddd1;
  border-radius: 6px;
  background-color: #f5f4f2;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text-dark);
}

.contact-field__textarea {
  resize: vertical;
  min-height: 120px;
}

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

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

.contact-field__error {
  font-size: 13px;
  color: #d0342c;
}

.contact-form__consent {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 20px;
  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: 8px;
  padding: 16px 40px;
  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: 64px 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 48px;
  font-size: 36px;
  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: 24px;
}

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

.contact-faq__question {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

.contact-faq__answer {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-muted);
}

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

  .contact-page__title {
    font-size: 32px;
  }

  .contact-faq__grid {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding: 32px 24px;
  }
}

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

  .contact-form__grid {
    grid-template-columns: 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: 96px 0 128px;
}

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

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

.success-page__title {
  margin: 0 0 24px;
  font-size: 32px;
  line-height: 40px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

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

.success-page__message {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

.success-page__message p {
  margin: 0 0 14px;
}

.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: 32px;
  padding: 16px 48px;
  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: 48px 0 80px;
  }

  .success-page__card {
    padding: 40px 24px;
  }

  .success-page__title {
    font-size: 24px;
    line-height: 32px;
  }

  .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: 32px 0 96px;
}

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

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

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

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

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

.notfound-page {
  background-color: var(--color-surface-cream);
  padding: 96px 0 128px;
}

.notfound-page__container {
  max-width: 640px;
  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: 120px;
  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: 32px;
  line-height: 40px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
}

.notfound-page__text {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

.notfound-page__continue {
  display: inline-block;
  margin-top: var(--space-32);
  padding: 16px 48px;
  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: 40px;
  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: 32px 24px;
  }

  .legal-page__title {
    font-size: 26px;
    line-height: 34px;
  }

  .notfound-page {
    padding: 48px 0 80px;
  }

  .notfound-page__code {
    font-size: 88px;
  }

  .notfound-page__title {
    font-size: 24px;
    line-height: 32px;
  }

  .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: 32px 0 96px;
}

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

.account-page__container--narrow {
  max-width: 920px;
}

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

.account-page__intro {
  margin: -16px 0 var(--space-32);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

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

.account-card + .account-card {
  margin-top: var(--space-24);
}

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

.account-card__text {
  margin: 0 0 var(--space-24);
  font-size: 15px;
  line-height: 24px;
  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: 20px 24px;
}

.account-form--single {
  grid-template-columns: 1fr;
  max-width: 460px;
}

.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, 16px);
  margin-top: var(--space-8);
}

.account-field select,
.account-field textarea {
  padding: 12px 16px;
  border: 1px solid #e4e2df;
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text-dark);
}

.account-field select {
  height: 47px;
}

.account-field textarea {
  min-height: 120px;
  resize: vertical;
}

.account-field__hint {
  font-size: 13px;
  color: var(--color-text-muted);
}

.account-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-muted);
  cursor: pointer;
}

.account-checkbox input {
  margin-top: 4px;
  flex-shrink: 0;
}

.account-radio-row {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  font-size: 15px;
  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: 15px 40px;
  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: 10px 22px;
  font-size: 14px;
}

.account-link {
  color: var(--color-brand-gold);
  font-size: 14px;
  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: 16px 20px;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 10px;
  background-color: var(--color-surface-cream);
  color: var(--color-heading-dark);
  font-size: 15px;
  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: 15px;
}

.account-table th,
.account-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(180, 135, 70, 0.15);
  text-align: left;
  vertical-align: top;
}

.account-table th {
  font-size: 13px;
  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: 16px 20px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 21px;
}

.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: 16px;
  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: 20px;
  border: 1px solid rgba(180, 135, 70, 0.2);
  border-radius: 10px;
}

.account-list__text {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  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: 1fr;
  }

  .account-page__title {
    font-size: 26px;
    line-height: 34px;
  }

  .account-card {
    padding: 24px;
  }
}

@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, 16px);
}

.account-table__thumb {
  width: 64px;
  height: 64px;
  border: 1px solid #f1f1f1;
  border-radius: 8px;
  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(380px, 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: 16px 18px;
  border: 1px solid var(--color-border-cream);
  border-radius: 12px;
  background-color: var(--color-text-white);
  box-shadow: 0 12px 32px var(--color-shadow-soft);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-dark);
  /* Стартовое состояние: чуть правее и меньше — «выплывает» из-за края. */
  opacity: 0;
  transform: translateX(16px) 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: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
}

.toast__icon svg {
  width: 16px;
  height: 16px;
}

.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 -4px 0 0;
  padding: 4px;
  border: 0;
  background: none;
  line-height: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 160ms ease;
}

.toast__close svg {
  width: 12px;
  height: 12px;
}

.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(16px) 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: 16px;
  background-color: #ffffff;
  box-shadow: 0 4px 24px 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: 15px 32px;
  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;
  }
}

/* Реквизиты продавца в подвале (обязательны по польскому праву).
   Появляются только когда заполнены языковые ключи text_seller_*. */

.footer__seller {
  margin-top: var(--space-32);
}

.footer__seller-line {
  margin: var(--space-6) 0 0;
  font-size: var(--font-size-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.footer__seller-line span + span {
  margin-left: var(--space-18);
}

/* ------------------------------------------------------------------ *
   Мобильная главная — Figma 375:1765.
   Ширина фрейма 375px, поля 15px, герой 557px.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .hero,
  .hero__slides {
    min-height: 557px;
  }

  .hero__container {
    padding-inline: 15px;
  }

  .hero__title {
    font-size: 32px;
    line-height: 38px;
  }

  .hero__subtitle {
    margin-top: 18px;
    font-size: 16px;
    line-height: normal;
  }

  .hero__divider {
    width: 167px;
    margin-top: 18px;
  }

  /* В макете кнопка растянута на всю ширину контента, текст и стрелка
     разнесены по краям */
  .hero__cta {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 14px 24px;
  }

  .hero__cta-text {
    font-size: 15px;
    line-height: 22.5px;
  }

  .hero__dots {
    gap: 5px;
  }

  .hero__dot {
    width: 14px;
    height: 6px;
    border-radius: 100px;
  }

  .hero__dot--active {
    width: 23px;
  }

  /* Секции главной: поля 15px и заголовки 20px, как во фрейме */
  .cat-carousel__container,
  .product-grid-section__container,
  .blog-section__container,
  .insta-section__container,
  .usp__container {
    padding-inline: 15px;
  }

  /* Вертикальный ритм макета рассчитан на десктоп: 107px сверху у «Wybrane»
     на телефоне съедали бы пол-экрана. Сжимаем примерно вдвое, сохраняя
     соотношение между секциями. */
  .cat-carousel__container {
    padding-block: 40px 34px;
  }

  .product-grid-section__container {
    padding-block: 56px 16px;
  }

  .blog-section__container {
    padding-block: 42px 20px;
  }

  .insta-section__container {
    padding-block: 32px;
  }

  .cat-carousel__head,
  .blog-section__head {
    margin-bottom: 28px;
  }

  .product-grid-section__head {
    margin-bottom: 22px;
  }

  .insta-section__title {
    margin-bottom: 24px;
  }

  .cat-carousel__progress {
    margin-top: 32px;
  }

  /* Боковой выпуск трека карусели гасится полем секции — значит должен
     равняться ему, иначе лента вылезет за край. */
  .product-grid {
    --product-grid-bleed: 15px;
  }

  .cat-carousel__title,
  .product-grid-section__title,
  .blog-section__title,
  .insta-section__title {
    font-size: 20px;
    line-height: 30px;
  }

  /* Карточки категорий — 180x220 c шагом 12px */
  .cat-carousel__card {
    flex-basis: 180px;
    height: 220px;
  }

  .cat-carousel__track {
    gap: 12px;
  }
}

@media (max-width: 767px) {
  /* Figma 375:1809 — USP идут колонкой по левому краю, с разделителями
     между пунктами; раньше на мобильном список центрировался. */
  .usp__list {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 11px;
    min-height: 0;
    padding: var(--space-24) 15px;
  }

  .usp__item {
    align-items: flex-start;
    padding-bottom: 11px;
    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: 12px;
  }

  .insta-grid__item {
    border-radius: 4px;
  }

  /* Карточка товара — 220x437 по макету (сейчас растягивалась на 293) */
  .product-card {
    flex-basis: 220px;
    min-width: 220px;
    max-width: 220px;
    --product-card-pad: 12px;
    padding: var(--product-card-pad);
    gap: 16px;
    border-radius: 8px;
  }

  .product-card__image {
    width: 180px;
    height: 180px;
  }

  /* Карточка блога — 260 в ширину, картинка 160 в высоту */
  .blog-card,
  .blog-section__card {
    flex-basis: 260px;
    min-width: 260px;
    max-width: 260px;
  }

  .blog-card__image,
  .blog-section__card-image {
    height: 160px;
    border-radius: 6px;
  }
}

@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 10px 22px 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(-4px);
  background-color: var(--color-text-white);
  box-shadow: 0 18px 38px var(--color-shadow-soft);
}

/* Маска под зум: без overflow картинка вылезает за скруглённый угол. */
.product-card__image-link {
  overflow: hidden;
  border-radius: 4px;
}

.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 6px 16px 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: 13px;
  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: 6px;
}

.product-options__pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 110px;
  min-height: 52px;
  padding: 6px 24px;
  border: 1px solid var(--color-border-cream);
  border-radius: 6px;
  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: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-dark);
  white-space: nowrap;
}

.product-options__pill-price {
  font-size: 12px;
  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: 349px;
  padding: 14px 20px;
  border: 1px solid var(--color-border-cream);
  border-radius: 6px;
  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: 14px;
  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: 14px;
}

.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: 16px;
  height: 16px;
}

.product-page__spec-link:hover {
  color: var(--color-brand-gold-dark);
}

.product-specs {
  margin-bottom: 64px;
}

.product-specs__list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border-cream);
  border-radius: 8px;
  overflow: hidden;
}

.product-specs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-24);
  padding: 14px 24px;
}

/* Зебра вместо разделителей: спокойнее на кремовом фоне страницы. */
.product-specs__row:nth-child(odd) {
  background-color: var(--color-surface-cream-alt);
}

.product-specs__key {
  margin: 0;
  font-size: 15px;
  color: var(--color-text-muted);
}

.product-specs__value {
  margin: 0;
  font-size: 15px;
  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)) 64px;
  padding: var(--space-48);
  border-radius: 16px;
  background-color: var(--color-surface-card, rgba(255, 255, 255, 0.6));
}

.product-page__card .product-page__layout {
  margin-bottom: var(--space-48);
}

/* --- Строка покупки: степпер и цена рядом, кнопка во всю ширину --- */

.product-page__buy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  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);
  gap: var(--space-48);
  align-items: start;
}

/* --- Вкладки --- */

.product-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--color-border-cream);
  border-radius: 8px 8px 0 0;
  border-bottom: 0;
  overflow: hidden;
}

.product-tabs__btn {
  padding: 16px 32px;
  border: 0;
  border-right: 1px solid var(--color-border-cream);
  background: none;
  font-family: inherit;
  font-size: 15px;
  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 -3px 0 var(--color-brand-gold);
}

.product-tabs__panels {
  padding: var(--space-32);
  border: 1px solid var(--color-border-cream);
  border-radius: 0 0 8px 8px;
  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: -12px 0 var(--space-24);
  font-size: 15px;
  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: 25px;
  border: 1px solid var(--color-border-cream);
  border-radius: 12px;
  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 10px 24px var(--color-shadow-soft);
}

.product-benefits__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-18);
  border-radius: 12px;
  background-color: rgba(169, 119, 45, 0.1);
}

.product-benefits__title {
  margin: 0 0 var(--space-8);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

.product-benefits__text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  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: 14px 18px;
    font-size: 14px;
  }
}

.product-page__intro {
  margin: 0 0 var(--space-18);
  max-width: 56ch;
  font-size: 15px;
  line-height: 24px;
  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: 15px 20px;
  font-size: 14px;
  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: 36px;
  text-transform: uppercase;
}

/* Единый мобильный ритм страницы товара: до 768px внутренние поля не
   должны съедать ширину контента, особенно в карточке, описании и форме
   покупки. Сохраняем touch-friendly размеры контролов. */
@media (max-width: 768px) {
  .product-page__container {
    padding-inline: 16px;
  }

  .product-page__card {
    margin-inline: 0;
    padding-inline: 0;
    border-radius: 0;
  }

  .product-page__layout {
    gap: 20px;
    margin-bottom: 32px;
  }

  .product-page__gallery,
  .product-page__info,
  .product-gallery__stage,
  .product-gallery__thumbs {
    min-width: 0;
  }

  .product-page__title {
    margin-bottom: 16px;
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.18;
  }

  .product-page__meta {
    gap: 12px;
    margin-bottom: 12px;
  }

  .product-page__quantity-note {
    margin-bottom: 16px;
  }

  .product-page__specs {
    gap: 8px 16px;
    margin-bottom: 16px;
  }

  .product-options {
    gap: 16px;
    margin-bottom: 16px;
  }

  .product-options__group {
    min-width: 0;
  }

  .product-options__pills {
    gap: 8px;
  }

  .product-options__pill {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
  }

  .product-options__select {
    max-width: none;
    padding: 12px 14px;
  }

  .product-page__divider {
    margin-bottom: 16px;
  }

  .product-page__buy-row {
    gap: 8px;
    margin-bottom: 16px;
  }

  .product-page__price {
    font-size: 28px;
  }

  .product-page__qty-btn {
    width: 44px;
  }

  .product-page__qty-input {
    width: 44px;
  }

  .product-page__add {
    padding: 14px 16px;
  }

  .product-page__bottom {
    gap: 32px;
  }

  .product-tabs__panels {
    padding: 16px;
  }

  .product-page__description-body {
    font-size: 15px;
    line-height: 24px;
  }

  .product-specs__row {
    gap: 2px;
    padding: 12px 16px;
  }

  .product-benefits__tile {
    padding: 16px;
  }
}

/* Одна горизонтальная сетка на всём сайте. Раньше отдельные секции главной,
   карточка товара и внутренние панели имели свои 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: 16px;
  }
}

/* На мобильных все товарные блоки остаются двухколоночными: каталог,
   поиск, спецпредложения, похожие товары и товары на главной. */
@media (max-width: 768px) {
  .product-grid,
  .product-grid--static,
  .product-grid--with-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    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: 6px 6px 14px;
    border-radius: 6px;
  }

  .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: 14px;
    margin-top: 14px;
  }

  .product-grid .product-card__info,
  .product-grid--static .product-card__info {
    gap: 12px;
  }

  .product-grid .product-card__name,
  .product-grid--static .product-card__name {
    font-size: 15px;
    line-height: 20px;
    text-align: center;
  }

  .product-grid .product-card__add,
  .product-grid--static .product-card__add {
    padding: 12px 8px;
    font-size: 13px;
  }
}

/* Одинаковая высота карточек в каждой строке. Контент может занимать разное
   число строк, но цена и 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: 24px;
  }
}
/* OCFilter — compact sidebar treatment aligned with the OptimaLife catalog */
.catalog-sidebar__filter {
  margin-top: 18px;
}

.catalog-sidebar__filter .ocf-container {
  margin: 0;
  border: 1px solid rgba(169, 119, 45, .24);
  border-radius: 2px;
  background: #fffdf8;
  color: #28241f;
  overflow: hidden;
}

.catalog-sidebar__filter .ocf-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(169, 119, 45, .18);
  color: #a9772d;
  font-family: 'Cinzel', serif;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.catalog-sidebar__filter .ocf-body {
  padding: 8px 20px 16px;
}

.catalog-sidebar__filter .ocf-filter {
  padding: 12px 0;
  border-bottom: 1px solid rgba(40, 36, 31, .1);
}

.catalog-sidebar__filter .ocf-filter:last-child {
  border-bottom: 0;
}

.catalog-sidebar__filter .ocf-filter-header {
  margin-bottom: 10px;
  color: #28241f;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.catalog-sidebar__filter .ocf-value-name,
.catalog-sidebar__filter .ocf-value-name a {
  color: #51483e;
  font-size: 14px;
}

.catalog-sidebar__filter .ocf-value-name:hover,
.catalog-sidebar__filter .ocf-value-name a:hover {
  color: #a9772d;
}

.catalog-sidebar__filter .ocf-btn {
  border-radius: 0;
}

@media (max-width: 767px) {
  .catalog-sidebar__filter {
    margin-top: 14px;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding-inline: 16px;
  }

  .catalog-page__container {
    padding: 20px 16px 0;
  }

  .catalog-page__layout {
    gap: 16px;
  }

  .catalog-sidebar__card {
    padding: 16px;
  }

  .breadcrumb {
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    gap: 8px;
    font-size: 12px;
  }

  .product-grid--with-sidebar {
    gap: 12px;
  }

  .product-grid--with-sidebar > .product-card {
    min-width: 0;
    width: 100%;
    --product-card-pad: 6px;
    padding: var(--product-card-pad) var(--product-card-pad) 16px;
    border-radius: 6px;
  }

  .product-grid--with-sidebar .product-card__body {
    gap: 18px;
    margin-top: 14px;
  }

  .product-grid--with-sidebar .product-card__info {
    gap: 14px;
  }
}

/* Must remain after the shared mobile grid rules above: the homepage product
   section is a horizontal rail in the Figma mobile frame. */
@media (max-width: 768px) {
  .product-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
  }

  .product-grid > .product-card {
    flex: 0 0 220px;
    width: 220px;
    min-width: 220px;
    max-width: 220px;
  }
}

/* Production product-page fixes, 2026-08-30 */
@media (min-width:769px){.product-page__info{position:sticky;top:24px;align-self:start;}}
@media (min-width:992px) and (max-width:1199px){.product-page__card{margin-inline:0;}}
@media (max-width:768px){.product-page__info{position:static;}.catalog-page__layout{grid-template-columns:minmax(0,1fr);}}