@charset "utf-8";
/* ==========================================================================
   brandshop — тема витрины для магазинов с layout='brandshop'
   (garmin-shop.com.ua, ctek-ua.com)

   Сверстана по doc/design_brandshop/ (BUILD.md — ТЗ, README.md — значения,
   design/*.dc.html — макеты).

   Правила файла:
   - цвета ТОЛЬКО через токены :root; исключения — transparent, currentColor,
     rgba-тени;
   - фирменная палитра каждого магазина живёт в скине
     public/assets/css/skins/<css>.css и переопределяет :root; скину разрешены
     только переменные, правило на класс = в теме не хватило токена;
   - БЭМ, вложенность не глубже одного уровня, без #id и без !important
     (исключение — .visually-hidden);
   - порядок: сброс → токены → утилиты → layout → компоненты → секции → печать.

   Тему НЕ подключают магазины на multibrand: у них свой layout и style.css.
   ========================================================================== */

/* ==========================================================================
   1. Сброс
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font: 400 16px/1.5 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Иконки спрайта /assets/img/brandshop/sprite.svg (BUILD.md §7).
   stroke и fill наследуются внутрь <use>, поэтому у символов спрайта они не
   заданы: иконка всегда цвета текста. Залитые варианты — отдельные символы
   heart-filled и star-filled, у них fill прибит на самом symbol. */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-dark); text-decoration: underline; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   2. Токены. Значения по умолчанию — палитра Garmin (BUILD.md §3)
   ========================================================================== */
:root {
  /* акцент — переопределяется скином магазина */
  --c-accent: #007cc3;
  --c-accent-hover: #0091e6;
  --c-accent-dark: #005b91;
  --c-accent-bg: #e8f4fc;
  --c-accent-bg-soft: #f6f9fb;
  --c-accent-on-dark: #6fc5f5;

  /* нейтральные */
  --c-ink: #14181c;
  --c-ink-2: #2b3238;
  --c-text: #3c464f;
  --c-muted: #5b6670;
  --c-muted-2: #7c8792;
  --c-muted-3: #8b959e;
  --c-muted-4: #a4adb5;
  --c-on-dark: #c9d1d8;
  --c-on-dark-2: #9aa4ad;

  --c-page: #eef1f4;
  --c-surface: #ffffff;
  --c-surface-2: #f2f5f8;

  --c-border: #e2e7eb;
  --c-border-strong: #d7dee4;
  --c-border-light: #f1f4f6;
  --c-border-dashed: #dde4e9;

  /* статусы */
  --c-success: #1d8a4b;
  --c-success-bg: #eaf7ee;
  --c-warning: #c07000;
  --c-sale: #d9480f;
  --c-sale-bg: #fdece4;
  --c-star: #f0a500;
  --c-online: #35c26b;

  /* шрифты */
  --f-sans: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-cond: "Roboto Condensed", "Arial Narrow", var(--f-sans);
  --f-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* отступы */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* прочее */
  --r-xs: 3px; --r-sm: 4px; --r-md: 6px; --r-pill: 999px;
  --shadow-card: 0 10px 26px rgba(12, 20, 28, .07);
  --shadow-pop: 0 18px 40px rgba(12, 20, 28, .10);
  --shadow-sticker: 0 3px 10px rgba(12, 20, 28, .18);
  --container: 1360px;
  --gutter: 24px;
  --topbar-h: 40px;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* логотип: скин задаёт свои размеры, если картинка другой пропорции */
  --logo-w: 132px;
  --logo-w-md: 112px;
}

@media (max-width: 767px) {
  :root { --gutter: 14px; }
}

/* ==========================================================================
   3. Утилиты
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute;
  left: var(--s-2); top: -100px;
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--c-surface);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-pop);
}
.skip-link:focus { top: var(--s-2); }

/* ==========================================================================
   4. Каркас страницы
   ========================================================================== */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page__main { flex: 1 0 auto; }

/* ==========================================================================
   5. Шапка
   ========================================================================== */
.header { background: var(--c-surface); }

/* --- верхняя тёмная полоса --- */
.header__topbar {
  background: var(--c-ink);
  color: var(--c-on-dark-2);
  font-size: 13px;
}
.header__topbar-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--topbar-h);
}
.header__topbar-link { color: var(--c-on-dark); }
.header__topbar-link:hover { color: var(--c-surface); text-decoration: none; }
.header__topbar-spacer { flex: 1; }

.header__place {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-surface);
  font-weight: 500;
}
.header__place-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-online);
  flex: none;
}

.header__lang {
  display: flex;
  border: 1px solid var(--c-ink-2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.header__lang-item {
  padding: 3px 9px;
  font-size: 12px;
  color: var(--c-on-dark-2);
}
.header__lang-item:hover { color: var(--c-surface); text-decoration: none; }
.header__lang-item--active {
  background: var(--c-accent);
  color: var(--c-surface);
  font-weight: 700;
}

@media (max-width: 899px) {
  .header__topbar { display: none; }
}

/* --- основная строка --- */
.header__bar { border-bottom: 1px solid var(--c-border); }
.header__bar-inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding-block: 18px;
}

.header__logo {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: var(--s-1);
}
/* Ограничиваем именно ВЫСОТУ: у garmin2 логотип с подписью «authorized partner»
   и при заданной ширине тянет шапку вверх. width: auto сохраняет пропорцию. */
.header__logo img { width: auto; height: 46px; max-width: var(--logo-w); object-fit: contain; }

.header__catalog-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--c-accent);
  color: var(--c-surface);
  font-size: 15px;
  font-weight: 700;
  transition: background .2s var(--ease);
}
.header__catalog-btn:hover { background: var(--c-accent-hover); }
.header__burger {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: none;
}
.header__burger span {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
}

.header__search {
  flex: 1;
  display: flex;
  min-width: 0;
  height: 48px;
}
.header__search-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 var(--s-4);
  border: 2px solid var(--c-border-strong);
  border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  font-size: 15px;
  color: var(--c-ink);
  background: var(--c-surface);
}
.header__search-input::placeholder { color: var(--c-muted-3); }
.header__search-input:focus {
  outline: none;
  border-color: var(--c-accent);
}
.header__search-btn {
  width: 60px;
  flex: none;
  border: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--c-ink);
  color: var(--c-surface);
  font-size: 15px;
  font-weight: 700;
  transition: background .2s var(--ease);
}
.header__search-btn:hover { background: var(--c-ink-2); }

.header__tools {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: none;
}
.header__phones {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.header__phone {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
}
.header__phone:hover { color: var(--c-accent); text-decoration: none; }
.header__phone-note {
  font-size: 12px;
  color: var(--c-muted-2);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.header__icon-btn {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-muted);
  position: relative;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.header__icon-btn:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  text-decoration: none;
}
.header__icon-btn svg { width: 26px; height: 26px; }

.header__cart {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-sm);
  background: var(--c-ink);
  color: var(--c-surface);
  font-size: 14px;
  font-weight: 700;
  transition: background .2s var(--ease);
}
.header__cart:hover {
  background: var(--c-ink-2);
  color: var(--c-surface);
  text-decoration: none;
}
.header__count {
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  display: grid;
  place-items: center;
  font-size: 12px;
}
/* display:grid выше перебивает браузерное [hidden]{display:none}, и пустой
   счётчик висел синим кружком поверх сердца. Возвращаем скрытие явно. */
.header__count[hidden] { display: none; }

/* мобильная кнопка меню и кнопка звонка — на десктопе не нужны */
.header__nav-toggle { display: none; }
.header__call {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
}
.header__call:hover { border-color: var(--c-accent); color: var(--c-accent); }

@media (max-width: 1199px) {
  .header__logo img { height: 38px; max-width: var(--logo-w-md); }
  .header__tools { gap: var(--s-3); }
  .header__phones { display: none; }
  /* вместо развёрнутых телефонов — кнопка звонка */
  .header__call { display: grid; }
}

@media (max-width: 899px) {
  .header__bar-inner {
    flex-wrap: wrap;
    gap: var(--s-3);
    padding-block: var(--s-3);
  }
  .header__nav-toggle {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    order: -1;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    color: var(--c-ink);
  }
  .header__catalog-btn { display: none; }
  .header__search {
    order: 10;
    flex-basis: 100%;
    height: 44px;
  }
  .header__search-input { height: 44px; }
}

/* На узких экранах корзина сжимается до иконки со счётчиком */
@media (max-width: 599px) {
  .header__cart { padding-inline: var(--s-3); gap: 6px; }
  .header__cart-label { display: none; }
}

/* ==========================================================================
   6. Мега-меню каталога
   ========================================================================== */
.catalog-menu {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow-pop);
}
.catalog-menu[hidden] { display: none; }
.catalog-menu__inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: stretch;
}
.catalog-menu__groups {
  background: var(--c-surface-2);
  padding: var(--s-5) 0 var(--s-10);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.catalog-menu__group {
  padding: var(--s-4) var(--s-6);
  border: 0;
  border-left: 3px solid transparent;
  background: none;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--c-text);
}
.catalog-menu__group[aria-selected="true"] {
  background: var(--c-accent-bg);
  border-left-color: var(--c-accent);
  color: var(--c-accent);
}
.catalog-menu__items {
  padding: var(--s-6) var(--s-6) 34px 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-1) var(--s-3);
}
.catalog-menu__items[hidden] { display: none; }
.catalog-menu__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 10px var(--s-5);
  border-radius: var(--r-md);
  color: var(--c-ink);
}
.catalog-menu__item:hover {
  background: var(--c-accent-bg-soft);
  color: var(--c-accent);
  text-decoration: none;
}
.catalog-menu__item-name {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--c-accent);
  text-align: center;
  line-height: 1.3;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.catalog-menu__item-media {
  width: 100%;
  height: 120px;
  display: grid;
  place-items: center;
}
.catalog-menu__item-media img {
  max-width: 100%;
  max-height: 120px;
  width: auto;
}

@media (max-width: 1199px) {
  .catalog-menu__items { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) {
  .catalog-menu { display: none; }
}

/* ==========================================================================
   7. Подвал
   ========================================================================== */
.footer {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  color: var(--c-ink);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: var(--s-8);
  padding-block: var(--s-10) 28px;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__brand img { width: 170px; height: auto; }
.footer__about {
  font-size: 13px;
  color: var(--c-muted-2);
  line-height: 1.6;
}
.footer__phone {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
}
.footer__phone:hover { color: var(--c-accent); text-decoration: none; }

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer__col-title {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-muted-3);
  margin-bottom: var(--s-1);
}
.footer__link {
  font-size: 13px;
  color: var(--c-text);
}
.footer__link:hover { color: var(--c-accent); text-decoration: none; }

.footer__social {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.footer__social a {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-muted);
}
.footer__social a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.footer__social svg { width: 22px; height: 22px; }
/* Телеграм — фирменным синим и крупнее прочих: это основной канал связи. */
.footer__social a[href*="t.me"],
.footer__social a[href*="telegram"] {
  width: 40px; height: 40px;
  border-color: #229ED9;
  color: #229ED9;
}
.footer__social a[href*="t.me"] svg,
.footer__social a[href*="telegram"] svg { width: 26px; height: 26px; }
.footer__social a[href*="t.me"]:hover,
.footer__social a[href*="telegram"]:hover { background: #229ED9; color: #fff; }

.footer__pays {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
}
.footer__pays img { height: 26px; width: auto; object-fit: contain; }
/* Логотипы банков квадратные — им подложка не нужна, а карточным знакам она
   уже нарисована внутри svg. */
.footer__logo { max-width: 150px; }

.footer__bottom { border-top: 1px solid var(--c-page); }
.footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  font-size: 12px;
  color: var(--c-muted-3);
}
.footer__bottom-inner a { color: var(--c-muted-3); }
.footer__bottom-inner a:hover { color: var(--c-accent); }

@media (max-width: 899px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}
@media (max-width: 599px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom-inner { flex-direction: column; gap: var(--s-2); }
}

/* ==========================================================================
   8. Мобильное меню (off-canvas)
   ========================================================================== */
.mobile-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: min(88vw, 340px);
  background: var(--c-surface);
  box-shadow: var(--shadow-pop);
  transform: translateX(-100%);
  transition: transform .28s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
.mobile-nav[data-open="true"] { transform: translateX(0); }

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--c-border);
}
.mobile-nav__close {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-muted);
}
.mobile-nav__langs {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-border-light);
}
.mobile-nav__lang {
  display: grid;
  place-items: center;
  min-width: 54px; height: 36px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-size: 13px;
  font-weight: 700;
}
.mobile-nav__lang--active {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: #fff;
}

.mobile-nav__section {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-border-light);
}
.mobile-nav__title {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-muted-3);
  padding: var(--s-2) var(--s-4);
}
.mobile-nav__link {
  display: block;
  padding: var(--s-3) var(--s-4);
  font-size: 15px;
  color: var(--c-text);
}
.mobile-nav__link:hover,
.mobile-nav__link:focus-visible {
  background: var(--c-accent-bg-soft);
  color: var(--c-accent);
  text-decoration: none;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(12, 20, 28, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s var(--ease);
}
.overlay[data-open="true"] { opacity: 1; visibility: visible; }

body[data-nav-open="true"] { overflow: hidden; }

@media (min-width: 900px) {
  .mobile-nav, .overlay { display: none; }
}

/* ==========================================================================
   9. Кнопки и бейджи
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 44px;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn--primary { background: var(--c-accent); color: #fff; }
.btn--primary:hover { background: var(--c-accent-hover); color: #fff; }
.btn--dark { background: var(--c-ink); color: #fff; }
.btn--dark:hover { background: var(--c-ink-2); color: #fff; }
.btn--ghost { background: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-ink); }
.btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }
.btn--sm { height: 40px; padding: 0 var(--s-4); }
.btn--icon { width: 44px; padding: 0; }

/* Бейдж — короткая метка моноширинным шрифтом, как в макете */
.badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--r-xs);
  background: var(--c-surface-2);
  color: var(--c-muted);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--new  { background: var(--c-success-bg); color: var(--c-success); }
.badge--hit  { background: var(--c-accent-bg); color: var(--c-accent-dark); }
.badge--sale { background: var(--c-sale-bg); color: var(--c-sale); font-weight: 700; }
.badge--gift { background: var(--c-success-bg); color: var(--c-success); }

/* ==========================================================================
   10. Карточка товара и сетка списка
   ========================================================================== */

/* Сетка одна на все списки. Ширину колонки задаёт auto-fill, поэтому
   переопределять число колонок под каждый экран не нужно. */
.products-grid {
  display: grid;
  /* По умолчанию 4 в ряд — так на главной. auto-fill при контейнере 1360px
     давал пять узких колонок, и фото товара получалось мелким. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1199px) { .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px)  { .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .products-grid { gap: var(--s-3); } }

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.product-card:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-card);
}
.product-card--out { color: var(--c-muted-2); }

.product-card__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
}
.product-card__badges-spacer { flex: 1; }

.product-card__fav {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--c-muted-3);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.product-card__fav:hover { background: var(--c-accent-bg-soft); color: var(--c-accent); }
/* Заливку включает brandshop.js, проставляя aria-pressed */
.product-card__fav[aria-pressed="true"] { color: var(--c-accent); }
.product-card__fav[aria-pressed="true"] .icon { fill: currentColor; }

/* Плитка фото фиксированной высоты: без неё карточки в ряду разъезжаются,
   а картинка «прыгает» при догрузке (CLS). */
.product-card__media {
  display: grid;
  place-items: center;
  height: 240px;
  padding: var(--s-2);
  border-radius: var(--r-sm);
  background: var(--c-surface);
}
.product-card__media img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply; /* съедает белую подложку старых фото */
}
.product-card--out .product-card__media img { opacity: .55; filter: grayscale(1); }

/* Три строки названия с фиксированной высотой — чтобы цены и кнопки
   в соседних карточках стояли на одной линии. */
.product-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  min-height: 58px;
}
.product-card__title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: inherit;
}
.product-card__title a:hover { color: var(--c-accent); text-decoration: none; }

.product-card__stock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--c-muted-2);
}
.product-card__stock::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.product-card__stock--in    { color: var(--c-success); }
.product-card__stock--order { color: var(--c-warning); }
.product-card__stock--out   { color: var(--c-muted-3); }

.product-card__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
}
.product-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.product-card__price del {
  min-height: 16px;
  color: var(--c-muted-4);
  font-size: 12px;
}
.product-card__price strong {
  font-family: var(--f-cond);
  font-size: 28px;
  font-weight: 700;
}
.product-card__price small { font-size: 14px; font-weight: 400; }
.product-card__buy { height: 40px; padding: 0 var(--s-5); }

.product-card__parts {
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border-light);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.product-card__parts-sum { font-size: 12px; color: var(--c-muted-2); }
.product-card__parts-sum b { color: var(--c-ink); }

