/* ==========================================================================
   layout.css — блоки страниц: шапка, hero, футер, каталог, карточка, корзина
   ========================================================================== */

/* --------------------------------------------------------------------------
   СЕКЦИИ
   -------------------------------------------------------------------------- */
.section { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .section { padding-top: 6rem; padding-bottom: 6rem; } }
.section--tight { padding-top: 3rem; padding-bottom: 3rem; }
.section--flush-bottom { padding-bottom: 0; }
.section--alt { background: var(--c-bg-offwhite); }
.section--dark { background: var(--c-primary); color: var(--c-white); }
.section--dark .section-heading { border-bottom-color: rgba(255, 255, 255, .15); }
.section--dark a { color: var(--c-white); }

.page { padding-top: 3rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .page { padding-top: 4rem; padding-bottom: 6rem; } }

/* Все page-level гриды ниже (.catalog, .product, .cart) объявлены на CSS Grid.
   Без min-width:0 их элементы не сжимаются меньше своего контента и выталкивают
   страницу в горизонтальный скролл на узких экранах. */
.catalog > *,
.product > *,
.cart > *,
.tabs > *,
.product__gallery > * { min-width: 0; }

.page-head { margin-bottom: 2.5rem; }
.page-title { margin-bottom: .8rem; }

/* --------------------------------------------------------------------------
   ШАПКА
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   ШАПКА — 3 ряда, по образцу vseinstrumenti.ru

   ряд 1  город + магазины | служебные ссылки | телефон
   ряд 2  лого | Каталог | поиск | Избранное/Сравнение/Заказы/Корзина | Войти
   ряд 3  Акции | категории каталога | Для юрлиц

   Всё на светлом фоне с синим акцентом (--c-secondary), тёмная только
   кнопка «Каталог», кнопка поиска и «Войти» — как в образце.
   -------------------------------------------------------------------------- */
.header {
  position: relative;
  z-index: var(--z-header);
  background: var(--c-white);
}

/* --------------------------------------------------------------------------
   Ряд 1 — служебный
   -------------------------------------------------------------------------- */
.header__top { border-bottom: 1px solid var(--c-border); }

.header__top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 4.6rem;
}

/* Блок «Москва / 5 магазинов» удалён вместе с разметкой: кнопка города
   вела в модальное окно, которого на каталоге и в корзине не было. */
.header__utility { display: none; align-items: center; gap: 2.6rem; }
@media (min-width: 992px) { .header__utility { display: flex; } }

/* Селектор на a И button: пункты с шевроном сделаны кнопками,
   иначе svg без заданного размера растягивается на всю свободную ширину. */
.header__utility a,
.header__utility button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--ff-alt);
  font-size: 1.3rem;
  line-height: 1.8rem;
  white-space: nowrap;
  color: var(--c-fg);
}
.header__utility a:hover,
.header__utility button:hover { color: var(--c-secondary); }
.header__utility svg { flex: none; width: 1rem; height: .7rem; fill: currentColor; opacity: .6; }

/* ==========================================================================
   Выпадающие списки в utility-строке
   Панели скрыты атрибутом hidden (display:none), открытие — JS по data-drop-toggle.
   Меню доступно только на десктопе: на мобильных те же пункты есть в drawer.
   ========================================================================== */
.header__util-item { position: relative; }

/* Мостик через зазор между кнопкой и панелью.
   Панель смещена на 1.4rem вниз, и без этого прозрачного блока курсор,
   идя от кнопки к панели, проходит по пустоте: срабатывает mouseleave
   на .header__util-item и меню закрывается, не успев раскрыться. */
.header__util-item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1.4rem;
  z-index: 39;
}

.header__util-btn[aria-expanded="true"] { color: var(--c-secondary); }
.header__util-btn[aria-expanded="true"] svg { transform: rotate(180deg); opacity: 1; }
.header__util-btn svg { transition: var(--tr); }

.header__drop {
  position: absolute;
  top: calc(100% + 1.4rem);
  left: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 2.4rem;
  width: 42rem;
  padding: 2rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .12);
}
.header__drop[hidden] { display: none; }
.header__util-item:last-of-type .header__drop { left: auto; right: 0; }

.header__drop-col { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.header__drop-link {
  display: block;
  padding: .7rem .8rem;
  margin-left: -.8rem;
  border-radius: var(--r-sm);
  font-family: var(--ff-alt);
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: var(--c-fg);
  transition: var(--tr);
}
.header__drop-link:hover { background: var(--c-bg-offwhite); color: var(--c-secondary); }

.header__drop-note {
  grid-column: 1 / -1;
  padding-top: 1.4rem;
  border-top: 1px solid var(--c-border);
  font-family: var(--ff-alt);
  font-size: 1.2rem;
  line-height: 1.8rem;
  color: var(--c-fg-sub);
}
.header__drop-note b { display: block; color: var(--c-fg); font-size: 1.3rem; }

@media (max-width: 991px) {
  .header__drop { display: none !important; }
}

/* На 992–1199 верхний ряд тесный — сжимаем отступы, не переносим текст */
@media (min-width: 992px) and (max-width: 1199px) {
  .header__utility { gap: 1.4rem; }
  .header__contacts { gap: 1rem; }
  .header__phone { font-size: 1.4rem; }
}

.header__contacts { display: flex; align-items: center; gap: 1.6rem; }

/* Телефон виден на всех ширинах: после удаления блока «Москва» верхний ряд
   на мобильных состоял из одних иконок мессенджеров. */
.header__phone {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--ff-head);
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--c-fg);
}
.header__phone:hover { color: var(--c-secondary); }
.header__phone svg { flex: none; width: 1.6rem; height: 1.6rem; fill: var(--c-fg-sub); }
.header__phone:hover svg { fill: var(--c-secondary); }
/* на совсем узких экранах иконка мешает — оставляем только номер */
@media (max-width: 359px) { .header__phone svg { display: none; } }

/* соцсети видны и на мобильных */
.topbar__socials { display: flex; align-items: center; gap: 1.4rem; }
.topbar__social { display: inline-flex; transition: var(--tr); }
.topbar__social svg { width: 2.4rem; height: 2.4rem; }
.topbar__social:hover { opacity: .7; }

/* --------------------------------------------------------------------------
   Ряд 2 — лого, Каталог, поиск, действия
   -------------------------------------------------------------------------- */
.header__main { background: var(--c-white); }

.header__main-inner {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.2rem 0;
  transition: var(--tr);
}

/* Мобильная шапка без этого ряда: остаются строка контактов и закрепляемая
   строка поиска. ВНИМАНИЕ: вместе с рядом исчезают бургер (он открывал
   мобильное меню), лого и иконка корзины. */
@media (max-width: 991px) { .header__main { display: none; } }

.header__burger { flex: none; display: block; }
@media (min-width: 992px) { .header__burger { display: none; } }
.header__burger svg { width: 3.2rem; height: 3.2rem; fill: currentColor; }

.header__logo { flex: none; }
@media (max-width: 575px) { .header__logo { flex: 1 1 auto; } }
.header__logo img { width: 15rem; max-width: 100%; }
@media (max-width: 767px) { .header__logo img { width: 13rem; } }
@media (max-width: 400px) { .header__logo img { width: 10.5rem; } }

/* Кнопка «Каталог» + каскадное меню */
.catalogue { position: relative; flex: none; display: none; }
@media (min-width: 992px) { .catalogue { display: block; } }

/* Кнопка «Каталог» — открывает то же меню, что и бургер. Выпадающего
   списка с каскадом больше нет: он был вторым экземпляром того же меню. */
.catalogue__btn {
  display: flex;
  align-items: center;
  gap: .9rem;
  height: 4.8rem;
  padding: 0 2rem;
  border-radius: var(--r-sm);
  background: var(--c-primary);
  color: var(--c-white);
  font-family: var(--ff-head);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .3px;
  white-space: nowrap;
}
.catalogue__btn:hover { background: var(--c-secondary); color: var(--c-white); }
.catalogue__btn svg { flex: none; width: 1.8rem; height: 1.5rem; fill: currentColor; }

/* Выпадающий каскад категорий (десктоп).
   Мобильное меню — отдельная панель #menu-drawer, своего дубля
   этой структуры в разметке нет. */
