/* ==========================================================================
   Monobuket 42 — v3 "Пудра"
   Пудрово-розовый холст, скругления 16–20px, терракотовый акцент,
   витринная плотность: каталог виден на первом экране.
   BEM blocks + Bootstrap 5 utilities. Шрифт — Manrope.
   ========================================================================== */

/* ---------- Tokens ---------------------------------------------------- */
:root {
  /* Colors */
  --bg: #faf3f1;
  --surface: #ffffff;
  --ink: #3a2e2c;
  --muted: #6f605c;
  --line: #ece0dc;
  --line-strong: #dccfca;

  /* Terracotta: --accent for fills, --accent-text for text on the canvas
     (darker, so small text keeps 4.5:1 contrast) */
  --accent: #b5563f;
  --accent-text: #a44b35;
  --accent-hover: #9b4732;
  --accent-soft: #f6e7e2;

  /* Typography */
  --font-base: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --text-label: 12px;
  --text-sm: 14px;
  --text-body: 16px;
  --text-body-lg: 18px;
  --text-h3: 20px;
  --text-h2: clamp(28px, 3vw, 36px);
  --text-h1: clamp(32px, 4.5vw, 48px);

  /* Spacing */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;

  /* Layout */
  --section-gap: clamp(48px, 6vw, 72px);
  --page-gutter: clamp(16px, 3vw, 32px);
  --page-max: 1320px;

  /* Radii */
  --r-img: 20px;
  --r-card: 20px;
  --r-block: 24px;
  --r-input: 12px;
  --r-pill: 9999px;
}

/* ---------- Bootstrap overrides --------------------------------------- */
:root {
  --bs-body-font-family: var(--font-base);
  --bs-body-font-size: var(--text-body);
  --bs-body-font-weight: var(--fw-regular);
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--ink);
  --bs-body-color-rgb: 58, 46, 44;
  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: 250, 243, 241;
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--r-input);
  --bs-border-radius-sm: var(--r-input);
  --bs-border-radius-lg: var(--r-card);
  --bs-link-color: var(--ink);
  --bs-link-color-rgb: 58, 46, 44;
  --bs-link-hover-color: var(--accent-text);
  --bs-focus-ring-color: rgba(181, 86, 63, 0.35);
}

.container {
  --bs-gutter-x: calc(var(--page-gutter) * 2);
}

@media (min-width: 1400px) {
  .container {
    max-width: var(--page-max);
  }
}

/* ---------- Base ------------------------------------------------------ */
body {
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* короткая страница не должна оставлять пустоту под подвалом */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main {
  flex: 1 0 auto;
}

.footer {
  flex: none;
}

/* Bootstrap reboot hardcodes `text-decoration: underline` on links */
a {
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--accent);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Typography helpers ---------------------------------------- */
.eyebrow {
  display: block;
  margin: 0;
  font-size: var(--text-label);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.eyebrow--muted {
  color: var(--muted);
}

.h1,
.h2,
.h3 {
  margin: 0;
  font-weight: var(--fw-bold);
  color: var(--ink);
}

.h1 {
  font-size: var(--text-h1);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.h2 {
  font-size: var(--text-h2);
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.h3 {
  font-size: var(--text-h3);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.lead {
  margin: 0;
  font-size: var(--text-body-lg);
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
}

.text-muted-ink {
  color: var(--muted);
}

.section {
  padding-block: var(--section-gap);
}

.section--tight {
  padding-block: clamp(32px, 4vw, 48px);
}

.divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
  opacity: 1;
}

/* ---------- Buttons --------------------------------------------------- */
.btn-p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.btn-p--accent {
  background: var(--accent);
  color: #fff;
}

.btn-p--accent:hover,
.btn-p--accent:focus-visible {
  background: var(--accent-hover);
  color: #fff;
}

.btn-p--outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-p--outline:hover,
.btn-p--outline:focus-visible {
  border-color: var(--accent);
  color: var(--accent-text);
}

/* «Купить в 1 клик»: вторичная по весу, но не бледная — мягкая заливка акцента */
.btn-p--soft {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-text);
}

.btn-p--soft:hover,
.btn-p--soft:focus-visible {
  background: #f0d8d1;
  border-color: transparent;
  color: var(--accent-hover);
}

.btn-p--white {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.btn-p--white:hover {
  color: var(--accent-text);
}

.btn-p--sm {
  padding: 9px 18px;
  font-size: var(--text-sm);
}

.link-accent {
  color: var(--accent-text);
  font-weight: var(--fw-medium);
}

.link-accent:hover {
  color: var(--accent-hover);
}

/* ==========================================================================
   Topbar — адрес, график, телефон, email
   ========================================================================== */
.topbar {
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--muted);
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8) var(--sp-24);
  min-height: 40px;
  padding-block: 6px;
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
}

.topbar__item svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
}

a.topbar__item:hover {
  color: var(--accent-text);
}

.topbar__spacer {
  margin-left: auto;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  min-height: 76px;
}

@media (min-width: 992px) {
  .header__inner {
    gap: var(--sp-24);
  }
}

.header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  flex: none;
  color: var(--ink);
}