.installments {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.installments__item {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  background: var(--c-surface-2);
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
}
.installments__item img { width: 16px; height: 16px; object-fit: contain; }

/* Компактный вид — тот же блок, другой модификатор: «похожие», слайдеры */
.product-card--compact { gap: var(--s-2); padding: var(--s-3); }
.product-card--compact .product-card__media { height: 130px; }
.product-card--compact .product-card__title { min-height: 40px; font-size: 13px; }
.product-card--compact .product-card__title a { -webkit-line-clamp: 2; line-clamp: 2; }
.product-card--compact .product-card__price strong { font-size: 22px; }
.product-card--compact .product-card__parts { display: none; }

@media (max-width: 599px) {
  .product-card { padding: var(--s-3); gap: var(--s-2); }
  .product-card__media { height: 140px; }
  .product-card__title { min-height: 54px; font-size: 13px; }
  .product-card__price strong { font-size: 22px; }
  /* На узкой карточке цена и кнопка в одну строку не помещаются */
  .product-card__bottom { flex-direction: column; align-items: stretch; }
  .product-card__buy { width: 100%; }
  .product-card__parts { display: none; }
}

/* ==========================================================================
   11. Хлебные крошки
   ========================================================================== */
.breadcrumbs { padding: var(--s-3) 0; font-size: 12px; color: var(--c-muted-2); }
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumbs__list li { display: flex; align-items: center; gap: var(--s-2); }
.breadcrumbs__list li + li::before { content: "/"; color: var(--c-muted-4); }
.breadcrumbs a { color: var(--c-muted); }
.breadcrumbs a:hover { color: var(--c-accent); }
.breadcrumbs [aria-current="page"] { color: var(--c-ink); }

/* ==========================================================================
   12. Каталог: шапка, панель, сетка с сайдбаром
   ========================================================================== */
.catalog { padding-bottom: var(--s-10); }

.catalog__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.catalog__h1 {
  font-family: var(--f-cond);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
}
.catalog__count { font-size: 13px; color: var(--c-muted-2); }

/* Верхняя панель осталась только под мобильную кнопку «Фильтр»: сортировка
   переехала в колонку товаров, как в макете. На десктопе панель пустая — прячем. */
.catalog__toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
@media (min-width: 1024px) { .catalog__toolbar { display: none; } }
/* Кнопка «Фильтр» нужна только там, где сайдбар свёрнут в шторку */
.catalog__filter-btn { display: none; }

.catalog__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.catalog__reset { font-size: 12px; color: var(--c-muted-2); text-decoration: underline; }
.catalog__reset:hover { color: var(--c-sale); }

.catalog__body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
}
.catalog__main { min-width: 0; }
/* В каталоге слева сайдбар фильтров, поэтому в ряд помещается 3, а не 4. */
.catalog__main .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199px) { .catalog__main .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px)  { .catalog__main .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.catalog__banners { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.catalog__banners img { width: 100%; border-radius: var(--r-md); }
.catalog__empty {
  padding: var(--s-10);
  border-radius: var(--r-md);
  background: var(--c-surface);
  text-align: center;
  color: var(--c-muted);
}

/* Чип — и быстрый фильтр, и снимаемая метка выбранного значения */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 13px;
  white-space: nowrap;
}
.chip:hover { border-color: var(--c-accent); color: var(--c-accent); text-decoration: none; }
.chip sup { font-size: 10px; color: var(--c-muted-3); }
.chip--on {
  border-color: var(--c-accent);
  background: var(--c-accent-bg);
  color: var(--c-accent-dark);
}
.chip--on:hover { background: var(--c-accent); color: #fff; }
.chip--removable .icon { opacity: .7; }

/* --- панель сортировки ----------------------------------------------------
   Ряд чипов слева и «Показывать по» справа, как в макете. Прежняя выпадашка
   на <details> оставлена в стилях ниже: ей пользуются экраны поиска и акций.
   -------------------------------------------------------------------------- */
.catalog__main .sorting-bar { margin-bottom: var(--gutter); }
.sorting-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.sorting-bar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.sorting-bar__label { font-size: 13px; color: var(--c-muted-2); }
.sort-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-size: 14px;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.sort-chip:hover { background: var(--c-accent-bg); color: var(--c-accent-dark); text-decoration: none; }
.sort-chip--on { background: var(--c-accent); color: #fff; font-weight: 700; }
.sort-chip--on:hover { background: var(--c-accent); color: #fff; }
.sort-chip--num { min-width: 44px; justify-content: center; padding: 0 var(--s-3); }

@media (max-width: 767px) {
  .sorting-bar { flex-direction: column; align-items: stretch; }
  .sorting-bar__group { overflow-x: auto; flex-wrap: nowrap; }
  .sorting-bar__group::-webkit-scrollbar { display: none; }
}

/* --- прежняя выпадашка (поиск, акции) ------------------------------------- */
.sorting { position: relative; }
.sorting__current {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}
.sorting__current::-webkit-details-marker { display: none; }
.sorting__label { color: var(--c-muted-2); }
.sorting__value { font-weight: 700; }
.sorting__caret { transform: rotate(90deg); transition: transform .2s var(--ease); }
.sorting[open] .sorting__caret { transform: rotate(-90deg); }
.sorting__list {
  position: absolute;
  right: 0;
  z-index: 30;
  min-width: 100%;
  margin-top: var(--s-1);
  padding: var(--s-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  box-shadow: var(--shadow-pop);
  list-style: none;
}
.sorting__opt {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-xs);
  color: var(--c-text);
  font-size: 13px;
  white-space: nowrap;
}
.sorting__opt:hover { background: var(--c-surface-2); color: var(--c-accent); text-decoration: none; }
.sorting__opt--on { font-weight: 700; color: var(--c-accent); }

/* --- фильтры -------------------------------------------------------------
   Один и тот же <dialog>: на десктопе показан обычным блоком в сайдбаре,
   на узких экранах открывается модалкой через showModal(). Второй разметки
   нет специально — иначе фасеты Sphinx считались бы дважды.
   -------------------------------------------------------------------------- */
.filters {
  display: block;              /* перебивает display:none у закрытого <dialog> */
  position: static;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: inherit;
  overflow: visible;
}
.filters__head { display: none; }
.filters__body { padding: var(--s-4); }
.filters__flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-border-light);
}
.filters__group { border-bottom: 1px solid var(--c-border-light); }
.filters__group:last-child { border-bottom: 0; }
.filters__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.filters__title::-webkit-details-marker { display: none; }
.filters__title::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--c-muted-3);
  border-bottom: 2px solid var(--c-muted-3);
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}
.filters__group[open] .filters__title::after { transform: rotate(-135deg); }
.filters__list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--s-3);
  max-height: 280px;
  overflow-y: auto;
}
.filters__opt {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 0;
  color: var(--c-text);
  font-size: 13px;
  line-height: 1.3;
}
.filters__opt:hover { color: var(--c-accent); text-decoration: none; }
/* «Чекбокс» рисуем сами: это ссылка, менять адрес обязана она, а не input */
.filters__box {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px; height: 18px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-xs);
  background: var(--c-surface);
  color: transparent;
}
.filters__opt--on .filters__box {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: #fff;
}
.filters__opt--on { font-weight: 700; color: var(--c-ink); }
.filters__name { flex: 1; }
.filters__count { font-size: 11px; color: var(--c-muted-3); }
.filters__foot {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-border-light);
}
.filters__apply { display: none; }
.filters__foot .btn { flex: 1; }

/* --- пагинация ----------------------------------------------------------- */
.pagination-box { margin-top: var(--s-8); }
/* will_paginate отдаёт <ul class="pagination"><li><a class="cur">, а не <span
   class="current"> — стилизуем именно то, что приходит. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination li { display: flex; }
.pagination a, .pagination span, .pagination em {
  display: grid;
  place-items: center;
  min-width: 40px; height: 40px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 14px;
}
.pagination a:hover { border-color: var(--c-accent); color: var(--c-accent); text-decoration: none; }
.pagination .cur,
.pagination .current,
.pagination em {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: #fff;
  font-style: normal;
  font-weight: 700;
}
.pagination .cur:hover { color: #fff; }
.pagination .prev_link, .pagination .next_link { white-space: nowrap; }
.pagination .disabled { opacity: .45; }

@media (max-width: 1023px) {
  .catalog__body { grid-template-columns: minmax(0, 1fr); }
  /* НЕ display:none — внутри лежит <dialog> фильтров, а showModal() у элемента
     со скрытым родителем не показывает ничего, и кнопка «Фильтр» выглядела
     сломанной. display:contents убирает саму колонку, оставляя потомка живым. */
  .catalog__aside { display: contents; }
  .catalog__filter-btn { display: inline-flex; }
  .catalog__h1 { font-size: 24px; }

  /* Здесь <dialog> снова становится собой — модалкой */
  .filters:not([open]) { display: none; }
  .filters[open] {
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    width: min(360px, 92vw);
    max-height: 100dvh;
    border-radius: 0;
  }
  .filters::backdrop { background: rgba(12, 20, 28, .45); }
  .filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--c-border);
    font-size: 16px;
  }
  .filters__close {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 0;
    background: none;
    color: var(--c-muted);
  }
  .filters__body { flex: 1; overflow-y: auto; }
  .filters__list { max-height: none; overflow: visible; }
  .filters__apply { display: inline-flex; }
}

/* ===== brandshop: cart.css (влито merge_parts.py) ===== */
/* ==========================================================================
   16. Корзина и оформление заказа (этап 6)

   НОМЕР РАЗДЕЛА УТОЧНИТЬ ПРИ СЛИЯНИИ: в brandshop.css сейчас 13 разделов,
   последний — «13. Печать», а параллельные экраны (главная, товар, прочие
   страницы) тоже принесли свои файлы. Этот раздел встаёт после компонентов
   и ПЕРЕД разделом печати.

   Макеты design/Корзина.dc.html и design/Оформление заказа.dc.html.
   Шаблоны: shops/brandshop/cart.rhtml, checkout.rhtml, _product_cart.rhtml,
   _coupon_cart.rhtml, _promotion_cart.rhtml, _order_details.rhtml,
   _product_cart_mini.rhtml, _promotion_cart_mini.rhtml.

   Раздел вливается в public/assets/css/brandshop.css ПОСЛЕ компонентов
   (.btn, .badge, .product-card) и до печати. Своих цветов не заводит —
   только токены :root.
   ========================================================================== */

/* --- страница корзины ---------------------------------------------------- */

.cart { padding-bottom: var(--s-10); }

.cart__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.cart__h1 {
  font: 700 38px/1.1 var(--f-cond);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.cart__count { font-size: 15px; color: var(--c-muted-2); }

.cart__flash {
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-accent-bg);
  color: var(--c-accent-dark);
  font-size: 14px;
}

.cart__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-10) var(--s-6);
  background: var(--c-surface);
  border-radius: var(--r-md);
}
.cart__empty-title { font-size: 18px; color: var(--c-muted); }

.cart__body {
  display: grid;
  gap: var(--s-3);
  align-items: start;
}

.cart__main {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: 0 var(--s-6);
}

.cart__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) 0;
}
.cart__continue {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 14px;
  font-weight: 500;
}
.cart__clear-form { display: inline-flex; }
.cart__clear {
  padding: var(--s-2) 0;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--c-muted-3);
}
.cart__clear:hover { color: var(--c-sale); }

/* --- строка корзины ------------------------------------------------------- */

.cart-list { display: block; }

.cart-row {
  position: relative;
  display: grid;
  grid-template-columns: 76px auto minmax(0, 1fr);
  gap: var(--s-2) var(--s-3);
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-border-light);
}
.cart-row:last-child { border-bottom: 0; }

.cart-row__media {
  grid-row: 1 / span 2;
  display: block;
  width: 76px;
  height: 76px;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  overflow: hidden;
}
.cart-row__media img { width: 100%; height: 100%; object-fit: contain; }

.cart-row__info {
  grid-column: 2 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: var(--s-6);
}
.cart-row__name { font: 500 14px/1.35 var(--f-sans); }
.cart-row__name a { color: var(--c-ink); }
.cart-row__name a:hover { color: var(--c-accent); text-decoration: none; }
.cart-row__sku { font: 400 11px/1.3 var(--f-mono); color: var(--c-muted-4); }

.cart-row__stock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.cart-row__stock::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cart-row__stock--in { color: var(--c-success); }
.cart-row__stock--order { color: var(--c-warning); }
.cart-row__stock--out { color: var(--c-muted-3); }

.cart-row__gift {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px var(--s-2);
  border-radius: var(--r-xs);
  background: var(--c-success-bg);
  color: var(--c-success);
  font-size: 12px;
}

.cart-row__price {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.cart-row__price del { font-size: 12px; color: var(--c-muted-4); }
.cart-row__price strong {
  font: 700 22px/1 var(--f-cond);
  white-space: nowrap;
}
.cart-row__price small { font-size: 13px; font-weight: 400; }
.cart-row__per-item { font-size: 12px; color: var(--c-muted-2); }

.cart-row__remove { position: absolute; top: var(--s-4); right: 0; }
.cart-row__remove-btn {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  color: var(--c-muted-4);
}
.cart-row__remove-btn:hover { background: var(--c-surface-2); color: var(--c-sale); }
.cart-row__remove-space { display: none; }

/* --- степпер количества ---------------------------------------------------- */

/* Ячейку сетки задаёт .cart-row__qty — он есть и у строк без степпера
   (сертификат, подарок акции), а .qty рисует сам степпер. */
.cart-row__qty {
  grid-column: 2;
  display: flex;
  align-items: center;
}

.qty {
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-self: start;
  height: 40px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-surface);
}
.qty__btn {
  width: 40px;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--c-muted);
}
.qty__btn:hover { background: var(--c-surface-2); color: var(--c-ink); text-decoration: none; }
.qty__btn--off { color: var(--c-muted-4); cursor: default; }
.qty__btn--off:hover { background: none; }

.qty__value {
  width: 44px;
  height: 100%;
  border: 0;
  padding: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  background: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty__value::-webkit-outer-spin-button,
.qty__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__value:focus-visible { outline-offset: -2px; }
.qty__value--fixed {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 40px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-muted);
}

/* --- итоги корзины --------------------------------------------------------- */

.cart__aside {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.cart-summary,
.promo {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: var(--s-6);
}

.cart-summary__rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: 15px;
}
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  color: var(--c-muted);
}
.cart-summary__row b { font-weight: 500; color: var(--c-ink); }
.cart-summary__row a { font-size: 13px; text-align: right; }
.cart-summary__row--discount b { color: var(--c-sale); }

.cart-summary__parts {
  margin-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cart-summary__parts-sum { font-size: 13px; color: var(--c-muted-2); }
.cart-summary__parts-sum b { color: var(--c-ink); }

.cart-summary__bar {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-page);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.cart-summary__bar-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  font-size: 16px;
  font-weight: 500;
}
.cart-summary__bar-total strong { font: 700 32px/1 var(--f-cond); }
.cart-summary__bar-total small { font-size: 16px; font-weight: 400; }
.cart-summary__submit { height: 52px; font-size: 16px; }

/* --- промокод -------------------------------------------------------------- */

.promo__label {
  display: block;
  margin-bottom: var(--s-2);
  font: 400 11px/1.4 var(--f-mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-muted-3);
}
.promo__row { display: flex; }
.promo__input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  font-size: 14px;
}
.promo__input:focus { outline: none; border-color: var(--c-accent); }
.promo__input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.promo__btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; height: 44px; }

/* --- оформление заказа ------------------------------------------------------ */

.checkout { padding-bottom: var(--s-10); }

.checkout__h1 {
  margin-bottom: var(--s-5);
  font: 700 38px/1.1 var(--f-cond);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.checkout__flash {
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-sale-bg);
  color: var(--c-sale);
  font-size: 14px;
}