.catalogue__menu {
  position: absolute;
  top: calc(100% + .6rem);
  left: 0;
  z-index: 20;
  min-width: 32rem;
  padding: 1rem 0;
  border-radius: var(--r-sm);
  background: var(--c-white);
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(.8rem);
  transition: var(--tr);
}
.catalogue:hover .catalogue__menu,
.catalogue:focus-within .catalogue__menu { opacity: 1; visibility: visible; transform: none; }

.catalogue__item { position: relative; }
.catalogue__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.6rem;
  font-family: var(--ff-alt);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.6rem;
  color: var(--c-primary);
}
.catalogue__link:hover { background: var(--c-bg-offwhite); color: var(--c-secondary); }
.catalogue__link svg { flex: none; width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 3; }

.catalogue__sub {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 20;
  min-width: 22rem;
  padding: .6rem 0;
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  transition: var(--tr);
}
.catalogue__item:hover .catalogue__sub { opacity: 1; visibility: visible; }
.catalogue__sublink {
  display: block;
  padding: .7rem 1.6rem;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: var(--c-fg);
}
.catalogue__sublink:hover { background: var(--c-bg-offwhite); color: var(--c-secondary); }

/* Поиск */
.header__search { flex: 1 1 auto; min-width: 0; display: none; }
@media (min-width: 992px) { .header__search { display: block; } }

.search-box { position: relative; }

.search-form {
  display: flex;
  align-items: center;
  height: 4.8rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-white);
  transition: var(--tr);
}
.search-form:focus-within { border-color: var(--c-secondary); }

.search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0 1.6rem;
  border: 0;
  background: transparent;
  font-family: var(--ff-alt);
  font-size: 1.4rem;
  color: var(--c-fg);
}
.search-form__input:focus { outline: none; }

.search-form__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 5.6rem;
  margin: 0;
  border-radius: var(--r-sm);
  background: var(--c-primary);
  color: var(--c-white);
}
.search-form__btn:hover { background: var(--c-secondary); }
.search-form__btn svg { width: 1.8rem; height: 1.8rem; fill: currentColor; }

.search-results {
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-white);
  box-shadow: var(--sh-md);
}
.search-results a:hover { background: var(--c-bg-offwhite); }

/* === Поиск msearch — стилизован под шаблон, чтобы отключить его msearch.css.
       Имя класса mse-input менять нельзя: по нему инпут ищет JS компонента. === */

/* Форма — как .search-form; JS вставляет список подсказок внутрь неё */
.mse-form {
  position: relative;
  display: flex;
  align-items: center;
  height: 4.8rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-white);
  transition: var(--tr);
}
.mse-form:focus-within { border-color: var(--c-secondary); }

.mse-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0 1.6rem;
  border: 0;
  background: transparent;
  font-family: var(--ff-alt);
  font-size: 1.4rem;
  color: var(--c-fg);
}
.mse-input:focus { outline: none; }

.mse-button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 5.6rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--c-primary);
  font-family: var(--ff-alt);
  font-size: 1.4rem;
  color: var(--c-white);
  cursor: pointer;
  transition: var(--tr);
}
.mse-button:hover { background: var(--c-secondary); }
/* Иконка: у svg без width/height дефолт 300×150 и чёрная заливка —
   на тёмной кнопке она «пропадает». Задаём размер и currentColor. */
.mse-button svg { width: 1.8rem; height: 1.8rem; fill: currentColor; }

/* Выпадающие подсказки (создаёт SearchUI.js как ul.mse-autocomplete) */
.mse-autocomplete {
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 60vh;
  margin: 0;
  padding: .4rem 0;
  list-style: none;
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-white);
  box-shadow: var(--sh-md);
  display: none;
}
.mse-autocomplete.active { display: block; }

.mse-autocomplete-item { cursor: pointer; }
.mse-autocomplete-item:hover,
.mse-autocomplete-item.active { background: var(--c-bg-offwhite); }

/* Подсказка — ссылка целиком (HTML рендерит сервер) */
.mse-suggest-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.6rem;
  color: var(--c-fg);
  text-decoration: none;
}
.mse-suggest-item:hover { color: var(--c-fg); }

/* Ресурс: заголовок + интро колонкой */
.mse-suggest-item--resource {
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
}

/* Двухклассовые селекторы: перекивают и при включённом msearch.css */
.mse-suggest-item .mse-suggest-title {
  max-width: 100%;
  overflow: hidden;
  font-family: var(--ff-head);
  font-weight: 600;
  color: var(--c-fg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mse-suggest-item .mse-suggest-intro {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--c-fg-sub);
}

/* Товар: фото + колонка (артикул, цена) */
.mse-suggest-thumb {
  flex: none;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.mse-suggest-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.mse-suggest-article { font-size: 1.2rem; color: var(--c-fg-sub); }

.mse-suggest-price {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  font-family: var(--ff-head);
  font-size: 1.4rem;
}

.mse-suggest-price-current { font-weight: 700; color: var(--c-fg); }
.mse-suggest-price-old { font-size: 1.2rem; color: var(--c-fg-sub); text-decoration: line-through; }

/* Страница результатов (?mse_query=…) */
.mse-results { margin-top: 2.4rem; }
.mse-results-header {
  margin-bottom: 1.6rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--c-border);
}
.mse-results-info { margin: 0; font-size: 1.3rem; color: var(--c-fg-sub); }
.mse-results-list { display: flex; flex-direction: column; gap: 1.6rem; }

.mse-result {
  padding: 1.6rem;
  border-radius: var(--r-sm);
  background: var(--c-bg-offwhite);
}
.mse-result-title { margin: 0 0 .4rem; font-size: 1.6rem; }
.mse-result-title a { color: var(--c-secondary); text-decoration: none; }
.mse-result-title a:hover { text-decoration: underline; }
.mse-result-intro { margin: 0 0 .4rem; line-height: 1.5; }
.mse-result-meta { display: flex; gap: 1.6rem; font-size: 1.2rem; color: var(--c-fg-sub); }

.mse-highlight { border-radius: .2rem; background: rgba(79, 146, 215, .15); }
/* Подсветка совпадений — сервер рендерит <mark>, а не .mse-highlight */
.mse-autocomplete mark,
.mse-results mark {
  border-radius: .2rem;
  background: rgba(79, 146, 215, .15);
  color: inherit;
}
.mse-no-results { padding: 2rem; text-align: center; color: var(--c-fg-sub); }

/* Действия: Избранное / Сравнение / Корзина */
.header__actions { flex: none; display: flex; align-items: center; gap: 2rem; }

.header__action { position: relative; display: flex; }
.header__action--wide { display: none; }
@media (min-width: 992px) { .header__action--wide { display: flex; } }

.header__action-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
}
.header__action svg { width: 2.4rem; height: 2.4rem; fill: none; stroke: currentColor; stroke-width: 1.6; }

.header__action-label {
  display: none;
  font-family: var(--ff-alt);
  font-size: 1.2rem;
  line-height: 1.6rem;
  white-space: nowrap;
  color: var(--c-fg-sub);
}
@media (min-width: 1200px) { .header__action-label { display: block; } }
.header__action:hover .header__action-label { color: var(--c-secondary); }
.header__action:hover svg { stroke: var(--c-secondary); }

.header__action__count {
  position: absolute;
  top: -.6rem;
  right: -.9rem;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 .35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-secondary);
  border-radius: var(--r-full);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-white);
}

.header__action--cart { display: flex; }
.header__action--cart svg { fill: currentColor; stroke: none; }
.header__action--cart .header__action-label { color: var(--c-fg); font-weight: 600; }
.header__action--cart:hover .header__action-label { color: var(--c-secondary); }

/* «Войти» */
.header__login {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  height: 4.4rem;
  padding: 0 2.4rem;
  border-radius: var(--r-sm);
  background: var(--c-bg-offwhite);
  font-family: var(--ff-alt);
  font-size: 1.4rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--c-fg);
}
.header__login:hover { background: var(--c-secondary); color: var(--c-white); }
@media (min-width: 992px) { .header__login { display: inline-flex; } }

/* Мобильный поиск — отдельная полоса сразу под шапкой (вне <header>).
   position:sticky держит её у верхнего края на всей странице и, в отличие
   от fixed, не выбрасывает из потока — контент под ней не прыгает. */
.header__search-m {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-white);
}
@media (min-width: 992px) { .header__search-m { display: none; } }
/* На мобильных полоса пуста, пока JS не переставит туда единственную
   mse-форму из шапки — не показываем белый пробел до этого момента */
.header__search-m:not(:has(.mse-form)) { display: none; }

