/*!
 * base.css — скелет, общий для всех шаблонов.
 * Здесь только механика (состояния, доступность, структура), без темы.
 * Цвета, типографика и декор задаёт style.css каждого шаблона.
 */

*, *::before, *::after { box-sizing: border-box; }

/* атрибут hidden должен побеждать любые авторские display */
[hidden] { display: none !important; }

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

/* якорь не должен заезжать под липкую шапку (высота шапки задаётся в style.css) */
[id] { scroll-margin-top: var(--hdr-h, 96px); }

body {
  margin: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img { background-color: rgba(127, 127, 127, 0.08); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

body.no-scroll { overflow: hidden; }

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

/* ------------------------------------------------------------- Формы */
.field { display: block; margin-bottom: 18px; }
.field > label, .field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.field input, .field textarea, .field select,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[type="password"], textarea, select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(127, 127, 127, 0.35);
  background-color: transparent;
  border-radius: 4px;
  transition: border-color .18s ease, background-color .18s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: currentColor;
  outline: none;
}
textarea { min-height: 130px; resize: vertical; }

.field.has-error input, .field.has-error textarea, .field.has-error select {
  border-color: #d94f4f;
}
[data-error] {
  display: block;
  min-height: 17px;
  margin-top: 6px;
  font-size: 12px;
  color: #d94f4f;
}
.field.has-error [data-error] { min-height: 0; }

/* ------------------------------------------------------------- Флажки */
/* Свой вид у всех галочек сайта: согласие в формах, фильтры в каталоге,
   «только в наличии», опции калькулятора. Системный квадрат с синей
   заливкой выбивается из оформления шаблона и выглядит как чужой. */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 1.5px solid color-mix(in srgb, var(--ink) 32%, transparent);
  border-radius: 5px;
  background: var(--surf);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
input[type="checkbox"]::after {
  content: "";
  width: 10px;
  height: 5px;
  margin-top: -2px;
  border: 2px solid var(--acc-ink);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) scale(0);
  transition: transform .14s ease;
}
input[type="checkbox"]:hover { border-color: var(--acc); }
input[type="checkbox"]:checked {
  background: var(--acc);
  border-color: var(--acc);
}
input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
input[type="checkbox"][disabled] { opacity: .5; cursor: not-allowed; }

.form-note { font-size: 13px; opacity: .72; }
.form-success {
  padding: 22px;
  border: 1px solid currentColor;
  border-radius: 6px;
}
.form-success b { display: block; margin-bottom: 6px; font-size: 17px; }

button.is-busy { opacity: .6; pointer-events: none; }

/* ------------------------------------------------------------- Слайдер */
[data-slider] { position: relative; overflow: hidden; }
[data-slider] [data-slide] {
  display: none;
  width: 100%;
}
[data-slider] [data-slide].is-active { display: block; }

[data-slider-dots], [data-carousel-dots] {
  display: flex;
  gap: 8px;
  align-items: center;
}
[data-slider-dots] .dot, [data-carousel-dots] .dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: .3;
  transition: opacity .2s ease, transform .2s ease;
}
[data-slider-dots] .dot.is-active, [data-carousel-dots] .dot.is-active {
  opacity: 1;
  transform: scale(1.25);
}