.header__logo-mark {
  display: block;
  width: auto;
  height: 40px;
}

.header__logo-word {
  display: block;
  width: auto;
  height: 17px;
}

/* строка шапки со словом в логотипе требует 434px, на телефонах (360-414)
   она растягивала страницу по горизонтали — там оставляем только знак */
@media (max-width: 479.98px) {
  .header__logo-word {
    display: none;
  }
}

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
}

.header__link {
  font-size: var(--text-body);
  color: var(--ink);
}

.header__link:hover {
  color: var(--accent-text);
}

/* Подменю каталога: открывается наведением и с клавиатуры, без JS.
   Родительский пункт остаётся обычной ссылкой на раздел. */
.header__item {
  position: relative;
  /* вертикальный запас, чтобы курсор доходил до подменю без разрыва */
  padding-block: var(--sp-8);
}

.header__link--parent::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.header__drop {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 20;
  display: none;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: var(--sp-4) var(--sp-24);
  padding: var(--sp-16);
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  box-shadow: 0 16px 40px rgba(58, 46, 44, .12);
}

.header__item:hover .header__drop,
.header__item:focus-within .header__drop {
  display: grid;
}

.header__drop-link {
  display: block;
  padding: var(--sp-8) 0;
  font-size: var(--text-sm);
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
}

.header__drop-link:hover {
  color: var(--accent-text);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-left: auto;
}

/* Поиск по сайту */
.search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 420px;
  margin-left: auto;
}

.search__input {
  width: 100%;
  height: 44px;
  padding: 0 16px 0 44px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--ink);
}

.search__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.search__input:focus {
  outline: 0;
  border-color: var(--accent);
}

.search__btn {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.search__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.search__btn:hover {
  color: var(--accent-text);
}

/* Поиск внутри мобильного меню растягивается на всю ширину */
.menu .search {
  max-width: none;
  margin: 0 0 var(--sp-16);
}

.header__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  /* это <button>, поэтому гасим рамку и системные отступы */
  border: 0;
  appearance: none;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.header__icon:hover {
  color: var(--accent-text);
}

.header__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.header__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: var(--text-label);
  font-weight: var(--fw-bold);
  line-height: 18px;
  text-align: center;
}

.header__burger {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  padding: 9px 18px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
}

/* Mobile menu */
.menu {
  background: var(--bg);
  width: min(400px, 88vw);
  border-top-left-radius: var(--r-block);
  border-bottom-left-radius: var(--r-block);
}

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

.menu__item + .menu__item {
  border-top: 1px solid var(--line);
}

.menu__link {
  display: block;
  padding: var(--sp-16) 0;
  font-size: var(--text-body-lg);
  color: var(--ink);
}

/* Категории в мобильном меню — сразу раскрыты, панель и так прокручивается */
.menu__sub {
  list-style: none;
  margin: 0 0 var(--sp-16);
  padding: 0 0 0 var(--sp-16);
  border-left: 2px solid var(--line);
}

.menu__item > .menu__link + .menu__sub {
  margin-top: calc(-1 * var(--sp-8));
}

.menu__sublink {
  display: block;
  padding: var(--sp-8) 0;
  font-size: var(--text-body);
  color: var(--muted);
}