/* Sticky-шапка — только на десктопе: закрепляется ряд 2 (лого, поиск,
   корзина). На мобильных поиск держится сам, а шапка уезжает вверх.
   Высота ряда намеренно НЕ меняется — иначе нельзя один раз измерить
   высоту и зарезервировать под неё место (см. --sticky-comp ниже). */
@media (min-width: 992px) {
  .header.is-sticky .header__main {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    background: var(--c-white);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
  }
  /* Ряд 2 уходит из потока и схлопывает шапку на свою высоту — резервируем
     её, чтобы содержимое страницы не прыгало в момент переключения. */
  .header.is-sticky { padding-bottom: var(--sticky-comp, 0px); }
}

/* Ряд 3 (полоса категорий) удалён: его ссылки дублировали каскад в шапке
   и меню в панели, а на мобильных он и так скрывался. Нижняя граница,
   которую он давал под шапкой, перенесена на сам .header. */
@media (min-width: 992px) { .header { border-bottom: 1px solid var(--c-border); } }

/* --------------------------------------------------------------------------
   Кнопка «наверх»
   Раньше приподнималась над нижним тулбаром — тулбар убран, поэтому
   и отступ стал обычным.
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 2rem;
  bottom: 2.5rem;
  z-index: var(--z-toolbar);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.3rem;
  height: 4.3rem;
  border-radius: var(--r-full);
  background: var(--c-secondary);
  color: var(--c-white);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(5rem);
  transition: var(--tr);
}
.to-top svg { width: 2.4rem; height: 2.4rem; fill: currentColor; }
.to-top:hover { background: var(--c-primary); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
/* Кнопка «Наверх» — только на мобильных; на десктопе не показывается */
.to-top { display: none; }
@media (max-width: 991px) {
  .to-top { display: inline-flex; bottom: calc(var(--tabbar-h) + 1.2rem + env(safe-area-inset-bottom)); }
}

/* Баннер — не во весь экран: поля по краям и скругленные углы.
   Ширина = min(экран - 2*отступ, контейнер + 2*отступ), то есть поля
   появляются везде, а дальше контейнера баннер не растёт.

   Известный побочный эффект, о нём честно: на экранах уже 1366px, где
   контейнер страницы центрирован, баннер шире контейнера ровно на два
   отступа, поэтому его внутренний .container встаёт на ту же линию и
   заголовок выровнен по сетке. А ниже 1366px контейнер равен ширине
   экрана, у баннера появляются поля, и его текст уходит вправо ровно
   на величину отступа (15px на телефоне, 25px на планшете). Чтобы
   вернуть строгое выравнивание ценой полей, достаточно заменить
   width на 100% — тогда баннер станет в ширину экрана на этих
   брейкпоинтах. */
.hero {
  position: relative;
  --banner-inset: 1.5rem;
  background: var(--c-bg);
  padding-block: 1.5rem 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero { --banner-inset: 2.5rem; padding-block: 2.5rem 0; }
}

.hero__slide {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(100% - (2 * var(--banner-inset)));
  max-width: calc(var(--container-w) + (2 * var(--banner-inset)));
  margin-inline: auto;
  min-height: 34rem;
  border-radius: var(--r-md);
  overflow: hidden;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
@media (min-width: 768px)  { .hero__slide { min-height: 40rem; } }
@media (min-width: 1200px) { .hero__slide { min-height: 46rem; } }

/* Затемнение слева, чтобы текст читался поверх светлого фото */
.hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, .97) 0%,
    rgba(255, 255, 255, .92) 38%,
    rgba(255, 255, 255, .55) 58%,
    rgba(255, 255, 255, .1)  78%,
    rgba(255, 255, 255, 0)   100%);
}
@media (max-width: 767px) {
  .hero__slide::before {
    background: linear-gradient(180deg, rgba(255,255,255,.96) 55%, rgba(255,255,255,.75) 100%);
  }
  .hero__slide { min-height: 42rem; background-position: 70% center; }
}

.hero__content { position: relative; max-width: 46rem; padding: 4rem 0; }
.hero__title { margin-bottom: 1.5rem; }
.hero__price {
  display: block;
  margin-bottom: 2.5rem;
  font-family: var(--ff-head);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-secondary);
}
@media (min-width: 768px) { .hero__price { font-size: 2.6rem; } }
.hero__text {
  margin-bottom: 2.5rem;
  max-width: 38rem;
  font-size: 1.6rem;
  line-height: 2.6rem;
  color: #3a3d40;
}
@media (min-width: 768px) { .hero__text { font-size: 1.7rem; line-height: 2.8rem; } }

.hero__dots { position: absolute; left: 0; right: 0; bottom: 2rem; display: flex; gap: .8rem; justify-content: center; }
.hero__dot {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--r-full);
  background: var(--c-border-strong);
  transition: var(--tr);
}
.hero__dot.is-active,
.hero__dot:hover { background: var(--c-secondary); transform: scale(1.2); }

/* --------------------------------------------------------------------------
   ПРЕИМУЩЕСТВА
   -------------------------------------------------------------------------- */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
/* Ниже 400px две колонки дают тексту 79px, и слова вроде «Официальные»
   приходилось рвать посреди. В одну колонку слово помещается целиком. */
@media (max-width: 399px) { .features { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 992px) { .features { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem; } }

.feature { display: flex; align-items: flex-start; gap: 1.2rem; }
/* У flex-элемента min-width:auto, поэтому текстовый блок рядом с иконкой
   не сжимался до ширины колонки: длинное слово («производителей», 105px)
   распирало его, и на экране 320px блок вылезал за правый край на 31px.
   Иконке min-width не нужен — у неё flex: none. */
.feature > * { min-width: 0; }
/* min-width:0 убрал вылет рамки, но длинное слово («производителей»)
   продолжало расширять прокручиваемую область страницы: переноса внутри
   слова нет, а ширины колонки на это не хватает. */
.feature { overflow-wrap: anywhere; }
.feature__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: var(--r-full);
  background: rgba(79, 146, 215, .12);
  color: var(--c-secondary);
}
.feature__icon svg { width: 2.4rem; height: 2.4rem; fill: currentColor; }
.feature__title {
  display: block;
  margin-bottom: .3rem; font-size: 1.5rem; line-height: 2rem; }
.feature__text { font-size: 1.3rem; line-height: 1.9rem; color: var(--c-fg-sub); }

/* --------------------------------------------------------------------------
   ПЛИТКИ КАТЕГОРИЙ
   -------------------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (min-width: 992px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 16rem;
  padding: 2rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-offwhite);
  overflow: hidden;
  transition: var(--tr);
}
@media (min-width: 992px) { .tile { min-height: 20rem; } }
.tile:hover { border-color: var(--c-secondary); box-shadow: var(--sh-md); transform: translateY(-.3rem); }
.tile:hover .tile__title { color: var(--c-secondary); }

.tile__icon {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: var(--c-border);
  transition: var(--tr);
}
.tile:hover .tile__icon { color: var(--c-secondary); opacity: .5; }
.tile__icon svg { width: 6rem; height: 6rem; fill: currentColor; }

.tile__count { font-size: 1.2rem; color: var(--c-fg-sub); }
.tile__title { margin-top: .3rem; font-size: 1.7rem; line-height: 2.2rem; transition: var(--tr); }

/* --------------------------------------------------------------------------
   БРЕНДЫ
   -------------------------------------------------------------------------- */
.brands { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem 3rem; }
.brand {
  font-family: var(--ff-head);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #b9bcbe;
  transition: var(--tr);
}
@media (min-width: 768px) { .brand { font-size: 2.2rem; } }
.brand:hover { color: var(--c-primary); }

/* --------------------------------------------------------------------------
   БЛОК «ОСТАВИТЬ ЗАЯВКУ» (CTA)
   -------------------------------------------------------------------------- */
.cta { position: relative; overflow: hidden; }
.cta__form { max-width: 40rem; }
.cta__row { display: grid; grid-template-columns: 1fr; gap: 0 1.2rem; }
@media (min-width: 768px) { .cta__row { grid-template-columns: 1fr 1fr; } .cta__row--full { grid-column: 1 / -1; } }
.cta .form-input,
.cta .form-textarea { background: var(--c-white); }

/* --------------------------------------------------------------------------
   ПОДВАЛ
   -------------------------------------------------------------------------- */