.checkout__body {
  display: grid;
  gap: var(--s-3);
  align-items: start;
}
.checkout__main {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

.checkout-step {
  margin: 0;
  padding: var(--s-6);
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.checkout-step__legend {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0;
  margin-bottom: var(--s-5);
}
.checkout-step__num {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.checkout-step__num--dark { background: var(--c-ink); }
.checkout-step__title {
  font: 700 22px/1.1 var(--f-cond);
  text-transform: uppercase;
}

.checkout-step__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

/* --- поля формы -------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 13px; color: var(--c-muted); }
.field__req { color: var(--c-sale); }

.field__input {
  width: 100%;
  height: 48px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: 15px;
}
.field__input:focus { outline: none; border-color: var(--c-accent); }
.field__input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.field__input::placeholder { color: var(--c-muted-3); }
.field__input--area {
  height: auto;
  min-height: 96px;
  padding: var(--s-3);
  line-height: 1.5;
  resize: vertical;
}
select.field__input { padding-right: var(--s-2); }

.field__filter { margin-bottom: 6px; }
.field__filter[hidden] { display: none; }
input.field__filter {
  width: 100%;
  height: 40px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 14px;
}

.field__hint { font-size: 12px; color: var(--c-muted-2); line-height: 1.4; }
.field__error { font-size: 12px; color: var(--c-sale); }
.field--invalid .field__input { border-color: var(--c-sale); }

.field--check {
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
}
.field__checkbox { width: 20px; height: 20px; flex: none; accent-color: var(--c-accent); }
.field__check-label { font-size: 14px; color: var(--c-text); cursor: pointer; }

/* --- радиокарточки доставки и оплаты ------------------------------------------ */

.radio-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.radio-card__label {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  min-height: 56px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  cursor: pointer;
}
.radio-card__label:hover { border-color: var(--c-border-strong); }
.radio-card__mark {
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  border: 2px solid var(--c-border-strong);
  border-radius: 50%;
}
.radio-card__mark::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: transparent;
}
.radio-card input:checked ~ .radio-card__mark { border-color: var(--c-accent); }
.radio-card input:checked ~ .radio-card__mark::after { background: var(--c-accent); }
.radio-card input:focus-visible ~ .radio-card__mark {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}
/* Подсветка всей карточки — надстройка: где :has() нет, состояние всё равно
   видно по кружку и цвету названия. */
.radio-card__label:has(input:checked) {
  border-color: var(--c-accent);
  background: var(--c-accent-bg-soft);
}
.radio-card__name { font-size: 15px; font-weight: 500; }
.radio-card input:checked ~ .radio-card__body .radio-card__name { color: var(--c-accent-dark); }
.radio-card__price { font-size: 14px; font-weight: 500; text-align: right; }
.radio-card__price-free { color: var(--c-success); }
.radio-card__price-tariff { color: var(--c-muted-2); font-weight: 400; }
.radio-card[hidden] { display: none; }

.checkout-address {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.checkout-address[hidden] { display: none; }

/* --- «Ваш заказ» -------------------------------------------------------------- */

.checkout__aside { display: block; }

.order-summary {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: var(--s-6);
}
.order-summary__title {
  margin-bottom: var(--s-4);
  font: 700 22px/1.1 var(--f-cond);
  text-transform: uppercase;
}

.order-summary__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-page);
}

.order-line {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
}
.order-line__media {
  width: 56px; height: 56px;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  overflow: hidden;
}
.order-line__media img { width: 100%; height: 100%; object-fit: contain; }
.order-line__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.order-line__name { font-size: 13px; line-height: 1.35; }
.order-line__name a { color: var(--c-ink); }
.order-line__name a:hover { color: var(--c-accent); text-decoration: none; }
.order-line__qty { font-size: 12px; color: var(--c-muted-3); }
.order-line__sum { font-size: 14px; font-weight: 500; white-space: nowrap; }

.order-summary__rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  font-size: 14px;
}
.order-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  color: var(--c-muted);
}
.order-summary__row b { font-weight: 500; color: var(--c-ink); }
.order-summary__row--discount b { color: var(--c-sale); }
.order-summary__free { color: var(--c-success); }
.order-summary__by-tariff { color: var(--c-muted-2); font-weight: 400; }

.order-summary__bar {
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-page);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.order-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  font-size: 16px;
  font-weight: 500;
}
.order-summary__total strong { font: 700 32px/1 var(--f-cond); }
.order-summary__total small { font-size: 16px; font-weight: 400; }
.order-summary__submit { height: 54px; font-size: 16px; }
.order-summary__submit[aria-busy="true"] { opacity: .6; pointer-events: none; }
.order-summary__note {
  margin-top: var(--s-3);
  font-size: 12px;
  line-height: 1.55;
  color: var(--c-muted-3);
}

/* --- планшет и десктоп --------------------------------------------------------- */

@media (min-width: 600px) {
  .checkout-step__grid { grid-template-columns: 1fr 1fr; }
  .checkout-address { grid-template-columns: 1fr 1.4fr; }
  .cart-row {
    grid-template-columns: 96px minmax(0, 1fr) 140px 130px;
    gap: var(--s-3) var(--s-4);
  }
  .cart-row__media { width: 96px; height: 96px; grid-row: 1 / span 2; }
  .cart-row__info { grid-column: 2 / -1; }
  .cart-row__qty { grid-column: 2; }
  .cart-row__price { grid-column: 3 / -1; }
}

@media (min-width: 900px) {
  .cart__body { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-5); }
  .checkout__body { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-5); }
  .cart__aside,
  .checkout__aside {
    position: sticky;
    top: var(--s-4);
  }

  /* Десктопная строка: фото, название, степпер, цена, крестик — пять колонок */
  .cart-row {
    grid-template-columns: 120px minmax(0, 1fr) 150px 130px 32px;
    gap: var(--s-5);
    align-items: center;
    padding: var(--s-5) 0;
  }
  .cart-row__media { width: 120px; height: 110px; grid-row: auto; }
  .cart-row__info { grid-column: auto; padding-right: 0; }
  .cart-row__qty { grid-column: auto; }
  .qty { justify-self: stretch; width: 100%; height: 42px; }
  .qty__value { flex: 1; width: auto; }
  .cart-row__price { grid-column: auto; }
  .cart-row__remove { position: static; }
  .cart-row__remove-space { display: block; }
  .cart-row__name { font-size: 15px; }
  .cart-row__price strong { font-size: 24px; }
}

/* --- мобильная: панель оплаты прилипает к низу экрана ---------------------------- */

@media (max-width: 899px) {
  .cart__h1,
  .checkout__h1 { font-size: 26px; }
  .cart__main { padding: 0 var(--s-4); }
  .cart-summary,
  .promo,
  .checkout-step,
  .order-summary { padding: var(--s-4); }

  .cart { padding-bottom: 104px; }
  .checkout { padding-bottom: 116px; }

  .cart-summary__bar,
  .order-summary__bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    margin: 0;
    padding: var(--s-3) var(--gutter);
    padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
    box-shadow: 0 -6px 20px rgba(12, 20, 28, .08);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }
  .cart-summary__bar-total strong,
  .order-summary__total strong { font-size: 26px; }
  .order-summary__note { margin-bottom: 0; }
}

/* --- печать ---------------------------------------------------------------------- */

@media print {
  .cart__actions,
  .cart-summary__submit,
  .order-summary__submit,
  .cart-row__remove,
  .qty__btn,
  .promo { display: none; }
  .cart-summary__bar,
  .order-summary__bar { position: static; box-shadow: none; }
}
/* ===== конец cart.css ===== */

/* ===== brandshop: home.css (влито merge_parts.py) ===== */
/* ==========================================================================
   14. Главная: герой-слайдер, преимущества, плитка категорий, секции товаров
   Макет design/«Garmin Store - Главная». Вливать в public/assets/css/brandshop.css
   после раздела 13 «Печать» — или перед ним, порядок с печатью не важен.
   Только токены :root темы, своих цветов раздел не заводит.
   ========================================================================== */

/* --- общая обвязка секций главной ---------------------------------------- */
.home-section { padding-top: var(--s-8); }
.home-section:last-child { padding-bottom: var(--s-10); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.section-head__title {
  font-family: var(--f-cond);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.section-head__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* --- герой ---------------------------------------------------------------
   Слайдер без библиотеки: горизонтальная лента со scroll-snap. Без JS видно
   первый слайд, точки — обычные якоря на id слайдов и работают сами; стрелки
   печатаются с атрибутом hidden, их показывает initHomeSlider(). -------- */
.hero { padding-top: var(--s-4); }

.hero__viewport {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-ink);
}
.hero__track {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hero__track::-webkit-scrollbar { display: none; }

.hero__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-width: 0;
}
.hero__link { display: block; }
.hero__link:hover { text-decoration: none; }
.hero__img {
  width: 100%;
  height: auto;
}

/* Стрелки — белый кружок с тенью: баннеры грузит магазин, и предсказать
   яркость подложки нельзя. */
.hero__arrow {
  position: absolute;
  top: 50%;
  width: 44px; height: 44px;
  margin-top: -22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--shadow-pop);
}
.hero__arrow[hidden] { display: none; }
.hero__arrow:hover { background: var(--c-accent); color: #fff; }
.hero__arrow--prev { left: var(--s-3); }
.hero__arrow--next { right: var(--s-3); }

/* Точки под лентой, а не поверх картинки: на светлом баннере белая точка
   поверх фото не видна, а тут они на фоне страницы и цвета токенов. */
.hero__dots {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.hero__dot {
  width: 30px; height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-border-strong);
  transition: background .2s var(--ease);
}
.hero__dot:hover { background: var(--c-muted-3); }
.hero__dot[aria-current="true"] { background: var(--c-accent); }

@media (max-width: 899px) {
  .hero__arrow { width: 40px; height: 40px; margin-top: -20px; }
}

/* --- преимущества -------------------------------------------------------- */
.usp { margin-top: var(--s-4); }
.usp__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--c-surface);
  border-radius: var(--r-md);
}
.usp__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.usp__icon {
  flex: none;
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-accent-bg);
  color: var(--c-accent);
}
.usp__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.usp__title { font-size: 14px; font-weight: 700; line-height: 1.25; }
.usp__note  { font-size: 12px; color: var(--c-muted-2); line-height: 1.35; }

@media (min-width: 900px) {
  .usp__list { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
}
@media (max-width: 599px) {
  .usp__list { padding: var(--s-4); gap: var(--s-3); }
  .usp__icon { width: 38px; height: 38px; }
  .usp__icon .icon { width: 18px; height: 18px; }
  .usp__note { display: none; }
}

/* --- плитка категорий ---------------------------------------------------- */
.cats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
@media (min-width: 600px)  { .cats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .cats__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .cats__grid { grid-template-columns: repeat(5, 1fr); } }

.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  text-align: center;
  background: var(--c-surface);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--c-ink);
  transition: border-color .14s var(--ease), transform .14s var(--ease);
}
.cat-card:hover {
  border-color: var(--c-accent);
  transform: translateY(-2px);
  color: var(--c-ink);
  text-decoration: none;
}
.cat-card__media {
  display: grid;
  place-items: center;
  width: 88px; height: 88px;
}
.cat-card__img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.cat-card__name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}
@media (max-width: 599px) {
  .cat-card { padding: var(--s-3); gap: var(--s-2); }
  .cat-card__media { width: 64px; height: 64px; }
  .cat-card__name { font-size: 12px; }
}

/* --- маленькие баннеры магазина ------------------------------------------ */
.promo-banners__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 600px) { .promo-banners__grid { grid-template-columns: 1fr 1fr; } }
.promo-banners__item { display: block; }
.promo-banners__img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

@media (max-width: 599px) {
  .section-head__title { font-size: 22px; }
  .section-head__more { font-size: 13px; }
  .home-section { padding-top: var(--s-6); }
}
/* ===== конец home.css ===== */

/* ===== brandshop: item.css (влито merge_parts.py) ===== */
/* ==========================================================================
   14. Страница товара (shops/brandshop/show.rhtml)

   Макет design/«Товар - fenix 8.dc.html». Вливается в public/assets/css/brandshop.css
   после раздела 13 «Печать» — правила печати внизу этого файла нужно слить
   с тамошним блоком @media print.

   Только токены :root, БЭМ, без #id и !important — как во всей теме.
   ========================================================================== */

.product {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-bottom: var(--s-10);
}

/* --- верхний экран: галерея | описание | покупка ------------------------- */
.product__top {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-surface);
  grid-template-areas:
    "gallery"
    "info"
    "buy";
}
.product__gallery { grid-area: gallery; }
.product__info    { grid-area: info; }
.product__buy     { grid-area: buy; }

@media (min-width: 900px) {
  .product__top {
    padding: var(--s-6);
    gap: var(--s-6);
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
    grid-template-areas:
      "gallery info"
      "buy     buy";
  }
}
@media (min-width: 1200px) {
  .product__top {
    padding: var(--s-8);
    grid-template-columns: 420px minmax(0, 1fr) 330px;
    grid-template-areas: "gallery info buy";
  }
}

/* --- галерея -------------------------------------------------------------
   Одна разметка на оба режима. На узком экране трек — горизонтальный
   скролл-снап, он работает без единой строки JS. От 900px CSS показывает
   только слайд с data-active, переключают его миниатюры (item.js).
   ------------------------------------------------------------------------- */
.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}
.gallery__track {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }

.gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  place-items: center;
  height: 320px;
  margin: 0;
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.gallery__zoom {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: var(--s-2);
}
.gallery__slide img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply; /* съедает белую подложку старых фото */
}

@media (min-width: 900px) {
  .gallery__track { display: block; overflow: visible; }
  .gallery__slide { display: none; height: 420px; }
  .gallery__slide[data-active="true"] { display: grid; }
}

.gallery__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(60px, 1fr);
  gap: var(--s-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: var(--s-1);
}
.gallery__thumb {
  display: grid;
  place-items: center;
  height: 64px;
  padding: 3px;
  border: 2px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  transition: border-color .2s var(--ease);
}
.gallery__thumb:hover { border-color: var(--c-border-strong); }
.gallery__thumb[aria-selected="true"] { border-color: var(--c-accent); }
.gallery__thumb img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* Курсор: у <button> он по умолчанию стрелка, а миниатюра выглядит и работает
   как ссылка на кадр. */
.gallery__thumb { cursor: pointer; }

/* Точки-индикаторы прокрутки: нужны только на узком экране, где кадр
   листают пальцем. От 900px кадр выбирают миниатюрами, точки прячем.
   Пустые якоря без этих правил ничего не занимают — страница от их
   появления не меняется. */
.gallery__dots {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
}
.gallery__dot {
  width: 24px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-border-strong);
  transition: background .2s var(--ease);
}
.gallery__dot[aria-current="true"] { background: var(--c-accent); }

@media (min-width: 900px) {
  .gallery__dots { display: none; }
}

/* --- средняя колонка ----------------------------------------------------- */
.product__info {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}
.product__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.product__badges:empty { display: none; }

.product__h1 {
  font-family: var(--f-cond);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .2px;
}
.product__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-size: 13px;
  color: var(--c-muted-2);
}
.product__meta b {
  font-family: var(--f-mono);
  font-weight: 400;
  color: var(--c-ink);
}
.product__teaser {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text);
}
.product__teaser p { margin: 0 0 var(--s-2); }
.product__teaser p:last-child { margin-bottom: 0; }

/* --- цвета и размеры: ссылки на товары-побратимы ------------------------- */
.variants {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border-light);
}
.variants__label { font-size: 13px; color: var(--c-muted-2); }
.variants__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.variants__item {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 3px;
  border: 2px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  transition: border-color .2s var(--ease);
}
.variants__item:hover { border-color: var(--c-accent); text-decoration: none; }
.variants__item--on { border-color: var(--c-accent); }
.variants__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* --- колонка покупки ----------------------------------------------------- */
.buy {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
@media (min-width: 1200px) {
  .buy { position: sticky; top: var(--s-4); }
}

.buy__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.buy__stock {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  color: var(--c-muted-2);
}
.buy__stock::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.buy__stock--in    { color: var(--c-success); }
.buy__stock--order { color: var(--c-warning); }
.buy__stock--out   { color: var(--c-muted-3); }

.buy__discount {
  padding: 4px 12px;
  border-radius: var(--r-sm);
  background: var(--c-sale);
  color: var(--c-surface);
  font-family: var(--f-cond);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}

.buy__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.buy__price strong {
  font-family: var(--f-cond);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}
.buy__price small { font-size: 20px; font-weight: 400; }
.buy__price del { font-size: 15px; color: var(--c-muted-4); }

.buy__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: var(--s-2);
}
.buy__cart { height: 54px; font-size: 16px; }
.buy__fav {
  width: 54px; height: 54px;
  color: var(--c-muted-3);
}
.buy__fav:hover { border-color: var(--c-accent); color: var(--c-accent); }
/* Заливку сердца включает brandshop.js, проставляя aria-pressed */
.buy__fav[aria-pressed="true"] { border-color: var(--c-accent); color: var(--c-accent); }
.buy__fav[aria-pressed="true"] .icon { fill: currentColor; }

/* Кнопка покупки держится у нижней кромки, пока карточка на экране */
@media (max-width: 899px) {
  .buy__actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    padding-block: var(--s-2);
    padding-bottom: max(var(--s-2), env(safe-area-inset-bottom));
    background: var(--c-surface);
  }
}

.one-click {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.one-click__input {
  height: 48px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: 15px;
}
.one-click__input::placeholder { color: var(--c-muted-3); }
.one-click__input:focus { outline: none; border-color: var(--c-accent); }
.one-click__input:invalid:not(:placeholder-shown) { border-color: var(--c-sale); }
.one-click__btn { height: 48px; font-weight: 500; }

.buy__block {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border-light);
}
.buy__block-title {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-muted-3);
}
.buy__parts-sum { font-size: 13px; color: var(--c-muted-2); }
.buy__parts-sum b { color: var(--c-ink); }

.buy__rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.buy__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 13px;
}
.buy__row-name { color: var(--c-text); }
.buy__row-value { font-weight: 500; text-align: right; white-space: nowrap; }
.buy__row-value--free { color: var(--c-success); }

.buy__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.buy__tag {
  padding: 6px 9px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  color: var(--c-muted);
  font-size: 12px;
}
.buy__warranty {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  color: var(--c-text);
}
.buy__phones {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: 14px;
  font-weight: 700;
}

/* --- табы / аккордеон -----------------------------------------------------
   На странице лежат <details open>: без JS всё раскрыто и читается. item.js на
   широком экране собирает ленту вкладок из <summary> и ставит data-mode="tabs".
   Второй копии контента в DOM нет (BUILD.md §6).
   ------------------------------------------------------------------------- */