.menu__sublink:hover {
  color: var(--accent-text);
}

/* ==========================================================================
   Hero — короткий, товары начинаются сразу под ним
   ========================================================================== */
.hero {
  padding-block: var(--sp-32);
}

/* Фото-подложка: букет справа, слева в кадре пустое место под текст */
.hero__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-32);
  min-height: 520px;
  padding: clamp(24px, 4vw, 56px);
  border-radius: var(--r-block);
  overflow: hidden;
  background-color: #f6ece6;
  background-image: url("../img/hero/hero-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 72% center;
}

/* на узком экране кадр обрезается и букет уезжает под текст — гасим подложкой */
.hero__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(246, 236, 230, 0.93) 0%, rgba(246, 236, 230, 0.78) 100%);
}

@media (min-width: 768px) {
  .hero__card {
    background-position: right center;
  }

  .hero__card::before {
    background: linear-gradient(
      90deg,
      rgba(246, 236, 230, 0.96) 0%,
      rgba(246, 236, 230, 0.86) 32%,
      rgba(246, 236, 230, 0) 62%
    );
  }
}

@media (min-width: 992px) {
  .hero__card {
    min-height: clamp(460px, 38vw, 560px);
  }
}
/* до широкого экрана букет в кадре подъезжает под текст — растягиваем подложку */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .hero__card::before {
    background: linear-gradient(
      90deg,
      rgba(246, 236, 230, 0.97) 0%,
      rgba(246, 236, 230, 0.92) 46%,
      rgba(246, 236, 230, 0) 82%
    );
  }
}


.hero__content {
  max-width: 34rem;
}

.hero__title {
  margin-top: var(--sp-12);
  font-size: clamp(36px, 5.2vw, 60px);
}

/* слоган — отдельный абзац, а не часть H1; прижимаем его к заголовку вплотную */
.hero__slogan {
  margin-top: 0;
}

.hero__accent {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--accent-text);
}

.hero__text {
  margin-top: var(--sp-16);
  max-width: 30rem;
}

.hero__actions {
  margin-top: var(--sp-24);
}

.hero__perks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12) var(--sp-24);
  margin: 0;
  padding: 0;
}

.hero__perk {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--text-sm);
  color: var(--ink);
}

.hero__perk::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  flex: none;
}


/* ==========================================================================
   Category chips
   ========================================================================== */
.chips {
  display: flex;
  gap: var(--sp-8);
  overflow-x: auto;
  padding-bottom: var(--sp-4);
  scrollbar-width: none;
}

.chips::-webkit-scrollbar {
  display: none;
}

/* категорий больше десятка — на большом экране пусть переносятся, а не прячутся */
@media (min-width: 992px) {
  .chips {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-body);
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

.chip--active,
.chip--active:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ==========================================================================
   Section head
   ========================================================================== */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-16);
  margin-bottom: var(--sp-24);
}

/* ==========================================================================
   Product card
   ========================================================================== */
.product {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
}

.product__media {
  position: relative;
  display: block;
}

.product__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.product:hover .product__img {
  transform: scale(1.04);
}

.product__badge {
  position: absolute;
  top: var(--sp-12);
  left: var(--sp-12);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: var(--text-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 auto;
  padding: var(--sp-16);
}

.product__cat {
  margin: 0;
  font-size: var(--text-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.product__title {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  line-height: 1.4;
}

.product__title a {
  color: var(--ink);
}

.product__title a:hover {
  color: var(--accent-text);
}

.product__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-top: auto;
  padding-top: var(--sp-12);
}

.product__price {
  margin: 0;
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* ==========================================================================
   Perk cards
   ========================================================================== */
.perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-16);
}

@media (min-width: 576px) {
  .perks {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .perks {
    grid-template-columns: repeat(3, 1fr);
  }
}

.perks__item {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--sp-24);
}

.perks__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-12);
}

.perks__title {
  margin: 0 0 var(--sp-4);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
}

.perks__text {
  margin: 0;
  font-size: var(--text-body);
  color: var(--muted);
}

/* ==========================================================================
   About / delivery split
   ========================================================================== */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-32);
  align-items: center;
}

@media (min-width: 992px) {
  .about__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-48);
  }
}