.footer { background: var(--c-bg-dark); color: var(--c-white); }
.footer__top { padding: 5rem 0 3rem; }
@media (min-width: 768px) { .footer__top { padding: 6rem 0 4rem; } }

.footer__title {
  margin-bottom: 1.8rem;
  font-size: 1.7rem;
  line-height: 2.2rem;
  color: var(--c-white);
}
.footer__title::after {
  content: "";
  display: block;
  width: 3.4rem;
  height: 2px;
  margin-top: 1rem;
  background: var(--c-secondary);
}
.footer__toggle { display: none; }
@media (max-width: 991px) {
  .footer__title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0;
    padding: 1.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .footer__title::after { display: none; }
  .footer__toggle { display: block; width: 1.4rem; height: 1.4rem; position: relative; }
  .footer__toggle::before,
  .footer__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    background: var(--c-secondary);
  }
  .footer__toggle::after { transform: rotate(90deg); }
  .footer__col.is-open .footer__toggle::after { transform: rotate(0deg); }
  .footer__col-body { display: none; padding: 1.5rem 0 1.8rem; }
  .footer__col.is-open .footer__col-body { display: block; }
}

.footer__text {
  font-size: 1.3rem;
  line-height: 2.1rem;
  color: rgba(255, 255, 255, .68);
}

.footer__list li + li { margin-top: .9rem; }
.footer__link {
  position: relative;
  display: inline-block;
  padding-left: 1.2rem;
  font-size: 1.3rem;
  line-height: 1.9rem;
  color: rgba(255, 255, 255, .68);
}
.footer__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85rem;
  width: .5rem;
  height: .5rem;
  border-radius: var(--r-full);
  background: var(--c-secondary);
  opacity: 0;
  transition: var(--tr);
}
.footer__link:hover { color: var(--c-white); }
.footer__link:hover::before { opacity: 1; }

.footer__contact { display: flex; flex-direction: column; gap: 1rem; }
.footer__contact a { font-size: 1.4rem; line-height: 2rem; color: var(--c-white); }
.footer__contact a:hover { color: var(--c-secondary); }
.footer__contact-label {
  display: block;
  font-size: 1.1rem;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.footer__socials { display: flex; gap: 1.2rem; margin-top: 1.5rem; }
.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .07);
  transition: var(--tr);
}
.footer__social svg { width: 2rem; height: 2rem; fill: var(--c-white); }
.footer__social--wa:hover { background: var(--c-whatsapp); }
.footer__social--tg:hover { background: var(--c-telegram); }

.footer__bottom {
  padding: 1.8rem 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
}
.footer__legal {
  max-width: 76rem;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 1.9rem;
  color: rgba(255, 255, 255, .45);
}
.footer__copy { margin-top: .8rem; font-size: 1.2rem; color: rgba(255, 255, 255, .45); }

/* --------------------------------------------------------------------------
   КАТАЛОГ
   -------------------------------------------------------------------------- */
.catalog { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 992px) { .catalog { grid-template-columns: 27rem minmax(0, 1fr); gap: 3rem; } }

/* visually hidden h2 that owns the product grid in the outline */.catalog__results-title { margin: 0; font-size: 1.5rem; }
.filters { display: none; }
@media (min-width: 992px) { .filters { display: block; } }

/* Шторка фильтров на мобильных (как в эталоне): форма mFilter сама
   становится drawer'ом. Открытие — кнопка «Фильтры» в тулбаре через
   data-drawer-open="filters-drawer", закрытие — data-drawer-close. */
.filters-drawer__head,
.filters-drawer__apply { display: none; }

@media (max-width: 991px) {
  #mfilter-form {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    height: 100dvh;
    margin: 0;
    padding: 1.5rem;
    overflow-y: auto;
    background: var(--c-white);
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--tr), visibility var(--tr);
  }
  #mfilter-form.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  .filters-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -0.4rem 0 1.4rem;
  }
  .filters-drawer__title {
    font-family: var(--ff-head);
    font-size: 1.7rem;
    font-weight: 700;
  }
  .filters-drawer__apply {
    display: block;
    margin-top: 1.2rem;
  }
}

.filters__box {
  padding: 1.8rem 2rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-white);
}
.filters__box + .filters__box { margin-top: 1.5rem; }
.filters__title {
  display: block;
  margin-bottom: 1.4rem;
  font-size: 1.4rem;
  line-height: 2rem;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.filters__list { display: flex; flex-direction: column; gap: 1rem; }
.filters__check {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: 1.3rem;
  line-height: 1.7rem;
  color: var(--c-fg);
  cursor: pointer;
}
.filters__check input { flex: none; width: 1.7rem; height: 1.7rem; margin: 0; accent-color: var(--c-secondary); cursor: pointer; }
.filters__check:hover { color: var(--c-secondary); }
.filters__num { margin-left: auto; font-size: 1.2rem; color: var(--c-fg-sub); }

/* Фильтры mFilter (чанки mfilter.filter/item/slider): строка заголовка
   с бейджем выбранных значений, пустые значения приглушены. */
.filters__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: 1.4rem;
}
.filters__title--inline { margin-bottom: 0; }
.filters__title-row .badge--dark { font-size: 1.2rem; }
/* состояния, которыми скрипт mFilter помечает значения */
.mfilter-item-empty { opacity: .45; }
.mfilter-item-empty input { pointer-events: none; }
.price-range__input { width: 100%; }

.price-range { display: flex; flex-direction: column; gap: 1rem; }
.price-range__row { display: flex; align-items: center; gap: .8rem; }
.price-range__row .form-input { height: 3.8rem; line-height: 3.6rem; text-align: center; }
/* чанк mfilter.slider: инпуты без обёртки __row (порт дефолта mFilter) */
.price-range .form-input { height: 3.8rem; line-height: 3.6rem; text-align: center; }
.price-range__row .form-input,
.price-range .form-input { min-width: 0; width: 100%; }

/* Числовой фильтр как в эталоне: от/до в строку, тире, кнопка Применить */
.filters__range-row { display: flex; align-items: center; gap: .8rem; }
.filters__range-input {
  min-width: 0;
  width: 100%;
  height: 4.4rem;
  line-height: 4.2rem;
  text-align: center;
  font-size: 1.3rem;
  color: var(--c-fg-sub);
}
.filters__range-input:focus { color: var(--c-fg); }
.filters__range-dash { flex: none; color: var(--c-fg-sub); }
.filters__apply { margin-top: 1.2rem; }

/* Ползунок noUi под полями от/до: фирменный цвет, круглые ручки,
   тултипы скрыты (дублируют значения полей), переполнение обрезано. */
.filters__range-slider { margin: 2rem 1.4rem 2.6rem; }
.filters__range-slider .noUi-connect { background: var(--c-secondary); }
.filters__range-slider .noUi-handle {
  border-color: var(--c-border-strong);
  background: var(--c-white);
  box-shadow: none;
  border-radius: 50%;
}
.filters__range-slider .noUi-handle::before,
.filters__range-slider .noUi-handle::after { display: none; }
.filters__range-slider .noUi-handle:focus { outline: none; }
.filters__range-slider .noUi-tooltip { display: none; }
.filters__range { overflow: clip; }
/* noUi-ползунок: значения согласованы с вашими правками на живом CSS
   (линия 4px синяя 30% через noUi-horizontal !important, ручка 15px круг).
   Отступы ваших правок стоят на .mfilter-range .mfilter-slider (margin как
   у вас: 1rem .4rem .6rem), ручка центрируется right:-7.5px. */
.mfilter-range .mfilter-slider {
  margin: 1rem .4rem .6rem;
  border: 0;
}
.noUi-horizontal {
  height: 4px !important;
  background: #4f92d74f !important;
}
.mfilter-range .mfilter-slider .noUi-connects { overflow: visible; }
.mfilter-range .mfilter-slider .noUi-connect { height: 4px; background: var(--c-secondary); }
.mfilter-range .mfilter-slider .noUi-handle {
  width: 15px;
  height: 15px;
  right: -7.5px;
  border-radius: 50%;
  background: var(--c-secondary);
  box-shadow: none;
  border: none;
}
.mfilter-range .mfilter-slider .noUi-handle::before,
.mfilter-range .mfilter-slider .noUi-handle::after { display: none; }
.mfilter-range .mfilter-slider .noUi-handle:focus { outline: none; }
.mfilter-range .mfilter-slider .noUi-tooltip { display: none; }