.tabs {
  display: flex;
  flex-direction: column;
  padding: 0 var(--s-5) var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.tabs__nav {
  display: flex;
  gap: var(--s-1);
  border-bottom: 1px solid var(--c-page);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__nav::-webkit-scrollbar { display: none; }
.tabs__tab {
  padding: 18px 20px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--c-muted-3);
  font-family: var(--f-cond);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.tabs__tab:hover { color: var(--c-ink); }
.tabs__tab[aria-selected="true"] {
  color: var(--c-ink);
  border-bottom-color: var(--c-accent);
}

.tabs__panel { border-bottom: 1px solid var(--c-border-light); }
.tabs__panel:last-child { border-bottom: 0; }
.tabs__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 56px;
  cursor: pointer;
  list-style: none;
}
.tabs__summary::-webkit-details-marker { display: none; }
.tabs__summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-right: var(--s-1);
  border-right: 2px solid var(--c-muted-4);
  border-bottom: 2px solid var(--c-muted-4);
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}
.tabs__panel[open] > .tabs__summary::after { transform: rotate(-135deg); }
.tabs__title {
  font-family: var(--f-cond);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
}
.tabs__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
}

.tabs[data-mode="tabs"] .tabs__summary { display: none; }
.tabs[data-mode="tabs"] .tabs__panel { border-bottom: 0; }
.tabs[data-mode="tabs"] .tabs__body { padding-top: var(--s-6); }

/* --- сырой HTML описаний из базы -----------------------------------------
   Тексты приходят из админки с плавающими картинками и широкими таблицами,
   поэтому у контейнера обязателен clear: both, а таблицам разрешён свой
   горизонтальный скролл: иначе страница едет вбок.
   ------------------------------------------------------------------------- */
.product-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-text);
  overflow-wrap: break-word;
  max-width: 900px;
}
.product-text::after {
  content: "";
  display: block;
  clear: both;
}
.product-text p { margin: 0 0 var(--s-3); }
.product-text > *:last-child { margin-bottom: 0; }
.product-text h1, .product-text h2, .product-text h3, .product-text h4 {
  clear: both;
  margin: var(--s-6) 0 var(--s-3);
  color: var(--c-ink);
  font-family: var(--f-cond);
  font-weight: 700;
  line-height: 1.2;
}
.product-text h1, .product-text h2 { font-size: 24px; text-transform: uppercase; }
.product-text h3 { font-size: 20px; }
.product-text h4 { font-size: 17px; }
.product-text ul, .product-text ol {
  margin: 0 0 var(--s-3);
  padding-left: var(--s-5);
}
.product-text ul { list-style: disc; }
.product-text ol { list-style: decimal; }
.product-text li { margin-bottom: var(--s-1); }
.product-text a { text-decoration: underline; }
.product-text img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  margin: var(--s-2) var(--s-3) var(--s-2) 0;
  border-radius: var(--r-sm);
}
.product-text table {
  display: block;
  max-width: 100%;
  margin: 0 0 var(--s-4);
  overflow-x: auto;
  font-size: 14px;
}
.product-text th, .product-text td {
  padding: 10px var(--s-3);
  border-bottom: 1px solid var(--c-border-light);
  text-align: left;
  vertical-align: top;
}
.product-text th { color: var(--c-muted-2); font-weight: 400; }
.product-text iframe, .product-text video { max-width: 100%; }

/* Совместимость со старым контентом админки. Описания товаров Garmin свёрстаны
   бутстраповской сеткой (.row / .col-lg-3) и галочками font-awesome, а тема ни
   bootstrap, ни font-awesome не грузит. Без этих четырёх правил плитки
   «Функции здоровья» вытягиваются в столбец, а колонка «есть» в таблицах
   характеристик становится пустой. Селекторы намеренно чужие — они описывают
   не нашу разметку, а данные, и живут только внутри .product-text. */
.product-text .row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: flex-start;
}
.product-text [class*="col-"] { flex: 1 1 180px; min-width: 0; }
.product-text .fa { font-style: normal; }
.product-text .fa-check::before { content: "\2713"; color: var(--c-success); font-weight: 700; }

.specs { width: 100%; font-size: 14px; }
.specs th, .specs td {
  padding: 11px var(--s-3);
  border-bottom: 1px solid var(--c-border-light);
  text-align: left;
  vertical-align: top;
}
.specs th { width: 300px; color: var(--c-muted-2); font-weight: 400; }

.video-frame {
  position: relative;
  width: 100%;
  max-width: 900px;
  padding-top: 56.25%;
}
.video-frame iframe, .video-frame object, .video-frame embed, .video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- о бренде ------------------------------------------------------------ */
.brand-note {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.brand-note__h2 {
  font-family: var(--f-cond);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.brand-note__body {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
.brand-note__logo { max-width: 100%; height: auto; }

/* --- похожие товары ------------------------------------------------------ */
.product__similar { padding-top: var(--s-6); }
.product__similar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.product__similar-h2 {
  font-family: var(--f-cond);
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
}
.product__similar-all { font-size: 14px; font-weight: 500; }
.products-grid--similar { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

@media (max-width: 899px) {
  .product__h1 { font-size: 24px; }
  .buy__price strong { font-size: 34px; }
  .buy { padding: var(--s-4); }
  .tabs { padding: 0 var(--s-4) var(--s-4); }
  .brand-note { padding: var(--s-4); }
  .brand-note__body { grid-template-columns: minmax(0, 1fr); }
  .product__similar-h2 { font-size: 22px; }
}

/* --- печать (слить с разделом 13 brandshop.css) --------------------------- */
@media print {
  .gallery__thumbs, .buy__actions, .buy__one-click, .product__similar,
  .tabs__nav { display: none; }
  .buy { border: 0; }
}
/* ===== конец item.css ===== */

/* ===== brandshop: rest.css (влито merge_parts.py) ===== */
/* ==========================================================================
   14. Остальные страницы темы brandshop (этап 7)

   Поиск, акции, информационные страницы (page), контакты, «спасибо за заказ»,
   подтверждение заказа, оплата заказа, возврат из «оплаты частями», подсказка
   поиска. Макеты: design/«Оплата и доставка.dc.html» и design/«Контакты.dc.html»,
   остальное собрано из тех же компонентов, что категория и карточка товара.

   Правила файла те же, что у brandshop.css: только токены :root, БЭМ,
   вложенность не глубже одного уровня, без #id и !important, mobile-first.

   Одно осознанное исключение — селекторы по тегам внутри .prose и .pay-link:
   там разметку печатает не тема, а визуальный редактор админки (.prose) или
   контроллер (.pay-link отдаёт готовую строку с классами прежней темы),
   классы навесить некуда.
   ========================================================================== */

/* --- Пустое состояние (поиск без результатов, нет акций) ------------------ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-10) var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-surface);
  text-align: center;
}
.empty-state__icon { color: var(--c-muted-4); }
.empty-state__title { font-size: 18px; color: var(--c-ink); }
.empty-state__title b { font-weight: 700; }
.empty-state__hints {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  max-width: 520px;
  font-size: 14px;
  color: var(--c-muted);
}
.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

/* На странице поиска сайдбара фильтров нет — сортировка прижата вправо */
.catalog__toolbar--plain { justify-content: flex-end; }

/* ==========================================================================
   Информационная страница (page): текст + липкий сайдбар
   ========================================================================== */

.textpage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  padding-bottom: var(--s-10);
  align-items: start;
}
.textpage__body {
  min-width: 0;
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.textpage__h1 {
  margin-bottom: var(--s-5);
  font-family: var(--f-cond);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.textpage__aside {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* --- Карточки сайдбара --------------------------------------------------- */

.side-card {
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.side-card__title {
  margin-bottom: var(--s-3);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-muted-3);
}
.side-card--dark { background: var(--c-ink); color: #fff; }

.side-toc__list,
.side-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.side-toc__link,
.side-nav__link {
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-text);
}
.side-toc__link:hover,
.side-nav__link:hover { color: var(--c-accent); text-decoration: none; }
.side-nav__link--on { font-weight: 700; color: var(--c-accent); }

/* Заголовки второго уровня в оглавлении — с отступом */
.side-toc__link--sub { padding-left: var(--s-3); color: var(--c-muted); }

.side-help__title {
  font-family: var(--f-cond);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}
.side-help__text {
  margin: var(--s-2) 0 var(--s-3);
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-on-dark-2);
}
.side-help__phone {
  display: block;
  margin-bottom: var(--s-3);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.side-help__phone:hover { color: var(--c-accent-on-dark); text-decoration: none; }
.side-help__btn { width: 100%; }

/* ==========================================================================
   .prose — типографика сырого HTML из полей магазина

   Сюда попадает всё, что набрали в визуальном редакторе админки: заголовки,
   списки, таблицы, картинки без размеров, инлайновые style и плавающие
   блоки. Классов там нет, поэтому селекторы по тегам — единственный способ.
   ========================================================================== */

.prose {
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-text);
  /* clear:both у заголовков не спасает от плавающего блока в конце текста —
     обрезаем контейнер по последнему float. */
  overflow: hidden;
}
.prose > * + * { margin-top: var(--s-4); }

.prose h2,
.prose h3,
.prose h4 {
  clear: both;
  margin-top: var(--s-8);
  font-family: var(--f-cond);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-ink);
  text-transform: uppercase;
}
.prose h2 { font-size: 24px; }
.prose h3 { font-size: 19px; }
.prose h4 { font-size: 16px; text-transform: none; }

.prose p { margin-top: var(--s-3); }
.prose strong, .prose b { font-weight: 700; color: var(--c-ink); }
.prose a { text-decoration: underline; }

/* Сброс темы снимает маркеры у всех списков — внутри .prose возвращаем их
   явными значениями, а не list-style: revert: revert не понимает Safari
   старше 15.4, а он в списке поддержки (BUILD.md §13). */
.prose ul, .prose ol {
  margin-top: var(--s-3);
  padding-left: var(--s-6);
}
.prose ul { list-style: disc outside; }
.prose ol { list-style: decimal outside; }
.prose li + li { margin-top: var(--s-1); }
.prose li::marker { color: var(--c-accent); }

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.prose iframe, .prose video { max-width: 100%; }

.prose blockquote {
  padding: var(--s-3) var(--s-5);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--c-accent-bg-soft);
  color: var(--c-muted);
}
.prose hr {
  height: 1px;
  border: 0;
  background: var(--c-border);
}

/* Таблицы из редактора шире экрана — даём им прокрутиться внутри себя,
   иначе горизонтальный скролл получает вся страница. */
.prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 14px;
}
.prose th, .prose td {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-border-light);
  text-align: left;
  vertical-align: top;
}
.prose th {
  background: var(--c-surface-2);
  border-top: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-muted-2);
}

/* ==========================================================================
   Контакты
   ========================================================================== */

.contacts { padding-bottom: var(--s-10); }
.contacts__h1 {
  margin-bottom: var(--s-5);
  font-family: var(--f-cond);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.contacts__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.info-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-6);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.info-card__label {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-muted-3);
}
.info-card__big {
  font-family: var(--f-cond);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-ink);
}
.info-card__big:hover { color: var(--c-accent); text-decoration: none; }
.info-card__mid { font-size: 18px; font-weight: 500; color: var(--c-ink); }
.info-card__mid:hover { color: var(--c-accent); }
.info-card__note { margin-top: var(--s-1); font-size: 13px; color: var(--c-muted-2); }

.info-card--dark { background: var(--c-ink); color: #fff; }
.info-card--dark .info-card__label { color: var(--c-on-dark-2); }
.info-card--dark .info-card__note { color: var(--c-on-dark-2); }

.messengers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.messengers__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-ink-2);
  border-radius: var(--r-sm);
  color: #fff;
}
.messengers__item:hover {
  border-color: var(--c-accent);
  color: var(--c-accent-on-dark);
  text-decoration: none;
}
.messengers__name { font-size: 14px; font-weight: 700; }
.messengers__handle { font-family: var(--f-mono); font-size: 11px; color: var(--c-on-dark-2); }

/* --- Шоурум и карта-фасад ------------------------------------------------ */

.place {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}
/* Фасад: пока карту не запросили, это лёгкая штриховка на CSS, а не
   картинка и уж точно не сторонний JS (BUILD.md §8). */
.place__map {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  border-bottom: 1px solid var(--c-page);
  background-image: repeating-linear-gradient(135deg,
    var(--c-surface-2) 0 8px, var(--c-accent-bg-soft) 8px 16px);
}
.place__map-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-5);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: 14px;
  font-weight: 700;
}
.place__map-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.place__map iframe {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
}
.place__map[data-loaded="true"] { display: block; min-height: 260px; }

.place__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-6);
}
.place__title {
  font-family: var(--f-cond);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}
.place__address { font-size: 15px; color: var(--c-text); }
.place__hours { font-size: 14px; color: var(--c-muted-2); }
.place__route { align-self: flex-start; margin-top: var(--s-2); }

/* ==========================================================================
   Служебные страницы заказа: finish, pay_order, payparts_finish
   ========================================================================== */

.order-page { padding-bottom: var(--s-10); }

.order-done {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-8) var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-surface);
  text-align: center;
}
.order-done__mark {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--s-3);
  padding: var(--s-2);
  border-radius: 50%;
  background: var(--c-success-bg);
  color: var(--c-success);
  stroke-width: 2.4;
}
.order-done__h1 {
  font-family: var(--f-cond);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}
.order-done__lead { margin-top: var(--s-3); font-size: 16px; color: var(--c-text); }
.order-done__note { margin-top: var(--s-2); font-size: 13px; color: var(--c-muted-2); }
.order-done__phone { font-weight: 700; white-space: nowrap; }

.order-done--warn .order-done__h1 { color: var(--c-sale); }

.order-done__info {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-align: left;
}
.order-done__info dt {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-muted-3);
}
.order-done__info dd + dt { margin-top: var(--s-3); }
.order-done__number {
  font-family: var(--f-cond);
  font-size: 24px;
  font-weight: 700;
  color: var(--c-accent);
}
.order-done__total {
  font-family: var(--f-cond);
  font-size: 24px;
  font-weight: 700;
}
.order-done__total small { font-size: 14px; font-weight: 400; color: var(--c-muted-2); }
.order-done__req {
  margin-top: var(--s-1);
  font-family: var(--f-mono);
  font-size: 13px;
  word-break: break-word;
  color: var(--c-ink);
}

.order-done__items {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-4);
  text-align: left;
}
.order-done__item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-border-light);
  font-size: 14px;
}
.order-done__item-qty { color: var(--c-muted-2); white-space: nowrap; }

.order-done__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
}

/* Кнопку оплаты печатает контроллер готовой строкой с классами прежней темы
   (btn-main btn-add-cart) — переименовать её нельзя, поэтому стилизуем
   содержимое обёртки .pay-link. */
.pay-link a,
.pay-link input[type="submit"],
.pay-link button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-sm);
  background: var(--c-accent);
  color: #fff;
  font-family: var(--f-cond);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
}
.pay-link a:hover,
.pay-link input[type="submit"]:hover,
.pay-link button:hover { background: var(--c-accent-hover); color: #fff; text-decoration: none; }

/* ==========================================================================
   Подтверждение заказа (confirm)
   ========================================================================== */

.confirm { padding-bottom: var(--s-10); }
.confirm__h1 {
  margin-bottom: var(--s-5);
  font-family: var(--f-cond);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
}
.confirm__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
}
.confirm__main,
.confirm__aside {
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.confirm__title {
  margin-bottom: var(--s-4);
  font-family: var(--f-cond);
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
}

.confirm__items { display: flex; flex-direction: column; }
.confirm__item {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-border-light);
}
.confirm__item-img { border-radius: var(--r-sm); object-fit: contain; }
.confirm__item-name { font-size: 14px; line-height: 1.4; }
.confirm__item-qty { font-size: 13px; color: var(--c-muted-2); }
.confirm__item-sum { font-weight: 700; white-space: nowrap; }

.confirm__totals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
  font-size: 14px;
}
.confirm__totals dt { color: var(--c-muted); }
.confirm__totals dd { text-align: right; }
.confirm__discount { color: var(--c-sale); font-weight: 700; }
.confirm__grand-label { font-size: 16px; font-weight: 700; color: var(--c-ink); }
.confirm__grand {
  font-family: var(--f-cond);
  font-size: 24px;
  font-weight: 700;
  color: var(--c-ink);
}

.confirm__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.confirm__form { margin: 0; }
.confirm__submit { min-width: 220px; }

.confirm__data {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1);
  font-size: 14px;
}
.confirm__data dt {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-muted-3);
}
.confirm__data dd + dt { margin-top: var(--s-3); }

/* ==========================================================================
   Подсказка поиска (live_search) — фрагмент без layout
   ========================================================================== */

.live-search {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.live-search__item + .live-search__item { border-top: 1px solid var(--c-border-light); }
.live-search__link {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  color: var(--c-ink);
}
.live-search__link:hover { background: var(--c-surface-2); text-decoration: none; }
.live-search__img { object-fit: contain; }
.live-search__name {
  font-size: 14px;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.live-search__price { font-weight: 700; white-space: nowrap; }
.live-search__all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-accent);
}
.live-search__count { color: var(--c-muted-2); font-weight: 400; }

/* ==========================================================================
   Брейкпоинты
   ========================================================================== */

@media (min-width: 600px) {
  .contacts__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-done__info { grid-template-columns: 200px minmax(0, 1fr); align-items: baseline; }
  .order-done__info dd + dt { margin-top: 0; }
  .confirm__item { grid-template-columns: 60px minmax(0, 1fr) 90px 120px; }
  .confirm__data { grid-template-columns: 130px minmax(0, 1fr); }
  .confirm__data dd + dt { margin-top: 0; }
}

