:root {
  --bg: #fbf2f1;
  --text: #4c2b33;
  --heading: #7a3d4c;
  --heading-strong: #5a2f39;
  --accent: #bd6c81;
  --accent-hover: #a5586c;
  --muted: #b78e96;
  --muted-2: #977078;
  --eyebrow: #c98a9b;
  --panel: #f7e6e6;
  --card-border: #f0dede;
  --hairline: #ecd8d8;
  --body-font: 'Jost', sans-serif;
  --display-font: 'Cormorant Garamond', serif;
  --content-width: 1180px;
  /* Side padding of every page section. Narrowed by the media queries at the
     bottom of this file, so layouts don't need their own padding overrides. */
  --gutter: 48px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--body-font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
::selection { background: #f2cdd6; }

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

/* Страница никогда не ездит вбок: горизонтально двигается только лента хитов,
   у неё собственная прокрутка. Именно clip, а не hidden — hidden сделал бы
   страницу контейнером прокрутки и сломал бы `position: sticky` у шапки,
   фильтров каталога и итогов корзины. */
.page { flex: 1 0 auto; display: flex; flex-direction: column; overflow-x: clip; }

/* Секции — flex-элементы .page. Из-за `margin: 0 auto` флексбокс отменяет
   для них растягивание и меряет по содержимому: лента карусели раздувала
   секцию до своей полной ширины, и центрированный заголовок уезжал за
   экран. `width: 100%` возвращает ширину страницы; max-width и
   центрирование на широких экранах работают как раньше. */
.container, .section, .catalog-page, .catalog-list, .product-page,
.intro, .values-section, .features-section, .doc, .cart-page, .about-teaser {
  width: 100%;
}
.container { max-width: var(--content-width); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--body-font);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 40px;
  padding: 15px 38px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); color: #fff; }
.btn--light { background: #fff; color: var(--heading); }
.btn--light:hover { background: #fce8ec; }
.btn--outline { background: transparent; color: var(--heading); border-color: #cf9aa7; }
.btn--outline:hover { background: #f2d6dc; }

/* ── Header ──────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--gutter);
  background: rgba(251, 242, 241, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand__name {
  font-family: var(--display-font);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--heading);
}
.brand__sub {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-right { display: flex; align-items: center; gap: 40px; }
.nav-toggle { display: none; }
.nav-burger {
  display: none; /* shown by the mobile media query */
  flex-direction: column; justify-content: center; gap: 5px;
  width: 30px; height: 30px; cursor: pointer; flex-shrink: 0;
}
.nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--heading); transition: transform .2s, opacity .2s; }
.site-nav:has(.nav-toggle:checked) .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav:has(.nav-toggle:checked) .nav-burger span:nth-child(2) { opacity: 0; }
.site-nav:has(.nav-toggle:checked) .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-link { color: var(--muted-2); }
.nav-link:hover { color: var(--heading); }
.nav-link.is-active { color: var(--heading); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.nav-cart { display: flex; align-items: center; gap: 7px; }
.cart-badge {
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 20px; background: var(--accent); color: #fff;
  font-size: 11px; letter-spacing: 0; display: inline-flex;
  align-items: center; justify-content: center;
}
.cart-badge[hidden] { display: none; }

/* ── Hero ────────────────────────────────────────────── */
.hero {
  position: relative;
  margin: 24px var(--gutter) 0;
  /* Пропорции макета 2400×500 задаём минимальной высотой, а не aspect-ratio:
     жёсткое соотношение не даёт полосе подрасти, и в диапазоне примерно
     1550–2100px заголовок переставал помещаться — overflow: hidden срезал
     верхнюю надпись, а кнопка упиралась в нижний край. */
  min-height: calc((100vw - 2 * var(--gutter)) / 4.8);
  /* Поля, за которые содержимое не заходит ни при какой ширине окна. */
  padding: clamp(20px, 2vw, 40px) 0;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero__bg--empty { background: repeating-linear-gradient(-45deg, #eccfd0, #eccfd0 14px, #e6c6c8 14px, #e6c6c8 28px); }
.hero__overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(122,61,76,0.12), rgba(122,61,76,0.5)); }
/* Ширина растёт вместе со шрифтом: в 640px заголовок при 50px и крупнее
   ломался на третью строку. */
.hero__content { position: relative; text-align: center; color: #fff; max-width: min(920px, 62vw); padding: 0 24px; }
/* The hero box now shrinks with the window, so everything inside it scales
   too — otherwise the text outgrows the box and gets cut off by overflow. */
.hero__eyebrow { font-size: clamp(10px, 0.7vw, 13px); letter-spacing: 0.34em; text-transform: uppercase; margin: 0 0 clamp(8px, 1vw, 18px); opacity: 0.92; }
.hero__title {
  font-family: var(--display-font);
  font-weight: 500; font-size: clamp(28px, 3.2vw, 66px); line-height: 1.02;
  margin: 0 0 clamp(10px, 1.15vw, 22px); text-wrap: pretty;
  text-shadow: 0 2px 24px rgba(60,20,32,0.35);
}
.hero__text { font-size: clamp(13px, 0.95vw, 17px); line-height: 1.6; margin: 0 auto clamp(14px, 1.8vw, 34px); max-width: 460px; opacity: 0.95; font-weight: 300; }
.hero .btn { font-size: clamp(12px, 0.75vw, 14px); padding: clamp(11px, 0.8vw, 15px) clamp(26px, 2vw, 38px); }

/* ── Sections ────────────────────────────────────────── */
/* Верхний отступ небольшой: блок идёт сразу за баннером, и на 96px между
   ними зияла пустая полоса. */
.section { max-width: var(--content-width); margin: 0 auto; padding: 60px var(--gutter) 40px; }
.section__head { text-align: center; margin-bottom: 52px; }
.section__eyebrow { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--eyebrow); margin: 0 0 12px; }
.section__title { font-family: var(--display-font); font-weight: 500; font-size: 46px; margin: 0; color: var(--heading); }

/* ── Product cards ───────────────────────────────────── */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  transition: transform .2s;
}
/* Якорь для плашек: они лежат вне ссылки, но поверх фото. */
.product-card { position: relative; }
.product-card:hover { transform: translateY(-4px); }
.product-card__link { display: block; color: inherit; }
.product-card__link:hover { color: inherit; }
.product-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #fff; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Свеча с галочкой «Не обрезать изображение»: вписываем фото целиком, по бокам
   остаются белые поля (фон рамок белый). Составной селектор, а не одиночный
   `.media-fit img`, — чтобы не зависеть от порядка правил в файле. */
.product-card__media.media-fit img,
.gallery__main.media-fit img,
.gallery__thumb.media-fit img,
.cart-item__media.media-fit img,
.category-card__media.media-fit img,
.tile__media.media-fit img,
.color-tile__swatch.media-fit img { object-fit: contain; }
.product-card__body { padding: 20px 20px 14px; }
.product-card__actions { margin-top: auto; padding: 0 18px 18px; }
.product-card__add {
  width: 100%; padding: 11px; cursor: pointer;
  background: #fff; color: var(--accent); border: 1px solid #e6c6cc; border-radius: 40px;
  font-family: var(--body-font); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.product-card__add:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.qty--card { justify-content: center; padding: 4px 0; }
.product-card__color { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.product-card__name { font-family: var(--display-font); font-weight: 500; font-size: 21px; margin: 0 0 10px; color: var(--heading-strong); }
.product-card__price { font-size: 20px; font-weight: 600; margin: 0; color: var(--heading); }

/* ── Плашки поверх фото ──────────────────────────────── */
/* Обе живут и в карточке каталога, и на странице товара. «Хит» слева,
   потому что правый верхний угол занят плашкой блёсток. */
.hit-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: var(--accent); padding: 4px 9px; border-radius: 20px;
}
/* На странице товара кадр крупнее — плашка тоже. */
.hit-badge--lg { top: 14px; left: 14px; font-size: 12px; padding: 6px 13px; }


/* Лежит поверх фото в правом верхнем углу — напротив «хита», который ради
   этого ушёл влево. Подсказка раскрывается внутрь кадра: у .product-card__media
   и .gallery__main стоит overflow: hidden, наружу её бы обрезало. */
.glitter-badge {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 14px; line-height: 1; color: var(--accent);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 6px rgba(90, 40, 50, 0.18);
  cursor: help;
  transition: transform .18s, background .18s, color .18s;
}
.glitter-badge:hover,
.glitter-badge:focus { transform: scale(1.08); background: var(--accent); color: #fff; }
/* Рамку показываем только при переходе с клавиатуры, не по тапу. */
.glitter-badge:focus { outline: none; }
.glitter-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.glitter-badge__tip {
  position: absolute; top: calc(100% + 8px); right: 0;
  /* max-content не переносит строку, пока она влезает в max-width. */
  width: max-content; max-width: 160px;
  padding: 7px 10px; border-radius: 6px;
  background: rgba(60, 26, 33, 0.92); color: #fff;
  font-size: 11px; line-height: 1.4; letter-spacing: 0.02em; text-align: right;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .18s, transform .18s;
}
/* :focus, а не :focus-visible — на телефоне hover не срабатывает,
   и подсказку открывает тап по плашке. */
.glitter-badge:hover .glitter-badge__tip,
.glitter-badge:focus .glitter-badge__tip { opacity: 1; transform: translateY(0); }

/* На странице товара кадр крупнее — плашка тоже. */
.glitter-badge--lg { top: 14px; right: 14px; width: 38px; height: 38px; font-size: 17px; }
.glitter-badge--lg .glitter-badge__tip { max-width: 200px; font-size: 12px; }

/* ── Карусель хитов ──────────────────────────────────── */
.carousel { position: relative; }
.carousel__viewport {
  display: flex; gap: 28px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  /* Карточка на наведении приподнимается на 4px, а overflow-x режет и по
     вертикали — оставляем ей запас, иначе появится лишняя прокрутка. */
  padding: 6px 0;
  /* Полосу прокрутки прячем: листают стрелками и колесом. */
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
/* Ровно четыре карточки в кадре, с тремя промежутками между ними. */
.carousel__item { flex: 0 0 calc((100% - 3 * 28px) / 4); scroll-snap-align: start; display: flex; }
.carousel__item .product-card { flex: 1 1 auto; }

.carousel__arrow {
  position: absolute; top: 34%; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding-bottom: 4px;
  border: 1px solid var(--card-border); border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); color: var(--accent); cursor: pointer;
  font-family: var(--body-font); font-size: 26px; line-height: 1;
  box-shadow: 0 2px 10px rgba(90, 40, 50, 0.16);
  transition: background .2s, color .2s, opacity .2s;
}
.carousel__arrow:hover { background: var(--accent); color: #fff; }
/* Внутри ленты, а не за её краем: секция упирается в --content-width, и вынос
   наружу вылезал за экран, добавляя странице горизонтальную прокрутку. */
.carousel__arrow--prev { left: 6px; }
.carousel__arrow--next { right: 6px; }
/* На краю списка стрелка не нужна — и мешать кликам тоже не должна. */
.carousel__arrow[disabled] { opacity: 0; pointer-events: none; }

/* ── Свечи из той же группы (в карточке товара) ───────── */
.related { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--hairline); }
.related__title { font-family: var(--display-font); font-weight: 500; font-size: 36px; margin: 0 0 32px; color: var(--heading); }

/* ── About teaser ────────────────────────────────────── */
.about-teaser { max-width: var(--content-width); margin: 60px auto 0; padding: 0 var(--gutter) 96px; }
/* Фото из блока убрано — панель во всю ширину, текст прижат к левому краю.
   Отступы симметричные: раньше слева их не было, там стояла картинка. */
.about-teaser__inner { background: var(--panel); border-radius: 8px; overflow: hidden; }
.about-teaser__body { padding: 44px 56px; }
.about-teaser__eyebrow { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--eyebrow); margin: 0 0 14px; }
.about-teaser__title { font-family: var(--display-font); font-weight: 500; font-size: 40px; line-height: 1.1; margin: 0 0 20px; color: var(--heading); }
.about-teaser__text { font-size: 16px; line-height: 1.75; font-weight: 300; color: #6b4952; margin: 0 0 28px; }

/* ── Wholesale banner ────────────────────────────────── */
.banner {
  position: relative; margin: 0 var(--gutter) 40px; height: 200px;
  border-radius: 8px; overflow: hidden; display: flex; align-items: center;
}
.banner__bg { position: absolute; inset: 0; }
.banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.banner__bg--empty { background: repeating-linear-gradient(-45deg, #eccfd0, #eccfd0 14px, #e6c6c8 14px, #e6c6c8 28px); }
.banner__overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(90,40,52,0.62) 0%, rgba(90,40,52,0.28) 55%, rgba(90,40,52,0.05) 100%); }
.banner__content { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 0 56px; color: #fff; }
.banner__lead { font-size: 34px; font-family: var(--display-font); font-weight: 600; letter-spacing: 0.06em; margin: 0 0 14px; opacity: 0.95; text-shadow: 0 2px 20px rgba(60,20,32,0.4); }
.banner__title { font-family: var(--display-font); font-weight: 500; font-size: 24px; line-height: 1.2; margin: 0; text-wrap: pretty; text-shadow: 0 2px 20px rgba(60,20,32,0.4); }

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

/* ── Catalog: headings ───────────────────────────────── */
/* Небольшой верхний отступ: над заголовком нет ни баннера, ни надписи-рубрики,
   и на 56px между шапкой и «Выберите категорию» оставалась пустая полоса. */
.catalog-page { max-width: 1200px; margin: 0 auto; padding: 32px var(--gutter) 96px; }
.catalog-head { text-align: center; margin-bottom: 52px; }
.catalog-title { font-family: var(--display-font); font-weight: 500; font-size: 52px; margin: 0 0 14px; color: var(--heading); }
.catalog-lead { font-size: 16px; font-weight: 300; color: var(--muted-2); margin: 0; }
.catalog-back { display: inline-block; font-size: 13px; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 16px; }
/* Шаги выбора типа и цвета: заголовок со стрелкой стоит слева, как в списке
   товаров, а центрирование от .catalog-head тянуло бы строку к середине. */
.catalog-head--row { text-align: left; }

/* Заголовок раздела со стрелкой «назад» слева. Кружок повторяет стрелки
   карусели, чтобы иконки на сайте выглядели из одного набора. */
.title-row { display: flex; align-items: center; gap: 18px; }
.title-row .catalog-title { margin: 0; }
.back-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--card-border); border-radius: 50%;
  background: #fff; color: var(--accent);
  transition: background .2s, color .2s, border-color .2s;
}
.back-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.catalog-alt { font-size: 17px; font-weight: 300; color: var(--muted-2); margin: 12px 0 0; }
.catalog-alt a { color: var(--accent); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.catalog-alt a:hover { color: var(--accent-hover); }

/* ── Category cards ──────────────────────────────────── */
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.category-card {
  display: grid; grid-template-columns: 200px 1fr;
  background: #fff; border: 1px solid var(--card-border); border-radius: 8px;
  overflow: hidden; transition: transform .2s;
}
.category-card:hover { transform: translateY(-4px); }
.category-card__media { position: relative; min-height: 180px; background: #fff; }
.category-card__media img { width: 100%; height: 100%; object-fit: cover; }
.category-card__media--empty { background: repeating-linear-gradient(45deg, #eccfd0, #eccfd0 13px, rgba(0,0,0,0.05) 13px, rgba(0,0,0,0.05) 26px); }
.category-card__body { padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.category-card__name { font-family: var(--display-font); font-weight: 500; font-size: 32px; margin: 0 0 10px; color: var(--heading-strong); }
.category-card__desc { font-size: 15px; line-height: 1.6; font-weight: 300; color: #6b4952; margin: 0 0 18px; }
.category-card__link { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }

.catalog-page--narrow { max-width: 1100px; }

/* ── Type tiles (digit flow) ─────────────────────────── */
.tile-grid { display: grid; gap: 28px; }
.tile-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tile {
  display: block; background: #fff; border: 1px solid var(--card-border);
  border-radius: 8px; overflow: hidden; transition: transform .2s;
}
.tile:hover { transform: translateY(-4px); }
/* Same portrait proportions as the product cards, so vertical candle photos
   aren't cropped top and bottom the way a landscape box crops them. */
.tile__media { position: relative; aspect-ratio: 4 / 5; background: #fff; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }
.tile__media--empty { background: repeating-linear-gradient(45deg, #eccfd0, #eccfd0 13px, rgba(0,0,0,0.05) 13px, rgba(0,0,0,0.05) 26px); }
.tile__body { padding: 24px 26px; }
.tile__name { font-family: var(--display-font); font-weight: 500; font-size: 28px; margin: 0 0 8px; color: var(--heading-strong); }
.tile__desc { font-size: 15px; line-height: 1.6; font-weight: 300; color: #6b4952; margin: 0 0 16px; }
.tile__link { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }

/* ── Color tiles (digit flow) ────────────────────────── */
.color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.color-tile { display: block; }
.color-tile__swatch {
  /* Matches the product cards; a square box cut the tops off vertical photos. */
  aspect-ratio: 4 / 5; border-radius: 8px; margin-bottom: 12px; overflow: hidden;
  border: 1px solid var(--card-border); background: #fff; transition: transform .2s;
}
.color-tile__swatch img { width: 100%; height: 100%; object-fit: cover; }
.color-tile:hover .color-tile__swatch { transform: translateY(-4px); }
.color-tile__name { font-family: var(--display-font); font-weight: 500; font-size: 22px; margin: 0 0 2px; color: var(--heading-strong); }
.color-tile__count { font-size: 13px; color: var(--accent); }

/* ── Catalog: list + filters ─────────────────────────── */
.catalog-list { max-width: 1280px; margin: 0 auto; padding: 56px var(--gutter) 96px; }
.catalog-list__head { margin-bottom: 44px; }
.catalog-layout { display: grid; grid-template-columns: 250px 1fr; gap: 48px; align-items: start; }
.filters { position: sticky; top: 100px; background: #fff; border: 1px solid var(--card-border); border-radius: 8px; padding: 28px 26px; }
.filters__title { font-family: var(--display-font); font-size: 22px; margin: 0 0 22px; color: var(--heading); }
.filters__label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.filter-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.filter-check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 300; color: var(--heading); }
.filter-check input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.filter-check:hover { color: var(--accent-hover); }
/* Вариант, который при остальных фильтрах не даёт ни одной свечи. */
.filter-check.is-disabled { opacity: .35; cursor: default; }
.filter-check.is-disabled:hover { color: var(--heading); }
.filter-check.is-disabled input { cursor: default; }
.swatch-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 0 1px #e6d0d3; transition: transform .15s, box-shadow .15s;
}
.swatch:hover { transform: scale(1.08); }
.swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.swatch.is-disabled { opacity: .25; pointer-events: none; }
.price-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.price-row .filters__label { margin: 0; }
.price-row__value { font-size: 13px; color: var(--heading); }
.price-range { width: 100%; accent-color: var(--accent); }
.price-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }
.filters__apply { width: 100%; margin-top: 26px; padding: 12px; }
/* Форма без кнопки «Применить» — отступ снизу берёт на себя «Сбросить». */
.filters__form--live .filters__reset { margin-top: 26px; }
.filters__form--live.is-loading { opacity: .5; pointer-events: none; }
.filters__reset { display: block; text-align: center; margin-top: 14px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-hover); }
.catalog-count { font-size: 13px; color: var(--muted); margin: 0 0 22px; }

/* Подвал списка: ссылка «Показать ещё» без JS, надпись о подгрузке — с ним.
   min-height обязателен: наблюдатель следит именно за этим блоком, а элемент
   нулевой высоты в кадр не попадает и подгрузку не запускает. */
.load-more { min-height: 60px; display: flex; align-items: center; justify-content: center; padding: 32px 0 8px; }
.load-more__status { font-size: 13px; letter-spacing: 0.06em; color: var(--muted); margin: 0; }

/* ── Product page ────────────────────────────────────── */
.product-page { max-width: var(--content-width); margin: 0 auto; padding: 40px var(--gutter) 96px; }
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 12px; }
.gallery__main { position: relative; aspect-ratio: 1 / 1; background: #fff; border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__main--empty { background: repeating-linear-gradient(45deg, #eccfd0, #eccfd0 13px, rgba(0,0,0,0.05) 13px, rgba(0,0,0,0.05) 26px); }
.gallery__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery__thumb { aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: #fff; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-info { padding-top: 6px; }
.product-info__color { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.product-info__title { font-family: var(--display-font); font-weight: 500; font-size: 52px; line-height: 1.02; margin: 0 0 16px; color: var(--heading-strong); }
.product-info__price { font-size: 26px; color: var(--heading); margin: 0 0 28px; }
.product-info__desc { font-size: 17px; line-height: 1.75; font-weight: 300; color: #6b4952; margin: 0 0 32px; }
.product-info__buy { width: 100%; text-align: center; padding: 16px; margin-bottom: 32px; }
.specs { border-top: 1px solid var(--hairline); padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.spec-row { display: flex; justify-content: space-between; font-size: 15px; }
.spec-row__key { color: var(--muted); letter-spacing: 0.04em; }
/* Значение может быть многострочным (размер разбивается по слэшу) —
   держим строки столбиком у правого края, как однострочные значения. */
.spec-row__val { color: var(--heading-strong); text-align: right; }
.spec-row__line { display: block; }
.story { margin-top: 34px; background: var(--panel); border-radius: 8px; padding: 28px 30px; }
.story__eyebrow { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--eyebrow); margin: 0 0 12px; }
.story__text { font-family: var(--display-font); font-style: italic; font-size: 20px; line-height: 1.6; color: #6b4952; margin: 0; }

/* ── Static pages ────────────────────────────────────── */
.page-hero {
  position: relative; margin: 24px var(--gutter) 0; height: 340px;
  border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.page-hero__bg { position: absolute; inset: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__bg--empty { background: repeating-linear-gradient(-45deg, #eccfd0, #eccfd0 14px, #e6c6c8 14px, #e6c6c8 28px); }
/* Затемнение равномерное по горизонтали: заголовок стоит по центру, а прежний
   градиент слева направо выводил его правую половину на светлый фон. */
.page-hero__overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(90,40,52,0.45), rgba(90,40,52,0.55)); }
.page-hero__content { position: relative; max-width: 640px; padding: 0 56px; color: #fff; text-align: center; }
.page-hero__eyebrow { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; margin: 0 0 14px; opacity: 0.9; }
.page-hero__title { font-family: var(--display-font); font-weight: 500; font-size: 52px; line-height: 1.05; margin: 0; text-wrap: pretty; text-shadow: 0 2px 20px rgba(60,20,32,0.4); }

.intro { max-width: 820px; margin: 0 auto; padding: 64px var(--gutter) 24px; text-align: center; }
.intro__title { font-family: var(--display-font); font-weight: 500; font-size: 56px; line-height: 1.05; margin: 0 0 26px; color: var(--heading); }
.intro__text { font-size: 18px; line-height: 1.8; font-weight: 300; color: #6b4952; margin: 0; }
/* Два абзаца подряд — иначе слиплись бы: у .intro__text margin: 0. */
.intro__text + .intro__text { margin-top: 16px; }

.about-photo-wrap { max-width: var(--content-width); margin: 40px auto 0; padding: 0 var(--gutter); }
.about-photo { position: relative; aspect-ratio: 21 / 9; border-radius: 8px; overflow: hidden; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-photo--empty { background: repeating-linear-gradient(45deg, #eccfd0, #eccfd0 14px, #e6c6c8 14px, #e6c6c8 28px); }

.values-section { max-width: 1000px; margin: 0 auto; padding: 80px var(--gutter) 96px; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.value__title { font-family: var(--display-font); font-size: 26px; margin: 0 0 12px; color: var(--heading); }
.value__text { font-size: 15px; line-height: 1.7; font-weight: 300; color: #6b4952; margin: 0; }

.features-section { max-width: 1100px; margin: 0 auto; padding: 40px var(--gutter); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
/* Две карточки вместо трёх: без этого третья колонка осталась бы пустой.
   Модификатор стоит до медиазапросов — на телефоне колонка всё равно одна. */
.feature-grid--2 { grid-template-columns: repeat(2, 1fr); }
.feature-card { background: #fff; border: 1px solid var(--card-border); border-radius: 8px; padding: 30px 28px; }
.feature-card__title { font-family: var(--display-font); font-size: 26px; margin: 0 0 10px; color: var(--heading); }
.feature-card__text { font-size: 15px; line-height: 1.7; font-weight: 300; color: #6b4952; margin: 0; }

.cta-section { max-width: 760px; margin: 24px auto 0; padding: 0 var(--gutter) 96px; text-align: center; }
.cta { background: var(--panel); border-radius: 8px; padding: 44px 40px; }
.cta__title { font-family: var(--display-font); font-weight: 500; font-size: 34px; margin: 0 0 14px; color: var(--heading); }
.cta__text { font-size: 16px; font-weight: 300; line-height: 1.7; color: #6b4952; margin: 0 0 28px; }
.contact-chips { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.chip { padding: 14px 30px; border-radius: 40px; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.chip--soft { background: var(--accent); color: #fff; }
/* Без явного color глобальное a:hover перекрасило бы белую надпись в розовую. */
.chip--soft:hover { background: var(--accent-hover); color: #fff; }

.center-cta { text-align: center; margin-top: 56px; }
.center-cta--left { text-align: left; margin-top: 44px; }

/* ── Offer / document ────────────────────────────────── */
.doc { max-width: 820px; margin: 0 auto; padding: 56px var(--gutter) 96px; }
.doc__title { font-family: var(--display-font); font-weight: 500; font-size: var(--gutter); margin: 0 0 8px; color: var(--heading); }
.doc__meta { font-size: 14px; color: var(--muted-2); margin: 0 0 40px; }
.doc__list { display: flex; flex-direction: column; gap: 32px; }
.doc__heading { font-family: var(--display-font); font-weight: 500; font-size: 24px; margin: 0 0 10px; color: var(--heading-strong); }
.doc__text { font-size: 16px; line-height: 1.8; font-weight: 300; color: #6b4952; margin: 0; }
/* Разделы политики многоабзацные — у .doc__text нет своих отступов. */
.doc__text + .doc__text { margin-top: 14px; }

/* ── Cart ────────────────────────────────────────────── */
.cart-page { max-width: 1000px; margin: 0 auto; padding: 56px var(--gutter) 96px; }
.cart-title { font-family: var(--display-font); font-weight: 500; font-size: 52px; margin: 0 0 40px; color: var(--heading); }

.cart-empty { text-align: center; padding: 70px 20px; background: #fff; border: 1px solid var(--card-border); border-radius: 8px; }
.cart-empty__text { font-size: 18px; font-weight: 300; color: var(--muted-2); margin: 0 0 26px; }

.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 44px; align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: 16px; }
.cart-item {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 20px; align-items: center;
  background: #fff; border: 1px solid var(--card-border); border-radius: 8px; padding: 16px;
}
.cart-item__media { aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: #fff; }
.cart-item__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__color { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.cart-item__name { font-family: var(--display-font); font-weight: 500; font-size: 22px; margin: 0 0 4px; color: var(--heading-strong); }
.cart-item__price { font-size: 14px; color: var(--heading); margin: 0; }
.cart-item__controls { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.qty { display: flex; align-items: center; gap: 12px; margin: 0; }
.qty__btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #e6c6cc; background: #fff; color: var(--accent-hover); font-size: 16px; cursor: pointer; line-height: 1; padding: 0; }
.qty__btn:hover { background: #f6e3e3; }
.qty__num { min-width: 20px; text-align: center; font-size: 15px; color: var(--heading-strong); }
.cart-item__line { font-size: 15px; color: var(--heading-strong); margin: 0; }
.cart-item__remove { background: none; border: none; cursor: pointer; font-size: 12px; color: var(--muted); font-family: var(--body-font); padding: 0; }
.cart-item__remove:hover { color: var(--accent-hover); }

.cart-summary { position: sticky; top: 100px; background: #fff; border: 1px solid var(--card-border); border-radius: 8px; padding: 28px 26px; }
.cart-summary__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--hairline); }
.cart-summary__total > span:first-child { font-size: 15px; color: var(--muted-2); }
.cart-summary__amount { font-family: var(--display-font); font-size: 30px; color: var(--heading); }
.cart-summary__title { font-family: var(--display-font); font-size: 22px; margin: 0 0 18px; color: var(--heading); }
.cart-input { width: 100%; padding: 13px 15px; margin-bottom: 12px; border: 1px solid #e6c6cc; border-radius: 8px; font-family: var(--body-font); font-size: 15px; color: var(--heading-strong); background: #fdf7f7; }
.cart-error { font-size: 13px; color: #c0576f; margin: 6px 0 0; }
.cart-submit { width: 100%; margin-top: 6px; padding: 16px; }
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; cursor: pointer; }
.consent__box { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.consent__text { font-size: 13px; line-height: 1.5; color: var(--muted-2); text-decoration: underline; text-underline-offset: 2px; }
.consent__text:hover { color: var(--accent); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--accent); color: #fff; }

.order-done { text-align: center; padding: 80px 20px; }
.order-done__check { width: 76px; height: 76px; border-radius: 50%; background: #f0dbe0; color: var(--accent); font-size: 38px; display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; }
.order-done__title { font-family: var(--display-font); font-weight: 500; font-size: var(--gutter); margin: 0 0 16px; color: var(--heading); }
.order-done__text { font-size: 17px; font-weight: 300; line-height: 1.7; color: #6b4952; max-width: 460px; margin: 0 auto 34px; }

/* ── Footer ──────────────────────────────────────────── */
.site-footer {
  margin-top: auto; border-top: 1px solid var(--hairline);
  padding: 44px var(--gutter); display: flex; align-items: center; justify-content: space-between; background: var(--bg);
}
.site-footer__brand { display: flex; align-items: baseline; gap: 10px; }
.site-footer__brand-name { font-family: var(--display-font); font-size: 24px; font-weight: 600; letter-spacing: 0.14em; color: var(--heading); }
.site-footer__copy { font-size: 11px; color: var(--muted); }
/* Пунктов стало пять, и названия документов длинные — переносим, чтобы
   на узком экране они не выдавливали подвал за край. */
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px 22px; font-size: 13px; letter-spacing: 0.06em; color: var(--muted-2); }
.site-footer__links a { color: var(--muted-2); }
.site-footer__links a:hover { color: var(--heading); }

/* ── Responsive ──────────────────────────────────────── */
/* The layout above is the desktop one. Everything below narrows the page
   gutter, collapses multi-column grids and scales down display type. Fixed
   block heights become content-driven (min-height + padding) so text can
   never be clipped by `overflow: hidden` on a short screen. */

@media (max-width: 1180px) {
  :root { --gutter: 32px; }
  .nav-right, .nav-links { gap: 26px; }
  .nav-links { font-size: 15px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  /* Карусель повторяет ритм сетки: три карточки в кадре. */
  .carousel__viewport { gap: 24px; }
  .carousel__item { flex-basis: calc((100% - 2 * 24px) / 3); }
  .catalog-layout { grid-template-columns: 220px 1fr; gap: 32px; }
  .product-detail { gap: 40px; }
  .about-teaser__body { padding: 36px 32px; }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; }

  /* Header: links move into a burger panel, the cart stays in the bar. */
  .site-nav { padding: 14px var(--gutter); }
  .brand__name { font-size: 26px; }
  .brand__sub { display: none; }
  .nav-burger { display: flex; }
  .nav-right { gap: 18px; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px var(--gutter) 12px;
    background: var(--bg); border-bottom: 1px solid var(--hairline);
    font-size: 15px;
  }
  .site-nav:has(.nav-toggle:checked) .nav-links { display: flex; }
  .nav-links .nav-link { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
  .nav-links .nav-link:last-child { border-bottom: none; }

  /* Banners: height follows the content instead of a fixed value. */
  .hero { aspect-ratio: auto; min-height: min(56vw, 420px); padding: 44px 0; }
  .hero__content { padding: 0 var(--gutter); }
  .hero__eyebrow { font-size: 11px; }
  .hero__title { font-size: clamp(30px, 5.2vw, 44px); }
  .hero__text { font-size: 15px; }
  .hero .btn { font-size: 13px; padding: 14px 30px; }

  .page-hero { height: auto; min-height: 220px; padding: 40px 0; }
  .page-hero__content { padding: 0 var(--gutter); }
  .page-hero__title { font-size: 34px; }
  .page-hero__overlay { background: linear-gradient(180deg, rgba(90,40,52,0.5), rgba(90,40,52,0.55)); }

  .banner { height: auto; min-height: 0; padding: 30px 0; }
  .banner__content { flex-direction: column; align-items: flex-start; gap: 20px; padding: 0 var(--gutter); }
  .banner__content > div { max-width: none !important; }
  .banner__lead { font-size: 26px; margin-bottom: 10px; }
  .banner__title { font-size: 19px; }
  .banner__overlay { background: linear-gradient(180deg, rgba(90,40,52,0.5), rgba(90,40,52,0.55)); }

  /* Two-column layouts collapse to one. */
  .about-teaser__body { padding: 28px var(--gutter) 34px; }
  .catalog-layout { grid-template-columns: 1fr; gap: 24px; }
  .filters { position: static; }
  .cart-layout { grid-template-columns: 1fr; gap: 24px; }
  .cart-summary { position: static; }
  .product-detail { grid-template-columns: 1fr; gap: 32px; }
  /* Две карточки в кадре, стрелки помельче. */
  .carousel__viewport { gap: 20px; }
  .carousel__item { flex-basis: calc((100% - 20px) / 2); }
  .carousel__arrow { width: 34px; height: 34px; font-size: 22px; padding-bottom: 3px; }
  .category-grid { grid-template-columns: 1fr; }
  .tile-grid--3 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .color-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .value-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* Vertical rhythm and display type. */
  .section { padding: 56px var(--gutter) 28px; }
  .section__head { margin-bottom: 32px; }
  .section__title { font-size: 34px; }
  .about-teaser { margin-top: 40px; padding-bottom: 56px; }
  .about-teaser__title { font-size: 30px; }
  .catalog-page, .catalog-list, .doc, .cart-page { padding: 40px var(--gutter) 64px; }
  .product-page { padding: 28px var(--gutter) 64px; }
  .values-section { padding: 56px var(--gutter) 64px; }
  .features-section { padding: 32px var(--gutter); }
  .cta-section { padding: 0 var(--gutter) 64px; }
  .intro { padding: 44px var(--gutter) 20px; }
  .catalog-head, .catalog-list__head { margin-bottom: 32px; }
  .catalog-title, .cart-title, .intro__title { font-size: 36px; }
  .doc__title, .order-done__title { font-size: 34px; }
  .related { margin-top: 48px; padding-top: 32px; }
  .related__title { font-size: 28px; margin-bottom: 24px; }
  .product-info__title { font-size: 36px; }
  .product-info__price { font-size: 22px; margin-bottom: 20px; }
  .product-info__desc { font-size: 16px; }
  .cta__title { font-size: 28px; }
  .order-done { padding: 48px 0; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }

  .brand__name { font-size: 22px; }
  .nav-cart { font-size: 13px; }

  /* Two products per row reads better than one on a phone. */
  .product-grid, .product-grid--3 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  /* Телефон: карточки того же размера, что в каталоге, но лента чуть шире
     кадра — торчащий край третьей подсказывает, что можно листать. */
  .carousel__viewport { gap: 14px; padding-bottom: 4px; }
  /* На 20% меньше прежних 44% — карточки компактнее, в кадр попадает
     почти три штуки, и то, что ленту можно листать, видно сразу. */
  .carousel__item { flex-basis: 35%; }
  /* Листают пальцем: кнопка в 34px закрыла бы четверть фотографии. */
  .carousel__arrow { display: none; }
  .product-card__body { padding: 14px 14px 10px; }
  .product-card__actions { padding: 0 12px 14px; }
  .product-card__name { font-size: 17px; margin-bottom: 6px; }
  .product-card__price { font-size: 16px; }
  .product-card__add { font-size: 11px; padding: 10px 6px; }
  /* Карточка вдвое уже — плашка и подсказка ужимаются, чтобы не вылезти за кадр. */
  .glitter-badge { top: 8px; right: 8px; width: 26px; height: 26px; font-size: 12px; }
  .glitter-badge__tip { max-width: 120px; }

  .value-grid, .feature-grid { grid-template-columns: 1fr; }
  /* Two per row, like the product grid — a full-width 4:5 photo would fill
     the whole screen with a single type. */
  .tile-grid--3 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .color-grid { grid-template-columns: repeat(2, 1fr); }
  /* Две категории в строку, как товары и типы: карточка во всю ширину даёт
     горизонтальный кадр, а он срезает вертикальные свечи сверху и снизу. */
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .category-card { grid-template-columns: 1fr; }
  .category-card__media { min-height: 0; aspect-ratio: 4 / 5; }
  .category-card__body { padding: 14px 14px 16px; }
  .category-card__name { font-size: 19px; margin-bottom: 6px; }
  /* В карточке шириной ~170px описание разъезжается на три строки и ломает
     ровный ряд — на телефоне оставляем название и счётчик. */
  .category-card__desc { display: none; }
  .category-card__link { font-size: 11px; }
  .tile__body { padding: 14px 14px 16px; }
  .tile__name { font-size: 19px; margin-bottom: 6px; }
  .tile__desc { font-size: 13px; margin-bottom: 10px; }
  .tile__link { font-size: 11px; }
  .gallery__thumbs { gap: 10px; }

  /* Cart row: image + text on the first line, controls on their own line. */
  .cart-item { grid-template-columns: 64px 1fr; gap: 14px; padding: 14px; }
  .cart-item__name { font-size: 19px; }
  .cart-item__controls {
    grid-column: 1 / -1; flex-direction: row; align-items: center;
    justify-content: space-between; width: 100%;
    border-top: 1px solid var(--hairline); padding-top: 12px;
  }

  .btn { font-size: 13px; padding: 14px 26px; }
  .chip { font-size: 13px; padding: 12px 22px; }
  .contact-chips { flex-direction: column; }
  .cta { padding: 32px 22px; }
  .story { padding: 22px 20px; }
  .story__text { font-size: 18px; }
  .spec-row { font-size: 14px; }

  .section__title, .catalog-title, .cart-title, .intro__title,
  .doc__title, .order-done__title, .product-info__title { font-size: 30px; }
  .page-hero__title { font-size: 28px; }
  .intro__text { font-size: 16px; line-height: 1.7; }

  .site-footer { flex-direction: column; gap: 20px; text-align: center; padding: 32px var(--gutter); }
  .site-footer__brand { flex-direction: column; align-items: center; gap: 4px; }
  .site-footer__links { flex-wrap: wrap; justify-content: center; gap: 18px; }
}