/* ------------------------------------------------------------ Карусель */
[data-carousel] { position: relative; overflow: hidden; }
[data-carousel-track] {
  display: flex;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
[data-carousel-item] { flex: 0 0 auto; }

/* --------------------------------------------------------- Аккордеон */
[data-acc-panel] {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s cubic-bezier(.22, .61, .36, 1);
}
[data-acc-item].is-open [data-acc-panel] { max-height: 600px; }
[data-acc-btn] { width: 100%; text-align: left; border: 0; background: none; padding: 0; }
[data-acc-btn] .acc-icon { transition: transform .3s ease; }
[data-acc-item].is-open [data-acc-btn] .acc-icon { transform: rotate(45deg); }

/* --------------------------------------------------------------- Табы */
[data-tab-panel][hidden] { display: none; }
[data-tab].is-active { color: inherit; }

/* ---------------------------------------------------------- Появление */
/* без JS контент должен оставаться видимым: анимация включается классом .js */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ Лайтбокс */
/* Увеличенное фото: стрелки по краям кадра и лента мини-превью снизу. */
.tpl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 64px 20px 20px;
  background: rgba(8, 8, 10, .92);
}
.tpl-lightbox.is-open { display: flex; }
.tpl-lightbox__stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tpl-lightbox__stage img {
  max-width: min(1100px, 92vw);
  max-height: 78vh;
  object-fit: contain;
  margin: 0 auto;
}
.tpl-lightbox__cap { margin-top: 14px; text-align: center; color: #fff; font-size: 14px; opacity: .8; }
.tpl-lightbox__close {
  position: absolute;
  top: 18px; right: 20px;
  width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.tpl-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  background: rgba(8,8,10,.45);
  color: #fff;
  cursor: pointer;
  transition: background-color .18s ease;
}
.tpl-lightbox__nav:hover { background: rgba(8,8,10,.68); }
.tpl-lightbox__nav .ic { width: 22px; height: 22px; }
.tpl-lightbox__nav--prev { left: 20px; }
.tpl-lightbox__nav--prev .ic { transform: rotate(180deg); }
.tpl-lightbox__nav--next { right: 20px; }
/* [hidden] не прячет элемент, которому CSS задаёт display. */
.tpl-lightbox__nav[hidden] { display: none; }
.tpl-lightbox__bar {
  flex: none;
  width: 100%;
  max-width: min(1100px, 92vw);
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.tpl-lightbox__thumbs {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: thin;
}
.tpl-lightbox__thumbs[hidden] { display: none; }
.tpl-lightbox__thumb {
  flex: none;
  width: 66px; height: 66px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  opacity: .5;
  cursor: pointer;
  transition: opacity .18s ease, border-color .18s ease;
}
.tpl-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpl-lightbox__thumb:hover { opacity: .85; }
.tpl-lightbox__thumb.is-active { opacity: 1; border-color: #fff; }
.tpl-lightbox__count { flex: none; color: #fff; font-size: 13px; opacity: .7; white-space: nowrap; }

@media (max-width: 700px) {
  .tpl-lightbox { padding: 56px 12px 14px; }
  .tpl-lightbox__stage img { max-width: 96vw; max-height: 60vh; }
  .tpl-lightbox__nav { width: 40px; height: 40px; }
  .tpl-lightbox__nav .ic { width: 18px; height: 18px; }
  .tpl-lightbox__nav--prev { left: 8px; }
  .tpl-lightbox__nav--next { right: 8px; }
  .tpl-lightbox__thumb { width: 54px; height: 54px; }
}

/* -------------------------------------------------------------- Корзина */
.cart-row {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(127,127,127,.22);
}
.cart-row__img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
.cart-row__info b { display: block; font-size: 15px; }
.cart-row__info span { font-size: 13px; opacity: .7; }
.cart-row__qty { display: flex; align-items: center; gap: 10px; }
.cart-row__qty button {
  width: 30px; height: 30px;
  border: 1px solid rgba(127,127,127,.35);
  background: transparent;
  border-radius: 50%;
  line-height: 1;
}
.cart-row__del { border: 0; background: none; font-size: 22px; line-height: 1; opacity: .6; }
.cart-empty { padding: 28px 0; text-align: center; opacity: .7; }

/* Панель-корзина. Раньше здесь был только каркас [data-cart-drawer], а
   внутренние блоки (.cart__head/.cart__body/.cart__foot) стилей не имели —
   панель открывалась «без оформления». */
.cart {
  position: fixed;
  top: 0; right: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: min(420px, 92vw);
  padding: 24px 22px;
  background: var(--surf, #fff);
  color: var(--ink, #111);
  box-shadow: -20px 0 60px rgba(0,0,0,.25);
  transform: translateX(102%);
  visibility: hidden;
  /* visibility переключается мгновенно при открытии и с задержкой при закрытии,
     иначе панель либо мигает, либо исчезает вместо выезда. */
  transition: transform .38s cubic-bezier(.22,.61,.36,1), visibility 0s linear .38s;
}
.cart.is-open {
  transform: none;
  visibility: visible;
  transition: transform .38s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
}
.cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 890;
  background: rgba(8,8,10,.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.cart-backdrop.is-open { opacity: 1; visibility: visible; }
.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.cart__title {
  margin: 0;
  font-family: var(--dsp);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
}
.cart__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.cart__x:hover { border-color: var(--acc); color: var(--acc-text); }
.cart__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 0;
}
.cart__empty {
  flex: 1 1 auto;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 30px 8px;
  text-align: center;
}
.cart__empty[hidden], .cart__foot[hidden] { display: none; }
.cart__empty p { margin: 0; }
.cart__empty-t { font-size: 17px; font-weight: 600; }
.cart__empty-s { font-size: 14px; color: var(--mut); max-width: 26ch; }
.cart__foot {
  flex: none;
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.cart__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 15px;
}
.cart__row b {
  font-family: var(--dsp);
  font-size: 21px;
  font-weight: 700;
  white-space: nowrap;
}
.cart__clear {
  justify-self: center;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--mut);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.cart__clear:hover { color: var(--ink); }

/* ------------------------------------------- Шаг количества (− / +) */
/* Шаг стоит в одной строке с кнопкой «В корзину» и тянется на всю её высоту:
   высоту задаёт строка, поэтому у поля ввода ровно та же высота, что у кнопки. */
.qty { display: inline-flex; align-items: stretch; gap: 8px; }
.qty__label {
  align-self: center;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--mut);
  margin-right: 2px;
}
.qty__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: calc(var(--rad) * .7);
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.qty__btn:hover { border-color: var(--acc); color: var(--acc-text); }
.qty .qty__in {
  width: 58px;
  min-height: 46px;
  padding: 0 8px;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.qty .qty__in::-webkit-outer-spin-button,
.qty .qty__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --------------------------------------------------------- Счётчики */
[data-counter] { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- Модальные окна */
/* align-items:flex-start + margin:auto у диалога — иначе длинная форма
   обрезается сверху и страница за модалкой не прокручивается. */
[data-modal] {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
[data-modal].is-open { display: flex; }
.modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8,8,10,.6);
  backdrop-filter: blur(3px);
}
.modal__dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  margin: auto;
  max-height: 88vh;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 34px;
  border-radius: 8px;
  background: var(--surf, #fff);
  color: var(--ink, #111);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.modal__close {
  position: absolute;
  top: 14px; right: 16px;
  width: 36px; height: 36px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  opacity: .6;
}
.modal__close:hover { opacity: 1; }

/* --------------------------------------------------------- Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform .16s ease, opacity .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; }
/* Неактивная кнопка должна выглядеть неактивной: иначе в квизе «Дальше»
   выглядит как рабочая, пока шаг не отвечен, и клик ничего не делает. */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover { transform: none; }

/* -------------------------------------------------------------- Прочее */
[data-sticky] { transition: box-shadow .25s ease; }
[data-totop] {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 800;
  width: 46px; height: 46px;
  border: 1px solid rgba(127,127,127,.3);
  border-radius: 50%;
  background: inherit;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}
[data-totop].is-visible { opacity: 1; visibility: visible; transform: none; }

/* ===================================================== v2 blocks */

/* ------------------------------------------------- Shop: toolbar */
/* Панель - две строки. Первая: сами фильтры (цена, характеристики,
   наличие), растянутые на всю ширину. Вторая: сортировка слева и счётчик
   товаров справа. */
.shopbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
/* Первая строка - фильтры. Свободное место делится между списками
   характеристик, а не остаётся дырой в конце строки. */
.shopbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 18px;
}
.shopbar__filters .shopbar__drop { flex: 1 1 150px; max-width: 260px; }
.shopbar__filters .shopdrop__btn { max-width: none; }
/* Вторая строка - сортировка и счётчик товаров. */
.shopbar__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 18px;
}
/* Вариант магазина с горизонтальными фильтрами: счётчик товаров слева,
   сортировка справа. У магазина с вертикальным сайдбаром порядок обратный. */
.shopbar__tools--count .shopbar__count { margin-left: 0; }
.shopbar__tools--count .shopbar__field { margin-left: auto; }
.shopbar__field { display: grid; gap: 6px; font-size: 12px; color: var(--mut); }
.shopbar__field select,
.shopbar__field input {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background-color: var(--surf);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: calc(var(--rad) * .8);
  padding: 9px 12px;
  min-width: 170px;
}
.shopbar__field--num { min-width: 210px; max-width: 340px; grid-template-columns: minmax(0, 1fr); }
.shopbar__range { display: flex; align-items: center; gap: 8px; min-width: 0; }
.shopbar__field--num .shopbar__range input { flex: 1 1 0; min-width: 96px; width: auto; }
.shopbar__range-sep { color: var(--mut); font-size: 15px; line-height: 1; }
@media (max-width: 560px) { .shopbar__field--num { min-width: 100%; max-width: none; } }
/* На узком экране списки характеристик не растягиваются в широкие блоки -
   они встают по два в ряд. */
@media (max-width: 700px) {
  .shopbar__filters .shopbar__drop { max-width: none; flex: 1 1 140px; }
}

/* Пустое состояние: избранное, поиск, сравнение. Пункты и подсказка - в
   одном блоке, по центру, с отступом от рамки. */
.empty {
  margin: 22px 0 0;
  padding: 22px 24px;
  border: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: var(--rad);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--mut);
  font-size: 15px;
  text-align: center;
}
.empty b { display: block; font-family: var(--dsp); font-weight: 600; color: var(--ink); }
.empty span { display: block; margin-top: 5px; color: var(--mut); font-size: 14px; }
/* На странице сравнения пустое состояние - то же, что на странице избранного:
   рамка блока «Сравнение с обычным предложением» к нему не относится. */
.empty--cmp { margin-top: 0; }
.empty[hidden] { display: none; }
.shopbar__check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding-bottom: 10px; }
.shopbar__count { margin-left: auto; font-size: 13px; color: var(--mut); padding-bottom: 10px; }
.shopbar__count b { color: var(--ink); font-size: 16px; }

/* Блок выпадающего списка характеристик. Отдельный класс, а не
   .shopbar__field: тот красит все инпуты внутри себя как текстовые поля,
   и галочка в списке разъезжалась на всю ширину. */
.shopbar__drop { display: grid; gap: 6px; font-size: 12px; color: var(--mut); }

/* Выпадающий список характеристик в горизонтальной панели магазина.
   Кнопка показывает подпись группы и текущий выбор, список - значения
   с галочками и счётчиком товаров. */
.shopdrop { position: relative; }
.shopdrop__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 118px;
  max-width: 220px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background-color: var(--surf);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: calc(var(--rad) * .8);
  padding: 9px 11px;
  cursor: pointer;
  text-align: left;
}
.shopdrop__btn:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.shopdrop__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shopdrop__caret {
  width: 7px;
  height: 7px;
  margin-left: auto;
  flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.shopdrop.is-open .shopdrop__caret { transform: rotate(-135deg) translateY(-2px); }
.shopdrop.is-active .shopdrop__btn { border-color: var(--acc); color: var(--acc-text); }
.shopdrop__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  min-width: 220px;
  max-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 14px;
  background-color: var(--surf);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: var(--rad);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  display: none;
}
.shopdrop.is-open .shopdrop__menu { display: block; }
.shopdrop__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.shopdrop__opt input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  flex: none;
}
.shopdrop__opt span { flex: 1; line-height: 1.35; }
.shopdrop__opt i { font-style: normal; color: var(--mut); font-size: 13px; }

/* ------------------------------------------------- Shop: tile controls */
.tile__mediawrap { position: relative; }
.tile__fav {
  position: absolute;
  top: 12px; right: 12px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--surf) 90%, transparent);
  backdrop-filter: blur(6px);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .16s ease, background-color .16s ease;
}
/* Сердечко избранного - тот же контурный знак, что в шапке (Feather Icons). */
.tile__fav .ic { width: 17px; height: 17px; color: var(--mut); }
.tile__fav:hover { transform: scale(1.08); }
.tile__fav:hover .ic { color: var(--acc-text); }
.tile__fav.is-on { background: var(--acc); border-color: var(--acc); }
.tile__fav.is-on .ic { color: var(--acc-ink); fill: currentColor; }
.tile__quick {
  position: absolute;
  left: 12px; bottom: 12px;
  border: 0;
  border-radius: calc(var(--rad) * .8);
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: color-mix(in srgb, var(--surf) 92%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.tile:hover .tile__quick, .tile__quick:focus { opacity: 1; transform: none; }

/* ------------------------------------------------- Quick view modal */
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.quick__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: calc(var(--rad) * .8); }
.quick__t { font-size: 22px; margin-bottom: 10px; }
.quick__d { color: var(--mut); margin-bottom: 16px; }
.quick__foot { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
@media (max-width: 560px) { .quick { grid-template-columns: 1fr; } }

/* ------------------------------------------------- Cart / checkout pages */
.cartpage { display: grid; grid-template-columns: 1fr 320px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.cartpage__side {
  position: sticky;
  top: 100px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: var(--rad);
  background: var(--surf);
  display: grid;
  gap: 12px;
}
.cartpage__list { min-width: 0; }
.cartpage__col { display: grid; gap: 26px; align-content: start; min-width: 0; }
.cartpage__pop-t { font-family: var(--dsp); font-size: 22px; margin-bottom: 6px; }
.cartpage__pop-l { color: var(--mut); font-size: 15px; margin-bottom: 18px; }
.checkout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); align-items: stretch; }
.checkout__list { padding: 22px; border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); border-radius: var(--rad); background: var(--surf); }
.checkout__form { padding: 24px; border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); border-radius: var(--rad); background: var(--surf); }
/* Левая колонка оформления заказа: список + шаги заказа и контакты.
   Без этого блока колонка была почти пустой (165 px против 719 px формы). */