@media (min-width: 900px) {
  .textpage { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-5); }
  .textpage__body { padding: var(--s-10) var(--s-8); }
  .textpage__h1 { font-size: 34px; }
  .textpage__aside { position: sticky; top: var(--s-4); }
  .contacts__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contacts__h1 { font-size: 34px; }
  .confirm__body { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-5); }
  .confirm__h1 { font-size: 34px; }
  .order-done__h1 { font-size: 32px; }
  .place__map { min-height: 260px; }
}

/* ==========================================================================
   Печать: на «спасибо за заказ» покупатели печатают реквизиты
   ========================================================================== */

@media print {
  .order-done__actions, .place__map, .side-help, .empty-state__actions,
  .confirm__actions { display: none; }
  .order-done, .textpage__body { box-shadow: none; }
}
/* ===== конец rest.css ===== */

/* ===== brandshop: checkout.css (влито merge_parts.py) ===== */
/* ==========================================================================
   brandshop — оформление заказа: доводка карточек под макет и комбобокс

   Вливается merge_parts.py в brandshop.css ПОСЛЕ блока cart.css (при первом
   слиянии — в конец, перед разделом «Печать»), поэтому здесь только то, что
   уточняет уже написанные там правила .checkout-*, .field-*, .radio-card,
   .order-summary — дублировать их целиком не нужно.

   ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ПРАВКА cart.css: экраны верстают параллельно
   несколько агентов, cart.css — файл соседнего экрана (корзина). Пересечений
   по селекторам с home.css, item.css и rest.css нет (проверено grep-ом).

   ГЛАВНАЯ ЛОВУШКА ЭТОГО ФАЙЛА. В cart.css есть блок @media (max-width: 899px),
   который задаёт мобильные padding у .checkout-step/.order-summary и размер
   .order-summary__total strong. Специфичность у наших правил такая же, а
   лежат они НИЖЕ — правило без медиазапроса победило бы медиазапрос и на
   телефоне тоже. Поэтому всё, что спорит с мобильным блоком, обёрнуто в
   @media (min-width: 900px).
   ========================================================================== */

/* --- 1. Размеры по макету «Оформление заказа.dc.html» ----------------------

   Сверка с макетом. Десктоп (1280+): карточка шага padding 28/32 (было 24),
   заголовок шага 24px (было 22), сетка контактов gap 12 (было 16),
   радиострока padding 16/18 (было 12/16), колонка цены 140px, итог 34px
   (было 32). Мобильная колонка макета (375px): заголовок шага 19px, кружок
   с номером 26px, заголовок «Ваш заказ» 18px, радиострока padding 12/14.
   Значения берём токенами: --s-3 = 12, --s-4 = 16, --s-5 = 20, --s-8 = 32;
   кегли в теме везде заданы числом, поэтому и здесь числом. */

.checkout-step__grid { gap: var(--s-3); }

/* Блок города и отделения под списком доставок: в макете gap 12, отступ
   сверху 16 — как у остальных пар полей. */
.checkout-address { gap: var(--s-3); }

@media (min-width: 900px) {
  .checkout-step { padding: var(--s-6) var(--s-8); }
  .checkout-step__title { font-size: 24px; }
  .radio-card__label { padding: var(--s-4) var(--s-5); }

  /* Колонка цены фиксированной ширины — в макете 140px, иначе строки
     «бесплатно» и «по тарифам перевозчика» ставят цену на разную позицию
     и список выглядит рваным. */
  .radio-card__price { min-width: 140px; }

  .order-summary__total strong { font-size: 34px; }
}

/* Мобильная колонка макета: шапка шага компактнее, чем на десктопе.
   cart.css уже уменьшает здесь padding карточек и .checkout__h1 — дополняем
   тем, чего там нет. */
@media (max-width: 899px) {
  .checkout-step__legend { margin-bottom: var(--s-3); }
  .checkout-step__num { width: 26px; height: 26px; font-size: 13px; }
  .checkout-step__title { font-size: 19px; }
  .order-summary__title { font-size: 18px; }
}

/* --- 2. Комбобокс над нативным <select> ------------------------------------

   Разметку строит initCombobox() в brandshop.js: <select> остаётся в DOM
   (он и уезжает на сервер), а рядом появляется .combo с полем ввода и
   списком. Без JS ничего этого нет и работает обычный список выбора,
   поэтому все правила ниже относятся только к узлам, созданным скриптом. */

.combo { position: relative; }

/* Стрелка вниз — «это список, а не просто поле». Клики не перехватывает,
   иначе тап по правому краю не открывал бы список. */
.combo::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--s-4);
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--c-muted-2);
  border-bottom: 2px solid var(--c-muted-2);
  transform: rotate(45deg);
  pointer-events: none;
}

.combo__input { padding-right: var(--s-8); }

/* Скрытый нативный список. hidden убирает его из дерева доступности, но
   значение по-прежнему уходит с формой: браузер не отправляет только
   disabled-поля. */
.combo__native[hidden] { display: none; }

.combo__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 288px;
  overflow-y: auto;
  padding: var(--s-1) 0;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  box-shadow: var(--shadow-pop);
  -webkit-overflow-scrolling: touch;
}
.combo__list[hidden] { display: none; }

.combo__option {
  padding: 9px var(--s-3);
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}
.combo__option:hover,
.combo__option--active {
  background: var(--c-accent-bg);
  color: var(--c-accent-dark);
}
.combo__option[aria-selected="true"] { font-weight: 500; }

/* Строка-подсказка «ничего не найдено» / «показаны первые совпадения».
   Формально это тоже option (иначе внутри listbox она невалидна), но с
   aria-disabled и без обработчика: стрелками на неё не попасть. */
.combo__note {
  padding: 9px var(--s-3);
  font-size: 13px;
  line-height: 1.35;
  color: var(--c-muted-2);
  cursor: default;
}

@media (max-width: 599px) {
  .combo__list { max-height: 232px; }
}
/* ===== конец checkout.css ===== */

/* ===== brandshop: zz_legacy_content.css (влито merge_parts.py) ===== */
/* ==========================================================================
   ВОССТАНОВЛЕНО 03.08.2026. Этот слой был написан прямо в brandshop.css и
   оказался ВНУТРИ маркеров блока cart.css, поэтому очередное слияние
   merge_parts.py стёрло его целиком: splice заменяет всё между маркерами
   содержимым файла-фрагмента. Чтобы это не повторилось, слой вынесен в
   собственный фрагмент. Имя начинается с zz_, чтобы файл сливался последним
   (порядок алфавитный) — как он и лежал в конце темы.

   ПРАВИЛО НА БУДУЩЕЕ: между маркерами «brandshop: файл» и «конец файла»
   руками не писать ничего — правка живёт только в самом фрагменте
   doc/brandshop_20260803/css/. Всё, что допишут между маркерами, исчезнет
   при следующем слиянии, и заметить это можно не сразу.
   ========================================================================== */

/* ==========================================================================
   Совместимость для контента из базы

   Описания товаров, характеристики, «в комплекте», гарантия и тексты страниц —
   это сырой HTML, который писали руками в админке под СТАРУЮ тему. У 870 из 2067
   товаров обоих магазинов внутри лежит разметка Bootstrap (row, col-*, d-flex,
   img-fluid) и иконки Font Awesome (i.fa.fa-check в таблицах «Что вам понравится»).
   Тема brandshop ни того, ни другого не подключает, поэтому без этого слоя
   многоколоночные блоки схлопывались бы в одну колонку, а галочки исчезали.

   Всё строго внутри .product-text и .prose: наружу не протекает и на собственные
   классы темы не влияет. Правки в базе не требуются — контент остаётся как есть.
   Сетка на 12 колонок; встречается и col-*-24 (опечатка в контенте) — она даёт
   полную ширину, как и было в старой теме, где такого класса тоже не было.
   ========================================================================== */
.product-text .row,
.prose .row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--s-3) * -1);
}
.product-text .d-flex, .prose .d-flex { display: flex; }
.product-text .flex-wrap, .prose .flex-wrap { flex-wrap: wrap; }
.product-text [class*="col-"],
.prose [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  padding-inline: var(--s-3);
}
.product-text .img-fluid, .prose .img-fluid { max-width: 100%; height: auto; }

/* Галочки в сравнительных таблицах: рисуем символом, шрифт иконок не нужен */
.product-text i.fa, .prose i.fa { font-style: normal; }
.product-text i.fa-check::before, .prose i.fa-check::before {
  content: "\2713";
  color: var(--c-success);
  font-weight: 700;
}
.product-text i.fa-times::before, .prose i.fa-times::before {
  content: "\2715";
  color: var(--c-muted-3);
}

/* Плавающие блоки старых описаний */
.product-text .floatcontainer, .prose .floatcontainer { overflow: hidden; }
.product-text .floatblock, .prose .floatblock { float: left; margin: 0 var(--s-4) var(--s-3) 0; }
.product-text .floatblock.left, .prose .floatblock.left { float: left; }


.product-text .col-xs-1, .prose .col-xs-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.product-text .col-xs-2, .prose .col-xs-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.product-text .col-xs-3, .prose .col-xs-3 { flex: 0 0 25.0%; max-width: 25.0%; }
.product-text .col-xs-4, .prose .col-xs-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.product-text .col-xs-5, .prose .col-xs-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.product-text .col-xs-6, .prose .col-xs-6 { flex: 0 0 50.0%; max-width: 50.0%; }
.product-text .col-xs-7, .prose .col-xs-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.product-text .col-xs-8, .prose .col-xs-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.product-text .col-xs-9, .prose .col-xs-9 { flex: 0 0 75.0%; max-width: 75.0%; }
.product-text .col-xs-10, .prose .col-xs-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.product-text .col-xs-11, .prose .col-xs-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.product-text .col-xs-12, .prose .col-xs-12 { flex: 0 0 100.0%; max-width: 100.0%; }

@media (min-width: 576px) {
  .product-text .col-sm-1, .prose .col-sm-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .product-text .col-sm-2, .prose .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .product-text .col-sm-3, .prose .col-sm-3 { flex: 0 0 25.0%; max-width: 25.0%; }
  .product-text .col-sm-4, .prose .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .product-text .col-sm-5, .prose .col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .product-text .col-sm-6, .prose .col-sm-6 { flex: 0 0 50.0%; max-width: 50.0%; }
  .product-text .col-sm-7, .prose .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .product-text .col-sm-8, .prose .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .product-text .col-sm-9, .prose .col-sm-9 { flex: 0 0 75.0%; max-width: 75.0%; }
  .product-text .col-sm-10, .prose .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .product-text .col-sm-11, .prose .col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .product-text .col-sm-12, .prose .col-sm-12 { flex: 0 0 100.0%; max-width: 100.0%; }
}

@media (min-width: 768px) {
  .product-text .col-md-1, .prose .col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .product-text .col-md-2, .prose .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .product-text .col-md-3, .prose .col-md-3 { flex: 0 0 25.0%; max-width: 25.0%; }
  .product-text .col-md-4, .prose .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .product-text .col-md-5, .prose .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .product-text .col-md-6, .prose .col-md-6 { flex: 0 0 50.0%; max-width: 50.0%; }
  .product-text .col-md-7, .prose .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .product-text .col-md-8, .prose .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .product-text .col-md-9, .prose .col-md-9 { flex: 0 0 75.0%; max-width: 75.0%; }
  .product-text .col-md-10, .prose .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .product-text .col-md-11, .prose .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .product-text .col-md-12, .prose .col-md-12 { flex: 0 0 100.0%; max-width: 100.0%; }
}

@media (min-width: 992px) {
  .product-text .col-lg-1, .prose .col-lg-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .product-text .col-lg-2, .prose .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .product-text .col-lg-3, .prose .col-lg-3 { flex: 0 0 25.0%; max-width: 25.0%; }
  .product-text .col-lg-4, .prose .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .product-text .col-lg-5, .prose .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .product-text .col-lg-6, .prose .col-lg-6 { flex: 0 0 50.0%; max-width: 50.0%; }
  .product-text .col-lg-7, .prose .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .product-text .col-lg-8, .prose .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .product-text .col-lg-9, .prose .col-lg-9 { flex: 0 0 75.0%; max-width: 75.0%; }
  .product-text .col-lg-10, .prose .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .product-text .col-lg-11, .prose .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .product-text .col-lg-12, .prose .col-lg-12 { flex: 0 0 100.0%; max-width: 100.0%; }
}
/* ===== конец zz_legacy_content.css ===== */

/* ===== brandshop: zz_restored.css (влито merge_parts.py) ===== */
/* ==========================================================================
   ВОССТАНОВЛЕНО 03.08.2026 вместе с zz_legacy_content.css.

   Эти правила были дописаны руками прямо в brandshop.css и попали ВНУТРЬ
   маркеров влитых блоков home.css и item.css. Слияние merge_parts.py заменяет
   всё между маркерами содержимым файла-фрагмента, поэтому при первом же
   прогоне они исчезли. Возвращены сюда, в собственный фрагмент: так они
   переживут любое число слияний.

   Если владелец этих правил (экран «Главная» и вкладки карточки товара)
   перенесёт их в home.css и item.css — этот файл можно удалить целиком.
   ========================================================================== */

/* --- герой главной: баннер + три карточки справа (из home.rhtml) ---------- */
/* Баннер и три карточки справа. Без них баннер занимал всю ширину и выглядел
   несоразмерно большим. Ниже 1023px карточки уходят под баннер в ряд. */
.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--gutter);
  align-items: stretch;
}
.hero__aside {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--s-3);
}
/* Карточка по макету: слева цветная полоса, крупный заголовок, описание и
   ссылка-действие. Иконку не выводим — в макете её нет. */
.hero-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  padding-left: calc(var(--s-5) - 4px);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.hero-card:hover { box-shadow: var(--shadow-card); text-decoration: none; }
.hero-card--warm { border-left-color: var(--c-sale); }
.hero-card__title {
  font-family: var(--f-cond);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}
.hero-card__note { font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.hero-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-1); }
.hero-card__chip {
  padding: 3px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  font-size: 11px;
  color: var(--c-muted-2);
}
.hero-card__more {
  margin-top: auto;
  color: var(--c-accent);
  font-size: 14px;
  font-weight: 700;
}
.hero-card:hover .hero-card__more { text-decoration: underline; }