.about__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-img);
}

.about__list {
  list-style: none;
  margin: var(--sp-24) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-12);
}

.about__item {
  position: relative;
  padding-left: 28px;
  color: var(--muted);
}

.about__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

/* ==========================================================================
   Шапка внутренней страницы
   ========================================================================== */
.page-head {
  padding-block: var(--sp-24) var(--sp-32);
}

.page-head__title {
  margin-top: var(--sp-12);
  max-width: 24ch;
}

.page-head__lead {
  margin-top: var(--sp-16);
}

/* ==========================================================================
   Раскладка внутренней страницы: текст + боковая карточка
   ========================================================================== */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-16);
  align-items: start;
}

@media (min-width: 992px) {
  .layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--sp-24);
  }
}

.layout > * {
  min-width: 0;
}

.content-card {
  background: var(--surface);
  border-radius: var(--r-block);
  padding: clamp(20px, 3vw, 40px);
}

.content-card .content {
  max-width: none;
}

/* Боковая карточка */
.aside-card {
  background: var(--surface);
  border-radius: var(--r-block);
  padding: clamp(20px, 3vw, 32px);
}

@media (min-width: 992px) {
  .aside-card {
    position: sticky;
    top: calc(76px + var(--sp-16));
  }
}

.aside-card__title {
  margin: var(--sp-8) 0 0;
  font-size: var(--text-body-lg);
  line-height: 1.4;
  font-weight: var(--fw-bold);
}

.aside-card__phone {
  display: block;
  margin-top: var(--sp-16);
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  color: var(--ink);
}

.aside-card__phone:hover {
  color: var(--accent-text);
}

.aside-card__note {
  margin: var(--sp-4) 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.aside-card__btn {
  display: flex;
  margin-top: var(--sp-16);
}

.aside-card .contacts__links {
  margin-top: var(--sp-12);
}

/* ==========================================================================
   Хлебные крошки
   ========================================================================== */
.crumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.crumbs__item + .crumbs__item::before {
  content: "/";
  margin-right: var(--sp-8);
  color: var(--line-strong);
}

.crumbs__link {
  color: var(--muted);
}

.crumbs__link:hover {
  color: var(--accent-text);
}

.crumbs__item--current {
  color: var(--ink);
}

/* ==========================================================================
   Текст страницы (содержимое ресурса)
   ========================================================================== */
.content {
  max-width: 78ch;
}

.content > :first-child {
  margin-top: 0;
}

.content h2 {
  margin: var(--sp-48) 0 var(--sp-16);
  font-size: var(--text-h2);
  line-height: 1.18;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
}

.content h3 {
  margin: var(--sp-32) 0 var(--sp-12);
  font-size: var(--text-h3);
  line-height: 1.3;
  font-weight: var(--fw-bold);
}

.content p {
  margin: 0 0 var(--sp-16);
}

.content ul,
.content ol {
  margin: 0 0 var(--sp-16);
  padding-left: 1.4em;
}

.content li {
  margin-bottom: var(--sp-8);
}

.content ul {
  list-style: none;
  padding-left: 0;
}

.content ul > li {
  position: relative;
  padding-left: 28px;
}

.content ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.content a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.content a:hover {
  color: var(--accent-hover);
}

/* кнопка внутри текста остаётся кнопкой */
.content a.btn-p {
  text-decoration: none;
}

.content a.btn-p--accent {
  color: #fff;
}

.content strong {
  font-weight: var(--fw-bold);
}

/* Оферта — аккордеон Bootstrap под палитру */
.content .accordion {
  /* внутри белой карточки аккордеон подкрашен, иначе белое на белом */
  --bs-accordion-bg: var(--bg);
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-radius: var(--r-card);
  --bs-accordion-inner-border-radius: var(--r-card);
  --bs-accordion-color: var(--ink);
  --bs-accordion-btn-color: var(--ink);
  --bs-accordion-active-bg: var(--accent-soft);
  --bs-accordion-active-color: var(--accent-text);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-padding-y: var(--sp-16);
  --bs-accordion-btn-padding-x: var(--sp-24);
  --bs-accordion-body-padding-y: var(--sp-16);
  --bs-accordion-body-padding-x: var(--sp-24);
  max-width: none;
}

.content .accordion-button {
  font-family: inherit;
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
}

.content .accordion-body h3 {
  margin-top: var(--sp-24);
}

/* ==========================================================================
   Карта
   ========================================================================== */
.map {
  border-radius: var(--r-img);
  overflow: hidden;
  background: var(--surface);
}

.map__frame {
  display: block;
  width: 100%;
  height: clamp(280px, 40vw, 420px);
  border: 0;
}

/* ==========================================================================
   Карточка статьи
   ========================================================================== */
.post {
  height: 100%;
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
}

.post__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--ink);
}