/* Панель управления каталогом */
.catalog__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--c-border);
}
.catalog__count { font-size: 1.3rem; color: var(--c-fg-sub); }
.catalog__count b { color: var(--c-fg); }
.catalog__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.catalog__sort { width: auto; min-width: 22rem; height: 3.8rem; line-height: 3.6rem; font-size: 1.3rem; }

/* Тулбар mFilter (fenom/chunks/mfilter.outer.tpl): лимит и подпись
   в одном стиле с catalog__sort. Высоты — same 3.8rem, без дефолтной
   браузерной сжатости (обнаружено по DOM-замерам: select был 23px
   против 38px у сортировки). */
.catalog__limit-label { font-size: 1.3rem; color: var(--c-fg-sub); }
.catalog__limit {
  width: auto;
  min-width: 7rem;
  height: 3.8rem;
  line-height: 3.6rem;
  font-size: 1.3rem;
}

/* Пагинация mFilter (дефолтные li классы Bootstrap) в стилях сайта:
   мапим .page-* на оригинальную схему .pagination из catalog.html
   (is-current/is-disabled), которой в чанке нет. */
.mfilter-pagination .pagination { gap: .6rem; margin-top: 3rem; }
.mfilter-pagination .pagination a,
.mfilter-pagination .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  height: 4rem;
  padding: 0 1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-family: var(--ff-alt);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--c-primary);
  transition: var(--tr);
}
.mfilter-pagination .pagination a:hover { border-color: var(--c-secondary); color: var(--c-secondary); }
.mfilter-pagination .pagination .page-item.active .page-link,
.mfilter-pagination .pagination .page-item.active span.page-link {
  background: var(--c-secondary);
  border-color: var(--c-secondary);
  color: var(--c-white);
}
.mfilter-pagination .pagination .page-item.disabled .page-link,
.mfilter-pagination .pagination .page-item.disabled span.page-link {
  opacity: .4;
  pointer-events: none;
}
/* min-width 22rem — это 220px; вместе с кнопкой «Фильтры» строка не
   помещалась в 290px контейнера на экране 320px, и select вылезал
   на 16px за правый край. На мобильных он занимает отдельную строку. */
@media (max-width: 575px) {
  .catalog__controls { width: 100%; }
  .catalog__sort { flex: 1 0 100%; min-width: 0; }
}

.filters-toggle { display: inline-flex; }
@media (min-width: 992px) { .filters-toggle { display: none; } }

/* heading demotion: keep visual size after h3 -> h2 and h3 -> p */.tabs__panel h2 { margin: 2rem 0 1rem; font-size: 1.5rem; line-height: 2.4rem; }
.catalog__empty-title { margin-bottom: .8rem; font-size: 1.5rem; font-weight: var(--fw-head); }
.catalog__empty {
  padding: 5rem 2rem;
  text-align: center;
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
}
.catalog__empty svg { width: 5rem; height: 5rem; margin: 0 auto 1.5rem; fill: none; stroke: var(--c-border-strong); stroke-width: 1.4; }

/* --------------------------------------------------------------------------
   КАРТОЧКА ТОВАРА
   -------------------------------------------------------------------------- */
/* ==========================================================================
   Карточка товара — вид по макету: равные колонки, ландшафтное фото,
   мелкие превью, плотная типографика (кегли 11–13px, заголовок 24px
   вместо 45px, который тянул h1 шкалы лендинга). Без рамки и внутренних
   отступов: блок просто раскладывается по сетке страницы.
   ========================================================================== */
.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: start;
}
@media (min-width: 992px) { .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.4rem; } }

.product__gallery { display: grid; gap: .8rem; align-content: start; }
@media (min-width: 992px) { .product__gallery { position: sticky; top: calc(var(--header-h) + 2rem); } }

.product__main-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 1.2rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-white);
  overflow: hidden;
}
@media (min-width: 768px) { .product__main-img { aspect-ratio: 1.45 / 1; } }
.product__main-img img { width: 100%; height: 100%; object-fit: contain; }
/* Picture вокруг главного фото — блочный на весь бокс: без этого
   слайд сжимается под натуральный размер фото и img выходит за рамку */
.product__main-img picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* Увеличение по клику на фото: рука как у ссылок, оверлей (создаётся JS) */
.product__main-img .product__photo { cursor: pointer; }
.product-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0, 0, 0, .75);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity .25s ease;
}
.product-zoom-overlay.is-open { opacity: 1; }
.product-zoom-overlay img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: var(--r-md);
  background: var(--c-white);
  transform: scale(.96);
  transition: transform .25s ease;
}
.product-zoom-overlay.is-open img { transform: scale(1); }


/* Страница сброса пароля (alias reset-password, ссылка из письма) */
.auth-reset {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.4rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-white);
}
.auth-reset .auth-form { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.6rem; }
.auth-reset__done { color: #2e9e5b; font-weight: 600; }

/* Модальное окно входа/регистрации (#auth-modal, открывается «Войти») */
.modal__dialog--auth { max-width: 40rem; padding: 2.4rem; }
.modal--auth .modal__title { margin-bottom: 1.8rem; }
.modal--auth .modal__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
}
/* Атрибут hidden обязан прятать формы, даже когда класс задаёт display */
.auth-form[hidden] { display: none !important; }
.auth-form { display: flex; flex-direction: column; gap: 1.2rem; }
.auth-form .form-input { width: 100%; }
.auth-messages { font-size: 1.3rem; }
.auth-messages .alert-success, .auth-messages .success { color: #2e9e5b; }
.auth-messages .danger, .auth-messages .error { color: var(--c-danger); }
.auth-switch {
  align-self: center;
  background: none;
  border: 0;
  font-size: 1.3rem;
  color: var(--c-secondary);
  cursor: pointer;
  
}
.auth-switch:hover { color: var(--c-primary); }
/* Подпись-пояснение в форме входа (div без id, например «нет аккаунта») */
.auth-form > div:not([id]) {
  align-self: center;
  font-size: 1.3rem;
  color: var(--c-fg-sub);
  margin-bottom: -10px;
  margin-top: -10px;
}
.auth-privacy {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  font-size: 1.2rem;
  line-height: 1.7rem;
  color: var(--c-fg-sub);
}
.auth-privacy a { color: var(--c-secondary); }
/* ЛК: строки заказов и адреса (msCustomer) */
.account-order-row { margin-bottom: 1.2rem; }
.account-order-row .account__order-foot { margin-top: 1rem; }
.thanks-contacts__card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6rem;
  margin-bottom: 1.2rem;
}
.account__address-body { flex: 1 1 auto; min-width: 0; }
.account__address-body .contact-card__title {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .8rem;
}
.account__address-actions { flex: none; display: flex; flex-direction: column; gap: .6rem; }
.account__address-head { margin-bottom: 1.6rem; }
.account__addresses-list { display: flex; flex-direction: column; gap: 1.2rem; }
.account__address-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-offwhite);
}
.account__address-name {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-weight: 600;
  margin-bottom: .6rem;
}
.account__address-line { font-size: 1.3rem; line-height: 1.9rem; }
.account__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767px) { .account__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Бейдж верификации email в профиле */
.verification-badge {
  display: inline-flex;
  align-items: center;
  margin-top: .6rem;
  font-size: 1.2rem;
  color: var(--c-fg-sub);
}
.verification-badge svg { display: none; }
.verification-badge.verified { color: #2e9e5b; }
.verification-badge.unverified { color: #d9a406; }

/* Профиль покупателя (msCustomer service=profile) */
.account-email-row { display: flex; align-items: center; gap: 1rem; }
.account-email-row .form-input { flex: 1 1 auto; }
.account-verified { flex: none; font-size: 1.2rem; color: var(--c-fg-sub); }
.account-verified--ok { color: #2e9e5b; font-weight: 600; }
.account-profile-actions { margin-top: 2rem; display: flex; justify-content: flex-end; }

/* Плашка «В наличии» на фото и кнопка увеличения — обе в углу рамки. */
.product__stock {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  padding: .3rem .7rem;
  border-radius: var(--r-sm);
  background: #eaf6ec;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4rem;
  color: #2f7d3c;
}
.product__zoom {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-white);
  color: var(--c-fg-sub);
  cursor: pointer;
  transition: var(--tr);
}
.product__zoom svg { width: 1.5rem; height: 1.5rem; }
.product__zoom:hover { color: var(--c-secondary); border-color: var(--c-secondary); }

/* Превью: одна кнопка 5.6rem и подпись рядом, как в макете. */
.product__thumbs { display: flex; align-items: center; gap: .8rem; }
.product__thumbs-cap { font-size: 1.1rem; color: var(--c-fg-sub); }
.product__thumb {
  flex: none;
  width: 5.6rem;
  height: 5.6rem;
  padding: .2rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-bg-offwhite);
  cursor: pointer;
  transition: var(--tr);
}
.product__thumb img { width: 100%; height: 100%; object-fit: contain; }
.product__thumb:hover,
.product__thumb.is-active { border-color: var(--c-secondary); }
/* Плейсхолдер рассчитан на карточку каталога (padding 1.2rem, кегль
   1.3rem); в рамке 5.6rem текст вылезал на соседние кнопки. */
.product__thumb .card-product__ph { padding: 0; gap: 0; overflow: hidden; }
.product__thumb .card-product__ph span {
  font-size: .8rem;
  letter-spacing: 0;
  line-height: 1.1;
  word-break: break-all;
}

/* --- Правая колонка --- */
.product__brand {
  font-family: var(--ff-alt);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--c-fg-sub);
}
.product__title {
  margin: .4rem 0 .8rem;
  font-size: 1.9rem;
  line-height: 2.6rem;
  font-weight: 600;
}
@media (min-width: 768px) { .product__title { font-size: 2.4rem; line-height: 3.2rem; } }

.product__rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  font-size: 1.2rem;
  color: var(--c-fg-sub);
}
.product__rating a { color: var(--c-secondary); }
.product__rating i { width: 1px; height: 1.2rem; background: var(--c-border); }
.product__rating b { color: var(--c-fg); }
.product__stars { color: #f0a020; letter-spacing: .1rem; }

.product__avail {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .8rem;
  font-size: 1.3rem;
  color: #2f7d3c;
}
.product__avail span {
  width: .6rem;
  height: .6rem;
  border-radius: var(--r-full);
  background: #3fae52;
}

.product__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1rem;
}
.product__price {
  font-family: var(--ff-head);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-fg);
}
@media (min-width: 768px) { .product__price { font-size: 3.4rem; } }
.product__price-old {
  font-size: 1.4rem;
  color: var(--c-fg-sub);
  text-decoration: line-through;
}
.product__discount {
  padding: .2rem .6rem;
  border-radius: var(--r-sm);
  background: #fdecec;
  font-size: 1.2rem;
  font-weight: 600;
  color: #c0392b;
}
.product__tax { margin-top: .4rem; font-size: 1.1rem; color: var(--c-fg-sub); }