@media (max-width: 1023px) {
  .hero__layout { grid-template-columns: minmax(0, 1fr); }
  .hero__aside { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
}
@media (max-width: 767px) {
  .hero__aside { grid-template-columns: minmax(0, 1fr); }
}

/* --- вкладки карточки товара: описание из базы не ограничиваем по ширине --- */
.tabs__body .product-text { max-width: none; }
/* ===== конец zz_restored.css ===== */


/* ==========================================================================
   SEO-блок под содержимым страницы

   Выводится из layout через yield :seo_text — на главной и на категориях.
   Содержимое сырое из базы: там свои <h2>, <p>, списки и таблицы, поэтому
   стили заданы потомкам, а не классам.
   ========================================================================== */
.seo-text { padding-bottom: var(--s-10); }
.seo-text__body {
  padding: var(--s-10);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: break-word;
}
.seo-text__body > *:first-child { margin-top: 0; }
.seo-text__body > *:last-child { margin-bottom: 0; }
.seo-text__body h1,
.seo-text__body h2 {
  margin: 0 0 var(--s-5);
  color: var(--c-ink);
  font-family: var(--f-cond);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.seo-text__body h3,
.seo-text__body h4 {
  margin: var(--s-6) 0 var(--s-3);
  color: var(--c-ink);
  font-size: 19px;
  font-weight: 700;
}
.seo-text__body p { margin: 0 0 var(--s-4); }
.seo-text__body ul,
.seo-text__body ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.seo-text__body li { margin-bottom: var(--s-2); }
.seo-text__body a { color: var(--c-accent); }
.seo-text__body a:hover { color: var(--c-accent-dark); }
.seo-text__body strong, .seo-text__body b { color: var(--c-ink); }
.seo-text__body img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
/* В текстах из базы встречаются плавающие картинки — без clear соседние
   абзацы наезжают друг на друга. */
.seo-text__body img[align="left"]  { float: left;  margin: 0 var(--s-4) var(--s-3) 0; }
.seo-text__body img[align="right"] { float: right; margin: 0 0 var(--s-3) var(--s-4); }
.seo-text__body p::after { content: ""; display: block; clear: both; }
.seo-text__body table {
  width: 100%;
  margin: 0 0 var(--s-4);
  border-collapse: collapse;
  font-size: 15px;
}
.seo-text__body th,
.seo-text__body td {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}
.seo-text__body th { background: var(--c-surface-2); font-weight: 700; }

@media (max-width: 767px) {
  .seo-text__body { padding: var(--s-5); font-size: 15px; }
  .seo-text__body h1, .seo-text__body h2 { font-size: 22px; }
}

/* ===== brandshop: zzz_hero_380.css (влито merge_parts.py) ===== */
/* Баннер главной высотой 380px и две карточки справа по 185px.

   Файл назван zzz_*, чтобы merge_parts.py влил его ПОСЛЕДНИМ: он сливает
   фрагменты в алфавитном порядке, и эти правила должны перебивать home.css.

   Почему отдельным фрагментом, а не правкой brandshop.css: правка руками
   пережила ровно до следующего запуска merge_parts.py — слияние подставило
   версию из home.css и молча вернуло прежнюю высоту. */
.hero__viewport {
  height: 380px;
}

/* 185 + 10 + 185 = 380 — правая колонка ровно в высоту баннера */
.hero__aside {
  display: grid;
  grid-auto-rows: 185px;
  gap: 10px;
}

.hero__slide { height: 100%; }

/* Слайд нарисован под 380px. При узком окне пропорция меняется, поэтому
   object-fit держит кадр, обрезая по краям, а не сминая картинку. Обрезаем
   справа: слева на слайде лежит текст. */
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

@media (max-width: 1023px) {
  .hero__aside { grid-auto-rows: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hero__viewport { height: 260px; }
  .hero__aside { grid-template-columns: minmax(0, 1fr); }
}
/* ===== конец zzz_hero_380.css ===== */

/* ===== brandshop: zzz_logo.css (влито merge_parts.py) ===== */
/* Геометрия логотипа в шапке.

   Значения задаются токенами, а конкретные цифры — в скине магазина: у garmin2
   логотип с подписью «authorized partner» и его надо поднять, у ctek2 логотип
   обычный. Правило в самой теме одно на оба магазина.

   Файл zzz_*, чтобы merge_parts.py влил его последним и правило пережило
   слияние фрагментов. */
.header__logo {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: var(--s-1);
  margin-top: var(--logo-shift, 0);
}

.header__logo img {
  width: auto;
  height: var(--logo-h, 46px);
  max-width: var(--logo-w);
  object-fit: contain;
}

@media (max-width: 1199px) {
  .header__logo img { height: var(--logo-h-md, 38px); max-width: var(--logo-w-md); }
}
/* ===== конец zzz_logo.css ===== */

/* ===== brandshop: zzz_home_spacing.css (влито merge_parts.py) ===== */
/* Отступ перед SEO-текстом на главной.

   Секции главной идут вплотную к блоку SEO, из-за чего он читался как часть
   последней секции. Отделяем его сверху. */
.page__main > .seo-text { margin-top: var(--s-8); }
/* ===== конец zzz_home_spacing.css ===== */

/* ===== brandshop: zzz_tweaks.css (влито merge_parts.py) ===== */
/* Точечные правки по замечаниям владельца. Файл zzz_*, чтобы merge_parts.py
   влил его последним и правила пережили слияние фрагментов. */

/* --- SEO-текст: шрифты мельче ---------------------------------------------
   Основной текст 13px: 11px после уменьшения в полтора раза оказалось ниже
   комфортного чтения. Подзаголовок подняли до 15px, иначе он сравнялся бы
   с основным текстом и иерархия пропала. */
.seo-text__body { font-size: 13px; line-height: 1.7; }
.seo-text__body h1,
.seo-text__body h2 { font-size: 18px; }
.seo-text__body h3,
.seo-text__body h4 { font-size: 15px; }
.seo-text__body table { font-size: 12px; }
@media (max-width: 767px) {
  .seo-text__body { font-size: 13px; }
  .seo-text__body h1, .seo-text__body h2 { font-size: 16px; }
}

/* --- бейджи «Новинка» и «Хит» крупнее ------------------------------------- */
.badge {
  height: 24px;
  padding: 0 9px;
  font-size: 12px;
  letter-spacing: .3px;
}

/* --- значки рассрочки вплотную -------------------------------------------- */
.installments__item { gap: 0; }

/* --- сердце: круглая кнопка, подложка проявляется при наведении -----------
   Размер поднят вслед за бейджами, чтобы строка бейджей и сердце смотрелись
   заодно: было 26px с иконкой 19, стало 38px с иконкой 28. */
.product-card__fav {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.product-card__fav .icon { width: 28px; height: 28px; }
.product-card__fav:hover,
.product-card__fav:focus-visible {
  background: var(--c-accent-bg);
  color: var(--c-accent);
}
.product-card__badges { min-height: 38px; }
/* ===== конец zzz_tweaks.css ===== */

/* ===== brandshop: zz_item_extra.css (влито merge_parts.py) ===== */
/* Лайтбокс фото, попап «в 1 клик» и уплотнение правой колонки товара. */

.lightbox {
  max-width: 92vw;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.lightbox::backdrop { background: rgba(12, 20, 28, .82); }
.lightbox__img { max-width: 88vw; max-height: 88vh; width: auto; height: auto; display: block; }
.lightbox__close {
  position: absolute;
  top: 8px; right: 8px;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 20, 28, .55);
  color: #fff;
  font-size: 26px;
  line-height: 1;
}
.lightbox__close:hover { background: rgba(12, 20, 28, .8); }
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 20, 28, .5);
  color: #fff;
  font-size: 30px;
  line-height: 1;
}
.lightbox__nav:hover { background: rgba(12, 20, 28, .78); }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }
/* Курсор подсказывает, что фото увеличивается */
.gallery__zoom { cursor: zoom-in; display: block; }

.one-click-dialog {
  width: min(420px, 92vw);
  padding: var(--s-6);
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.one-click-dialog::backdrop { background: rgba(12, 20, 28, .6); }
.one-click__title {
  margin-bottom: var(--s-4);
  font-family: var(--f-cond);
  font-size: 22px;
  font-weight: 700;
}
.one-click__label { display: block; margin-bottom: var(--s-1); font-size: 13px; color: var(--c-muted); }
.one-click-dialog .one-click__input {
  width: 100%;
  height: 48px;
  margin-bottom: var(--s-4);
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
}
.one-click-dialog .one-click__btn { width: 100%; }
.one-click__open { width: 100%; }

/* --- правая колонка: текст мельче, способы оплаты в поток ------------------ */
.buy__block-title { font-size: 13px; }
.buy .buy__block,
.buy__delivery,
.buy__payment { font-size: 12px; line-height: 1.5; }
.buy__payment ul,
.buy__payment ol { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.buy__payment li { float: left; margin: 0 var(--s-2) var(--s-1) 0; }
.buy__payment li::after { content: ""; display: table; clear: none; }
/* ===== конец zz_item_extra.css ===== */

/* ===== brandshop: zz_brandnote.css (влито merge_parts.py) ===== */
/* Блок о бренде — сноска в конце колонки товара.

   Это справка о производителе, а не часть описания, поэтому оформлена как
   аннотация: рамка, приглушённый мелкий текст слева, мелкий логотип справа.
   Логотип уходит вправо и не мешает читать: он тут подпись, а не иллюстрация. */
.brand-note--inline {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
}
.brand-note--inline .brand-note__body {
  display: flex;
  flex-direction: row-reverse;   /* логотип справа, текст слева */
  align-items: flex-start;
  gap: var(--s-4);
  width: 100%;
}
.brand-note--inline .brand-note__logo {
  flex: none;
  width: auto;
  height: 28px;
  max-width: 110px;
  object-fit: contain;
  opacity: .75;
}
.brand-note--inline .product-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--c-muted-2);
  font-size: 11px;
  line-height: 1.55;
}
.brand-note--inline .product-text p { margin: 0 0 var(--s-2); }
.brand-note--inline .product-text p:last-child { margin-bottom: 0; }
/* Заголовков внутри справки быть не должно — она сама по себе мелкая */
.brand-note--inline .product-text h1,
.brand-note--inline .product-text h2,
.brand-note--inline .product-text h3 { font-size: 12px; margin: 0 0 var(--s-1); color: var(--c-muted); }

@media (max-width: 599px) {
  .brand-note--inline .brand-note__body { flex-direction: column-reverse; }
  .brand-note--inline .brand-note__logo { align-self: flex-end; }
}

/* --- правая колонка покупки: плотнее ------------------------------------- */
.buy__tag {
  padding: 3px 6px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  color: var(--c-muted);
  font-size: 11px;
}
.buy__rows { gap: 3px; }
.buy__row { font-size: 11px; }
/* ===== конец zz_brandnote.css ===== */

/* ===== brandshop: zzz_desc_grid.css (влито merge_parts.py) ===== */
/* Описания товаров: приводим авторскую сетку к ровной.

   ПОЧЕМУ. Тексты писали руками в старой админке под bootstrap, и наборы классов
   там неполные: у одних блоков col-lg-3 col-sm-5 col-xs-12, у других только
   col-md-5, у третьих col-lg-4 col-sm-6. Из-за этого на широком экране часть
   строк идёт по четыре, часть по две, остаются дыры справа и рваные высоты.
   Чинить это по авторским классам нельзя — они противоречат друг другу.

   Поэтому внутри описания .row раскладываем СВОЕЙ сеткой auto-fit, а ширины
   col-* внутри неё перестают действовать: у grid-элемента flex-basis не
   применяется. Получается ровная плотная раскладка независимо от того, что
   написал автор. Снаружи .product-text ничего не меняется.

   Файл zzz_*, чтобы влиться последним и перебить общий слой совместимости. */
.product-text .row,
.prose .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-5);
  align-items: start;
  margin-inline: 0;
}
.product-text .row > [class*="col-"],
.prose .row > [class*="col-"] {
  max-width: none;
  padding-inline: 0;
}
/* Картинки в блоках выравниваем по высоте — иначе соседние карточки разъезжаются */
.product-text .row img,
.prose .row img {
  max-height: 280px;
  width: auto;
  margin-inline: auto;
}
/* Подписи под картинками у автора выровнены по центру атрибутом align —
   оставляем, но убираем лишний воздух между блоками. */
.product-text .row p,
.prose .row p { margin-bottom: var(--s-2); }