.checkout__col { display: grid; grid-template-rows: auto 1fr; gap: 18px; align-content: start; min-width: 0; }
.checkout__notes { padding: 22px; border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); border-radius: var(--rad); background: var(--surf); display: flex; flex-direction: column; }
.checkout__notes-t { display: block; font-family: var(--dsp); font-size: 19px; margin-bottom: 16px; }
.checkout__steps { display: grid; gap: 16px; align-content: space-between; flex: 1; }
.checkout__steps li { display: flex; gap: 13px; align-items: flex-start; }
.checkout__steps li div b { display: block; font-size: 15px; margin-bottom: 3px; }
.checkout__steps li div span { display: block; font-size: 14px; color: var(--mut); line-height: 1.5; }
.checkout__ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 15%, transparent); color: var(--acc-text); }
.checkout__ic .ic { width: 19px; height: 19px; }
.checkout__help { display: flex; gap: 13px; align-items: flex-start; margin-top: 18px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); }
.checkout__help > div > span { display: block; font-size: 14px; color: var(--mut); }
.checkout__help a { display: block; font-family: var(--dsp); font-size: 18px; font-weight: 700; margin: 2px 0; }
@media (max-width: 900px) {
  .cartpage { grid-template-columns: 1fr; }
  .cartpage__side { position: static; }
  .checkout { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- Favorites */
/* Значок избранного в шапке - такой же круглый, как поиск, сравнение и
   корзина: раньше он был голой иконкой без обводки и выбивался из ряда. */
.hdr__fav {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: none;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.hdr__fav .hdr__fav-ico {
  width: 19px;
  height: 19px;
  display: block;
  flex: none;
}
.hdr__fav:hover { color: var(--acc-text); border-color: var(--acc); }
.hdr__fav b {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--acc);
  color: var(--acc-ink);
  font-size: 12px;
}
.hdr--dark .hdr__fav { border-color: color-mix(in srgb, var(--acc-ink) 35%, transparent); color: var(--acc-ink); }
.hdr--dark .hdr__fav:hover { color: var(--acc-ink); background: color-mix(in srgb, var(--acc-ink) 16%, transparent); }
.favlist { display: grid; gap: 12px; margin-bottom: 26px; }
.fav-row {
  display: grid;
  grid-template-columns: 84px 1fr 36px;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: var(--rad);
  background: var(--surf);
}
.fav-row__img { width: 84px; height: 64px; object-fit: cover; border-radius: calc(var(--rad) * .7); }
.fav-row__info b { display: block; }
.fav-row__info span { color: var(--mut); font-size: 14px; }
.fav-row__del {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--mut);
}
.fav-row__del:hover { color: var(--ink); border-color: var(--ink); }

/* --------------------------------------- Поиск и сравнение товаров (магазины) */
/* Иконки в шапке: поиск и сравнение. Подписи не помещаются в шапку, поэтому
   кнопки круглые, как у корзины. */
.hdr__icos { display: inline-flex; align-items: center; gap: 8px; }
.hdr__ico {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: none;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.hdr__ico .ic { width: 19px; height: 19px; }
.hdr__ico:hover { color: var(--acc-text); border-color: var(--acc); }
.hdr__ico b {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--acc);
  color: var(--acc-ink);
  font-size: 12px;
}
.hdr--dark .hdr__ico { border-color: color-mix(in srgb, var(--acc-ink) 35%, transparent); color: var(--acc-ink); }
.hdr--dark .hdr__ico:hover { color: var(--acc-ink); background: color-mix(in srgb, var(--acc-ink) 16%, transparent); }
/* На мобильном шапка узкая: иконки уменьшаем, чтобы название бренда
   помещалось рядом с ними. */
@media (max-width: 900px) {
  .hdr__icos { gap: 6px; }
  .hdr__ico { width: 36px; height: 36px; }
  .hdr__ico .ic { width: 17px; height: 17px; }
  .hdr__fav { width: 36px; height: 36px; }
  .hdr__fav .hdr__fav-ico { width: 17px; height: 17px; }
}

/* Кнопка сравнения на карточке товара - рядом с избранным. */
.tile__cmp {
  position: absolute;
  top: 12px; right: 58px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--surf) 90%, transparent);
  color: var(--mut);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: transform .16s ease, background-color .16s ease, color .16s ease;
}
.tile__cmp .ic { width: 16px; height: 16px; }
.tile__cmp:hover { transform: scale(1.08); color: var(--acc-text); }
.tile__cmp.is-on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }

/* Те же две кнопки на странице товара. */
.prod__tools { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.prod__tool {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: none;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.prod__tool .ic { width: 20px; height: 20px; }
.prod__tool:hover { color: var(--acc-text); border-color: var(--acc); }
.prod__tool.is-on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.prod__tool.is-on .ic--stroke { stroke: var(--acc-ink); }

/* ------------- Страница товара: миниатюры, скидка, вкладки ------------- */
/* Под слайдером - миниатюры фотографий вместо точек. */
.prod__gallery { position: relative; }
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.thumb {
  width: 82px; height: 62px; flex: none; padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: calc(var(--rad) * .7);
  overflow: hidden; background: none; cursor: pointer;
  opacity: .5;
  transition: opacity .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: .85; }
.thumb.is-active {
  opacity: 1;
  border-color: var(--acc);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 25%, transparent);
}

/* Шильдик со скидкой и старая цена. */
.disc {
  display: inline-grid; place-items: center;
  min-width: 46px; height: 26px; padding: 0 10px;
  border-radius: 999px;
  background: var(--disc-bg); color: var(--disc-ink);
  font-family: var(--dsp); font-size: 13px; font-weight: 700;
  letter-spacing: .02em; white-space: nowrap;
}
.disc--lg {
  position: absolute; top: 14px; left: 14px; z-index: 4;
  min-width: 58px; height: 32px; font-size: 15px;
}
.price-old {
  font-family: var(--dsp); font-size: 15px; color: var(--mut2, var(--mut));
  text-decoration: line-through; white-space: nowrap;
}
.tile__price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.prod__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

/* Рейтинг в колонке товара: открывает вкладку «Отзывы». */
.prod__rate {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--mut); font-size: 14px;
}
.prod__rate b { color: var(--ink); font-family: var(--dsp); font-size: 16px; }
.prod__rate em {
  font-style: normal; color: var(--acc-text);
  border-bottom: 1px solid color-mix(in srgb, var(--acc) 45%, transparent);
}
.prod__rate:hover em { color: var(--ink); }
.sec--prodtabs .tabs { scroll-margin-top: var(--hdr-h); }

/* Табы товара: описание, характеристики, отзывы. */
/* Метаданные товара: артикул и наличие - одной строкой. */
.pinfo {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  display: flex; flex-wrap: wrap; gap: 8px 28px;
}
.pinfo > div { display: flex; align-items: baseline; gap: 8px; }
.pinfo span { color: var(--mut); font-size: 14px; }
.pinfo b { font-size: 15px; }
.sec--prodtabs .revgrid { margin-top: 24px; }
.sec--prodtabs .btn { margin-top: 24px; }

/* Окно поиска. */
.modal--search .modal__dialog { width: min(620px, 100%); }

/* Окно заказа звонка: два поля, поэтому диалог уже и поля не растягиваем. */
.modal--call .modal__dialog { width: min(440px, 100%); }
.form--call .field { margin-bottom: 14px; }
.form--call [data-error] { min-height: 0; margin-top: 4px; }
.form--call .form-note { margin-top: 12px; font-size: 12px; line-height: 1.45; }

.sbox {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: calc(var(--rad) * .9);
  padding: 4px 16px 4px 14px;
}
.sbox__ic { color: var(--mut); display: grid; place-items: center; }
.sbox__ic .ic { width: 19px; height: 19px; }
.sbox__in {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  padding: 12px 0;
  color: var(--ink);
}
.sbox__in:focus { outline: none; }
.sbox__hint { color: var(--mut); font-size: 14px; margin-top: 12px; }
.sres { display: grid; gap: 8px; margin-top: 14px; max-height: min(52vh, 420px); overflow-y: auto; }
.sres__head {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mut);
  margin: 0 0 2px;
}
.sres__i {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: center;
  padding: 8px;
  border-radius: calc(var(--rad) * .7);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
}
.sres__i:hover { background: color-mix(in srgb, var(--acc) 8%, transparent); border-color: color-mix(in srgb, var(--acc) 24%, transparent); }
.sres__img { width: 58px; height: 58px; object-fit: cover; border-radius: calc(var(--rad) * .6); }
.sres__b b { display: block; font-size: 15px; }
.sres__p { color: var(--mut); font-size: 14px; }
.sres__empty { color: var(--mut); margin: 8px 0 0; }

/* Таблица сравнения (страница compare.html). */
.cmp { margin-bottom: 26px; }
.cmp__t { width: 100%; border-collapse: collapse; }
.cmp__t th, .cmp__t td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.cmp__k { width: 150px; color: var(--mut); font-weight: 500; font-size: 14px; white-space: nowrap; }
.cmp__head { position: relative; display: grid; gap: 8px; }
.cmp__img { width: 100%; max-width: 160px; aspect-ratio: 4/3; object-fit: cover; border-radius: calc(var(--rad) * .7); }
.cmp__head b { font-size: 15px; line-height: 1.3; }
.cmp__x {
  position: absolute;
  top: 0; right: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: none;
  color: var(--mut);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.cmp__x:hover { color: var(--ink); border-color: var(--ink); }
.cmp__t .chips { margin: 0; }
.cmp__t .chips.is-empty { display: none; }
.cmp__foot { margin-top: 16px; display: flex; justify-content: flex-end; }
@media (max-width: 700px) {
  .cmp { overflow-x: auto; }
  .cmp__t { min-width: 420px; }
  .cmp__t th, .cmp__t td { padding: 10px 8px; }
  .cmp__k { width: 96px; font-size: 13px; }
  .cmp__head b { font-size: 14px; }
  .cmp__img { max-width: 120px; }
}

/* Eyebrow as a pill chip (Megagroup-style badge).
   display:table - блок-уровень, чтобы чип не вставал в одну строку
   с chip-заголовком секции (иначе они наезжают друг на друга). */
.eyebrow--chip {
  display: table;
  padding: 7px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 26%, transparent);
  color: var(--acc-text);
  letter-spacing: .12em;
  font-size: 11px;
  margin-bottom: 18px;
}