.product__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  margin-top: 1.2rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--c-border);
}
.product__buy .product__cart {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: .8rem;
  min-width: 0;
}
.product__buy .qty { flex: none; }
.product__buy .product__cart .btn {
  flex: 0 0 auto;
  min-width: 16rem;
  height: 4rem;
  min-height: 4rem;
  padding: 0 1.6rem;
}
.product__buy .product__fav { flex: none; }
/* Сердце как у карточки (card-product__fav): контурное, красное при наведении
   и в избранном, активное — залитое. Целимся в path: общее .icon-btn svg
   { fill: currentColor } иначе красит сердце в тёмный всегда. */
.product__fav svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.product__fav:hover,
.product__fav.is-active { color: var(--c-danger); }
.product__fav.is-active svg path { fill: currentColor; }
/* На узких экранах кнопка переходит на следующую строку,
   счётчик и избранное остаются на одной линии. */
@media (max-width: 575px) {
  .product__buy .product__cart { flex-wrap: wrap; }
  .product__buy .product__cart .btn { flex: 1 0 100%; }
  .product__buy .product__fav { order: 2; }
} 

.product__notes { display: flex; flex-direction: column; }
.product__note {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--c-border);
}
.product__note-ic { flex: none; color: var(--c-secondary); }
.product__note-ic--ok { color: var(--c-success); }
.product__note-ic svg { display: block; width: 1.9rem; height: 1.9rem; }
.product__note strong { display: block; font-size: 1.3rem; }
.product__note small { display: block; font-size: 1.2rem; line-height: 1.7rem; color: var(--c-fg-sub); }

.product__ask {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: 1.3rem;
  color: var(--c-secondary);
}
.product__ask:hover { color: var(--c-primary); }

/* Блок «преимущества» — больше не используется в карточке товара, но
   им оформлен список в корзине (cart.html), поэтому остаётся. */
.product__info-list { display: flex; flex-direction: column; gap: 1rem; }
.product__info-item { display: flex; align-items: flex-start; gap: 1rem; font-size: 1.3rem; line-height: 1.9rem; }
.product__info-item svg { flex: none; width: 1.8rem; height: 1.8rem; margin-top: .2rem; fill: var(--c-success); }
.product__info-item strong { display: block; font-size: 1.3rem; }


/* Вкладки описания */
.tabs { margin-top: 4rem; }
.tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--c-border);
}
.tabs__btn {
  padding: 1.2rem 1.8rem;
  font-family: var(--ff-alt);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--c-fg-sub);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--tr);
}
.tabs__btn:hover { color: var(--c-fg); }
.tabs__btn.is-active { color: var(--c-secondary); border-bottom-color: var(--c-secondary); }
/* Табы-якоря карточки товара: панели не скрываются, идут сплошняком;
   кнопка-таб ведёт себя как ссылка (smooth-скролл из base.css html),
   отступ сверху — чтобы при прыжке заголовок не упирался в шапку. */
.tabs__panel { display: block; }
.tabs__panel.is-active { display: block; }
.tabs__panel p { max-width: 80rem; }
.tabs__panel h3 { margin: 2rem 0 1rem; }
.tabs__panel ul { list-style: disc; padding-left: 2rem; }
.tabs__panel li { margin-bottom: .6rem; font-size: 1.4rem; line-height: 2.2rem; }
@media (min-width: 992px) { .tabs__panel { scroll-margin-top: calc(var(--header-h) + 2rem + 3rem); } }

/* Документация товара (FileMan, секция #docs) */
.fm-doc-list { display: grid; gap: 0; max-width: 80rem; }
.fm-doc-row { border-bottom: 1px solid var(--c-border); }
.fm-doc-row:last-child { border-bottom: 0; }
.fm-doc-row__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.3rem 0;
  color: var(--c-fg);
  text-decoration: none;
}
.fm-doc-row__link svg { width: 2.1rem; height: 2.1rem; flex: none; color: var(--c-secondary); }
.fm-doc-row__name { font-size: 1.4rem; font-weight: 600; }
.fm-doc-row__link:hover .fm-doc-row__name { color: var(--c-secondary); }
.fm-doc-row__desc { display: block; font-size: 1.2rem; color: var(--c-fg-sub); }
.fm-doc-row__name + .fm-doc-row__desc { margin-top: .2rem; }
.tabs__panel-title { margin: .4rem 0 1.2rem; font-size: 1.6rem; }

.spec-table th,
.spec-table td { padding: 1.2rem 1rem; border-bottom: 1px solid var(--c-border); text-align: left; font-size: 1.3rem; }
.spec-table th { width: 45%; font-weight: 600; color: var(--c-fg-sub); }

/* --------------------------------------------------------------------------
   КОРЗИНА
   -------------------------------------------------------------------------- */
.cart { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
@media (min-width: 992px) { .cart { grid-template-columns: minmax(0, 1fr) 36rem; gap: 3.5rem; } }

.cart__list { display: flex; flex-direction: column; }
.cart__item {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--c-border);
  align-items: start;
}
@media (min-width: 768px) { .cart__item { grid-template-columns: 12rem minmax(0, 1fr) auto; align-items: center; } }

.cart__media {
  aspect-ratio: 1 / 1;
  padding: 1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-bg-offwhite);
  overflow: hidden;
}
.cart__media img { width: 100%; height: 100%; object-fit: contain; }

.cart__name { font-size: 1.4rem; line-height: 2rem; font-weight: 600; margin-bottom: .4rem; }
.cart__name a { color: var(--c-fg); }
.cart__name a:hover { color: var(--c-secondary); }
.cart__meta { font-size: 1.2rem; color: var(--c-fg-sub); }
.cart__price { font-size: 1.3rem; color: var(--c-fg-sub); }
.cart__price b { display: block; font-family: var(--ff-head); font-size: 1.7rem; color: var(--c-fg); }