.post__cover {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post:hover .post__cover {
  transform: scale(1.04);
}

.post__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--sp-24);
}

.post__date {
  display: block;
  margin: 0 0 var(--sp-8);
  font-size: var(--text-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.post__title {
  display: block;
  margin: 0;
  font-size: var(--text-h3);
  line-height: 1.3;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.post__text {
  display: block;
  margin: var(--sp-12) 0 0;
  color: var(--muted);
}

.post__more {
  display: block;
  margin-top: auto;
  padding-top: var(--sp-16);
  color: var(--accent-text);
  font-weight: var(--fw-medium);
}

.post__link:hover .post__title {
  color: var(--accent-text);
}

/* ==========================================================================
   Article
   ========================================================================== */
.article {
  max-width: 860px;
  margin: 0 auto;
}

.article__date {
  margin: var(--sp-24) 0 var(--sp-8);
  font-size: var(--text-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.article__title {
  margin: 0;
}

.article__lead {
  margin-top: var(--sp-16);
}

.article__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-img);
  margin: var(--sp-24) 0;
}

/* бывшие wp-эмбеды товаров — оформляем ссылкой-таблеткой, а не строкой текста */
.content .embed-link {
  margin: var(--sp-8) 0;
}

.content .embed-link a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink);
  text-decoration: none;
}

.content .embed-link a:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

.article__back {
  margin-top: var(--sp-24);
}

/* ==========================================================================
   Order form
   ========================================================================== */
.order__card {
  background: var(--surface);
  border-radius: var(--r-block);
  padding: clamp(24px, 4vw, 48px);
}

.order__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-32);
}

@media (min-width: 992px) {
  .order__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-48);
  }
}

.field {
  margin-bottom: var(--sp-16);
}

.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--muted);
}

.field__control {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  font-family: inherit;
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--ink);
}

.field__control::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field__control:focus {
  outline: 0;
  border-color: var(--accent);
  background: var(--surface);
}

.field__control:user-invalid {
  border-color: var(--accent);
}

textarea.field__control {
  resize: vertical;
  min-height: 92px;
}

.field__error {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  color: var(--accent-text);
}

.form-note {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--muted);
  max-width: 46ch;
}

.form-status {
  margin-top: var(--sp-16);
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  color: var(--accent-text);
}

/* ==========================================================================
   Contacts
   ========================================================================== */
.contacts__card {
  height: 100%;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--sp-24);
}

.contacts__value {
  display: block;
  margin-top: var(--sp-8);
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--ink);
}

.contacts__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-48) var(--sp-24);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-32);
}

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

.footer__list {
  list-style: none;
  margin: var(--sp-12) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-8);
}

.footer__link {
  color: var(--muted);
}

.footer__link:hover {
  color: var(--accent-text);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-12);
  margin-top: var(--sp-32);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* ==========================================================================
   Vendor tweaks
   ========================================================================== */
.glightbox-clean .gslide-title,
.glightbox-clean .gslide-desc {
  font-family: var(--font-base);
  color: var(--ink);
}

/* ==========================================================================
   Catalog: badges, old price, pagination, empty state
   ========================================================================== */
.product__badges {
  position: absolute;
  top: var(--sp-12);
  left: var(--sp-12);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

/* бейджи лежат в общем контейнере, свои координаты им больше не нужны */
.product__badges .product__badge {
  position: static;
}

.product__price-old {
  margin-right: var(--sp-8);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--muted);
}

.link-muted {
  color: var(--muted);
}

.link-muted:hover {
  color: var(--accent-text);
}