/* Phone in the header */
.hdr__phone {
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  letter-spacing: .01em;
}
@media (max-width: 1400px) { .hdr__phone { display: none; } }
/* В шапке с логотипом по центру телефон стоит слева, где для него есть
   свободная колонка, поэтому на усадке до 1400 px он остаётся на месте.
   Если места всё же не хватит, его уберёт JS (is-nophone). */
@media (max-width: 1400px) and (min-width: 901px) { .hdr--center .hdr__phone { display: inline-block; } }

/* Мессенджеры в шапке (шаблоны с логотипом по центру): стоят рядом с
   телефоном и заполняют левый край шапки. */
.hdr__mss {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit;
  transition: transform .18s ease, background-color .18s ease;
}
.hdr__mss .ic { width: 18px; height: 18px; }
.hdr__mss:hover { transform: translateY(-2px); background: color-mix(in srgb, currentColor 16%, transparent); }
/* Группа мессенджеров рядом с телефоном (вариант с логотипом слева). */
.hdr__mss-group { display: inline-flex; align-items: center; gap: 10px; }

/* Тесная шапка: состояния ставит JS, когда меню не помещается в реальную
   ширину контейнера (медиазапросы считают от окна, а .wrap ограничен --max). */
.hdr.is-nophone .hdr__phone { display: none; }
.hdr.is-nofav .hdr__fav { display: none; }
/* Сравнение -advanced-функция, и в меню «Ещё» оно остаётся. Поэтому в
   тесной шапке его можно убрать раньше избранного. */
.hdr.is-nocmp .hdr__ico--cmp { display: none; }
/* В тесной шапке иконки и кнопка справа становятся компактнее. Так меню
   помещается целиком, и значок избранного остаётся на месте - жертвовать
   им не приходится. */
.hdr.is-tight .hdr__icos { gap: 6px; }
.hdr.is-tight .hdr__ico { width: 32px; height: 32px; }
.hdr.is-tight .hdr__ico .ic { width: 15px; height: 15px; }
.hdr.is-tight .hdr__fav { width: 32px; height: 32px; }
.hdr.is-tight .hdr__fav .hdr__fav-ico { width: 16px; height: 16px; }
.hdr.is-tight .hdr__cta { padding: 9px 14px; font-size: 13px; }
/* Кнопку в шапке прячем последней, когда меню всё ещё не помещается: в
   мобильной панели и на самой странице она остаётся. */
.hdr.is-nocta .hdr__cta { display: none; }
/* Расстояние между пунктами меню - 22 px во всех состояниях. Раньше в тесной
   шапке оно схлопывалось до 8 px, и подписи «Меню Зона доставки Частые
   вопросы» слипались в одну строку. Ужимать шапку теперь можно кеглем меню
   и скрытием значка бренда - расстояние между пунктами это не трогает. */
.hdr.is-tight .nav a, .hdr.is-tight .nav__more { font-size: 13px; }
.hdr.is-mini .brand__n { display: none; }

/* Dropdown navigation */
.nav__item { position: relative; }
.nav__back { display: none; }
/* Крестик и блок контактов - только в мобильной панели меню (в стилях темы
   они показываются в медиазапросе до 900 px). */
.nav__x, .nav__contacts { display: none; }
.nav__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  /* У inline-ссылки высота блока = контентная область шрифта, а line-height
     задаёт только высоту строки. Кнопка - блочный элемент, и с line-height
     её блок получался на 6 px выше соседних пунктов (шапка растёт). */
  line-height: normal;
  color: inherit;
  cursor: pointer;
}
.nav__caret {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.nav__item.is-open .nav__caret { transform: rotate(-135deg) translateY(-2px); }
.nav__sub {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 230px;
  gap: 2px;
  padding: 10px;
  background: var(--surf, #fff);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: calc(var(--rad) * 1.2);
  box-shadow: 0 18px 44px rgba(0,0,0,.13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 40;
}
/* Пункты выпадающего списка - только вертикально.
   Правило `.nav ul` (flex-строка для пунктов меню) перебивало `.nav__sub`
   по специфичности, и пункты списка ложились в одну строку. */
.nav ul.nav__sub {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
}
.nav__item.is-open .nav__sub { opacity: 1; visibility: visible; transform: none; }
/* На десктопе выпадающий список открывается наведением, на тач - кликом */
@media (min-width: 901px) {
  .nav__item:hover > .nav__sub { opacity: 1; visibility: visible; transform: none; }
}
.nav__item > a .nav__caret { display: inline-block; margin-left: 6px; vertical-align: middle; }
.nav__sub a {
  display: block;
  padding: 9px 12px;
  border-radius: calc(var(--rad) * .8);
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  transition: background-color .16s ease;
}
.nav__sub a:hover { background: color-mix(in srgb, var(--acc) 10%, transparent); }
/* выпадающий список статей блога: длинные заголовки переносятся */
.nav__sub--posts { min-width: 300px; max-width: 380px; }
.nav__sub--posts a { white-space: normal; line-height: 1.35; padding: 10px 12px; }
@media (max-width: 900px) { .nav__sub--posts { min-width: 0; max-width: none; } }
@media (max-width: 900px) {
  .nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 14px;
    min-width: 0;
  }
}

/* Breadcrumbs */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--mut);
  margin-bottom: 18px;
}
.crumbs a { color: var(--mut); text-decoration: none; }
.crumbs a:hover { color: var(--acc-text); }
.crumbs__sep { opacity: .45; }

/* Glass hero: слайдер. Кадры лежат друг на друге (grid 1/1), переключаются
   точками под баннером - точками по центру, отдельной строкой, а не
   оверлеем поверх фотографии. */
.hero--glass { padding: clamp(24px, 4vw, 56px) 0 clamp(16px, 2vw, 30px); }
.glass {
  position: relative;
  display: grid;
  border-radius: clamp(22px, 3vw, 34px);
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(420px, 56vh, 660px);
  background: var(--bg);
}
/* Кадры: все в одной ячейке грида, поэтому высота баннера не прыгает при
   переключении (она считается по самому высокому кадру). Невидимые кадры
   остаются в потоке - иначе карточка «прыгала» бы при смене слайда. */