@media (max-width: 599px) {
  .product-text .row,
  .prose .row { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}

/* --- сноска о бренде: прижата к низу колонки ------------------------------ */
.product__info { display: flex; flex-direction: column; }
.brand-note--inline { margin-top: auto; }
.brand-note--inline .product-text { font-size: 12px; }
/* Логотип по центру блока по высоте. Только с 600px: ниже блок раскладывается
   column-reverse, и там логотип прижат вправо своим правилом — без @media эта
   строка стоит ниже и молча его отменяла. */
.brand-note--inline .brand-note__body { align-items: center; }
@media (min-width: 600px) {
  .brand-note--inline .brand-note__logo { align-self: center; }
}

/* --- доступные цвета: миниатюра 80px, как в галерее ----------------------- */
.variants__item { width: 80px; height: 80px; }
.variants__item img { width: 100%; height: 100%; object-fit: contain; }
/* ===== конец zzz_desc_grid.css ===== */

/* ===== brandshop: zzzz_fixes.css (влито merge_parts.py) ===== */
/* Правки по замечаниям владельца, вторая волна (03.08.2026).
   Фрагмент влит последним, поэтому переопределяет всё, что выше. */

/* --- описание товара: вложенная строка на всю ширину ---------------------
   В описаниях из админки встречается НЕЗАКРЫТЫЙ <div class="row">: всё, что
   идёт после него, браузер кладёт внутрь этой строки. Наша сетка раскладывала
   такие блоки по колонкам — у Venu X1 заголовок «Залишайтесь на зв'язку»
   уезжал в третью колонку, а следующая строка из четырёх пунктов ужималась до
   240px и вставала столбиком. Строка внутри строки всегда во всю ширину. */
.product-text .row .row,
.prose .row .row { grid-column: 1 / -1; }
/* Пустые строки-распорки редактора места не занимают */
.product-text .row:empty,
.prose .row:empty { display: none; }
/* Заголовок раздела и линейка под ним — не колонки строки, а её содержимое:
   строка тоже раскладывается сеткой auto-fit, и <h2> с <hr> вставали рядом
   двумя половинами вместо «заголовок, под ним черта». */
.product-text .row > h1, .product-text .row > h2,
.product-text .row > h3, .product-text .row > h4,
.product-text .row > hr,
.prose .row > h1, .prose .row > h2,
.prose .row > h3, .prose .row > h4,
.prose .row > hr { grid-column: 1 / -1; }

/* --- таблицы характеристик: левая колонка одной ширины ------------------
   Таблицы в описаниях писали руками, и каждая считает ширину первой колонки
   по своему самому длинному ярлыку: блок «Что вам понравится» выходил заметно
   шире блока «Общее». `table-layout: fixed` тут не спасает — в нём ширины
   берутся из ПЕРВОЙ строки, а первая строка у этих таблиц заголовочная, с
   colspan="2". Поэтому раскладываем строки сеткой с фиксированной первой
   дорожкой. `grid-auto-flow: column` оставлен ради полусотни строк на 6
   колонок, которые встречаются в паре описаний: лишние ячейки уйдут в свои
   дорожки, а не свалятся на следующую строку. */
.product-text tbody, .product-text thead,
.prose tbody, .prose thead { display: block; }
.product-text tr, .prose tr {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.product-text tr > [colspan], .prose tr > [colspan] { grid-column: 1 / -1; }
@media (max-width: 899px) {
  .product-text tr, .prose tr { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .product-text tr, .prose tr {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
  }
}

/* --- сноска о бренде: сверху гарантия, под ней справка о производителе ---
   Раньше гарантия была отдельным блоком правой колонки и удлиняла её. */
.brand-note--inline {
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-3);
}
.brand-note__warranty {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-muted-2);
  font-size: 12px;
  line-height: 1.4;
}
.brand-note__warranty .icon { flex: none; color: var(--c-success); }
.brand-note__warranty b { color: var(--c-ink); font-weight: 500; }
/* Справки о бренде может не быть (у CTEK описание бренда пустое) —
   тогда рамка остаётся с одной гарантией и разделитель лишний */
.brand-note__warranty:last-child { padding-bottom: 0; border-bottom: 0; }

/* --- шапка: у кнопки поиска отступы вместо фиксированной ширины ---------- */
.header__search-btn { width: auto; padding: 0 15px; }

/* --- мега-меню: картинка и подпись рубрики без зазора -------------------- */
.catalog-menu__item { gap: 0; }

/* --- поиск: четыре карточки в ряд ---------------------------------------
   .catalog__main сужен до трёх колонок под сайдбар фильтров, а у поиска
   сайдбара нет — модификатор возвращает ему сетку главной. Четыре колонки
   держим с 1024px: на планшете колонка тут всё равно во всю ширину, потому
   что сайдбара нет, и при трёх карточки выходили заметно шире рубричных. */
.catalog--wide .catalog__main .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .catalog--wide .catalog__main .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px)  { .catalog--wide .catalog__main .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* .catalog__toolbar--plain больше не используется: сортировка на поиске
   переехала внутрь .catalog__main, к товарам, как в рубрике. Костыль
   `display: flex`, которым панель возвращали на десктопе, снят. */

/* --- главная: плитка рубрик в шесть колонок, картинка 160×160 -----------
   Картинки в базе 512×512, поэтому увеличение до 160 идёт без потери резкости.
   На узких экранах колонок по-прежнему меньше, а бокс изображения сжимается
   вместе с колонкой: 160px — потолок, а не фиксированная ширина. */
/* Шесть колонок включаем с 1280px, а не с 1200: при 1200 на карточку
   приходится 150px, картинка в 160px не влезает, `max-width: 100%` жмёт её по
   ширине — и квадрат превращается в прямоугольник 150×160. С 1280 контейнер
   даёт 163px на карточку, и 160 помещается. */
@media (min-width: 1280px) { .cats__grid { grid-template-columns: repeat(6, 1fr); } }
.cat-card__media { width: 160px; height: 160px; max-width: 100%; }
@media (max-width: 1199px) { .cat-card__media { width: 120px; height: 120px; } }
@media (max-width: 599px)  { .cat-card__media { width: 88px;  height: 88px; } }

/* --- фильтры: строки плотнее -------------------------------------------- */
.filters__opt { padding: 4px 0; }

/* --- избранное в шапке: подсветка вместо счётчика ------------------------
   data-fav-has ставит brandshop.js, когда в localStorage что-то лежит. */
.header__icon-btn[data-fav-has] {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.header__icon-btn[data-fav-has] .icon { fill: currentColor; }

/* --- карточка товара в списке: строки плотнее ---------------------------- */
.product-card { gap: var(--s-2); }

/* --- главная: логотипы банков в карточке «оплата частями» ---------------- */
.hero-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
/* 20px, а не 24: карточка героя ростом 185px, и четыре чипа по 24px вместе с
   заголовком, подписью и ссылкой упирались в её нижний край. */
.hero-card__chip img {
  flex: none;
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.hero-card { overflow: hidden; }

/* --- списки в SEO-тексте --------------------------------------------------
   Как устроены эти тексты: нумерация разбита редактором на отдельные
   <ol start="N"> по одному пункту, и каждый такой пункт — это подзаголовок,
   под которым идёт абзац пояснения. Поэтому пункт нумерованного списка
   оформляем как подзаголовок, а не как строку перечня; сам номер оставляем
   родной (он уважает атрибут start) и красим через ::marker.

   Маркер маркированного списка рисуем сами: у ::marker размер точки не
   настраивается, а дефолтная чёрная точка в этом блоке смотрится грязно. */
.seo-text__body ol {
  padding-left: var(--s-6);
  margin: 0 0 var(--s-4);
}
.seo-text__body ol > li {
  margin-bottom: var(--s-2);
  color: var(--c-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}
.seo-text__body ol > li::marker {
  color: var(--c-accent);
  font-weight: 700;
}

.seo-text__body ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--s-4);
}
.seo-text__body ul > li {
  position: relative;
  padding-left: 24px;
  margin-bottom: var(--s-2);
}
.seo-text__body ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
}
/* Вложенный список — маркер поменьше и полый, чтобы уровни различались */
.seo-text__body ul ul > li::before {
  width: 6px;
  height: 6px;
  background: none;
  box-shadow: inset 0 0 0 2px var(--c-accent);
}

@media (max-width: 899px) {
  .seo-text__body ol { padding-left: var(--s-5); }
  .seo-text__body ol > li { font-size: 15px; }
  .seo-text__body ul > li { padding-left: 20px; }
  .seo-text__body ul > li::before { left: 4px; }
}

/* --- карточка без рассрочки: место всё равно занято --------------------
   Блок рассрочки последний в карточке, а блок цены прижат книзу через
   margin-top: auto. Если у товара рассрочки нет (цена ниже порога банка), его
   цена и кнопка опускались ниже, чем у соседей по ряду. Шаблон теперь печатает
   пустой блок, а здесь резервируем его высоту.

   Считаем ВСЮ высоту блока: box-sizing у темы border-box, значит min-height
   включает и внутренний отступ, и рамку.
     десктоп: 12 отступ + 1 линия + 18 строка суммы (12px × 1.5) + 7 зазор +
              24 ряд банковских плашек = 62px;
     телефон: 12 + 1 + 14 (сумма 10px × 1.4) + 7 + 53 (плашки в два ряда:
              24 + 5 + 24) = 87px. */
.product-card__parts--empty { min-height: 62px; }
@media (max-width: 899px) {
  .product-card__parts--empty { min-height: 87px; }
}
/* ===== конец zzzz_fixes.css ===== */

/* ===== brandshop: zzzz_media.css (влито merge_parts.py) ===== */
/* Боксы с фотографиями: превью цветов, галерея, карточка списка (03.08.2026).

   ПРИЧИНА, из-за которой узкое превью вылезало из рамки на соседний ряд
   (пляшка Tacx Shiva, зелёный вариант — превью 32×80 в квадрате 80×80).

   Все эти боксы устроены одинаково: `display: grid; place-items: center` плюс
   фиксированная высота. `place-items: center` — это в том числе
   `align-items: center`, то есть строка НЕ растягивается, и единственная
   неявная строка получает размер `auto`, то есть считается по содержимому.
   А раз высота строки неопределённая, проценты по высоте у картинки внутри
   резолвить не от чего: и `height: 100%`, и `max-height: 100%` вырождаются в
   `auto`. Дальше срабатывает `width: 100%` (по ширине-то строка определена),
   высота берётся из пропорции — 68 × 80/32 = 170px — и строка вырастает выше
   бокса. Фиксированная `height: 80px` её не держит: grid спокойно выпускает
   содержимое за пределы контейнера.

   На квадратных и горизонтальных снимках (80×80, 80×53) эта же арифметика даёт
   68 и 45px — в 80px помещается, поэтому дефект и был виден только на одном
   товаре из десяти.

   ЛЕЧИМ ТРЕМЯ СЛОЯМИ, каждый самодостаточен:
   1) `grid-template-rows/columns: minmax(0, 1fr)` — строка становится
      определённой, проценты снова резолвятся (это и есть корень);
   2) предел в АБСОЛЮТНЫХ пикселях — работает даже там, где проценты не
      разрешились;
   3) `overflow: hidden` на самой рамке — за неё не вылезет ничего ни при каких
      обстоятельствах. */

/* --- превью цветов и размеров ------------------------------------------- */
.variants__item {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  /* внутренний отступ ужат с 4 до 2px: снимок занимает почти весь квадрат */
  padding: 2px;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
.variants__item img {
  display: block;
  width: 100%;
  height: 100%;
  /* 100 − 2×2 (рамка) − 2×2 (внутренний отступ) = 92 */
  max-width: 92px;
  max-height: 92px;
  object-fit: contain;
  object-position: center;
}

/* --- миниатюры галереи: квадраты 80×80, а не растянутые колонки ----------
   Было `grid-auto-columns: minmax(60px, 1fr)`: миниатюры делили всю ширину
   колонки и превращались в широкие прямоугольники с маленькой картинкой
   посередине. Теперь это квадраты (превью цветов рядом крупнее, 100px —
   они выбирают товар, а миниатюра только листает кадр).

   Раскладываем ПЕРЕНОСОМ, а не прокруткой: при 80px восемь миниатюр (а их
   столько у трети товаров) в колонку не влезают, полоса поехала бы вбок, и
   выбранный кадр мог оказаться за краем — прокручивать её в JS некому. */
.gallery__thumbs {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, 80px);
  justify-content: start;
  overflow-x: visible;
}
.gallery__thumb {
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  padding: 4px;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
.gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 68px;
  max-height: 68px;
  object-fit: contain;
  object-position: center;
}

/* --- главный кадр галереи ------------------------------------------------
   Кадр НЕ растягиваем: `_normal` — 350px по большей стороне, а бокс 420px,
   растяжение дало бы мыло. Только даём процентам разрешиться и обрезаем.

   ВАЖНО: между .gallery__slide и <img> стоит <a class="gallery__zoom">, и
   именно он — элемент сетки. Фрагмент zz_item_extra.css переопределил его в
   `display: block`, поэтому пока строка была неопределённой, ссылка сжималась
   по содержимому и её центрировал сам слайд. Как только строка стала
   определённой, ссылка растянулась на все 420px, а картинка внутри block-а
   легла в левый верхний угол. Возвращаем ссылке сетку с центрированием. */
.gallery__slide {
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
.gallery__zoom {
  display: grid;
  place-items: center;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
/* Кадр всегда во всю высоту бокса, а не в свою натуральную величину.
   Вариант :normal — это вписывание в 350×350, поэтому у одного и того же
   товара кадры выходят 350×331, 230×350, 350×295: при переключении миниатюр
   фото заметно меняло размер, будто подставили уменьшенную копию. Плата —
   растяжение максимум в 1,2 раза на кадрах ниже 350px по высоте.

   Второй селектор длиннее, чем нужно (0,2,1) — базовому правилу хватает
   (0,1,1). Запас на будущее: так правило выиграет и у фрагмента, влитого
   после нас, а не только порядком. */
.gallery__slide img,
.gallery__slide .gallery__zoom img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

/* --- карточка товара в списке: фото прижато к верху бокса ---------------- */
.product-card__badges {
  min-height: 0;
  margin-block: 0;
  padding-block: 0;
}
.product-card__media {
  align-items: start;
  padding-top: 0;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
.product-card__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --- плитка рубрик и мега-меню: та же ловушка ----------------------------
   `.cat-card__media` тоже grid + place-items: center + фиксированная высота, а
   `.cat-card__img` живёт на `max-width/max-height: 100%`. Сейчас не видно —
   картинки рубрик квадратные 512×512, — но стоит появиться вытянутой, и она
   вылезет ровно так же. Лечим строку, а не последствия. */
.cat-card__media,
.catalog-menu__item-media {
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

/* --- стрелки героя на главной -------------------------------------------
   Без @media: правило стоит ниже мобильного `@media (max-width: 899px)` из
   основного файла и при равной специфичности перебивает его и там тоже. */
.hero__arrow { width: 36px; height: 36px; margin-top: -18px; }
/* ===== конец zzzz_media.css ===== */

/* ===== brandshop: zzzz_mobile.css (влито merge_parts.py) ===== */
/* Мобильная версия: шапка, off-canvas меню, подвал, главная, каталог, товар.
   Фрагмент влит после всех — переопределяет и базовые правила, и медиазапросы
   основного файла при равной специфичности. */

/* ========================================================================== */
/* Шапка                                                                      */
/* ========================================================================== */
/* Логотип чуть крупнее, а корзина, избранное и звонок прижаты к правому краю.
   Размер логотипа считаем ОТ ТОКЕНА СКИНА, а не числом: у garmin2
   --logo-h-md 44px, у ctek2 токена нет и работает запасные 38px, — так обе
   витрины подрастут одинаково и правка переживёт смену палитры. */
@media (max-width: 899px) {
  .header__bar-inner { gap: var(--s-2); }
  .header__logo img {
    height: calc(var(--logo-h-md, 38px) + 6px);
    max-width: calc(var(--logo-w-md, 112px) + 16px);
  }
  .header__tools {
    margin-left: auto;
    gap: var(--s-2);
  }
}
/* На узких экранах кнопки чуть плотнее, иначе подросший логотип и три кнопки
   в 360px не встают в одну строку. 40px — всё ещё комфортная цель для пальца. */
@media (max-width: 599px) {
  .header__nav-toggle, .header__call, .header__icon-btn { width: 40px; height: 40px; }
  .header__cart { height: 40px; padding-inline: 12px; gap: 8px; }
}

/* Корзина с подписью. Считаем бюджет строки честно, в обеих локалях.

   Кнопке с подписью нужно: иконка 20 + зазор 6 + слово + зазор 6 + счётчик 22
   + поля 20. Слово при 13px: «Кошик» ~36px (итого 110), «Корзина» ~50px
   (итого 124) — русский вариант длиннее украинского на 14px, и решает именно он.

   Строка отдаёт: ширина экрана − 28 (поля контейнера) − бургер 40 − логотип
   − звонок 40 − избранное 40 − четыре зазора по 6.

     экран 390, логотип 166 -> корзине 52px   не влезает ничем
     экран 412, логотип 150 -> корзине 90px   не влезает
     экран 430, логотип 150 -> корзине 108px  «Кошик» влезает, «Корзина» нет
     экран 430, логотип 126 -> корзине 132px  влезают обе

   Поэтому подпись включаем с 430px и там же ужимаем логотип. Ниже 430px
   остаётся иконка со счётчиком: подпись туда не помещается ни при каком
   размере шрифта, а перенос сломал бы всю строку — у .header__bar-inner
   стоит flex-wrap. */
@media (min-width: 430px) and (max-width: 599px) {
  .header__logo img { max-width: calc(var(--logo-w-md, 112px) - 24px); }
  .header__bar-inner { gap: 6px; }
  .header__tools { gap: 6px; }
  .header__cart-label { display: inline; font-size: 13px; }
  .header__cart { padding-inline: 10px; gap: 6px; }
}

/* Поиск на мобильном. Кнопка была чёрной, как корзина, и вторая чёрная плашка
   в одной шапке перетягивала внимание с корзины на себя. Делаем строку поиска
   такой же тихой, как кнопки-иконки: рамка 1px того же цвета, кнопка светлая
   с приглушённой подписью, акцент — только при нажатии. */
@media (max-width: 899px) {
  .header__search-input {
    border-width: 1px;
    border-color: var(--c-border);
    border-right: 0;
  }
  .header__search-input:focus { border-color: var(--c-accent); }
  .header__search-btn {
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    color: var(--c-muted);
    font-weight: 500;
  }
  .header__search-btn:hover,
  .header__search-btn:active {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
  }
}

/* ========================================================================== */
/* Off-canvas меню                                                            */
/* ========================================================================== */
/* Переключатель языка переехал в шапку панели, вплотную к логотипу; крестик
   остаётся у правого края за счёт margin-right: auto у языков. Логотип той же
   высоты, что в шапке сайта, — считаем тем же выражением. */
.mobile-nav__head { gap: var(--s-2); padding-inline: var(--s-3); }
.mobile-nav__brand { flex: none; min-width: 0; }
.mobile-nav__brand img {
  width: auto;
  height: calc(var(--logo-h-md, 38px) + 6px);
  max-width: calc(var(--logo-w-md, 112px) + 16px);
  object-fit: contain;
}
.mobile-nav__langs {
  margin-left: var(--s-3);
  margin-right: auto;
  padding: 0;
  border-bottom: 0;
  gap: 4px;
  flex: none;
}
.mobile-nav__lang {
  min-width: 34px;
  height: 28px;
  font-size: 12px;
}
.mobile-nav__close { width: 34px; height: 34px; flex: none; }

.mobile-nav__link { padding: var(--s-1) var(--s-4); }
/* Телеграм в конце списка связи — фирменным синим, как в подвале */
.mobile-nav__link--tg {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-1);
  color: #229ED9;
}
.mobile-nav__link--tg:hover,
.mobile-nav__link--tg:focus-visible { color: #1b87ba; }
.mobile-nav__link--tg svg { flex: none; }

/* ========================================================================== */
/* Подвал                                                                     */
/* ========================================================================== */
/* На мобильном подвал занимал по высоте целый экран. Оставляем две колонки —
   магазин и контакты; разделы и каталог убираем, они есть в off-canvas меню. */
@media (max-width: 899px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4) var(--s-5);
    padding-block: var(--s-6) var(--s-4);
  }
  .footer__col--catalog,
  .footer__col--pages { display: none; }

  .footer__brand { gap: 6px; }
  .footer__logo, .footer__brand img { width: 118px; max-width: 118px; }
  .footer__about { font-size: 12px; line-height: 1.4; }
  .footer__phone { font-size: 15px; }
  .footer__social { margin-top: 6px; gap: 6px; }
  .footer__social a { width: 30px; height: 30px; }
  .footer__social svg { width: 18px; height: 18px; }
  .footer__social a[href*="t.me"],
  .footer__social a[href*="telegram"] { width: 34px; height: 34px; }
  .footer__social a[href*="t.me"] svg,
  .footer__social a[href*="telegram"] svg { width: 22px; height: 22px; }

  .footer__col { gap: 5px; }
  .footer__col-title { margin-bottom: 0; }
  .footer__link { font-size: 12px; line-height: 1.35; }
  .footer__pays { margin-top: var(--s-2); gap: 6px; }
  .footer__pays img { height: 20px; }
}
/* Ниже 600px сетка подвала схлопывалась в одну колонку — оставляем две. */
@media (max-width: 599px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}

/* ========================================================================== */
/* Главная: баннер                                                            */
/* ========================================================================== */
/* ПОЧЕМУ ПОД БАННЕРОМ БЫЛА ЧЁРНАЯ ПОЛОСА. У .hero__track стоит
   align-items: center, то есть слайды НЕ растягиваются по высоте ленты, а
   высота самой ленты берётся по содержимому. Из-за этого height: 100% у слайда
   не от чего считать — процент вырождается в auto, картинка печатается в свою
   натуральную пропорцию (1600×598 — это 142px при ширине 380), а бокс остаётся
   заданных 380/260px. Разницу и видно чёрным. object-fit: cover при этом не
   работает вовсе: обрезать нечего, бокс равен картинке.

   Лечим корень — растягиваем слайды и даём ссылке высоту. */
.hero__track { align-items: stretch; }
.hero__link { display: block; height: 100%; }

/* Баннер НЕ режем ни на одной ширине: высота кадра равна его собственной
   пропорции. Прежние 380px были больше, чем даёт картинка 1600×598 на ширине
   колонки (968px даёт 362px), и object-fit: cover срезал лишнее.

   Чтобы правая колонка совпадала с кадром край в край при любой ширине окна,
   её карточки делят высоту ряда поровну (1fr вместо жёстких 185px): ряд задаёт
   баннер, карточки подстраиваются. */
@media (min-width: 768px) {
  .hero__viewport { height: auto; }
  .hero__slide { height: auto; }
  .hero__link { height: auto; }
  .hero__img { height: auto; object-fit: contain; }
}
@media (min-width: 1024px) {
  /* minmax(min-content, 1fr), а не minmax(0, 1fr): при окне 1024 кадр даёт
     236px, на карточку приходится 113 — заголовок, подпись и четыре плашки
     банков туда не влезают и обрезались бы (у .hero-card стоит overflow:
     hidden). С min-content ряд не станет ниже содержимого: на широком окне
     карточки ровно по половине кадра (176px при 1440), на узком колонка
     окажется чуть выше баннера, но ничего не срежется. */
  .hero__aside {
    grid-template-rows: none;
    grid-auto-rows: minmax(min-content, 1fr);
  }
}

/* На телефоне то же самое: кадр в свою пропорцию, ~142px вместо 260px бокса. */
@media (max-width: 767px) {
  .hero__viewport { height: auto; }
  .hero__slide { height: auto; }
  .hero__link { height: auto; }
  .hero__img { height: auto; object-fit: contain; }
  /* Точки — под кадром, но вплотную. Заводить их НА баннер отрицательным
     margin нельзя: на нижней полосе слайда лежат кнопка и цена, и точки
     закрывали именно их — со стороны кадр выглядел обрезанным. */
  .hero { padding-top: var(--s-2); }
  /* Стрелки на телефоне убраны совсем: кадр 390px шириной, кружок 36px с
     каждой стороны ложится прямо на заголовок и кнопку слайда. Листать есть
     чем — лента свайпается scroll-snap-ом, под ней точки, и обе работают без
     JS. На планшете и десктопе стрелки остаются. */
  .hero__arrow { display: none; }
}

/* ========================================================================== */
/* Главная: плитка рубрик и карточка товара                                   */
/* ========================================================================== */
/* Картинка рубрики заполняет карточку почти целиком */
@media (max-width: 899px) {
  .cat-card { padding: var(--s-2); gap: 4px; }
  .cat-card__media { width: 120px; height: 120px; }
}
@media (max-width: 599px) {
  .cat-card__media { width: 120px; height: 120px; }
}

/* Рассрочка в карточке товара показывается и на телефоне: раньше блок прятали
   ради высоты, но именно он объясняет цену. */
@media (max-width: 599px) {
  .product-card__parts { display: flex; }
  .installments__item { font-size: 11px; }
}
/* Строка рассрочки должна помещаться в ОДНУ строку при любой цене — иначе
   лишняя строка внизу поднимает цену и кнопку у соседней карточки (карточки
   в ряду одной высоты, а низ прижат через margin-top: auto).

   Арифметика на экране 390px: контейнер отдаёт 362px, минус зазор сетки 12 и
   два поля карточки по 12 — на текст остаётся 151px. Самая длинная строка в
   магазине — у картплоттера за 194 831 грн: «Частями: 64 943 грн × 3 платежа»,
   31 знак. При 11px это ~170px, не влезало; при 10px ~152px — впритык, поэтому
   на телефоне ставим 10px, а слово «платежа» держим неразрывно с числом
   (&nbsp; в шаблоне), чтобы при переносе не отрывалось одно от другого. */
@media (max-width: 599px) {
  .product-card__parts-sum { font-size: 10px; line-height: 1.4; }
}

/* ========================================================================== */
/* SEO-текст: сворачивание                                                    */
/* ========================================================================== */
.seo-text__more {
  display: block;
  width: 100%;
  margin-top: var(--s-3);
  padding: 10px var(--s-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-accent);
  font-size: 14px;
  font-weight: 700;
}
.seo-text__more[hidden] { display: none; }
[data-seo-more][data-clamped] .seo-text__body {
  position: relative;
  max-height: 260px;
  overflow: hidden;
}
/* Растворяем нижний край, чтобы обрез читался как «текст продолжается» */
[data-seo-more][data-clamped] .seo-text__body::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 72px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--c-surface));
  pointer-events: none;
}
@media (max-width: 899px) {
  .seo-text { padding-bottom: var(--s-6); }
  .seo-text__body { padding: var(--s-4); font-size: 14px; line-height: 1.6; }
}