.cart__actions { display: flex; align-items: center; gap: 1.2rem; margin-top: 1rem; }
.cart__remove { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.2rem; color: var(--c-fg-sub); }
.cart__remove:hover { color: var(--c-danger); }
.cart__remove svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }

@media (min-width: 768px) {
  .cart__item-col { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }
}

/* Sticky-сумма нужна только в двухколоночной сетке на десктопе. На мобильных
   корзина в одну колонку, и --header-h (84px) перестала равняться высоте
   шапки, потому что ряд .header__main там скрыт. */
@media (min-width: 992px) {
  .cart__sum { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.cart__sum-box { padding: 2.5rem; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg-offwhite); }
.cart__sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
  font-size: 1.4rem;
}
.cart__sum-row--total {
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-border-strong);
  font-family: var(--ff-head);
  font-size: 1.6rem;
  font-weight: 700;
}
.cart__sum-row--total b { font-size: 2.6rem; line-height: 1; }
.cart__sum-box .btn { margin-top: 1.5rem; }
.cart__note { margin-top: 1.2rem; font-size: 1.2rem; line-height: 1.8rem; color: var(--c-fg-sub); text-align: center; }

.cart__empty { padding: 6rem 2rem; text-align: center; }
.cart__empty svg { width: 7rem; height: 7rem; margin: 0 auto 2rem; fill: none; stroke: var(--c-border-strong); stroke-width: 1.2; }
.cart__empty .btn { margin-top: 2.5rem; }

.cart__promo { display: flex; gap: .8rem; margin-top: 1.5rem; }
.cart__promo .form-input { height: 4rem; line-height: 3.8rem; }

/* Оформление заказа (checkout.html) */
.checkout-list { display: grid; gap: 1.2rem; margin-bottom: 1.5rem; }
.checkout-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--c-border);
  font-size: 1.4rem;
  line-height: 2rem;
}
.checkout-item:last-child { border-bottom: 0; }
.checkout-item__name { font-weight: 600; }
.checkout-item__qty { grid-column: 1; color: var(--c-fg-sub); }
.checkout-item__sum { grid-column: 2; grid-row: 1 / 3; align-self: center; white-space: nowrap; }
.cart__empty--success svg { stroke: var(--c-primary); }
.cart__empty--success .auth__social { max-width: 44rem; margin: 2.5rem auto 0; text-align: center; }

/* ==========================================================================
   Текстовая страница и контакты
   ========================================================================== */
.container--text { max-width: 88rem; }
.text-page__body { min-width: 0; }
.text-page__body h2 { margin: 2.6rem 0 .8rem; font-size: 1.8rem; line-height: 2.6rem; }
.text-page__body h2:first-child { margin-top: 0; }
.text-page__body h3 { margin: 1.8rem 0 .6rem; font-size: 1.5rem; }
.text-page__body p { margin-bottom: 1.2rem; line-height: 2.6rem; }
.text-page__body ul { margin: 0 0 1.6rem; padding-left: 2.2rem; list-style: disc; }
.text-page__body li { margin-bottom: .6rem; line-height: 2.6rem; }
.text-page__body a { color: var(--c-secondary); }
.text-page__body a:hover { color: var(--c-primary); }

.contacts__aside {
  padding: 2.4rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-offwhite);
}
.contacts__aside .drawer__title { margin-bottom: .8rem; }
.contacts__aside .form-hint { margin-bottom: 1.6rem; }
.contacts__aside .form-field { margin-bottom: 1.2rem; }

.contacts { display: grid; gap: 2rem; }
@media (min-width: 992px) {
  .contacts { grid-template-columns: minmax(0, 1fr) 34rem; gap: 3.4rem; align-items: start; }
}
.contacts__main { min-width: 0; }
.contacts__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem 3rem;
  margin-bottom: 2rem;
  align-items: start;
}
/* Компоновка: Адрес, Почта, Телефон — левая колонка;
   Реквизиты — правая, на всю высоту колонки */
.contacts__grid .contact-card:nth-child(4) {
  grid-column: 2;
  grid-row: 1 / span 3;
}
.contacts__grid .contact-card:nth-child(2) { order: 2; }
@media (max-width: 991px) {
  .contacts__grid { grid-template-columns: minmax(0, 1fr); }
  .contacts__grid .contact-card { grid-column: auto !important; grid-row: auto !important; }
}
.contact-card { display: flex; align-items: flex-start; gap: 1.2rem; }
.contact-card__ic { flex: none; color: var(--c-secondary); }
.contact-card__ic svg { display: block; width: 2.4rem; height: 2.4rem; fill: currentColor; }
.contact-card__title { margin-bottom: .4rem; font-size: 1.4rem; line-height: 2rem; }
.contact-card p { font-size: 1.3rem; line-height: 2rem; color: var(--c-fg-sub); }
.contact-card a { color: var(--c-secondary); }
.contact-card a:hover { color: var(--c-primary); }

.contacts__map {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  min-height: 22rem;
  text-align: center;
}
.contacts__map svg { width: 4rem; height: 4rem; fill: var(--c-border-strong); }
.contacts__map p { max-width: 40rem; font-size: 1.3rem; line-height: 2.2rem; color: var(--c-fg-sub); }

/* --------------------------------------------------------------------------
   Нижняя навигация — только мобильные (<992px).
   На десктопе панель скрыта, навигация живёт в шапке и подвале.
   -------------------------------------------------------------------------- */
.tabbar { display: none; }

@media (max-width: 991px) {
  :root { --tabbar-h: 5.6rem; }

  /* Резерв под фиксированную панель, чтобы подвал и его кнопки не перекрывались. */
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  /* Уведомления всплывают выше панели, а не под ней. */
  .toast-stack { bottom: calc(var(--tabbar-h) + 1.5rem + env(safe-area-inset-bottom)); }

  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-toolbar);
    display: flex;
    align-items: stretch;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--c-white);
    border-top: 1px solid var(--c-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
  }

  .tabbar__link,
  .tabbar__btn {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .8rem .2rem;
    border: 0;
    background: none;
    font-family: var(--ff-alt);
    font-size: 1rem;
    line-height: 1.2rem;
    color: var(--c-fg-sub);
    text-decoration: none;
    cursor: pointer;
  }

  .tabbar__link svg,
  .tabbar__btn svg {
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .tabbar__link:active,
  .tabbar__btn:active { background: var(--c-bg-offwhite); }

  .tabbar__link.is-active,
  .tabbar__btn.is-active { color: var(--c-secondary); }

  /* Счётчик корзины: main.js обновляет все [data-cart-count] сам. */
  .tabbar__count {
    position: absolute;
    top: .3rem;
    left: 50%;
    margin-left: .6rem;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 .4rem;
    border-radius: .8rem;
    background: var(--c-secondary);
    color: var(--c-white);
    font-size: 1rem;
    line-height: 1.6rem;
    text-align: center;
  }
}

/* ==========================================================================
   Личный кабинет
   ========================================================================== */
.account { display: grid; gap: 2rem; }
@media (min-width: 992px) {
  .account { grid-template-columns: 30rem minmax(0, 1fr); gap: 3.4rem; align-items: start; }
}
.account__main { min-width: 0; }

.account__side {
  padding: 2.4rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-offwhite);
}
.account__user {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--c-border);
}
.account__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: var(--c-white);
  font-size: 2rem;
  font-weight: var(--fw-head);
}
.account__name { font-size: 1.6rem; font-weight: 600; line-height: 2.2rem; }
.account__mail { font-size: 1.3rem; line-height: 1.9rem; color: var(--c-fg-sub); overflow-wrap: anywhere; }

.account__nav { margin-top: 1.6rem; }
.account__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-radius: var(--r-sm);
  font-size: 1.4rem;
  line-height: 2rem;
  transition: var(--tr);
}
.account__nav a:hover { background: var(--c-white); color: var(--c-secondary); }
.account__nav a.is-active { background: var(--c-white); color: var(--c-secondary); font-weight: 600; }
.account__count {
  min-width: 2.2rem;
  padding: 0 .6rem;
  border-radius: var(--r-pill);
  background: var(--c-secondary);
  color: var(--c-white);
  font-size: 1.2rem;
  line-height: 1.8rem;
  text-align: center;
}
.account__logout { margin-top: 1.6rem; padding-top: 1.8rem; border-top: 1px solid var(--c-border); }