.hero--glass .glass .glass__slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease;
}
.hero--glass .glass .glass__slide.is-active {
  display: flex;
  opacity: 1;
  visibility: visible;
}
.glass__media { position: absolute; inset: 0; z-index: 0; }
.glass__media img { width: 100%; height: 100%; object-fit: cover; }
.glass__panel {
  position: relative;
  z-index: 2;
  max-width: min(520px, 52%);
  margin: clamp(18px, 2.6vw, 34px) 0 clamp(24px, 3vw, 44px) clamp(20px, 4vw, 56px);
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: clamp(16px, 2vw, 24px);
  background: color-mix(in srgb, var(--surf) 88%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.glass__panel .hero__t { color: var(--ink); font-size: clamp(28px, 3.6vw, 56px); }
.glass__panel .hero__s { color: var(--mut); }
/* Плашка-чип внутри карточки: бейдж, а не заголовок - держим его
   соразмерным фотографии, а не во всю ширину карточки. */
.glass__panel .eyebrow--chip {
  font-size: 10px;
  line-height: 1.5;
  padding: 5px 12px;
  letter-spacing: .1em;
  margin-bottom: 14px;
}
.glass__stats {
  position: absolute;
  z-index: 2;
  right: clamp(16px, 3vw, 44px);
  bottom: clamp(16px, 3vw, 44px);
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.glass__stats li {
  min-width: 118px;
  padding: 12px 15px;
  border-radius: calc(var(--rad) * 1.1);
  background: color-mix(in srgb, var(--surf) 90%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
.glass__stats b { display: block; font-size: 21px; line-height: 1.15; }
.glass__stats span { font-size: 12px; opacity: .72; }
/* Точки - под баннером, по центру. Широкие «полоски» вместо мелких кружков:
   их видно на светлом фоне страницы и по ним понятно, сколько кадров. */
.glass__dotsrow { display: flex; justify-content: center; margin-top: clamp(14px, 1.6vw, 20px); }
.glass__dotsrow .dots { margin-top: 0; }
.hero--glass .glass__dotsrow .dot {
  width: 24px;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 20%, transparent);
  opacity: 1;
  transform: none;
  transition: background-color .2s ease, width .2s ease;
}
.hero--glass .glass__dotsrow .dot.is-active {
  width: 42px;
  background: var(--acc);
  opacity: 1;
  transform: none;
}
@media (max-width: 1100px) {
  .glass__panel { max-width: min(560px, 78%); margin-bottom: 132px; }
  .glass__stats { left: clamp(16px, 3vw, 44px); right: clamp(16px, 3vw, 44px); }
  .glass__stats li { flex: 1; min-width: 0; }
}
@media (max-width: 760px) {
  .glass { min-height: 0; }
  .hero--glass .glass .glass__slide { align-items: stretch; flex-direction: column; }
  .glass__media { position: relative; height: 250px; }
  .glass__panel { max-width: none; margin: 0; border-radius: 0; }
  .glass__stats { position: static; flex-wrap: wrap; padding: 14px; }
  .glass__stats li { flex: 1 1 30%; min-width: 0; }
}

/* Trust: 4 reasons */
.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.trust__item {
  position: relative;
  padding: 26px 22px 24px;
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: var(--rad);
  background: var(--surf);
}
.trust__ic {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  color: var(--acc-text);
  font-size: 24px;
}
.trust__ic .ic { width: 25px; height: 25px; }
.trust__t { font-size: 18px; margin-bottom: 8px; }
.trust__d { color: var(--mut); font-size: 15px; }
@media (max-width: 980px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trust { grid-template-columns: 1fr; } }

/* Directions: cards with photos */
.dirs { display: grid; gap: clamp(20px, 3vw, 40px); }
.dir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}
.dir--rev .dir__media { order: 2; }
.dir__media { border-radius: var(--rad); overflow: hidden; }
.dir__media img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.dir__t { font-size: clamp(21px, 2.4vw, 30px); margin-bottom: 12px; }
.dir__d { color: var(--mut); margin-bottom: 16px; }
.dir .btn { margin-top: 18px; }
@media (max-width: 860px) {
  .dir { grid-template-columns: 1fr; }
  .dir--rev .dir__media { order: 0; }
}

/* Case study */
.case {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(22px, 3.4vw, 56px);
  align-items: center;
}
.case__media { border-radius: var(--rad); overflow: hidden; }
.case__media img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.case__meta { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.case__meta li {
  display: flex;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  font-size: 15px;
}
.case__meta span { color: var(--mut); min-width: 108px; }
.case__meta b { font-weight: 600; }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; } }

/* Special offers */
.card--promo { padding: 0; overflow: hidden; }
.card--promo .card__media { aspect-ratio: 3/2; overflow: hidden; }
.card--promo .card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card--promo .card__body { padding: 22px 22px 24px; }
.card__kicker {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acc-text);
  font-weight: 700;
  margin-bottom: 10px;
}
.terms {
  margin-top: clamp(26px, 3.4vw, 44px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: var(--rad);
}
.terms__t { font-size: 19px; margin-bottom: 14px; }

/* Price table */
.ptable { border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); border-radius: var(--rad); overflow: hidden; }
.ptable__row {
  display: grid;
  grid-template-columns: 1fr 190px 170px;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  background: var(--surf);
}
.ptable__row:last-child { border-bottom: 0; }
.ptable__row--head {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
  font-weight: 700;
}
.ptable__name b { display: block; font-size: 17px; }
.ptable__name i { font-style: normal; color: var(--mut); font-size: 14px; }
.ptable__price { font-size: 19px; font-weight: 700; }
.ptable__act { text-align: right; }
.ptable__note { margin-top: 14px; font-size: 13px; color: var(--mut); }

/* Название товара в списке - ссылка на детальную страницу. Выглядит как
   обычный заголовок (подчёркивания в наборе нет), при наведении - акцент. */
.tile__body h3 a, .ptable__name b a, .card__t a, .dir__t a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease;
}
.tile__body h3 a:hover, .ptable__name b a:hover, .card__t a:hover, .dir__t a:hover {
  color: var(--acc-text);
}

/* Длинное слово в названии не должно вылезать за карточку: карточка режет
   содержимое по overflow:hidden - буква уходила за край и название
   обрезалось. Перенос по правилам языка (lang="ru") + резервный перенос. */
.tile__body h3, .card__t, .dir__t, .ptable__name b {
  hyphens: auto;
  overflow-wrap: break-word;
}
@media (max-width: 760px) {
  .ptable__row { grid-template-columns: 1fr; gap: 8px; }
  .ptable__row--head { display: none; }
  .ptable__act { text-align: left; }
}

/* All reviews grid */
.revgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.rev {
  padding: 24px 22px;
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: var(--rad);
  background: var(--surf);
  display: flex;
  flex-direction: column;
}
.rev__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rev__ava {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--acc) 35%, transparent);
}
.rev__who { min-width: 0; flex: 1; }
.rev__who b { display: block; font-size: 15px; letter-spacing: .01em; }
.rev__who span { display: block; font-size: 13px; color: var(--mut); }
.rev blockquote { margin: 0 0 16px; font-size: 15px; line-height: 1.6; flex: 1; }
.rev__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  font-size: 12.5px; color: var(--mut);
}
.rev__mark { color: var(--acc-text); }
@media (max-width: 980px) { .revgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .revgrid { grid-template-columns: 1fr; } }

/* ------------------------------------------------- Рейтинг в звёздах */
.stars { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.stars svg { width: 16px; height: 16px; display: block; }
.stars .stars__on { fill: #e8a317; }
.stars .stars__off { fill: color-mix(in srgb, var(--ink) 16%, transparent); }
.stars--lg svg { width: 20px; height: 20px; }

/* ------------------------------------------------- Отзывы в слайдере */
.slide__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.slide__ava {
  width: 58px; height: 58px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--acc) 35%, transparent);
}
.slide__who b { display: block; font-size: 16px; }
.slide__who span { display: block; font-size: 13.5px; color: var(--mut); }
.slide__when { display: block; font-size: 12.5px; color: var(--mut); margin-top: 6px; }
.slide__head .stars, .rev__top .stars { margin-left: auto; }