/* ========================================================================== */
/* Каталог: сортировка, фильтры, пагинация                                    */
/* ========================================================================== */
@media (max-width: 767px) {
  /* «Показывать по» на телефоне лишний: страниц всё равно листают пальцем */
  .sorting-bar__group--right { display: none; }
  .sorting-bar { gap: var(--s-2); }
  .sorting-bar__label { font-size: 12px; }
  .sort-chip { height: 30px; padding: 0 10px; font-size: 12px; }
  .sort-chip--num { min-width: 34px; }
}

/* Шторка фильтров. У <dialog> собственный размер — height: fit-content и
   max-height: calc(100% - …) из таблицы стилей браузера. Из-за них inset: 0
   по вертикали не работал: окно вырастало только под содержимое, «Показать»
   налезал на список, а сам список оставался обрезанным. Задаём высоту явно. */
@media (max-width: 1023px) {
  .filters[open] {
    top: 0;
    bottom: 0;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }
  .filters__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .filters__foot { flex: none; }
}

/* Пагинация на телефоне: мельче, а «Предыдущая/Следующая» — одними стрелками.
   Текст внутри ссылки печатает will_paginate вместе со стрелкой, поэтому
   гасим его целиком через font-size: 0 и рисуем шеврон в ::before. */
@media (max-width: 767px) {
  .pagination-box { margin-top: var(--s-5); }
  .pagination { gap: 4px; }
  .pagination a, .pagination span, .pagination em {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    font-size: 12px;
  }
  .pagination .prev_link, .pagination .next_link {
    width: 30px;
    min-width: 30px;
    padding: 0;
    font-size: 0;
  }
  .pagination .prev_link::before { content: '\2039'; font-size: 20px; line-height: 1; }
  .pagination .next_link::before { content: '\203A'; font-size: 20px; line-height: 1; }
}

/* ========================================================================== */
/* Товар: миниатюры и сноска о бренде                                         */
/* ========================================================================== */
/* На телефоне лента миниатюр прокручивается вбок — переносить их строками
   значит отодвинуть покупку на экран вниз. На десктопе остаётся блок. */
@media (max-width: 899px) {
  .gallery__thumbs {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 64px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .gallery__thumbs::-webkit-scrollbar { display: none; }
  .gallery__thumb { width: 64px; height: 64px; }
  .gallery__thumb img { max-width: 52px; max-height: 52px; }
}

/* Сноска о бренде стала соседом колонок, а не частью описания: на телефоне
   она идёт последней, после блока покупки, на широком экране остаётся внизу
   колонки описания — ровно там, где была. */
.brand-note--inline { grid-area: note; }
.product__top { grid-template-areas: "gallery" "info" "buy" "note"; }
@media (min-width: 900px) {
  .product__top {
    grid-template-areas:
      "gallery info"
      "gallery note"
      "buy     buy";
    grid-template-rows: max-content 1fr max-content;
  }
}
@media (min-width: 1200px) {
  .product__top {
    grid-template-areas:
      "gallery info buy"
      "gallery note buy";
    grid-template-rows: max-content 1fr;
  }
}

/* ========================================================================== */
/* Кнопка звонка Binotel                                                      */
/* ========================================================================== */
/* Виджет подключается скриптом из shops.online_chat_code и позиционируется
   своей темой (theme_6.css) с !important — перебить можно только тем же
   весом. Штатное место кнопки задаётся в кабинете Binotel; если менять там,
   эти две строки можно снять. */
#bingc-phone-button {
  left: auto !important;
  right: 8px !important;
}
/* И выше: кнопка 97px, у нижнего края экрана она накрывала итоговую сумму в
   корзине и липкую полосу «Купить» на карточке товара. 96px — рост самой
   кнопки, то есть она поднимается ровно на свою высоту и перестаёт попадать
   на нижний блок. Отступ снизу виджет задаёт инлайном из своего кабинета,
   поэтому только !important. */
@media (max-width: 899px) {
  #bingc-phone-button { bottom: 96px !important; }
}

/* ========================================================================== */
/* Горизонтальный вынос                                                       */
/* ========================================================================== */
/* В описаниях лежат картинки с жёсткими атрибутами вроде width="1026px"
   (у Venu X1 их две). Правило .product-text .row img задавало им width: auto и
   max-height, но НЕ max-width, поэтому по ширине их держал только сброс
   img { max-width: 100% } с меньшей специфичностью — и на телефоне такая
   картинка растягивала документ шире экрана: страница уезжала влево, справа
   появлялась пустая полоса. Ставим предел на том же уровне специфичности. */
.product-text .row img,
.prose .row img { max-width: 100%; }
/* У grid-элементов min-width по умолчанию auto — колонка не может стать уже
   своего содержимого. Разрешаем ей сжиматься. */
.product-text .row > *,
.prose .row > * { min-width: 0; }
/* Последний рубеж: что бы ни прилетело из админки, документ шире экрана не
   станет. clip, а не hidden: он не создаёт контейнер прокрутки и не ломает
   position: sticky у колонки покупки. */
.page__main { overflow-x: clip; }

/* У товаров без сноски (340 из 2070 — бренды без описания и без гарантии)
   строка «note» объявлена, но пуста: высоты у неё нет, а межтрековый зазор
   остаётся. На телефоне это лишние 20px под блоком покупки, на планшете 24px
   между описанием и строкой покупки. Шаблон помечает такие страницы
   модификатором, здесь возвращаем им прежнюю сетку. */
.product__top--no-note { grid-template-areas: "gallery" "info" "buy"; }
@media (min-width: 900px) {
  .product__top--no-note {
    grid-template-areas:
      "gallery info"
      "buy     buy";
    grid-template-rows: auto auto;
  }
}
@media (min-width: 1200px) {
  .product__top--no-note {
    grid-template-areas: "gallery info buy";
    grid-template-rows: auto;
  }
}

/* Обёртка кадра и точек. Точки вынесены из .hero__viewport: у того тёмный фон
   и overflow: hidden, и на мобильном, где высота считается по содержимому, под
   картинкой оставалась тёмная полоса — баннер выглядел выше кадра. Теперь
   .hero__viewport ровно по картинке, точки идут под ним. */
.hero__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Кадр не имеет права сжиматься. .hero__main — элемент сетки со stretch, и
   если ряд окажется ниже, чем кадр плюс точки, флекс отнимет высоту именно у
   кадра: на десктопе баннер молча становился ниже своих 380px. */
.hero__main > .hero__viewport { flex: none; }

/* Точки лежат НА баннере на всех ширинах. В потоке они добавляли блоку героя
   собственный ряд и сдвигали всё, что ниже; наложением ряд героя равен ровно
   высоте кадра — на десктопе это 380px, край в край с правой колонкой из двух
   карточек по 185px с зазором 10. */
.hero__main { position: relative; }
.hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  margin-top: 0;
  z-index: 2;
}
/* На телефоне кадр низкий, поэтому точки прижимаем к самому краю — так они
   меньше перекрывают кнопку и цену, нарисованные на слайде. */
@media (max-width: 767px) {
  .hero__dots { bottom: 6px; }
}

/* Маркеры прокрутки: белая полоска, активная — синяя. Обводка нужна, чтобы
   белое читалось и на светлом кадре, и на светлом фоне страницы. */
.hero__dot {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--c-border-strong);
}
.hero__dot:hover { background: var(--c-accent-bg); }
.hero__dot[aria-current="true"] {
  background: var(--c-accent);
  box-shadow: none;
}

/* ========================================================================== */
/* Горизонтальные ленты: не растягивать документ                              */
/* ========================================================================== */
/* НАЙДЕНО ЗАМЕРОМ НА УСТРОЙСТВЕ (iPhone, Safari, 440px): у страницы товара
   html.scrollWidth 540 при body.scrollWidth 440, и ни одного элемента, чья
   рамка выходит за экран. Поиск делением показал виновника — .gallery__thumbs:
   rect 380px, а scrollWidth 568. То есть лента честно обрезает содержимое, но
   Safari всё равно засчитывает её внутреннее переполнение в прокрутку
   документа, и справа появляется пустая полоса.

   Лечение: у каждой нашей горизонтальной ленты задаём ОБЕ оси overflow явно
   (при overflow-x: auto и overflow-y: visible вторая ось по спецификации сама
   вычисляется в auto — Safari на этом и спотыкается) и добавляем
   contain: paint, который прямо запрещает потомкам участвовать в переполнении
   предков. Прокрутка пальцем при этом сохраняется. */
.gallery__thumbs,
.gallery__track,
.tabs__nav,
.sorting-bar__group,
.product-text table,
.prose table {
  overflow-y: hidden;
  contain: paint;
}
/* ===== конец zzzz_mobile.css ===== */

/* ===== brandshop: zzzz_order.css (влито merge_parts.py) ===== */
/* Корзина и оформление заказа: правки 04.08.2026.
   Фрагмент влит после zzzz_mobile.css — переопределяет всё, что выше. */

/* ========================================================================== */
/* Корзина                                                                    */
/* ========================================================================== */
/* Снимок товара лежал на сером поле (--c-surface-2), а картинки в базе разной
   формы: у горизонтальной по бокам оставались серые полосы. Подложку убираем —
   бокс всё равно квадратный и снимок в нём центрируется. */
.cart-row__media { background: transparent; }

/* Плюс и минус у количества были нарисованы тонким штрихом 1,6 при отрисовке
   16px из вьюбокса 24 — на экране это чуть больше пикселя, и кнопки читались
   как пустые поля. Делаем знаки крупнее и жирнее, а сами кнопки отделяем
   линиями, чтобы поле выглядело степпером, а не одним инпутом. */
.qty__btn { width: 42px; color: var(--c-ink); }
.qty__btn .icon { width: 20px; height: 20px; stroke-width: 2.4; }
.qty__btn:first-child { border-right: 1px solid var(--c-border); }
.qty__btn:last-child { border-left: 1px solid var(--c-border); }
.qty__btn--off { color: var(--c-muted-3); }
.qty__btn--off .icon { stroke-width: 2; }

/* ========================================================================== */
/* Оформление заказа                                                          */
/* ========================================================================== */
/* Белая подложка шага начиналась ниже заголовка. Причина в <legend>: браузер
   выносит его из потока и кладёт поверх верхней границы <fieldset>, поэтому
   фон блока начинается уже под ним. Классическое лечение — вернуть легенду в
   поток, сделав её плавающей на всю ширину; следующий за ней блок обязан
   очистить обтекание, иначе наложится. */
.checkout-step__legend {
  float: left;
  width: 100%;
  margin-bottom: var(--s-4);
}
.checkout-step > *:not(legend) { clear: both; }

/* Поля плотнее: 48px на строку в четырёх подряд блоках давали лишний экран
   прокрутки на десктопе и полтора на телефоне.

   ВНИМАНИЕ, ловушка этого файла (о ней предупреждает комментарий в разделе
   «Оформление заказа» основного CSS): в cart.css есть блок
   @media (max-width: 899px) с мобильными padding у .checkout-step,
   .cart-summary, .promo и .order-summary. Специфичность та же, а наш фрагмент
   лежит ниже — правило без медиазапроса перебивает медиазапрос и на телефоне.
   Так у шага заказа мобильный padding вырос с 16 до 20px и разошёлся с
   соседними блоками. Поэтому всё, что спорит с мобильным блоком, обёрнуто
   в @media (min-width: 900px). */
@media (min-width: 900px) {
  .checkout-step { padding: var(--s-5); }
  .checkout-step__grid { gap: var(--s-3) var(--s-4); }
}
.field { gap: 4px; }
.field__input { height: 42px; }
.field__input--area { min-height: 72px; }
.field__label { font-size: 12px; }
.field__hint { margin-top: 2px; font-size: 12px; }
/* Галочка «не перезванивайте» стоит внутри поля телефона — прижимаем её
   к номеру, а не отбиваем как самостоятельный блок. */
.field--check-tight { flex-direction: row; align-items: center; gap: var(--s-2); margin-top: 2px; }

/* Имя, телефон и почта — одной строкой. .checkout-step__grid используется
   только в шаге контактов (в остальных шагах свои списки и textarea), поэтому
   правило можно не сужать селектором. С 900px три колонки: блок контактов
   после переноса доставки и оплаты в ряд занимает всю ширину, и три поля туда
   помещаются с запасом. До 900px остаются прежние две колонки, ниже 600 —
   одна. align-items: start нужен, потому что под телефоном стоит галочка
   «не перезванивайте» и это поле выше соседних. */
@media (min-width: 900px) {
  .checkout-step__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

/* Карточки способов ниже: 56px минимума под одну строку текста было избыточно. */
.radio-card__label {
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  gap: var(--s-2);
}
.radio-card__name { font-size: 14px; }
.radio-card__price { font-size: 13px; }

/* ДОСТАВКА И ОПЛАТА — ОДНИМ РЯДОМ В ДВЕ КОЛОНКИ, как в теме multibrand.
   .checkout__main была флекс-колонкой: четыре шага шли друг под другом и
   растягивали страницу. Делаем сетку в две колонки и оставляем во всю ширину
   первый шаг (контакты) и последний (комментарий) — в две колонки просятся
   только списки способов.

   Выравнивание по умолчанию (stretch) — намеренно: оба шага тянутся на высоту
   ряда, и белые карточки получаются одинаковыми. Список оплат длиннее списка
   доставок, поэтому под адресом доставки остаётся пустое поле — так и задумано,
   рваные по высоте карточки рядом смотрелись хуже. Содержимое при этом
   прижато к верху, растягивается только подложка.
   Порядок nth-child привязан к разметке checkout.rhtml: 1 контакты,
   2 доставка, 3 оплата, 4 комментарий. Добавите шаг — поправьте номера. */
@media (min-width: 900px) {
  .checkout__main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }
  .checkout__main > .checkout-step:nth-child(1),
  .checkout__main > .checkout-step:nth-child(4) { grid-column: 1 / -1; }
}

/* «Бесплатно» в правом блоке печаталось чёрным: правило .order-summary__row b
   имеет специфичность (0,1,1) и стоит выше, поэтому перебивало
   .order-summary__free (0,1,0). Поднимаем вес — теперь зелёное, как и в
   списке способов доставки. */
.order-summary__row b.order-summary__free { color: var(--c-success); }

/* Адрес доставки, город и отделение — каждое поле на всю ширину блока.
   .checkout-address была сеткой 1fr / 1.4fr, и после переноса доставки в
   половину ширины выпадашки города и отделения стали слишком узкими для
   длинных названий («Київ, відділення №123: вул. ...»). */
.checkout-address { grid-template-columns: minmax(0, 1fr); }

/* Способы оплаты ниже способов доставки: у них нет ни цены справа, ни второй
   строки, поэтому карточке хватает одной строки текста с минимальными полями. */
.checkout-step:nth-child(3) .radio-card__label {
  min-height: 38px;
  padding: 6px var(--s-3);
}
.checkout-step:nth-child(3) .radio-list { gap: 6px; }

/* Подвал на корзине и оформлении заказа скрыт: на этих экранах у покупателя
   одна задача, и восемь ссылок с реквизитами внизу только уводят с формы.
   Шапка остаётся — по ней возвращаются в каталог. Селектор по data-page,
   который layout ставит на <body> в виде "контроллер-экшен". */
body[data-page="store-checkout"] .footer,
body[data-page="store-show_cart"] .footer { display: none; }
/* ===== конец zzzz_order.css ===== */

/* ==========================================================================
   13. Печать
   ========================================================================== */
@media print {
  .header__topbar, .header__catalog-btn, .header__search, .header__actions,
  .catalog-menu, .mobile-nav, .overlay, .footer__col, .footer__social { display: none; }
  .product-card__fav, .product-card__buy, .product-card__parts { display: none; }
  body { background: #fff; }
}