.pagenav {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-32);
}

.pagination {
  --bs-pagination-color: var(--ink);
  --bs-pagination-bg: var(--surface);
  --bs-pagination-border-color: var(--line-strong);
  --bs-pagination-border-radius: var(--r-pill);
  --bs-pagination-hover-color: var(--accent-text);
  --bs-pagination-hover-bg: var(--accent-soft);
  --bs-pagination-hover-border-color: var(--line-strong);
  --bs-pagination-focus-color: var(--accent-text);
  --bs-pagination-focus-bg: var(--accent-soft);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-bg: var(--accent);
  --bs-pagination-active-border-color: var(--accent);
  --bs-pagination-padding-x: 18px;
  --bs-pagination-padding-y: 9px;
  --bs-pagination-font-size: var(--text-body);
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: 0;
}

.pagination .page-link {
  border-radius: var(--r-pill);
}

.empty-state {
  padding: var(--sp-48) var(--sp-24);
  border-radius: var(--r-block);
  background: var(--surface);
  text-align: center;
}

.empty-state__title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
}

.empty-state__text {
  max-width: 460px;
  margin: var(--sp-8) auto var(--sp-24);
  color: var(--muted);
}

/* Чекбокс в форме заказа и подпись под полем */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  cursor: pointer;
}

.checkbox__input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.checkbox__text {
  font-size: var(--text-sm);
  line-height: 1.45;
}

.field__hint {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Подсказки адреса на оформлении */
.field--suggest {
  position: relative;
}

.suggest {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: var(--sp-8) 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  box-shadow: 0 12px 32px rgba(58, 46, 44, 0.12);
}

.suggest__item {
  padding: 8px var(--sp-16);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
}

.suggest__item--active,
.suggest__item:hover {
  background: var(--accent-soft);
}

/* ==========================================================================
   Product page
   ========================================================================== */
.product-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-24);
  margin-top: var(--sp-24);
}

@media (min-width: 992px) {
  .product-page {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-48);
  }
}

/* дети грида по умолчанию min-width:auto — Swiper без этого растягивает колонку */
.product-page > * {
  min-width: 0;
}

.product-page__info {
  align-self: start;
}

.product-page__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  margin-top: var(--sp-24);
}

/* ---- Галерея ---- */
.gallery__main {
  border-radius: var(--r-img);
  background: var(--surface);
  overflow: hidden;
}

.gallery__link {
  display: block;
}

.gallery__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.gallery__thumbs {
  margin-top: var(--sp-12);
}

.gallery__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-input);
  border: 1px solid transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.gallery__thumbs .swiper-slide-thumb-active .gallery__thumb,
.gallery__thumb:hover {
  opacity: 1;
  border-color: var(--accent);
}

/* ---- Цена ---- */
.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-8);
}

.price__from {
  font-size: var(--text-body);
  color: var(--muted);
}

.price__now {
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  line-height: 1.1;
}

.price__old {
  font-size: var(--text-body-lg);
  color: var(--muted);
}

/* ---- Размеры ---- */
.variants {
  margin-top: var(--sp-24);
}

.variants__label {
  display: block;
  margin-bottom: var(--sp-8);
  font-size: var(--text-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.variants__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.variant {
  min-height: 42px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-body);
  white-space: nowrap;
}

.variant:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

.variant--active,
.variant--active:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---- Характеристики ---- */
.specs {
  display: grid;
  gap: var(--sp-8);
  padding: var(--sp-16) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.specs:empty {
  display: none;
}

.specs__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-8);
}

.specs__key {
  color: var(--muted);
}

.specs__val {
  font-weight: var(--fw-medium);
  text-align: right;
}

/* на узком экране значение переносится целой строкой — прижимать его вправо незачем */
@media (max-width: 575.98px) {
  .specs__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .specs__val {
    text-align: left;
  }
}

/* ==========================================================================
   Корзина, избранное, уведомления
   ========================================================================== */
.cart__panel {
  width: min(380px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: var(--sp-16);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  box-shadow: 0 16px 40px rgba(58, 46, 44, .12);
}

.cart__empty {
  margin: 0;
  padding-block: var(--sp-8);
  text-align: center;
  color: var(--muted);
}

.cart__row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  align-items: center;
  gap: var(--sp-8);
  padding-block: var(--sp-12);
  border-bottom: 1px solid var(--line);
}