/* Сводка рейтинга на странице отзывов */
.revsum {
  display: flex; align-items: center; gap: 22px;
  margin: 26px 0 34px; padding: 22px 26px;
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: var(--rad); background: var(--surf);
}
.revsum__n { font-family: var(--dsp); font-size: 46px; font-weight: 700; line-height: 1; color: var(--acc-text); }
.revsum__b { display: grid; gap: 6px; }
.revsum__b span { font-size: 13.5px; color: var(--mut); }
@media (max-width: 560px) { .revsum { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* ===================================================== v3 blocks */

/* ------------------------------------------------- Тёмная тема */
/* --acc-raw / --acc2-raw кладёт шаблон в style.css: в тёмной теме
   акцент осветляется, иначе тёмный акцент стал бы невидимым. */
html[data-theme="dark"] {
  --bg: #0e1014;
  --surf: #171a21;
  --ink: #eef1f6;
  --mut: #a3acbb;
  --acc: color-mix(in srgb, var(--acc-raw, #6ea8ff) 62%, #ffffff);
  --acc2: color-mix(in srgb, var(--acc2-raw, #6ea8ff) 55%, #ffffff);
  color-scheme: dark;
}
html[data-theme="dark"] img { background-color: rgba(255,255,255,.05); }
html[data-theme="dark"] .tpl-lightbox { background: rgba(3,4,6,.95); }
html[data-theme="dark"] .form-success { border-color: var(--acc); }
html[data-theme="dark"] .chip,
html[data-theme="dark"] .chips li { color: var(--mut); }
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select {
  background-color: color-mix(in srgb, var(--surf) 90%, #ffffff 10%);
}

/* --------------------------------------------- Панель настроек шаблона
   Кнопка "Настройка" у левого края окна открывает панель: тема, цвет
   акцента, положение корзины и сброс к настройкам по умолчанию.
   Раньше здесь стоял переключатель светлой и тёмной темы. */
.set-dock {
  position: fixed;
  left: 14px;
  /* На одном уровне с иконкой корзины справа (38 %): кнопка настройки и
     корзина не должны смотреться разными точками экрана. */
  top: 38%;
  transform: translateY(-50%);
  z-index: 640;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.set-fab {
  pointer-events: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 11px 9px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 16px;
  background: var(--surf);
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: border-color .2s ease, transform .2s ease;
}
.set-fab:hover { border-color: var(--acc); }
.set-fab .ic { width: 18px; height: 18px; flex: none; }
.set-panel {
  pointer-events: auto;
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  width: 340px;
  max-width: calc(100vw - 40px);
  max-height: min(78vh, 560px);
  overflow: auto;
  background: var(--surf);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.set-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
.set-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.set-panel__head b { font-size: 15px; font-family: var(--dsp); }
.set-panel__x {
  margin-left: auto;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.set-panel__x:hover { border-color: var(--acc); }
.set-panel__x .ic { width: 12px; height: 12px; }
.set-panel__body { padding: 2px 15px 4px; }
.set-sec {
  padding: 13px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.set-sec:last-child { border-bottom: 0; }
.set-sec__t {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mut);
  font-family: var(--bod);
}
.set-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 4px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-radius: 10px;
}
.set-seg__b {
  border: 0;
  background: none;
  color: var(--mut);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.set-seg__b:hover { color: var(--ink); }
.set-seg__b.is-active { background: var(--acc); color: var(--acc-ink); }
.set-sw-default {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}
.set-sw-default span { font-size: 12.5px; color: var(--mut); }
.set-sw {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.set-sw__b {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 50%;
  background: var(--sw);
  cursor: pointer;
}
.set-sw-default .set-sw__b { width: 30px; flex: none; }
.set-sw__b:hover { border-color: var(--ink); }
.set-sw__b.is-active { box-shadow: 0 0 0 2px var(--surf), 0 0 0 4px var(--acc); }
.set-sw__x {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.set-sw__b.is-active .set-sw__x { display: flex; }
.set-hex { display: flex; gap: 8px; margin-top: 11px; }
.set-hex__in {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.set-hex__b {
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: var(--acc);
  color: var(--acc-ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.set-hex__err { margin: 8px 0 0; font-size: 12.5px; color: #d92d20; }
html[data-theme="dark"] .set-hex__err { color: #f97066; }
.set-panel__foot {
  padding: 12px 15px 15px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.set-reset {
  width: 100%;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.set-reset:hover { border-color: var(--acc); color: var(--acc-text); }
/* Положение корзины выбирается в панели настроек: иконка в шапке или кнопка
   у правого края экрана. Обе версии есть в разметке - показывает CSS. */
html[data-cartpos="head"] .cart-btn { display: none; }
html[data-cartpos="fab"] .hdr__ico--cart { display: none; }
@media (max-width: 560px) {
  /* На телефоне кнопка становится круглой иконкой, а панель - нижним листом:
     она не должна наезжать на шапку и закрывать полосу контента. */
  .set-fab { width: 42px; height: 42px; padding: 0; gap: 0; border-radius: 50%; }
  .set-fab span { display: none; }
  .set-panel {
    position: fixed;
    left: 8px; right: 8px; bottom: 8px; top: auto;
    width: auto;
    max-width: none;
    max-height: 74vh;
    transform: translateY(12px);
  }
  .set-panel.is-open { transform: translateY(0); }
}

/* Липкая форма заявки */
.stickyform {
  position: fixed;
  right: 0; bottom: 0;
  z-index: 780;
  /* Контейнер всегда пропускает клики насквозь: он растянут (панель формы
     лежит в потоке) примерно на 400 x 420 px от правого нижнего угла и
     иначе перекрывал бы кнопку корзины и кнопки справа в подвале. */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.stickyform.is-on, .stickyform.is-open, .stickyform.is-menu {
  opacity: 1;
  visibility: visible;
}
/* Кликабельны только сами элементы. */
.stickyform__fab, .stickyform__menu, .stickyform__panel { pointer-events: auto; }
/* Кнопка-иконка в углу: по нажатию всплывает меню (заявка / MAX / Telegram).
   Текстовая плашка занимала много места и закрывала контент у края. */
.stickyform__fab {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 782;
  width: 60px; height: 60px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--acc);
  color: var(--acc-ink);
  box-shadow: 0 14px 34px rgba(0,0,0,.26);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.stickyform__fab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 18px 42px rgba(0,0,0,.32);
}
/* Обе иконки кнопки лежат в одной ячейке: чат поворачивается и уходит, из
   него же вырастает крестик. */
.stickyform__fab .ic {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  width: 28px; height: 28px;
  transition: transform .3s ease, opacity .2s ease;
}
.stickyform__ic--x { opacity: 0; transform: rotate(-90deg) scale(.5); }
.stickyform.is-menu .stickyform__ic--chat { opacity: 0; transform: rotate(90deg) scale(.5); }
.stickyform.is-menu .stickyform__ic--x { opacity: 1; transform: none; }
/* Эффект: расходящееся кольцо вокруг кнопки, пока меню закрыто - кнопка
   заметна на любом фоне и приглашает нажать. */
.stickyform__fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--acc) 70%, transparent);
  pointer-events: none;
  animation: stickyformPulse 2.8s ease-out infinite;
}
.stickyform.is-menu .stickyform__fab::after,
.stickyform.is-open .stickyform__fab::after { animation: none; opacity: 0; }
/* Кольцо не крутится, пока кнопка скрыта (до прокрутки). */
.stickyform:not(.is-on) .stickyform__fab::after { animation: none; opacity: 0; }
@keyframes stickyformPulse {
  0% { transform: scale(1); opacity: .75; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}
/* Всплывающее меню выбора способа связи */
.stickyform__menu {
  position: fixed;
  right: 20px; bottom: 92px;
  z-index: 781;
  display: grid;
  gap: 2px;
  min-width: 252px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: calc(var(--rad) * .8);
  background: var(--surf);
  color: var(--ink);
  box-shadow: 0 26px 64px rgba(0,0,0,.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.stickyform.is-menu .stickyform__menu { opacity: 1; visibility: visible; transform: none; }
.stickyform__mi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: calc(var(--rad) * .55);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.stickyform__mi:hover { background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc-text); }
/* Иконка пункта - в квадратной подложке, чтобы подписи выравнивались. */
.stickyform__mi-ic {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
}
.stickyform__mi-ic .ic { width: 20px; height: 20px; color: var(--acc-text); }
.stickyform__mi-ic--max .ic { width: 22px; height: 22px; }
.stickyform__mi-ic--telegram .ic { color: #2AABEE; }
/* Пункты меню выезжают по очереди - меню раскрывается, а не появляется сразу. */
.stickyform.is-menu .stickyform__mi { animation: stickyformIn .3s ease both; }
.stickyform.is-menu .stickyform__mi:nth-child(1) { animation-delay: .02s; }
.stickyform.is-menu .stickyform__mi:nth-child(2) { animation-delay: .1s; }
.stickyform.is-menu .stickyform__mi:nth-child(3) { animation-delay: .18s; }
@keyframes stickyformIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
/* Пока открыта панель, иконка и меню не нужны: панель и есть форма. */
.stickyform.is-open .stickyform__fab,
.stickyform.is-open .stickyform__menu { display: none; }
.stickyform__panel {
  width: min(360px, 92vw);
  margin: 0 22px 22px 0;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--rad);
  background: var(--surf);
  color: var(--ink);
  box-shadow: 0 26px 64px rgba(0,0,0,.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.stickyform.is-open .stickyform__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.stickyform__head { position: relative; margin-bottom: 16px; padding-right: 26px; }
.stickyform__head b { display: block; font-family: var(--dsp); font-size: 19px; }
.stickyform__head p { margin-top: 5px; font-size: 13px; color: var(--mut); }
.stickyform__x {
  position: absolute;
  top: -6px; right: -6px;
  width: 32px; height: 32px;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  opacity: .55;
  cursor: pointer;
}
.stickyform__x:hover { opacity: 1; }
.form--sticky .field { margin-bottom: 14px; }
.form--sticky input { padding: 11px 13px; }
@media (max-width: 620px) {
  .stickyform__fab { right: 14px; bottom: 14px; width: 54px; height: 54px; }
  .stickyform__fab .ic { width: 24px; height: 24px; }
  .stickyform__menu { right: 14px; bottom: 80px; min-width: 0; width: calc(100vw - 28px); max-width: 280px; }
  .stickyform__panel { width: calc(100vw - 24px); }
}

/* Калькулятор стоимости */
.calc {
  display: grid;
  gap: 22px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--rad);
  background: var(--surf);
}
.calc__main { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.calc__field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--mut);
}
.calc__step { display: flex; align-items: center; gap: 10px; }
.calc__step button {
  width: 42px; height: 42px;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: calc(var(--rad) * .7);
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.calc__step button:hover { border-color: var(--acc); color: var(--acc-text); }
.calc__step input { width: 92px; text-align: center; }
.calc__opts { display: grid; gap: 9px; }
.calc__opts-t { font-size: 13px; letter-spacing: .04em; color: var(--mut); }
.calc__opt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: calc(var(--rad) * .7);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.calc__opt:hover { border-color: color-mix(in srgb, var(--acc) 45%, transparent); }
.calc__opt span { font-size: 15px; }
.calc__opt b { font-size: 14px; color: var(--acc-text); white-space: nowrap; }
.calc__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.calc__sum span { color: var(--mut); font-size: 15px; }
.calc__sum b { font-family: var(--dsp); font-size: clamp(26px, 3vw, 38px); font-weight: 700; }
.calc__sum em { flex-basis: 100%; font-style: normal; font-size: 13px; color: var(--mut); }
.calc__go { justify-self: start; }
@media (max-width: 760px) { .calc__main { grid-template-columns: 1fr; } }

/* ------------------------------------------------- Категории магазина */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.cat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--rad);
  background: var(--surf);
  transition: box-shadow .2s ease;
}
.cat:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .10); }
.cat__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.cat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cat:hover .cat__media img { transform: scale(1.06); }
.cat__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.cat__t { font-family: var(--dsp); font-size: 19px; font-weight: 700; }
.cat__n { font-size: 13px; color: var(--mut); }
@media (max-width: 980px) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cats { grid-template-columns: 1fr; } }

/* ------------------------------------------------- Хиты продаж */
.hits { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 980px) { .hits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hits { grid-template-columns: 1fr; } }

/* Плашка «Хит» на товаре */
.tile__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--acc);
  color: var(--acc-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Шильдик «Хит продаж»: второй акцент, подогнанный под контраст. */
.tile__badge--hit { background: var(--disc-bg); color: var(--disc-ink); }

/* Шильдик на фото товара детальной страницы - в правом верхнем углу,
   чтобы не наезжать на плашку со скидкой слева. */
.prod__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--acc);
  color: var(--acc-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}
.prod__badge--hit { background: var(--disc-bg); color: var(--disc-ink); }

/* Слайдер сопутствующих товаров: лента карточек с горизонтальной прокруткой. */
.rel { position: relative; }
.rel__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 6px;
}
.rel__track::-webkit-scrollbar { display: none; }
.rel__track > .tile { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); scroll-snap-align: start; }
/* Последняя карточка прилипает к правому краю: иначе она не доезжает
   целиком и стрелка «вперёд» не гаснет. */
.rel__track > .tile:last-child { scroll-snap-align: end; }
.rel__btn {
  position: absolute;
  top: 38%;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: var(--surf);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
  transition: background-color .18s ease, color .18s ease;
}
.rel__btn:hover { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.rel__btn--prev { left: calc(var(--pad) * -1 + 6px); }
.rel__btn--next { right: calc(var(--pad) * -1 + 6px); }
.rel__btn[disabled] { opacity: .35; cursor: default; }
.rel__btn[disabled]:hover {
  background: var(--surf);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
}
@media (max-width: 1100px) { .rel__track > .tile { flex-basis: calc((100% - var(--gap)) / 2); } }
@media (max-width: 640px) {
  .rel__track > .tile { flex-basis: 86%; }
  .rel__btn { display: none; }
}
/* Ссылка «Все материалы» под блоком статей. */
.sec__more { margin-top: clamp(18px, 2vw, 28px); }

/* Команда / специалисты */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.team__c {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: var(--rad);
  background: var(--surf);
  padding: 24px 22px 26px;
}
.team__av {
  display: block;
  width: 80px; height: 80px;
  margin-bottom: 16px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--acc) 14%, transparent);
}
/* Фото в круге: снимок квадратный, поэтому кадрируем его приближением
   вокруг лица, а не обрезкой краёв рамки. */
.team__av img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transform-origin: 50% 26%;
}
.team__body { padding: 0; display: flex; flex: 1 1 auto; flex-direction: column; }
.team__n { font-size: 19px; margin-bottom: 6px; }
.team__r { font-size: 14px; color: var(--acc-text); margin-bottom: 4px; }
.team__e { font-size: 13px; color: var(--mut); margin-bottom: 16px; }
.team__body > .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 980px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team { grid-template-columns: 1fr; } }

/* Товарные плитки: длинная цена или подпись кнопки не должна резаться краем плитки */
.tile .tile__foot { flex-wrap: wrap; row-gap: 10px; }
.tile .tile__foot .btn { flex: 0 0 auto; }

/* Промо-карточки: цена и кнопка прижаты к низу — ряд выровнен.
   Длинная подпись кнопки переносится на свою строку, а не режется краем карточки. */
.card--promo { display: flex; flex-direction: column; }
.card--promo .card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.card--promo .card__foot { margin-top: auto; flex-wrap: wrap; row-gap: 12px; }
.card--promo .card__foot .btn { flex: 0 0 auto; }

/* Карточки преимуществ с фото */
.card.card--photo {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card.card--photo .card__media { flex: none; aspect-ratio: 4/3; overflow: hidden; }
.card.card--photo .card__media img { width: 100%; height: 100%; object-fit: cover; }
.card.card--photo .card__body { padding: 20px 22px 24px; }
.cards--1 .card.card--photo { flex-direction: row; align-items: stretch; }
.cards--1 .card.card--photo .card__media { width: 250px; aspect-ratio: auto; }
.cards--1 .card.card--photo .card__body { padding: 24px 26px; }
@media (max-width: 700px) {
  .cards--1 .card.card--photo { flex-direction: column; }
  .cards--1 .card.card--photo .card__media { width: 100%; aspect-ratio: 4/3; }
}

/* Шаги с фото */
.step__media {
  margin-bottom: 14px;
  border-radius: calc(var(--rad) * .7);
  overflow: hidden;
}
.step__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* Сравнение с обычным предложением (блок на главной).
   Рамка принадлежит именно этому блоку: страница сравнения товаров тоже
   использует класс .cmp, и рамка блока доставалась пустому состоянию -
   текст оказывался прижат к краю. */
.sec--compare .cmp {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--rad);
}
/* Страница сравнения: рамка появляется только под таблицей, когда список
   не пуст (класс is-filled ставит скрипт). Пустое состояние - рамка
   избранного, без внешней обводки. */
.cmp--page.is-filled {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--rad);
}
.cmp__row {
  display: grid;
  grid-template-columns: 1fr 150px 150px;
  gap: 16px;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  background: var(--surf);
}
.cmp__row:last-child { border-bottom: 0; }
.cmp__row--head {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
  font-weight: 700;
}
.cmp__name { font-size: 15px; }
.cmp__y { text-align: center; font-size: 20px; font-weight: 700; color: var(--acc-text); }
.cmp__n { text-align: center; font-size: 20px; color: var(--mut); opacity: .7; }
@media (max-width: 760px) {
  .cmp__row { grid-template-columns: 1fr 84px 84px; gap: 8px; padding: 14px 16px; }
}

/* Параллакс: картинка увеличена, чтобы не было видно краёв при сдвиге */
[data-parallax] { will-change: transform; }
.hero__media, .split__media, .glass__media { overflow: hidden; }
.hero__media, .split__media { border-radius: var(--rad); }

/* Варианты товара */
.vars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.var {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: var(--rad);
  background: var(--surf);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.var:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acc) 50%, transparent); }
.var.is-on {
  border-color: var(--acc);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 28%, transparent);
}
.var__media { display: block; border-radius: calc(var(--rad) * .7); overflow: hidden; }
.var__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.var__t { font-size: 15px; font-weight: 600; }
.var__p { font-size: 14px; color: var(--acc-text); }
@media (max-width: 980px) { .vars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vars { grid-template-columns: 1fr; } }

/* ===================================================== Статья блога */
.article-head { padding: clamp(30px, 4vw, 60px) 0 clamp(8px, 1.5vw, 18px); }
.article-head__t { font-size: clamp(28px, 4vw, 52px); max-width: 20ch; }
.article-head__lead { margin-top: 18px; font-size: clamp(16px, 1.4vw, 20px); color: var(--mut); max-width: 62ch; }
.article-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.article-author { display: flex; align-items: center; gap: 12px; }
.article-author__ava {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--acc) 35%, transparent);
}
.article-author b { display: block; font-size: 15px; }
.article-author span { display: block; font-size: 13px; color: var(--mut); }
.article-meta time { font-size: 13.5px; color: var(--mut); }
/* Иконки в метаданных статьи и в хлебных крошках */
.article-meta time, .article-meta__rt { display: inline-flex; align-items: center; gap: 6px; }
.article-meta .ic { width: 15px; height: 15px; color: var(--mut); }
/* Счётчики материала: просмотры (глаз) и лайки (палец вверх). */
.post__stats { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.post__stat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--mut);
}
.post__stat .ic { width: 17px; height: 17px; opacity: .8; }
.post__like {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--mut);
  transition: color .16s ease;
}
.post__like:hover { color: var(--acc-text); }
.post__like.is-liked { color: var(--acc-text); }
.post__like.is-liked .ic { opacity: 1; }
.article-meta__stats { display: inline-flex; align-items: center; gap: 18px; }
.crumbs__home { display: inline-flex; align-items: center; gap: 6px; }
.crumbs__home .ic { width: 14px; height: 14px; }
.article-share { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.article-share__t { font-size: 13px; color: var(--mut); }
.sharebtn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 50%; background: transparent; cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.sharebtn:hover { border-color: var(--acc); color: var(--acc-text); }
.sharebtn svg { width: 17px; height: 17px; fill: currentColor; }
.sharebtn .ic--telegram { fill: #2AABEE; }
.sharebtn .ic--vk { fill: #0077FF; }
.sharebtn.is-done {
  border-color: var(--acc); color: var(--acc-text);
  background: color-mix(in srgb, var(--acc) 14%, transparent);
}

/* Всплывающее уведомление (копирование ссылки и т.п.) */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 140;
  transform: translate(-50%, 18px);
  padding: 12px 20px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-size: 14px; line-height: 1.3; box-shadow: 0 14px 38px rgba(0, 0, 0, .26);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) { .toast { left: 16px; right: 16px; bottom: 16px; text-align: center; transform: translateY(18px); } .toast.is-on { transform: translateY(0); } }

.article-cover { margin: clamp(18px, 2.6vw, 34px) 0 0; }
.article-cover img { width: 100%; aspect-ratio: 21/9; object-fit: cover; border-radius: var(--rad); }
.article-cover figcaption { margin-top: 10px; font-size: 13px; color: var(--mut); }

.article {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(26px, 4vw, 64px); align-items: start;
  padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(30px, 4vw, 60px);
}
.article__body { min-width: 0; }
.article__body h2 { font-size: clamp(21px, 2.2vw, 30px); margin: 38px 0 14px; }
.article__body h2:first-child { margin-top: 0; }
.article__body h3 { font-size: clamp(17px, 1.6vw, 21px); margin: 26px 0 10px; }
.article__body p { color: var(--mut); font-size: 16.5px; line-height: 1.7; margin-bottom: 16px; }
.article__body p.article__intro { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink); }
.article__body ul.ticks { margin: 6px 0 20px; }
.article__ol { counter-reset: a; display: grid; gap: 14px; margin: 6px 0 22px; }
.article__ol li { position: relative; padding-left: 42px; color: var(--mut); }
.article__ol li b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.article__ol li:before {
  content: counter(a); counter-increment: a;
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: color-mix(in srgb, var(--acc) 14%, transparent);
  color: var(--acc-text); font-weight: 700; font-size: 13px;
}
.article__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 6px 0 22px; }
.article__cards .card { padding: 20px; }
.article__cards .card__t { font-size: 18px; }
.article__aside { position: sticky; top: calc(var(--hdr-h, 96px) + 18px); display: grid; gap: 16px; }
.article__box { padding: 20px; border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); border-radius: var(--rad); background: var(--surf); }
.article__box h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); margin-bottom: 14px; }
.article__rel { display: grid; gap: 12px; }
.article__rel a { display: grid; gap: 4px; font-size: 15px; font-weight: 600; }
.article__rel span { font-size: 12.5px; color: var(--mut); font-weight: 400; }
.article__rel a:hover { color: var(--acc-text); }
.article__toc { display: grid; gap: 8px; }
.article__toc a { font-size: 14.5px; color: var(--mut); }
.article__toc a:hover { color: var(--acc-text); }
.article__cta {
  margin-top: 34px; padding: clamp(22px, 3vw, 36px);
  border-radius: var(--rad); background: var(--surf);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.article__cta h3 { font-size: clamp(19px, 2vw, 25px); margin-bottom: 8px; }
.article__cta p { color: var(--mut); margin-bottom: 18px; }
.article__back { display: inline-block; margin-top: 26px; font-size: 15px; color: var(--acc-text); font-weight: 600; }
@media (max-width: 980px) {
  .article { grid-template-columns: 1fr; }
  .article__aside { position: static; }
  .article__cards { grid-template-columns: 1fr; }
  .article-share { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  [data-parallax] { transform: none !important; }
}

/* --------------------------------------------------------------- SVG icons
   Иконки вставлены инлайном (без внешних запросов). Размер - 1em, цвет -
   текущий текстовый, поэтому иконка подстраивается под кегль и тему.
   Источники: Bootstrap Icons (MIT), Simple Icons (CC0), знак MAX. */
.ic {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
  vertical-align: -.125em;
}
.ic--telegram { fill: #2AABEE; }
.ic--vk { fill: #0077FF; }
.ic--youtube { fill: #FF0033; }
/* Контурные иконки (Feather Icons): рисуются обводкой, а не заливкой. */
.ic--stroke { fill: none; stroke: currentColor; }

/* Блок преимуществ: иконка в скруглённой плашке вместо пустого кружка */
.trust__ic {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  color: var(--acc-text);
  font-size: 24px;
}
.trust__ic .ic { width: 25px; height: 25px; }

/* Карточки «доставка и оплата»: иконка вместо номера */
.card__ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  color: var(--acc-text);
  font-size: 22px;
}
.card__ic .ic { width: 22px; height: 22px; }

/* Контакты: иконка слева от строки */
.cont__row { display: flex; gap: 14px; align-items: flex-start; }
.cont__row-b { min-width: 0; }
.cont__ic {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  color: var(--acc-text);
  font-size: 20px;
}
.cont__ic .ic { width: 20px; height: 20px; }

/* Мессенджеры в подвале */
.ftr__col .ftr__mss { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ftr__col .ftr__mss li { margin-bottom: 0; }
.ftr__ms {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  transition: transform .18s ease, background-color .18s ease;
}
.ftr__ms:hover { transform: translateY(-2px); background: color-mix(in srgb, currentColor 16%, transparent); }
.ftr__ms .ic { width: 20px; height: 20px; }

/* Мессенджеры на странице контактов (MAX и Telegram) */
.cont__mss { margin-top: 22px; }
.cont__mss-t { display: block; font-size: 13px; color: var(--mut); letter-spacing: .04em; margin-bottom: 12px; }
.cont__mss-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cont__ms {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  transition: transform .18s ease, background-color .18s ease;
}
.cont__ms:hover { transform: translateY(-2px); background: color-mix(in srgb, currentColor 16%, transparent); }
.cont__ms .ic { width: 22px; height: 22px; }
.cont__mss--form {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cont__mss-note { font-size: 15px; color: var(--mut); }

/* ------------------------------------------- Заголовок блока и ссылка справа */
.sec__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(18px, 2vw, 32px);
}
.sec__row .lead { margin-bottom: 0; }

/* ------------------------------------------- Фильтры по тегам и годам
   Панель фильтров стоит над списком: заголовок, кнопки-теги и счётчик
   найденного. Кнопки используют класс .filter из темы шаблона, поэтому
   выглядят как остальные фильтры каталога. */
.tagbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.tagbar__t {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mut);
}
.tagbar__list { display: flex; flex-wrap: wrap; gap: 9px; }
.tagbar__count { margin-left: auto; font-size: 13px; color: var(--mut); }
.tagbar__count b { color: var(--ink); font-size: 16px; }

/* ------------------------------------------- Галерея: сетка с фильтром */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.gal__item { margin: 0; }
.gal__item .shot { width: 100%; }
.gal__item .shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.gal__cap { margin-top: 11px; font-size: 14px; color: var(--mut); }
.gal__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gal__tag {
  font-size: 11px;
  letter-spacing: .02em;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 999px;
  color: var(--mut);
}
@media (max-width: 1100px) { .gal { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .gal { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gal { grid-template-columns: 1fr; } }

/* ------------------------------------------- Карточка акции */
.promogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--gap); }
.pcard {
  display: flex;
  flex-direction: column;
  background: var(--surf);
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: var(--rad);
  overflow: hidden;
}
.pcard__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.pcard__body { padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; flex: 1; }
.pcard__year {
  display: inline-block;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  color: var(--mut);
  margin-bottom: 12px;
}
.pcard__year--live { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.pcard__t { font-size: 20px; margin-bottom: 9px; }
.pcard__d { color: var(--mut); font-size: 15px; flex: 1; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.pcard__foot .price { font-size: 18px; }
.pcard__kicker { font-size: 13px; color: var(--mut); min-width: 0; }
.pcard__foot .btn { flex: 0 0 auto; }

/* ------------------------------------------- Картинка и название - ссылки
   В карточках блога и акций на страницу материала ведут и фотография,
   и заголовок. Сами ссылки выглядят как обычный текст: подчёркивание
   убираем, цвет меняется на акцентный при наведении. */
.pcard__media,
.post__media { display: block; }
.pcard__t a,
.post__body h3 a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease;
}
.pcard__t a:hover,
.post__body h3 a:hover { color: var(--acc-text); }

/* ------------------------------------------- Страница акции */
.promohero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px, 4vw, 60px); align-items: start; }
.promohero__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--rad); }
.promohero__t { font-size: clamp(26px, 3vw, 38px); margin-bottom: 14px; }
.promohero__d { color: var(--mut); font-size: 16px; }
.promoincl { display: grid; gap: 10px; margin-top: 20px; }
.promorelated { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 900px) {
  .promohero { grid-template-columns: 1fr; }
  .promorelated { grid-template-columns: 1fr; }
}

/* ------------------------------------------- Теги материала */
.post__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.post__tag {
  display: inline-block;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  color: var(--mut);
  text-decoration: none;
}
.post__tag:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 34%, transparent); }
.post__tags--top { margin-top: 16px; margin-bottom: 16px; }