.account__section + .account__section { margin-top: 3.6rem; }
.account__heading { margin-bottom: 1.8rem; font-size: 2rem; line-height: 2.8rem; }
.account__grid { display: grid; gap: 0 1.6rem; }
@media (min-width: 576px) { .account__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.account__order {
  padding: 2rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.account__order + .account__order { margin-top: 1.6rem; }
.account__order-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--c-border);
}
.account__order-no { margin: 0; font-size: 1.6rem; line-height: 2.2rem; }
.account__order-meta { font-size: 1.3rem; line-height: 2rem; color: var(--c-fg-sub); }
.account__order-sum { font-size: 1.7rem; line-height: 2.2rem; font-weight: 600; white-space: nowrap; }

.account__goods { display: flex; flex-wrap: wrap; gap: 1.4rem; padding-top: 1.4rem; }
.account__good { width: 8rem; }
.account__good img { width: 8rem; height: 8rem; object-fit: cover; border-radius: var(--r-sm); background: var(--c-bg-offwhite); }
.account__good-name { margin-top: .6rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--c-fg-sub); }
.account__order-foot { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
/* ==========================================================================
   Вход и регистрация
   ========================================================================== */
.auth { max-width: 62rem; }
.auth__form { padding: 2.4rem; border: 1px solid var(--c-border); border-radius: var(--r-md); }
.auth__heading { margin-bottom: .6rem; font-size: 1.8rem; line-height: 2.6rem; }
.auth__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.auth__link { font-size: 1.3rem; color: var(--c-secondary); }
.auth__link:hover { color: var(--c-primary); }
.auth__sep {
  position: relative;
  margin: 2.4rem 0 1.8rem;
  text-align: center;
  font-size: 1.2rem;
  color: var(--c-fg-sub);
}
.auth__sep::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-border);
}
.auth__sep span { position: relative; padding: 0 1.2rem; background: var(--c-white); }
.auth__social { display: grid; gap: 1rem; }
@media (min-width: 576px) { .auth__social { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ==========================================================================
   miniShop3 (шаблоны fenom/)
   ========================================================================== */

/* Переключение форм покупки: до инициализации MS3 видна только форма
   добавления (change-форма скрывается классом из демо-CSS default.css,
   который на сайте не подключён). Инлайн-стили MS3 после клика/инициализации
   главнее этого правила. */
form[data-cart-state="change"].product-cart-controls-hidden,
form[data-cart-state="change"].ms3-cart-controls { display: none; }

/* Change-форма в карточке каталога: счётчик + «✓ В корзине» по центру,
   с отступом между собой (как у кнопки добавления) */
.card-product .ms3-cart-controls {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
}

/* Серверно скрытая форма добавления: товар уже в корзине при рендере —
   с загрузки видна только «− + ✓ В корзине», «Купить» не мигает */
form[data-cart-state="add"].product-add-controls-hidden { display: none; }

/* Мини-корзина в шапке */
.header__drop--cart { min-width: 34rem; }
.minicart { display: grid; gap: 1.4rem; }
.minicart__empty { padding: 1.5rem 0; font-size: 1.4rem; color: var(--c-fg-sub); text-align: center; }
.minicart__item {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: center;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--c-border);
}
.minicart__item:last-of-type { border-bottom: 0; padding-bottom: 0; }
.minicart__media img { width: 6rem; height: 6rem; object-fit: contain; display: block; }
.minicart__info { min-width: 0; display: grid; gap: .4rem; }
.minicart__name { font-size: 1.3rem; font-weight: 600; color: var(--c-fg); }
.minicart__name:hover { color: var(--c-primary); }
.minicart__price { font-size: 1.2rem; color: var(--c-fg-sub); }
.minicart__controls { display: grid; gap: .8rem; justify-items: end; }
.minicart__remove { width: 2.4rem; height: 2.4rem; padding: 0; border: 0; background: none; color: var(--c-fg-sub); cursor: pointer; }
.minicart__remove svg { width: 1.6rem; height: 1.6rem; }
.minicart__remove:hover { color: var(--c-danger, #d9534f); }
.minicart__go { margin-top: 1.5rem; }

/* Кнопки под формой заказа */
.checkout-actions { display: grid; gap: 1rem; }
@media (min-width: 576px) { .checkout-actions { grid-template-columns: auto minmax(0, 1fr); align-items: center; } }
/* В сайдбаре итогов кнопки в одну колонку на всю ширину */
.contacts__aside .checkout-actions { grid-template-columns: 1fr; }

/* Компактное согласие на обработку ПД (чекаут) */
.form-check--agree { margin-top: 1.6rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--c-fg-sub); }
.form-check--agree label a { color: var(--c-secondary); text-decoration: underline; }
.form-check--agree label a:hover { color: var(--c-primary); }

/* Корзина: опции, очистка, старая цена */
.cart__opt { max-width: 22rem; margin-top: .8rem; }
.cart__clean { margin-top: 1.2rem; text-align: center; }
.cart__price-old { margin-right: .6rem; color: var(--c-fg-sub); font-size: 1.3rem; }

/* Карточка товара: «в корзине», старая цена, скидка */
.card-product__in-cart { font-size: 1.2rem; color: var(--c-secondary); white-space: nowrap; }
.card-product__price-old { margin-right: .6rem; color: var(--c-fg-sub); font-size: 1.3rem; }
.card-product__badge-discount { margin-top: .4rem; }
.card-product__ph--xs { width: 6rem; height: 6rem; }

/* Страница «Спасибо» */
.thanks-order__total { margin-top: 1.5rem; background: var(--c-white); }
.account__good-sum { white-space: nowrap; }
/* Композиция: заказ и контакты не растягиваются на весь контейнер */
.thanks-order,
.thanks-contacts { max-width: 72rem; }
/* Товары на «Спасибо» — строками (как в корзине), а не плитками ЛК:
   длинные названия разваливают плитки 8rem */
.thanks-order .account__goods { display: block; padding-top: .8rem; }
.thanks-order .account__good {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: auto;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--c-border);
}
.thanks-order .account__good:last-child { border-bottom: 0; padding-bottom: .4rem; }
.thanks-order .account__good img { width: 6.4rem; height: 6.4rem; flex: none; }
.thanks-order .account__good-name {
  flex: 1 1 auto;
  margin-top: 0;
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: var(--c-fg);
}
.thanks-order .account__good-name a { color: var(--c-fg); }
.thanks-order .account__good-name span { display: block; }
.thanks-order .account__good-sum { flex: none; font-size: 1.5rem; }
/* Контакты на «Спасибо» — настоящие карточки (на странице контактов
   .contact-card — плоская строка, там это уместно, тут нет) */
.thanks-contacts { margin-top: 1.6rem; }
.thanks-contacts .contact-card {
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  height: 100%;
  padding: 1.8rem 2rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-offwhite);
}

/* Плашка об использовании cookie (152-ФЗ): карточка внизу,
   на мобильных — над таббаром (паттерн .toast-stack) */
.cookie-bar {
  position: fixed;
  left: 1.6rem;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 88rem;
  margin: 0 auto;
  padding: 1.4rem 1.8rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: var(--sh-md);
}
.cookie-bar__text { font-size: 1.3rem; line-height: 1.9rem; color: var(--c-fg-sub); }
.cookie-bar__text a { color: var(--c-secondary); }
.cookie-bar__text a:hover { color: var(--c-primary); }
.cookie-bar .btn { flex: none; }

@media (max-width: 991px) {
  .cookie-bar {
    left: 1.2rem;
    right: 1.2rem;
    bottom: calc(var(--tabbar-h) + 1.2rem + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
  }
  .cookie-bar .btn { width: 100%; }
}

/* Карточка товара (product.tpl): мета-строка и «под заказ» */
.product__meta-line { font-size: 1.3rem; color: var(--c-fg-sub); }
.product__avail--order .product__avail-dot { background: var(--c-fg-sub); }

/* Галерея Splide в дизайне сайта */
.ms3-gallery .splide__slide img { width: 100%; display: block; object-fit: contain; }
.product__main-img .splide__arrows button { background: var(--c-white); border: 1px solid var(--c-border); border-radius: 50%; }

/* Раскрывающийся список товаров в сводке заказа */
.checkout-items-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.checkout-items-toggle svg { width: 1rem; height: .7rem; transition: transform .2s; flex: none; }
.checkout-items-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.checkout-items-toggle:hover { color: var(--c-primary); }
.checkout-items { display: grid; gap: 1rem; padding: 1.2rem 0 .4rem; }
.checkout-items[hidden] { display: none !important; }