.cart__thumb img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--r-input);
}

.cart__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cart__name {
  font-size: var(--text-sm);
  line-height: 1.3;
  color: var(--ink);
}

.cart__name:hover {
  color: var(--accent-text);
}

.cart__cost {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
}

.cart__qty {
  display: flex;
  align-items: center;
  gap: 2px;
}

.cart__step {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: var(--text-body);
  line-height: 1;
  color: var(--ink);
  background: var(--accent-soft);
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
}

.cart__step:hover {
  color: var(--accent-text);
}

.cart__count {
  width: 34px;
  padding: 2px 0;
  font-size: var(--text-sm);
  text-align: center;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  /* стрелки шире самого поля */
  -moz-appearance: textfield;
}

.cart__count::-webkit-outer-spin-button,
.cart__count::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart__remove {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: var(--text-body-lg);
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.cart__remove:hover {
  color: var(--accent-text);
}

.cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-block: var(--sp-16) var(--sp-12);
  font-size: var(--text-sm);
  color: var(--muted);
}

.cart__sum {
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  color: var(--ink);
}

/* ---- Избранное ---- */
.fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
}

.fav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.fav:hover {
  color: var(--accent-text);
  border-color: var(--accent);
}

.fav--on {
  color: var(--accent);
  border-color: var(--accent);
}

.fav--on svg {
  fill: currentColor;
}

/* в карточке каталога — поверх фотографии */
.product .fav {
  position: absolute;
  top: var(--sp-12);
  right: var(--sp-12);
  z-index: 2;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, .9);
  border-color: transparent;
}

.product .fav svg {
  width: 18px;
  height: 18px;
}

/* ---- Цена по запросу ---- */
.price__ask,
.product__price--ask {
  font-size: var(--text-body-lg);
  font-weight: var(--fw-medium);
  color: var(--muted);
}

.price__ask {
  font-size: var(--text-h3);
}

/* ==========================================================================
   Страницы корзины, избранного и оформления
   ========================================================================== */
.cart__all {
  display: block;
  margin-top: var(--sp-8);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--muted);
}

.cart__all:hover {
  color: var(--accent-text);
}

.cart-page,
.checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-24);
  align-items: start;
}

@media (min-width: 992px) {
  .cart-page,
  .checkout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--sp-32);
  }
}

.cart-page__list {
  padding: var(--sp-8) var(--sp-24) var(--sp-24);
  background: var(--surface);
  border-radius: var(--r-block);
}

.cart-line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-12) var(--sp-16);
  padding-block: var(--sp-16);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) {
  .cart-line {
    grid-template-columns: 96px minmax(0, 1fr) auto 110px auto;
  }
}

.cart-line__media img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--r-input);
}

.cart-line__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.cart-line__name {
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  color: var(--ink);
}

.cart-line__name:hover {
  color: var(--accent-text);
}

.cart-line__price {
  font-size: var(--text-sm);
  color: var(--muted);
}

.cart-line__cost {
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  text-align: right;
}

.cart-page__clean {
  padding: 0;
  font-size: var(--text-sm);
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.cart-page__clean:hover {
  color: var(--accent-text);
}

.cart-total {
  position: sticky;
  top: 96px;
  padding: var(--sp-24);
  background: var(--surface);
  border-radius: var(--r-block);
}

.cart-total__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-12);
  padding-block: var(--sp-8);
  color: var(--muted);
}

.cart-total__row--sum {
  margin-top: var(--sp-8);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.cart-total__sum {
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
}

.cart-total__note {
  margin: var(--sp-12) 0 0;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--muted);
}

.cart-total__back {
  display: block;
  margin-top: var(--sp-16);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--muted);
}

.cart-total__back:hover {
  color: var(--accent-text);
}

/* ---- Оформление ---- */
.checkout__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}

.checkout__section {
  padding: var(--sp-24);
  background: var(--surface);
  border-radius: var(--r-block);
}

.checkout__section .field {
  margin-top: var(--sp-16);
}