/* ------------------------------------------- Скрытие отфильтрованного
   Правило [hidden] автора браузера перебивается, если у элемента задан
   display - поэтому прячем явно. */
.gal__item[hidden],
.post[hidden],
.pcard[hidden] { display: none; }

/* ------------------------------------------- Стрелка выпадающего списка
   Нативная стрелка Chrome рисуется по самому краю поля: отступ
   padding-right на неё не действует (проверено: при 0 / 15 / 44 px стрелка
   остаётся вплотную к границе). Поэтому отключаем нативный вид контрола и
   рисуем стрелку сами - с отступом от правого края. Размер и отступ заданы
   в em, чтобы стрелка масштабировалась вместе с шрифтом поля. */
.field select,
.shopbar__field select,
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236f7680' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5 8 11l4.5-4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95em center;
  background-size: 1.05em 1.05em;
  padding-right: 2.7em;
}


/* ------------------------------------------- Детальная страница кейса
   Карточка раздела «Портфолио» ведёт на страницу кейса: там задача,
   решение и результат стоят тремя блоками, а результат - ещё и тремя
   крупными цифрами. */
.card.card--photo .card__media { display: block; }
.card__more {
  display: inline-block;
  margin-top: 18px;
  color: var(--acc-text);
  font-weight: 600;
  font-size: 15px;
}
.casehero { margin: 0; border-radius: var(--rad); overflow: hidden; }
.casehero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.casefacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.casefacts__i {
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--rad);
  background: var(--surf);
}
.casefacts__k {
  display: block;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut);
}
.casefacts__v {
  display: block;
  margin-top: 10px;
  font-family: var(--dsp);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}
.casesteps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.casestep {
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--rad);
  background: var(--surf);
}
.casestep__t {
  font-family: var(--dsp);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acc-text);
  margin-bottom: 12px;
}
.casestep__d { color: var(--mut); font-size: 15.5px; line-height: 1.65; }
.caseback { display: inline-block; margin-top: 26px; color: var(--acc-text); font-weight: 600; font-size: 15px; }
@media (max-width: 1000px) {
  .casesteps { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .casefacts { grid-template-columns: 1fr; }
}