.checkout__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
}

.checkout__address {
  margin-top: var(--sp-16);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
}

.choices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-top: var(--sp-16);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  cursor: pointer;
}

.choice:hover {
  border-color: var(--accent);
}

.choice__input {
  margin-top: 3px;
  accent-color: var(--accent);
}

.choice__input:checked ~ .choice__body .choice__name {
  color: var(--accent-text);
}

.choice__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.choice__name {
  font-weight: var(--fw-medium);
}

.choice__note {
  font-size: var(--text-sm);
  color: var(--muted);
}

/* ---- Заказ оформлен ---- */
.order-done {
  padding: var(--sp-32);
  background: var(--surface);
  border-radius: var(--r-block);
}

.order-done__list {
  margin-top: var(--sp-24);
}

.order-done__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-16);
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--line);
}

.order-done__row--sum {
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  border-bottom: 0;
}

/* ==========================================================================
   Согласие на обработку данных и уведомление о cookie
   ========================================================================== */
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  margin-top: var(--sp-16);
  cursor: pointer;
}

.cart-total .consent {
  padding-top: var(--sp-16);
  border-top: 1px solid var(--line);
}

.consent__input {
  margin-top: 3px;
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.consent__text {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--muted);
}

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

.consent--error .consent__text {
  color: var(--accent-text);
}

.consent--error .consent__input {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Плашка о cookie ---- */
.cookies {
  position: fixed;
  left: 50%;
  bottom: var(--sp-16);
  z-index: 1080;
  width: min(760px, calc(100vw - 32px));
  transform: translateX(-50%);
  padding: var(--sp-16) var(--sp-24);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  box-shadow: 0 16px 40px rgba(58, 46, 44, .18);
}

.cookies[hidden] {
  display: none;
}

.cookies__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

@media (min-width: 768px) {
  .cookies__body {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-24);
  }
}

.cookies__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--muted);
}

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

.cookies__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  flex: none;
}

/* ---------- Кнопка «наверх» -------------------------------------------- */
/* z-index ниже баннера cookie (1080), чтобы не перекрывала его кнопки */
.to-top {
  position: fixed;
  right: var(--page-gutter);
  bottom: var(--sp-24);
  z-index: 1030;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: 0 6px 20px rgba(58, 46, 44, .14);
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}

.to-top[hidden] {
  display: none;
}

.to-top:hover {
  background: var(--bg);
  transform: translateY(-2px);
}

.to-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: none;
  }
}

/* ---------- Плитки категорий ------------------------------------------- */
.cat-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-12);
  margin-bottom: var(--sp-32);
}

@media (min-width: 576px) {
  .cat-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* auto-fit, а не фиксированные шесть колонок: пустых категорий в выводе нет,
   и пять плиток должны занимать ряд целиком, а не оставлять дыру справа */
@media (min-width: 992px) {
  .cat-cards {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-16);
  }
}

.cat-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.cat-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 10px 28px rgba(58, 46, 44, .12);
}

.cat-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cat-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--bg);
}

.cat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cat-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-12);
  text-align: center;
}

.cat-card__title {
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.cat-card__count {
  font-size: var(--text-sm);
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .cat-card {
    transition: none;
  }
}

/* ---------- Быстрый заказ ---------------------------------------------- */
.oneclick {
  position: relative;
  padding: var(--sp-32) var(--sp-24) var(--sp-24);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-block);
}

.oneclick__close {
  position: absolute;
  top: var(--sp-16);
  right: var(--sp-16);
}

.oneclick__lead {
  margin: var(--sp-8) 0 var(--sp-16);
  color: var(--muted);
}

.oneclick__product {
  margin: 0 0 var(--sp-16);
  padding: var(--sp-12);
  background: var(--bg);
  border-radius: var(--r-input);
  font-weight: var(--fw-bold);
}

.oneclick__product:empty {
  display: none;
}

/* в сетке цена идёт строкой, кнопки — во всю ширину карточки друг под другом */
.product__footer {
  flex-direction: column;
  align-items: stretch;
}

.product__footer form,
.product__footer .btn-p {
  width: 100%;
}

.product__footer .btn-p {
  justify-content: center;
}