/*!
 * ДРОВА ОТ ПРОИЗВОДИТЕЛЯ — style.css
 * Собран из логических исходников css/01-base .. 08-utilities.
 * Палитра: «Тёплая логистика» — тёплый светлый фон, графит,
 * древесная терракота и хвойный зелёный как служебный акцент.
 * Кодировка UTF-8 без BOM.
 */

/* ==========================================================================
   ДРОВА ОТ ПРОИЗВОДИТЕЛЯ — дизайн-система
   01. Токены, сброс, типографика, служебные классы
   ========================================================================== */

:root {
  /* Палитра «Тёплая логистика» */
  --bg:            #F6F3ED;
  --bg-alt:        #FFFFFF;
  --graphite:      #1E2522;
  --graphite-2:    #2C3531;
  --graphite-3:    #47524D;
  --acc:           #B86535;
  --acc-dark:      #8A4A26;
  --acc-soft:      #F3E3D6;
  --pine:          #2F6451;
  --pine-soft:     #E2EDE7;
  --sand:          #E6D7C4;
  --sand-2:        #EFE6D8;
  --line:          #E9ECE8;
  --line-2:        #D9DEDA;

  --ink:           #1E2522;
  --ink-2:         #4A544F;
  --ink-3:         #6E7873;
  --ink-inv:       #FFFFFF;

  --ok:            #2F6451;
  --err:           #B33A28;
  --warn:          #C08A2E;

  /* Типографика */
  --ff: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
  --ff-num: 'Manrope', 'Inter', system-ui, sans-serif;

  --fs-h1: clamp(28px, 4vw, 52px);
  --fs-h2: clamp(23px, 2.6vw, 36px);
  --fs-h3: clamp(18px, 1.6vw, 22px);
  --fs-base: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;

  --lh: 1.62;
  --lh-h: 1.14;

  /* Сетка */
  --wrap: 1280px;
  --wrap-narrow: 820px;
  --pad: 32px;
  --gap: 24px;
  --sec-y: 104px;

  /* Форма */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(30, 37, 34, .05), 0 2px 8px rgba(30, 37, 34, .04);
  --sh-2: 0 4px 12px rgba(30, 37, 34, .07), 0 12px 32px rgba(30, 37, 34, .06);
  --sh-3: 0 12px 28px rgba(30, 37, 34, .12), 0 32px 64px rgba(30, 37, 34, .10);

  --tr: .22s cubic-bezier(.4, 0, .2, 1);
  --tr-slow: .38s cubic-bezier(.4, 0, .2, 1);

  --hdr-h: 96px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  /* Горизонтальный скролл подавляем и на html: в iOS Safari правило
     только на body игнорируется, и выехавшая панель сдвигает страницу. */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  font-family: var(--ff);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100%;
  /* Ширина вьюпорта без полосы прокрутки — опора для расчётов ниже */
  position: relative;
}

body.no-scroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 800;
  line-height: var(--lh-h);
  letter-spacing: -.015em;
  color: var(--graphite);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--acc-dark);
  text-decoration: none;
  transition: color var(--tr);
}
a:hover { color: var(--acc); }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: 0; padding: 0; }

table { border-collapse: collapse; width: 100%; }

b, strong { font-weight: 700; }

/* Числа — табличные */
.pcard__now, .prod__now, .tbl td, .tbl th, .calcres__num,
.stock__p, .cartsum__rows, .citem__sum, .scard__price, .svcbox__price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------- Доступность */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--graphite);
  color: #fff;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700;
  transition: top var(--tr);
}
.skip-link:focus { top: 0; color: #fff; }

:focus-visible {
  outline: 3px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

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

/* ------------------------------------------------------- Контейнеры */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.sec { padding: var(--sec-y) 0; }
.sec + .sec { padding-top: 0; }
.sec--seo, .sec--cta { padding-bottom: var(--sec-y); }

.sec__head { max-width: 780px; margin-bottom: 44px; }
.sec__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  max-width: none;
}
.sec__t { font-size: var(--fs-h2); margin-bottom: 14px; }
.sec__sub { color: var(--ink-2); font-size: 17px; margin: 0; }
.sec__sub a { border-bottom: 1px solid currentColor; }

.sec__disclaimer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 16px 20px;
  background: var(--sand-2);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.sec__disclaimer .ico { flex: none; width: 20px; height: 20px; color: var(--acc-dark); margin-top: 1px; }

/* --------------------------------------------------------- Иконки */
.ico {
  width: 24px;
  height: 24px;
  flex: none;
  stroke-width: 1.75;
}

/* ----------------------------------------------------------- Сетки */
.grid { display: grid; gap: var(--gap); }
.grid--products { grid-template-columns: repeat(4, 1fr); }
.grid--services { grid-template-columns: repeat(3, 1fr); }
.grid--blog { grid-template-columns: repeat(3, 1fr); }

.twocol {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: start;
}

/* -------------------------------------------------------- Проза */
.prose { color: var(--ink-2); font-size: 17px; }
.prose h2 {
  font-size: var(--fs-h3);
  margin: 36px 0 14px;
  color: var(--graphite);
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 1.05em; }
.prose a { border-bottom: 1px solid rgba(184, 101, 53, .35); }
.prose a:hover { border-bottom-color: var(--acc); }

.ulist { display: grid; gap: 12px; margin: 20px 0 26px; }
.ulist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.55;
}
.ulist .ico { width: 21px; height: 21px; color: var(--pine); margin-top: 3px; }
.ulist--sm { gap: 9px; font-size: var(--fs-sm); }

/* ------------------------------------------------- Утилитарные */
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   02. Компоненты: кнопки, бейджи, поля форм, чипы, уведомления
   ========================================================================== */

/* ------------------------------------------------------------ Кнопки */
.btn {
  --btn-bg: var(--acc);
  --btn-fg: #fff;
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  min-height: 54px;
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: center;
  cursor: pointer;
  transition: background var(--tr), color var(--tr), border-color var(--tr),
              transform var(--tr), box-shadow var(--tr);
  -webkit-tap-highlight-color: transparent;
}
.btn .ico { width: 20px; height: 20px; transition: transform var(--tr); }
.btn:hover { color: var(--btn-fg); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:hover .ico:last-child { transform: translateX(3px); }

.btn-primary { --btn-bg: var(--acc); --btn-fg: #fff; box-shadow: 0 6px 18px rgba(184,101,53,.24); }
.btn-primary:hover { --btn-bg: var(--acc-dark); box-shadow: 0 10px 24px rgba(184,101,53,.3); }

.btn-dark { --btn-bg: var(--graphite); --btn-fg: #fff; }
.btn-dark:hover { --btn-bg: var(--graphite-2); }

.btn-outline {
  --btn-bg: transparent;
  --btn-fg: var(--graphite);
  --btn-bd: var(--line-2);
}
.btn-outline:hover { --btn-bd: var(--graphite); --btn-bg: rgba(30,37,34,.04); }

.btn--onimg {
  --btn-fg: #fff;
  --btn-bd: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  background: rgba(30,37,34,.28);
}
.btn--onimg:hover { --btn-bd: #fff; background: rgba(30,37,34,.45); }

.btn-whatsapp { --btn-bg: #25A366; --btn-fg: #fff; }
.btn-whatsapp:hover { --btn-bg: #1E8B55; }

.btn--lg { min-height: 62px; padding: 18px 34px; font-size: 16.5px; }
.btn--sm { min-height: 46px; padding: 11px 20px; font-size: 14.5px; }
.btn--sm .ico { width: 18px; height: 18px; }
.btn--xs { min-height: 38px; padding: 8px 16px; font-size: 13.5px; border-width: 1.5px; }
.btn--xs .ico { width: 16px; height: 16px; }
.btn--full { width: 100%; }

.btn:disabled, .btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading .ico { opacity: 0; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn-outline.is-loading::after { border-color: rgba(30,37,34,.25); border-top-color: var(--graphite); }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--acc-dark);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--tr), gap var(--tr);
}
.btn-link .ico { width: 18px; height: 18px; }
.btn-link:hover { color: var(--acc); gap: 12px; }

/* ------------------------------------------------------------ Бейджи */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.25;
  white-space: nowrap;
}
.badge--hit  { background: var(--acc); color: #fff; }
.badge--tag  { background: var(--pine-soft); color: var(--pine); }
.badge--sale { background: var(--graphite); color: #fff; }
.badge--new  { background: var(--sand); color: var(--acc-dark); }
.badge--xs   { padding: 3px 8px; font-size: 10.5px; margin-left: 8px; }

/* ------------------------------------------------------------- Поля */
.fld { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.fld__l {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: .005em;
}
.fld__opt { font-weight: 500; color: var(--ink-3); }
.fld__i {
  width: 100%;
  padding: 14px 16px;
  min-height: 52px;
  background: #fff;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
  -webkit-appearance: none;
  appearance: none;
}
.fld__i::placeholder { color: var(--ink-3); opacity: .75; }
.fld__i:hover { border-color: var(--line-2); }
.fld__i:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 4px rgba(184,101,53,.13);
}
.fld__i:disabled { background: var(--line); color: var(--ink-3); cursor: not-allowed; }
.fld__i--ta { min-height: 96px; resize: vertical; line-height: 1.5; }

.fld__i--sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234A544F' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 44px;
  cursor: pointer;
}

.fld__hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.fld__err { font-size: 12.5px; color: var(--err); font-weight: 600; }
.fld.has-err .fld__i { border-color: var(--err); box-shadow: 0 0 0 4px rgba(179,58,40,.1); }
.fld.is-ok .fld__i { border-color: var(--ok); }

.fld__out {
  font-weight: 800;
  font-size: 15px;
  color: var(--acc-dark);
}

/* Ползунок */
.fld__i--range {
  padding: 0;
  min-height: auto;
  height: 6px;
  border: 0;
  background: var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.fld__i--range:focus { box-shadow: none; }
.fld__i--range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--acc);
  border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(30,37,34,.22);
  cursor: grab;
}
.fld__i--range::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--acc);
  border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(30,37,34,.22);
  cursor: grab;
}

/* Чекбокс-согласие */
.chk {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  margin: 4px 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.chk__i { position: absolute; opacity: 0; width: 0; height: 0; }
.chk__b {
  flex: none;
  width: 21px; height: 21px;
  margin-top: 1px;
  border: 1.75px solid var(--line-2);
  border-radius: 6px;
  background: #fff;
  position: relative;
  transition: all var(--tr);
}
.chk__i:checked + .chk__b { background: var(--pine); border-color: var(--pine); }
.chk__i:checked + .chk__b::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.chk__i:focus-visible + .chk__b { outline: 3px solid var(--acc); outline-offset: 2px; }
.chk.has-err .chk__b { border-color: var(--err); box-shadow: 0 0 0 3px rgba(179,58,40,.12); }
.chk__t a { border-bottom: 1px solid rgba(184,101,53,.4); }

/* Фильтр-чекбоксы */
.fchk {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  cursor: pointer;
  font-size: 14.5px;
  color: var(--ink-2);
  transition: color var(--tr);
}
.fchk:hover { color: var(--graphite); }
.fchk input { position: absolute; opacity: 0; width: 0; height: 0; }
.fchk__b {
  flex: none;
  width: 20px; height: 20px;
  border: 1.75px solid var(--line-2);
  border-radius: 6px;
  background: #fff;
  position: relative;
  transition: all var(--tr);
}
.fchk input:checked + .fchk__b { background: var(--acc); border-color: var(--acc); }
.fchk input:checked + .fchk__b::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.fchk input:focus-visible + .fchk__b { outline: 3px solid var(--acc); outline-offset: 2px; }
.fchk input:checked ~ .fchk__t { color: var(--graphite); font-weight: 600; }

/* Honeypot */
/* Honeypot прячем без выноса за пределы документа: left:-9999px
   расширяет страницу влево и ломает вёрстку на мобильных. */
.frm__hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------- Формы */
.frm { position: relative; }
.frm__t { font-size: var(--fs-h3); margin-bottom: 8px; }
.frm__d { color: var(--ink-2); font-size: 14.5px; margin-bottom: 20px; }
.frm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.frm__submit { width: 100%; margin-top: 4px; }
.frm__note {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
  text-align: center;
}
.frm__result {
  margin-top: 14px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.frm__result.is-ok  { background: var(--pine-soft); color: var(--pine); }
.frm__result.is-err { background: #FBE8E5; color: var(--err); }

.frm--box .frm__row { grid-template-columns: 1fr; gap: 0; }
.frm--modal .frm__row { grid-template-columns: 1fr; gap: 0; }

/* ---------------------------------------------------------- Чипы */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 600;
  transition: all var(--tr);
}
.chip:hover { border-color: var(--acc); color: var(--acc-dark); }
.chip.is-act { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.chip em {
  font-style: normal;
  font-size: 12px;
  opacity: .6;
  font-weight: 700;
}
.chip--sm { padding: 8px 14px; font-size: 13.5px; }
.chips--sec { margin-top: 12px; }

/* --------------------------------------------------- Уведомления */
.notice {
  display: flex;
  gap: 20px;
  padding: 28px 32px;
  border-radius: var(--r);
  background: #fff;
  border: 1.5px solid var(--line);
  margin-bottom: 40px;
}
.notice--info { border-left: 5px solid var(--pine); }
.notice__ico {
  flex: none;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pine-soft);
  color: var(--pine);
}
.notice__t { font-size: var(--fs-h3); margin-bottom: 10px; }
.notice__body { color: var(--ink-2); font-size: 15.5px; }

/* -------------------------------------------------------- Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 160;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 24px;
  background: var(--graphite);
  color: #fff;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-3);
  transform: translate(-50%, 20px);
  opacity: 0;
  transition: opacity var(--tr), transform var(--tr);
  font-size: 15px;
  font-weight: 600;
  max-width: calc(100vw - 32px);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast__link {
  color: var(--sand);
  font-weight: 700;
  border-bottom: 1px solid rgba(230,215,196,.5);
  white-space: nowrap;
}
.toast__link:hover { color: #fff; }

/* ==========================================================================
   03. Шапка, подвал, навигация, модальные окна, выбор города
   ========================================================================== */

/* ---------------------------------------------------------- Шапка */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  transition: box-shadow var(--tr), background var(--tr);
}
.hdr.is-stuck {
  box-shadow: 0 2px 20px rgba(30, 37, 34, .1);
  background: rgba(246, 243, 237, .96);
  backdrop-filter: saturate(1.4) blur(10px);
}
.hdr.is-stuck .hdr__top { display: none; }

.hdr__top {
  background: var(--graphite);
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
}
.hdr__top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 42px;
}
.hdr__top-right { display: flex; align-items: center; gap: 26px; }
.hdr__work { display: inline-flex; align-items: center; gap: 8px; }
.hdr__work .ico { width: 16px; height: 16px; color: var(--sand); }
.hdr__mail { color: rgba(255, 255, 255, .82); }
.hdr__mail:hover { color: #fff; }

.city-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 0;
}
.city-btn .ico { width: 17px; height: 17px; color: var(--acc); }
.city-btn__chg {
  color: var(--sand);
  border-bottom: 1px dashed rgba(230, 215, 196, .5);
  font-weight: 500;
}
.city-btn:hover .city-btn__chg { color: #fff; border-bottom-color: #fff; }

.hdr__main-in {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: var(--hdr-h);
}

/* Логотип */
.logo { display: inline-flex; align-items: center; gap: 13px; flex: none; }
.logo__mark {
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--graphite);
  color: var(--acc);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .02em;
  transition: transform var(--tr);
}
.logo:hover .logo__mark { transform: rotate(-4deg); }
.logo__txt { display: flex; flex-direction: column; line-height: 1.1; }
.logo__t1 {
  font-size: 19px;
  font-weight: 800;
  color: var(--graphite);
  letter-spacing: -.02em;
}
.logo__t2 {
  font-size: 11px;
  font-weight: 700;
  color: var(--pine);
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Меню */
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__l {
  position: relative;
  padding: 10px 13px;
  border-radius: var(--r-xs);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--tr), background var(--tr);
}
.nav__l:hover { color: var(--graphite); background: rgba(30, 37, 34, .05); }
.nav__l.is-act { color: var(--graphite); }
.nav__l.is-act::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 3px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--acc);
}
.nav__l--acc { color: var(--acc-dark); }
.nav__l--acc:hover { color: var(--acc); background: var(--acc-soft); }

/* Действия в шапке */
.hdr__act { display: flex; align-items: center; gap: 12px; flex: none; }
.hdr__tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 16px;
  color: var(--graphite);
  white-space: nowrap;
}
.hdr__tel .ico { width: 19px; height: 19px; color: var(--acc); }
.hdr__tel:hover { color: var(--acc-dark); }

.hdr__wa, .hdr__cart {
  position: relative;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background var(--tr), color var(--tr);
}
.hdr__wa { background: #25A366; color: #fff; }
.hdr__wa:hover { background: #1E8B55; color: #fff; }
.hdr__cart { background: var(--sand); color: var(--graphite); }
.hdr__cart:hover { background: var(--acc); color: #fff; }
.hdr__cart-c {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 21px; height: 21px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--acc);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  border: 2px solid var(--bg);
}
.hdr__cart:hover .hdr__cart-c { background: var(--graphite); }

.burger { display: none; width: 46px; height: 46px; }
.burger span {
  display: block;
  width: 22px; height: 2.25px;
  margin: 4.5px auto;
  background: var(--graphite);
  border-radius: 2px;
  transition: transform var(--tr), opacity var(--tr);
}
body.menu-open .burger span:nth-child(1) { transform: translateY(6.75px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6.75px) rotate(-45deg); }

/* ---------------------------------------------------------- Подвал */
.ftr {
  margin-top: 40px;
  padding: 72px 0 32px;
  background: var(--graphite);
  color: rgba(255, 255, 255, .72);
  font-size: 14.5px;
}
.ftr__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.logo--ftr .logo__mark { background: var(--acc); color: #fff; }
.logo--ftr .logo__t1 { color: #fff; }
.logo--ftr .logo__t2 { color: var(--sand); }

.ftr__descr { margin: 20px 0; line-height: 1.6; max-width: 330px; }
.ftr__contacts { display: grid; gap: 7px; margin-bottom: 22px; }
.ftr__tel {
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}
.ftr__tel:hover { color: var(--acc); }
.ftr__mail { color: var(--sand); }
.ftr__mail:hover { color: #fff; }
.ftr__work, .ftr__addr { font-size: 13.5px; color: rgba(255, 255, 255, .6); }
.ftr__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ftr__btns .btn-outline { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.28); }
.ftr__btns .btn-outline:hover { --btn-bd: #fff; --btn-bg: rgba(255,255,255,.08); }

.ftr__h {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.ftr__list { display: grid; gap: 11px; }
.ftr__list a { color: rgba(255, 255, 255, .72); font-size: 14.5px; }
.ftr__list a:hover { color: var(--acc); }

.ftr__cities { padding: 36px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ftr__cities-list { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ftr__cities-list a { color: rgba(255, 255, 255, .6); font-size: 13.5px; }
.ftr__cities-list a:hover { color: var(--acc); }
.ftr__cities-all { color: var(--sand) !important; font-weight: 700; }

.ftr__bottom {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  padding-top: 28px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .5);
  line-height: 1.6;
}
.ftr__cr { margin: 0; max-width: 640px; }
.ftr__legal { display: flex; flex-direction: column; gap: 7px; text-align: right; flex: none; }
.ftr__legal a { color: rgba(255, 255, 255, .6); }
.ftr__legal a:hover { color: #fff; }

/* ------------------------------------------- Мобильная панель */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(30, 37, 34, .08);
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky-bar__i {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 600;
}
.sticky-bar__i .ico { width: 22px; height: 22px; }
.sticky-bar__i:active { color: var(--acc); }
.sticky-bar__c {
  position: absolute;
  top: 4px;
  left: 50%;
  margin-left: 6px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--acc);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-style: normal;
}

/* ------------------------------------------------ Модальные окна */
.modal, .citysel {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal__ov, .citysel__ov {
  position: absolute;
  inset: 0;
  background: rgba(30, 37, 34, .58);
  backdrop-filter: blur(3px);
  animation: fade .22s ease;
}
@keyframes fade { from { opacity: 0; } }

.modal__win {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  animation: pop .26s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.98); } }

.modal__x, .citysel__x {
  position: absolute;
  top: 16px; right: 16px;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(30, 37, 34, .06);
  color: var(--ink-2);
  transition: background var(--tr), color var(--tr);
  z-index: 2;
}
.modal__x:hover, .citysel__x:hover { background: var(--graphite); color: #fff; }

.modal__body { padding: 40px 36px 32px; }
.modal__t { font-size: 24px; margin-bottom: 8px; padding-right: 40px; }
.modal__sub { color: var(--ink-2); font-size: 14.5px; margin-bottom: 24px; }

/* --------------------------------------------------- Выбор города */
.citysel__win {
  position: relative;
  width: 100%;
  max-width: 940px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
  animation: pop .26s cubic-bezier(.2, .9, .3, 1.1);
}
.citysel__hd {
  padding: 28px 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.citysel__t { font-size: 24px; }
.citysel__x { position: static; }

.citysel__search {
  position: relative;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.citysel__sico { color: var(--ink-3); flex: none; }
.citysel__inp {
  flex: 1;
  padding: 12px 14px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  background: #fff;
  min-height: 50px;
}
.citysel__inp:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 4px rgba(184, 101, 53, .12);
}
.citysel__count {
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
  font-weight: 600;
}

.citysel__body { padding: 24px 32px 32px; overflow-y: auto; flex: 1; }
.citysel__root { margin-bottom: 22px; }
.citysel__rootlink {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--sand);
  color: var(--acc-dark);
  font-weight: 700;
  font-size: 14.5px;
}
.citysel__rootlink:hover { background: var(--acc); color: #fff; }
.citysel__rootlink.is-act { background: var(--graphite); color: #fff; }

.citysel__grp { margin-bottom: 26px; }
.citysel__rn {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-3);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.citysel__rn em {
  font-style: normal;
  color: var(--acc);
  margin-left: 6px;
}
.citysel__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 12px;
}
.citysel__a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  color: var(--ink-2);
  font-size: 14.5px;
  transition: background var(--tr), color var(--tr);
}
.citysel__a:hover { background: #fff; color: var(--acc-dark); }
.citysel__a.is-act { background: var(--acc); color: #fff; font-weight: 700; }
.citysel__crest { flex: none; width: 20px; height: 20px; }
.citysel__empty { color: var(--ink-2); padding: 20px 0; }
.citysel__empty a { font-weight: 700; }

/* ==========================================================================
   04. Блоки главной: hero, акции, подбор, калькулятор, рейтинг, шаги
   ========================================================================== */

/* ------------------------------------------------------------- Hero */
.hero {
  position: relative;
  padding: 72px 0 88px;
  overflow: hidden;
  background: var(--graphite);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(20, 25, 23, .93) 0%, rgba(20, 25, 23, .8) 42%,
                    rgba(20, 25, 23, .42) 72%, rgba(20, 25, 23, .3) 100%);
}
.hero__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 56px;
  align-items: start;
}
.hero__main { color: #fff; max-width: 700px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 26px;
}
.hero__eyebrow .ico { width: 17px; height: 17px; color: var(--acc); }

.hero__h1 {
  font-size: var(--fs-h1);
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: -.028em;
}
.hero__sub {
  font-size: 17.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .84);
  max-width: 620px;
  margin-bottom: 32px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 46px; }

.hero__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero__metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: rgba(255, 255, 255, .68);
  font-size: 12.5px;
  line-height: 1.4;
}
.hero__metric .ico { width: 22px; height: 22px; color: var(--acc); margin-bottom: 5px; }
.hero__metric b { font-size: 17px; color: #fff; font-weight: 800; letter-spacing: -.01em; }

/* Мини-блок склада */
.hero__side { position: relative; }
.stock {
  background: rgba(255, 255, 255, .97);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--sh-3);
}
.stock__t {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  margin-bottom: 20px;
}
.stock__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--pine);
  box-shadow: 0 0 0 4px rgba(47, 100, 81, .18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  50% { box-shadow: 0 0 0 8px rgba(47, 100, 81, .07); }
}
.stock__list { display: grid; gap: 3px; margin-bottom: 18px; }
.stock__i {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.stock__i:last-child { border-bottom: 0; }
.stock__img { width: 56px; height: 42px; border-radius: 8px; object-fit: cover; }
.stock__n { font-size: 13.5px; line-height: 1.35; }
.stock__n a { color: var(--graphite); font-weight: 600; }
.stock__n a:hover { color: var(--acc-dark); }
.stock__p {
  font-size: 14px;
  font-weight: 800;
  color: var(--acc-dark);
  white-space: nowrap;
  text-align: right;
}
.stock__p em { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); font-weight: 600; }
.stock__note {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
  margin-bottom: 16px;
}

/* ---------------------------------------------------------- Акции 3 */
.promo3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.promo3__i {
  position: relative;
  padding: 30px 28px;
  background: #fff;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
  overflow: hidden;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.promo3__i::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--acc), var(--acc-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr-slow);
}
.promo3__i:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: transparent;
}
.promo3__i:hover::before { transform: scaleX(1); }
.promo3__ico {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 15px;
  background: var(--acc-soft);
  color: var(--acc-dark);
  margin-bottom: 18px;
}
.promo3__ico .ico { width: 26px; height: 26px; }
.promo3__t { font-size: 18.5px; margin-bottom: 10px; }
.promo3__d { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; margin-bottom: 18px; }

/* ------------------------------------------------- Подбор по задаче */
.tasks {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.task {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 16px 22px;
  background: #fff;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.task:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
  border-color: var(--acc);
}
.task__media {
  width: 92px; height: 92px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(30, 37, 34, .12);
  border: 3px solid #fff;
  outline: 1.5px solid var(--line);
}
.task__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tr-slow); }
.task:hover .task__media img { transform: scale(1.09); }
.task__t {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--graphite);
  margin-bottom: 7px;
  line-height: 1.25;
}
.task__d { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.task__go {
  margin-top: 14px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sand-2);
  color: var(--acc-dark);
  transition: background var(--tr), color var(--tr);
}
.task__go .ico { width: 17px; height: 17px; }
.task:hover .task__go { background: var(--acc); color: #fff; }

/* ---------------------------------------------------- Калькулятор */
.sec--calc { position: relative; }
.calc {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 0;
  background: var(--graphite);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
}
.calc__side { padding: 44px 38px; color: rgba(255, 255, 255, .75); }
.calc__t { color: #fff; font-size: 26px; margin-bottom: 14px; }
.calc__d { font-size: 14.5px; line-height: 1.6; margin-bottom: 32px; }
.calc__steps { display: grid; gap: 4px; }
.calc__step {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  cursor: pointer;
  transition: background var(--tr), color var(--tr);
}
.calc__step b {
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7);
  font-size: 13.5px;
  transition: all var(--tr);
}
.calc__step:hover { background: rgba(255, 255, 255, .06); }
.calc__step.is-act { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 700; }
.calc__step.is-act b { background: var(--acc); color: #fff; }
.calc__step.is-done b { background: var(--pine); color: #fff; }

.calc__main { background: var(--bg); padding: 44px 40px; }
.calc__pane { display: none; border: 0; padding: 0; margin: 0; }
.calc__pane.is-act { display: block; animation: slidein .28s ease; }
@keyframes slidein { from { opacity: 0; transform: translateX(12px); } }
.calc__lg {
  font-size: 20px;
  font-weight: 800;
  color: var(--graphite);
  margin-bottom: 22px;
  padding: 0;
}
.calc__nav { display: flex; gap: 12px; margin-top: 26px; }

/* Опции калькулятора */
.opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.opts--row { grid-template-columns: repeat(2, 1fr); }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt__b {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 20px 12px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r);
  transition: all var(--tr);
  height: 100%;
}
.opt:hover .opt__b { border-color: var(--line-2); }
.opt input:checked + .opt__b {
  border-color: var(--acc);
  background: var(--acc-soft);
  box-shadow: 0 4px 14px rgba(184, 101, 53, .15);
}
.opt input:focus-visible + .opt__b { outline: 3px solid var(--acc); outline-offset: 2px; }
.opt__ico { color: var(--acc-dark); margin-bottom: 2px; }
.opt__ico .ico { width: 28px; height: 28px; }
.opt__t { font-size: 15px; font-weight: 800; color: var(--graphite); }
.opt__d { font-style: normal; font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.opt--sm .opt__b { padding: 15px 16px; align-items: flex-start; text-align: left; }

/* Результат калькулятора */
.calcres {
  background: #fff;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
  padding: 26px;
  margin-bottom: 26px;
}
.calcres__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-bottom: 22px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.calcres__lbl { display: block; font-size: 12.5px; color: var(--ink-3); margin-bottom: 4px; }
.calcres__num {
  font-size: 38px;
  font-weight: 800;
  color: var(--acc-dark);
  line-height: 1;
  letter-spacing: -.03em;
}
.calcres__unit { font-size: 13px; color: var(--ink-2); margin-left: 5px; }
.calcres__items { display: grid; gap: 10px; margin-bottom: 18px; }
.calcitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--sand-2);
  border-radius: var(--r-sm);
  transition: background var(--tr);
}
.calcitem:hover { background: var(--sand); }
.calcitem__t { font-size: 14.5px; font-weight: 600; color: var(--graphite); }
.calcitem__p { font-size: 14px; font-weight: 800; color: var(--acc-dark); white-space: nowrap; }
.calcres__note { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 14px; }

.calcdone {
  text-align: center;
  padding: 44px 24px;
  animation: pop .3s ease;
}
.calcdone__ico {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--pine);
  color: #fff;
  font-size: 32px;
  font-weight: 800;
}
.calcdone__t { font-size: 24px; margin-bottom: 10px; }
.calcdone__d { color: var(--ink-2); margin-bottom: 24px; max-width: 420px; margin-inline: auto; }

/* ------------------------------------------------ Таблицы */
.tblwrap {
  overflow-x: auto;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.tbl { min-width: 720px; font-size: 14.5px; }
.tbl thead th {
  padding: 16px 18px;
  background: var(--sand-2);
  color: var(--graphite);
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1.5px solid var(--line);
}
.tbl tbody th, .tbl tbody td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background var(--tr); }
.tbl tbody tr:hover { background: var(--bg); }
.tbl tbody th {
  font-weight: 700;
  color: var(--graphite);
}
.tbl tbody th a { color: var(--graphite); }
.tbl tbody th a:hover { color: var(--acc-dark); }
.tbl td { color: var(--ink-2); }
.tbl__cond { font-size: 13.5px; color: var(--ink-3); max-width: 320px; }
.tbl__old { color: var(--ink-3); font-size: 12.5px; display: block; font-weight: 500; }
.tbl__free { color: var(--pine); font-weight: 600; font-size: 13.5px; }
.tbl__note { margin-top: 14px; font-size: 13px; color: var(--ink-3); line-height: 1.5; }

.tbl--spec { min-width: 0; }
.tbl--spec tbody th { width: 42%; color: var(--ink-3); font-weight: 600; font-size: 14px; }
.tbl--spec tbody td { font-weight: 700; color: var(--graphite); }

/* Полоска оценки */
.score {
  position: relative;
  display: inline-block;
  min-width: 42px;
  padding: 5px 0 9px;
  font-weight: 800;
  color: var(--graphite);
  font-size: 14.5px;
}
.score::before, .score::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2px;
  width: 40px; height: 4px;
  border-radius: 2px;
}
.score::before { background: var(--line); }
.score::after {
  background: linear-gradient(90deg, var(--acc), var(--acc-dark));
  width: calc(40px * var(--s, 0) / 100 * 1);
  max-width: 40px;
  left: calc(50% - 20px);
  transform: none;
}

/* ------------------------------------------------ Условия / шаги */
.conds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cond {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 26px;
  background: #fff;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
  transition: all var(--tr);
}
.cond:hover { border-color: var(--pine); transform: translateX(4px); }
.cond__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--pine-soft);
  color: var(--pine);
}
.cond__t {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--graphite);
  margin-bottom: 5px;
}
.cond__d { display: block; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  counter-reset: st;
}
.step { position: relative; }
.step__media {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 18px;
  aspect-ratio: 3 / 2;
  background: var(--sand-2);
}
.step__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tr-slow); }
.step:hover .step__media img { transform: scale(1.05); }
.step__n {
  position: absolute;
  left: 16px; bottom: 16px;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 4px 14px rgba(30, 37, 34, .28);
}
.step__t { font-size: 18px; margin-bottom: 9px; }
.step__d { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }

.hsteps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.hstep {
  position: relative;
  padding: 28px 24px;
  background: #fff;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
}
.hstep__n {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--graphite);
  color: var(--acc);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 16px;
}
.hstep__t { font-size: 16px; margin-bottom: 8px; }
.hstep__d { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

/* ==========================================================================
   05. Карточки: товар, услуга, работа, статья, город, корзина
   ========================================================================== */

/* ------------------------------------------------------ Товар */
.pcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
  overflow: hidden;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.pcard:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
  border-color: transparent;
}
.pcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand-2);
}
.pcard__imglink { display: block; height: 100%; }
.pcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tr-slow); }
.pcard:hover .pcard__img { transform: scale(1.06); }
.pcard__badges {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 24px);
}
.pcard__stock {
  position: absolute;
  right: 12px; bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .95);
  color: var(--pine);
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.pcard__stock .ico { width: 15px; height: 15px; }

.pcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}
.pcard__t { font-size: 16.5px; line-height: 1.3; margin-bottom: 14px; }
.pcard__t a { color: var(--graphite); }
.pcard__t a:hover { color: var(--acc-dark); }

.pcard__spec { display: grid; gap: 6px; margin-bottom: 14px; }
.pcard__spec li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  line-height: 1.4;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.pcard__spec li:last-child { border-bottom: 0; padding-bottom: 0; }
.pcard__spec span { color: var(--ink-3); }
.pcard__spec b { color: var(--graphite); font-weight: 700; text-align: right; }

.pcard__scores {
  display: flex;
  gap: 12px;
  padding: 10px 0 14px;
  margin-bottom: 4px;
  border-top: 1px solid var(--line);
}
.pcard__score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.pcard__score .ico { width: 16px; height: 16px; color: var(--acc); }

.pcard__foot { margin-top: auto; }
.pcard__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 9px;
  margin-bottom: 14px;
}
.pcard__now {
  font-size: 22px;
  font-weight: 800;
  color: var(--graphite);
  letter-spacing: -.025em;
}
.pcard__now i { font-style: normal; font-size: 17px; }
.pcard__old {
  font-size: 14px;
  color: var(--ink-3);
  text-decoration: line-through;
}
.pcard__unit { width: 100%; font-size: 12px; color: var(--ink-3); }
.pcard__act { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.pcard__min {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: center;
}

/* ------------------------------------------------------ Услуга */
.scard {
  display: flex;
  flex-direction: column;
  padding: 24px 26px;
  background: var(--sand-2);
  border-radius: var(--r);
  border-left: 4px solid var(--acc);
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr);
}
.scard:hover { background: #fff; transform: translateY(-3px); box-shadow: var(--sh-2); }
.scard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.scard__cat {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pine);
}
.scard__price {
  font-size: 18px;
  font-weight: 800;
  color: var(--acc-dark);
  white-space: nowrap;
  text-align: right;
  line-height: 1.15;
}
.scard__price i { font-style: normal; font-size: 15px; }
.scard__price em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
}
.scard__price--free { font-size: 13px; color: var(--pine); }
.scard__t { font-size: 16.5px; line-height: 1.3; margin-bottom: 10px; }
.scard__t a { color: var(--graphite); }
.scard__t a:hover { color: var(--acc-dark); }
.scard__d {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 18px;
  flex: 1;
}
.scard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(30, 37, 34, .08);
}

/* ------------------------------------------------------ Работа */
.works {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.works--page { grid-template-columns: repeat(4, 1fr); }
.work {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--graphite);
  position: relative;
}
.work__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--tr-slow), opacity var(--tr);
}
.work:hover .work__img { transform: scale(1.06); opacity: .8; }
.work__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 18px 16px;
  background: linear-gradient(to top, rgba(20, 25, 23, .92), transparent);
  color: #fff;
}
.work__city {
  display: block;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 3px;
}
.work__meta {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .78);
}
.work__date {
  display: block;
  font-size: 11.5px;
  color: var(--sand);
  margin-top: 3px;
}

/* ------------------------------------------------------ Статья */
.acard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  border: 1.5px solid var(--line);
  transition: transform var(--tr), box-shadow var(--tr);
}
.acard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.acard__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-2); }
.acard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tr-slow); }
.acard:hover .acard__media img { transform: scale(1.05); }
.acard__b { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.acard__cat {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pine);
  margin-bottom: 10px;
}
.acard__t { font-size: 18px; line-height: 1.3; margin-bottom: 10px; }
.acard__t a { color: var(--graphite); }
.acard__t a:hover { color: var(--acc-dark); }
.acard__d { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-bottom: 16px; flex: 1; }

/* ------------------------------------------------------ Корзина */
.cartpage__empty {
  text-align: center;
  padding: 70px 24px;
  background: #fff;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
}
.cartpage__eico {
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--sand-2);
  color: var(--acc-dark);
}
.cartpage__eico .ico { width: 38px; height: 38px; }
.cartpage__et { font-size: 24px; margin-bottom: 10px; }
.cartpage__ed { color: var(--ink-2); margin-bottom: 26px; max-width: 420px; margin-inline: auto; }

.cartpage__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: start;
}
.cartlist { display: grid; gap: 14px; }
.citem {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto auto 40px;
  align-items: center;
  gap: 18px;
  padding: 18px;
  background: #fff;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
}
.citem__media { display: block; border-radius: var(--r-xs); overflow: hidden; }
.citem__media img { width: 96px; height: 72px; object-fit: cover; }
.citem__t { font-size: 15.5px; line-height: 1.35; margin-bottom: 5px; }
.citem__t a { color: var(--graphite); }
.citem__t a:hover { color: var(--acc-dark); }
.citem__p { font-size: 13px; color: var(--ink-3); }
.citem__sum { font-size: 17px; font-weight: 800; color: var(--graphite); white-space: nowrap; }
.citem__x {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink-2);
  font-size: 20px;
  line-height: 1;
  transition: all var(--tr);
}
.citem__x:hover { background: var(--err); color: #fff; }

.qty, .citem__qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 4px;
}
.qty__b {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--graphite);
  font-size: 18px;
  transition: background var(--tr), color var(--tr);
}
.qty__b:hover { background: var(--acc); color: #fff; }
.qty__b .ico { width: 17px; height: 17px; }
.qty__i {
  width: 58px;
  text-align: center;
  border: 0;
  background: none;
  font-weight: 800;
  font-size: 16px;
  color: var(--graphite);
  -moz-appearance: textfield;
}
.qty__i::-webkit-outer-spin-button,
.qty__i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__i:focus { outline: none; }
.qty__u { padding: 0 12px 0 4px; font-size: 13px; color: var(--ink-3); font-weight: 600; }

.cartsum {
  position: sticky;
  top: 120px;
  padding: 28px;
  background: #fff;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
  box-shadow: var(--sh-1);
}
.cartsum__t { font-size: 20px; margin-bottom: 20px; }
.cartsum__rows { display: grid; gap: 12px; margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cartsum__r { display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; }
.cartsum__r dt { color: var(--ink-2); margin: 0; }
.cartsum__r dd { margin: 0; font-weight: 700; color: var(--graphite); }
.cartsum__r dd b { font-size: 19px; }
.cartsum__r--note dd { font-weight: 500; color: var(--ink-3); font-size: 13.5px; }
.cartsum__note { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-bottom: 18px; }
.cartsum__note + .btn { margin-bottom: 10px; }
.cartsum__empty { font-size: 14px; color: var(--ink-3); }
.cartsum__items { margin-bottom: 18px; }
.cartsum__adv { display: grid; gap: 9px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.cartsum__adv li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
}
.cartsum__adv .ico { width: 17px; height: 17px; color: var(--pine); flex: none; margin-top: 2px; }

.colist { display: grid; gap: 11px; }
.colist__i {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding-bottom: 11px;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
}
.colist__i:last-child { border-bottom: 0; padding-bottom: 0; }
.colist__n { color: var(--graphite); font-weight: 600; line-height: 1.35; }
.colist__q { grid-column: 1; color: var(--ink-3); font-size: 12.5px; }
.colist__s { grid-row: 1 / 3; align-self: center; font-weight: 800; white-space: nowrap; }

/* ==========================================================================
   06. Внутренние страницы: крошки, каталог, товар, услуга, текст, 404
   ========================================================================== */

/* ------------------------------------------------------- Крошки */
.crumbs { padding: 20px 0 4px; }
.crumbs__list { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.crumbs__i { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); }
.crumbs__i a { color: var(--ink-3); }
.crumbs__i a:hover { color: var(--acc-dark); }
.crumbs__sep { color: var(--line-2); }
.crumbs__i [aria-current] { color: var(--graphite); font-weight: 600; }

/* --------------------------------------------- Шапка страницы */
.sec--pagehead { padding: 34px 0 40px; }
.pagehead__h1 { font-size: var(--fs-h1); margin-bottom: 16px; max-width: 940px; }
.pagehead__lead {
  font-size: 17.5px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 780px;
}
.pagehead__upd, .pagehead__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.pagehead__note .ico { width: 18px; height: 18px; color: var(--acc-dark); flex: none; margin-top: 2px; }

/* ------------------------------------------------------ Каталог */
.cat {
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.cat__side {
  position: sticky;
  top: 120px;
  padding: 26px;
  background: #fff;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
}
.cat__side-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cat__side-t { font-size: 18px; }
.cat__side-x { display: none; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: var(--line); }
.cat__nojs { font-size: 13px; color: var(--ink-3); line-height: 1.5; }

.fgrp {
  border: 0;
  padding: 0 0 18px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--line);
}
.fgrp__t {
  padding: 0;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.fprice { display: flex; align-items: center; gap: 8px; }
.fprice__i {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-xs);
  background: var(--bg);
  font-size: 14px;
}
.fprice__i:focus { outline: none; border-color: var(--acc); background: #fff; }
.fprice__sep { color: var(--ink-3); }

.cat__help {
  margin-top: 22px;
  padding: 20px;
  background: var(--sand-2);
  border-radius: var(--r-sm);
}
.cat__help-t { font-size: 15px; margin-bottom: 7px; }
.cat__help-d { font-size: 13px; color: var(--ink-2); margin-bottom: 14px; line-height: 1.5; }

.cat__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.cat__fbtn { display: none; }
.cat__found { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.cat__found b { color: var(--graphite); font-weight: 800; }
.cat__sort { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cat__sort-l { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }
.cat__sort-s { min-height: 44px; padding: 9px 40px 9px 14px; font-size: 14px; width: auto; }
.cat__empty {
  padding: 50px 24px;
  text-align: center;
  color: var(--ink-2);
  background: #fff;
  border-radius: var(--r);
  border: 1.5px dashed var(--line-2);
}
.cat__empty .btn-link { font-size: inherit; }

/* -------------------------------------------------- Карточка товара */
.prod {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.prod__main { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--sand-2); }
.prod__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prod__badges { position: absolute; top: 16px; left: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.prod__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.prod__thumb {
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 2.5px solid transparent;
  background: var(--sand-2);
  transition: border-color var(--tr), transform var(--tr);
}
.prod__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prod__thumb:hover { transform: translateY(-2px); }
.prod__thumb.is-act { border-color: var(--acc); }

.prod__h1 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 14px; }
.prod__sh { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin-bottom: 20px; }
.prod__stock {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 11px 16px;
  background: var(--pine-soft);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--pine);
  margin-bottom: 22px;
}
.prod__stock .ico { width: 19px; height: 19px; }
.prod__stock span { color: var(--ink-2); font-size: 13px; }

.prod__pricebox {
  padding: 26px;
  background: #fff;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
  margin-bottom: 24px;
}
.prod__prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 20px;
}
.prod__now {
  font-size: 40px;
  font-weight: 800;
  color: var(--graphite);
  letter-spacing: -.035em;
  line-height: 1;
}
.prod__now i { font-style: normal; font-size: 28px; }
.prod__unit { font-size: 14px; color: var(--ink-3); }
.prod__old { font-size: 18px; color: var(--ink-3); text-decoration: line-through; }
.prod__econ {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--acc-soft);
  color: var(--acc-dark);
  font-size: 13px;
  font-weight: 800;
}

.prod__buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 0;
  margin-bottom: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.prod__total { text-align: right; }
.prod__total-l { display: block; font-size: 12.5px; color: var(--ink-3); }
.prod__total-v { font-size: 24px; font-weight: 800; color: var(--acc-dark); letter-spacing: -.02em; }

.prod__act { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.prod__act .btn-outline { grid-column: 1 / -1; }
.prod__minnote { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

.prod__ben { display: grid; gap: 13px; }
.prod__ben li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.prod__ben .ico { width: 20px; height: 20px; color: var(--pine); flex: none; margin-top: 2px; }
.prod__revact { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* ----------------------------------------------------------- Вкладки */
.tabs { background: #fff; border-radius: var(--r-lg); border: 1.5px solid var(--line); overflow: hidden; }
.tabs__nav {
  display: flex;
  gap: 4px;
  padding: 8px;
  background: var(--sand-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tabs__b {
  padding: 13px 22px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--tr), color var(--tr);
}
.tabs__b:hover { background: rgba(255, 255, 255, .6); color: var(--graphite); }
.tabs__b.is-act { background: var(--graphite); color: #fff; }
.tabs__p { padding: 34px 38px; animation: fade .25s ease; }
.tabs__p .btn { margin-top: 18px; }

/* ------------------------------------------------------ Услуга */
.svcpage { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 52px; align-items: start; }
.svcpage__h1 { font-size: clamp(24px, 2.6vw, 36px); margin-bottom: 16px; }
.svcpage__lead {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1.5px solid var(--line);
}
.svcbox {
  position: sticky;
  top: 120px;
  padding: 28px;
  background: #fff;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
  box-shadow: var(--sh-1);
}
.svcbox__cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pine);
  margin-bottom: 10px;
}
.svcbox__price {
  display: block;
  font-size: 34px;
  font-weight: 800;
  color: var(--graphite);
  letter-spacing: -.03em;
  line-height: 1;
}
.svcbox__price i { font-style: normal; font-size: 24px; }
.svcbox__price--free { font-size: 20px; color: var(--pine); }
.svcbox__unit { display: block; font-size: 13px; color: var(--ink-3); margin-top: 5px; }
.svcbox__note {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 14px 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.svcbox__contacts { display: grid; gap: 9px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

/* ---------------------------------------------- Двухколоночные */
.aside { display: grid; gap: 20px; position: sticky; top: 120px; }
.infobox {
  padding: 26px;
  background: #fff;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
}
.infobox--acc { background: var(--sand-2); border-color: transparent; }
.infobox__t { font-size: 18px; margin-bottom: 16px; }
.infobox__d { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-bottom: 18px; }
.infobox__list { display: grid; gap: 15px; margin-bottom: 20px; }
.infobox__list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px 12px;
  font-size: 13.5px;
}
.infobox__list .ico { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--acc-dark); margin-top: 2px; }
.infobox__list b { color: var(--graphite); font-size: 14px; }
.infobox__list span { color: var(--ink-2); line-height: 1.45; }

.twocol--rev { grid-template-columns: minmax(0, 1fr) 400px; }

/* --------------------------------------------------- Доставка */
.dfacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dfact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px;
  background: #fff;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
}
.dfact .ico { width: 26px; height: 26px; color: var(--acc); margin-bottom: 8px; }
.dfact b { font-size: 20px; color: var(--graphite); letter-spacing: -.02em; }
.dfact span { font-size: 13px; color: var(--ink-3); line-height: 1.45; }

.deliv { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 48px; align-items: start; }
.deliv__lead { font-size: 16.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 26px; }
.deliv__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 28px; }
.deliv__facts li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 3px 12px;
  align-items: start;
}
.deliv__facts .ico { grid-row: 1 / 3; width: 24px; height: 24px; color: var(--acc); margin-top: 2px; }
.deliv__facts b { font-size: 17px; color: var(--graphite); }
.deliv__facts span { font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.deliv__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.deliv__mapnote {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 20px;
  background: var(--sand-2);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 26px;
}
.deliv__mapnote .ico { width: 20px; height: 20px; color: var(--acc-dark); flex: none; margin-top: 1px; }
.deliv__img { width: 100%; border-radius: var(--r); margin-bottom: 20px; }
.deliv__near { padding: 22px 24px; background: var(--sand-2); border-radius: var(--r); }
.deliv__nt { font-size: 14px; margin-bottom: 12px; }
.deliv__nl { display: flex; flex-wrap: wrap; gap: 7px 14px; }
.deliv__nl a { font-size: 13.5px; color: var(--ink-2); }
.deliv__nl a:hover { color: var(--acc-dark); }

/* ---------------------------------------------------- Контакты */
.contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 44px;
}
.contact {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  background: #fff;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
}
.contact__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--sand-2);
  color: var(--acc-dark);
}
.contact__l { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 3px; }
.contact__v { display: block; font-size: 16px; font-weight: 700; color: var(--graphite); line-height: 1.35; }
.contact__v--big { font-size: 21px; letter-spacing: -.01em; }
a.contact__v:hover { color: var(--acc-dark); }
.contact__n { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.45; }

/* ---------------------------------------------------- Города */
.citystats { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 26px; }
.citystat b {
  display: block;
  font-size: 34px;
  font-weight: 800;
  color: var(--acc-dark);
  letter-spacing: -.03em;
  line-height: 1;
}
.citystat span { font-size: 13.5px; color: var(--ink-3); }

.citysearch { position: relative; max-width: 520px; margin-bottom: 36px; }
.citysearch__ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.citysearch__i {
  width: 100%;
  padding: 15px 18px 15px 50px;
  min-height: 56px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  background: #fff;
}
.citysearch__i:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px rgba(184,101,53,.12); }

.citygrid { display: grid; gap: 34px; }
.cityreg__t {
  font-size: 15px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--line);
}
.cityreg__t em { font-style: normal; color: var(--acc); margin-left: 7px; font-size: 13px; }
.cityreg__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 14px;
}
.cityreg__list a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  color: var(--ink-2);
  font-size: 14.5px;
  transition: background var(--tr), color var(--tr);
}
.cityreg__list a:hover { background: #fff; color: var(--acc-dark); }
.cityreg__list img { flex: none; }

/* ---------------------------------------------------- Акции */
.promolist { display: grid; gap: 22px; }
.promobig {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 26px;
  padding: 34px 36px;
  background: #fff;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
  transition: box-shadow var(--tr);
}
.promobig:hover { box-shadow: var(--sh-2); }
.promobig__ico {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  border-radius: 20px;
  background: var(--acc);
  color: #fff;
}
.promobig__ico .ico { width: 34px; height: 34px; }
.promobig__t { font-size: 23px; margin-bottom: 12px; }
.promobig__d { font-size: 15.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 6px; }

/* ------------------------------------------------- Аккордеон FAQ */
.acc { display: grid; gap: 12px; max-width: 900px; }
.acc__i {
  background: #fff;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
  overflow: hidden;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.acc__i.is-open { border-color: var(--acc); box-shadow: var(--sh-1); }
.acc__hd { margin: 0; font-size: inherit; }
.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px 24px;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  color: var(--graphite);
  transition: color var(--tr);
}
.acc__btn:hover { color: var(--acc-dark); }
.acc__ico { flex: none; color: var(--ink-3); transition: transform var(--tr), color var(--tr); }
.acc__btn[aria-expanded="true"] .acc__ico { transform: rotate(180deg); color: var(--acc); }
.acc__p { padding: 0 24px 22px; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.acc__p p { margin: 0; }

/* ------------------------------------------------------- SEO-текст */
.sec--seo { background: var(--sand-2); padding: 72px 0; margin-top: 40px; }
.seotext { max-width: 900px; }
.seotext__t { font-size: var(--fs-h2); margin-bottom: 24px; }
.seotext p {
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.72;
  margin-bottom: 1.05em;
}
.seotext__links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line-2);
}
.seotext__links a {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
  transition: all var(--tr);
}
.seotext__links a:hover { background: var(--acc); color: #fff; }

/* ------------------------------------------------------ CTA-блок */
.ctablock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 52px;
  align-items: center;
  padding: 52px 56px;
  background: var(--graphite);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.ctablock::before {
  content: '';
  position: absolute;
  right: -80px; top: -80px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 101, 53, .22), transparent 70%);
}
.ctablock__txt { position: relative; }
.ctablock__t { font-size: var(--fs-h2); color: #fff; margin-bottom: 16px; }
.ctablock__d { font-size: 16.5px; color: rgba(255, 255, 255, .78); line-height: 1.6; margin-bottom: 24px; }
.ctablock__list { display: grid; gap: 11px; }
.ctablock__list li {
  display: flex;
  gap: 11px;
  align-items: center;
  color: rgba(255, 255, 255, .82);
  font-size: 14.5px;
}
.ctablock__list .ico { width: 20px; height: 20px; color: var(--acc); flex: none; }
.ctablock__form {
  position: relative;
  padding: 30px;
  background: var(--bg);
  border-radius: var(--r);
}

/* --------------------------------------------------------- Статья */
.art__hd { margin-bottom: 28px; }
.art__cat {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pine);
  margin-bottom: 14px;
}
.art__h1 { font-size: clamp(26px, 3.4vw, 42px); margin-bottom: 18px; }
.art__lead {
  font-size: 18.5px;
  color: var(--ink-2);
  line-height: 1.6;
  font-weight: 500;
}
.art__img { width: 100%; border-radius: var(--r-lg); margin-bottom: 34px; }
.art__body p { font-size: 17px; line-height: 1.75; }
.art__cta {
  margin-top: 44px;
  padding: 34px 36px;
  background: var(--sand-2);
  border-radius: var(--r-lg);
}
.art__ctat { font-size: 22px; margin-bottom: 10px; }
.art__ctad { color: var(--ink-2); margin-bottom: 20px; }
.art__ctab { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------ Оформление */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.checkout__form {
  padding: 34px 36px;
  background: #fff;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
}

/* ------------------------------------------------------------ 404 */
.e404 { text-align: center; padding: 40px 0 20px; }
.e404__code {
  display: block;
  font-size: clamp(80px, 14vw, 160px);
  font-weight: 800;
  line-height: .9;
  color: var(--sand);
  letter-spacing: -.05em;
  margin-bottom: 10px;
}
.e404__t { font-size: var(--fs-h2); margin-bottom: 14px; }
.e404__d { color: var(--ink-2); max-width: 540px; margin: 0 auto 30px; font-size: 16.5px; }
.e404__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 60px; }
.e404__cats { text-align: left; }
.e404__ct { font-size: 20px; margin-bottom: 22px; text-align: center; }
.e404 .grid--products { grid-template-columns: repeat(3, 1fr); }

/* ==========================================================================
   07. Адаптивность: 1920, 1680, 1440, 1280, 1024, 980, 820, 640, 420, 360
   ========================================================================== */

/* ------------------------------------------------------ 1920 и выше */
@media (min-width: 1920px) {
  :root { --wrap: 1320px; --sec-y: 120px; }
  .hero { padding: 88px 0 104px; }
  .hero__in { gap: 72px; }
}

/* ----------------------------------------------------------- 1680 */
@media (max-width: 1679px) {
  :root { --wrap: 1280px; }
}

/* ----------------------------------------------------------- 1440 */
@media (max-width: 1439px) {
  :root { --wrap: 1200px; --sec-y: 96px; }
  .hero__in { grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; }
  .tasks { gap: 14px; }
  .deliv { grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; }
}

/* ----------------------------------------------------------- 1280 */
@media (max-width: 1279px) {
  :root { --wrap: 1080px; --pad: 28px; --gap: 20px; }
  .nav__l { padding: 10px 10px; font-size: 14.5px; }
  .hdr__main-in { gap: 20px; }
  .hdr__tel { font-size: 15px; }
  .grid--products { grid-template-columns: repeat(3, 1fr); }
  .tasks { grid-template-columns: repeat(3, 1fr); }
  .hsteps { grid-template-columns: repeat(3, 1fr); }
  .works, .works--page { grid-template-columns: repeat(3, 1fr); }
  .calc { grid-template-columns: 300px minmax(0, 1fr); }
  .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .ftr__col:last-child { grid-column: span 2; }
  .ftr__col:last-child .ftr__list {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }
}

/* ----------------------------------------------------------- 1024 */
@media (max-width: 1023px) {
  :root { --sec-y: 80px; --hdr-h: 84px; }

  /*
   * Мобильное меню — выдвижная панель.
   *
   * Панель не сдвигается за пределы экрана трансформацией: в iOS Safari
   * такой элемент создаёт горизонтальный скролл, который не подавляется
   * правилом overflow-x: hidden, и вся страница уезжает влево.
   * Вместо этого в закрытом состоянии панель полностью убрана из потока
   * через visibility + нулевую ширину, а анимация идёт по transform
   * уже внутри видимой области.
   */
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    width: min(340px, 88vw);
    max-width: 100vw;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: calc(env(safe-area-inset-top, 0px) + 84px) 20px
             calc(env(safe-area-inset-bottom, 0px) + 28px);
    background: var(--bg);
    box-shadow: -8px 0 40px rgba(30, 37, 34, .22);
    transform: translate3d(100%, 0, 0);
    transition: transform var(--tr-slow), visibility 0s linear .38s;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Ключевое: убираем панель из расчёта ширины документа */
    visibility: hidden;
  }
  body.menu-open .nav {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition: transform var(--tr-slow), visibility 0s;
  }
  body.menu-open::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(30, 37, 34, .5);
    animation: dd-fade-in .25s ease;
  }
  .nav__l { padding: 14px 16px; font-size: 16.5px; border-radius: var(--r-sm); }
  .nav__l.is-act::after { display: none; }
  .nav__l.is-act { background: var(--sand); }
  .burger { display: block; position: relative; z-index: 130; }

  .hdr__tel span { display: none; }
  .hdr__tel {
    width: 46px; height: 46px;
    justify-content: center;
    border-radius: 50%;
    background: var(--sand);
  }
  .hdr__tel .ico { width: 20px; height: 20px; }

  /* 3 карточки в ряду */
  .grid--products { grid-template-columns: repeat(3, 1fr); }
  .grid--services { grid-template-columns: repeat(2, 1fr); }
  .grid--blog { grid-template-columns: repeat(2, 1fr); }

  .hero { padding: 52px 0 64px; }
  .hero__in { grid-template-columns: 1fr; gap: 36px; }
  .hero__side { max-width: 460px; }
  .hero__metrics { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }

  .promo3 { grid-template-columns: 1fr; }
  .conds { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .hsteps { grid-template-columns: repeat(2, 1fr); }
  .dfacts { grid-template-columns: repeat(2, 1fr); }

  .calc { grid-template-columns: 1fr; }
  .calc__side { padding: 32px 28px 24px; }
  .calc__steps {
    grid-template-columns: repeat(4, 1fr);
    display: grid;
  }
  .calc__step { flex-direction: column; text-align: center; gap: 7px; padding: 12px 6px; font-size: 12px; }
  .calc__main { padding: 32px 28px; }

  .twocol, .twocol--rev, .svcpage, .checkout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .aside, .svcbox, .cartsum, .cat__side { position: static; }
  .deliv { grid-template-columns: 1fr; gap: 32px; }
  .prod { grid-template-columns: 1fr; gap: 32px; }
  .prod__gallery { max-width: 620px; }
  .ctablock { grid-template-columns: 1fr; gap: 32px; padding: 40px 36px; }
  .cartpage__body { grid-template-columns: 1fr; }
  .contacts { grid-template-columns: 1fr; }

  .sec--seo { padding: 60px 0; }
}

/* ------------------------------------------------------------ 980 */
@media (max-width: 979px) {
  .cat { grid-template-columns: 1fr; gap: 0; }
  .cat__fbtn { display: inline-flex; }
  /* Панель фильтров: та же схема, что и у меню, — без выноса за экран */
  .cat__side {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 130;
    width: min(340px, 90vw);
    max-width: 100vw;
    border-radius: 0;
    border: 0;
    padding-top: calc(env(safe-area-inset-top, 0px) + 20px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translate3d(100%, 0, 0);
    transition: transform var(--tr-slow), visibility 0s linear .38s;
    box-shadow: -8px 0 40px rgba(30, 37, 34, .22);
    visibility: hidden;
  }
  .cat__side.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition: transform var(--tr-slow), visibility 0s;
  }
  .cat__side-x { display: grid; }
  .cat__sort { margin-left: 0; }
  .cat__bar { gap: 12px; }
  .works, .works--page { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------ 820 */
@media (max-width: 819px) {
  :root { --pad: 24px; --sec-y: 64px; }

  /* 2 карточки в ряду */
  .grid--products { grid-template-columns: repeat(2, 1fr); }
  .tasks { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .conds { grid-template-columns: 1fr; }
  .e404 .grid--products { grid-template-columns: repeat(2, 1fr); }

  .sec__head--row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .sec__head { margin-bottom: 32px; }

  /* Таблицы прокручиваются */
  .tblwrap { position: relative; }
  .tblwrap::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 40px;
    background: linear-gradient(to left, rgba(255,255,255,.95), transparent);
    pointer-events: none;
    border-radius: 0 var(--r) var(--r) 0;
  }

  .hdr__top-right { display: none; }
  .hdr__top-in { justify-content: flex-start; }

  .prod__thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .prod__now { font-size: 34px; }
  .prod__buy { flex-direction: column; align-items: stretch; gap: 14px; }
  .prod__total { text-align: left; display: flex; justify-content: space-between; align-items: baseline; }

  .tabs__p { padding: 26px 24px; }
  .modal__body { padding: 36px 26px 28px; }
  .citysel { padding: 0; }
  .citysel__win { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; }
  .citysel__hd, .citysel__search, .citysel__body { padding-left: 22px; padding-right: 22px; }

  .ftr__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ftr__col--brand { grid-column: 1 / -1; }
  .ftr__col:last-child { grid-column: auto; }
  .ftr__col:last-child .ftr__list { grid-template-columns: 1fr; }
  .ftr__bottom { flex-direction: column; gap: 18px; }
  .ftr__legal { text-align: left; }

  .ctablock { padding: 34px 26px; }
  .ctablock__form { padding: 24px; }
  .promobig { grid-template-columns: 1fr; gap: 18px; padding: 28px 26px; }
  .citem {
    grid-template-columns: 76px minmax(0, 1fr) 36px;
    gap: 14px;
  }
  .citem__qty { grid-column: 2; }
  .citem__sum { grid-column: 2; }
  .citem__x { grid-row: 1; grid-column: 3; }

  /* Липкая панель */
  .sticky-bar { display: flex; }
  body { padding-bottom: 64px; }
  .toast { bottom: 78px; }
}

/* ------------------------------------------------------------ 640 */
@media (max-width: 639px) {
  :root { --pad: 16px; --gap: 14px; --sec-y: 52px; --hdr-h: 72px; }

  .fs-h1, .hero__h1 { letter-spacing: -.02em; }
  .sec__t { font-size: 24px; }
  .pagehead__lead, .hero__sub, .deliv__lead { font-size: 15.5px; }

  /* 2 товара в ряду, 1 колонка текстовых секций */
  .grid--products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .grid--services { grid-template-columns: 1fr; }
  .grid--blog { grid-template-columns: 1fr; }
  .works, .works--page { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hsteps { grid-template-columns: 1fr; }
  .dfacts { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tasks { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .opts { grid-template-columns: repeat(2, 1fr); }
  .frm__row { grid-template-columns: 1fr; gap: 0; }
  .citystats { gap: 22px; }

  .pcard__body { padding: 14px; }
  .pcard__t { font-size: 14.5px; }
  .pcard__now { font-size: 19px; }
  .pcard__spec { display: none; }
  .pcard__scores { display: none; }
  .pcard__act { grid-template-columns: 1fr; }
  .pcard__badges { top: 8px; left: 8px; }
  .badge { padding: 4px 9px; font-size: 10.5px; }
  .pcard__stock { right: 8px; bottom: 8px; padding: 5px 9px; font-size: 11px; }

  .task { padding: 18px 10px 16px; }
  .task__media { width: 68px; height: 68px; margin-bottom: 12px; }
  .task__t { font-size: 13.5px; }
  .task__d { display: none; }
  .task__go { margin-top: 10px; width: 30px; height: 30px; }

  .hero { padding: 36px 0 48px; }
  .hero__metrics { grid-template-columns: 1fr 1fr; gap: 16px 12px; padding-top: 22px; }
  .hero__metric b { font-size: 15px; }
  .stock { padding: 22px 20px; }

  .calc__side { padding: 26px 20px 20px; }
  .calc__main { padding: 26px 20px; }
  .calc__t { font-size: 22px; }
  .calc__lg { font-size: 17.5px; }
  .calc__steps { grid-template-columns: repeat(4, 1fr); gap: 2px; }
  .calc__step span { font-size: 10.5px; line-height: 1.2; }
  .calc__step b { width: 26px; height: 26px; font-size: 12px; }
  .calcres { padding: 20px; }
  .calcres__top { grid-template-columns: 1fr; gap: 14px; }
  .calcres__num { font-size: 30px; }
  .calc__nav { flex-direction: column-reverse; }
  .calc__nav .btn { width: 100%; }

  .prod__pricebox { padding: 20px; }
  .prod__act { grid-template-columns: 1fr; }
  .tabs__nav { padding: 6px; }
  .tabs__b { padding: 11px 16px; font-size: 13.5px; }
  .tabs__p { padding: 22px 18px; }
  .prod__thumbs { grid-template-columns: repeat(4, 1fr); gap: 6px; }

  .acc__btn { padding: 16px 18px; font-size: 15px; gap: 14px; }
  .acc__p { padding: 0 18px 18px; font-size: 14.5px; }

  .notice { flex-direction: column; gap: 14px; padding: 24px 22px; }
  .contact { padding: 18px 20px; gap: 14px; }
  .modal__body { padding: 32px 20px 24px; }
  .modal__t { font-size: 21px; }
  .ctablock { padding: 28px 20px; }
  .ctablock__form { padding: 20px; }
  .art__cta { padding: 26px 22px; }
  .seotext__t { font-size: 23px; }
  .seotext p { font-size: 15px; }
  .sec--seo { padding: 44px 0; }

  .cartsum { padding: 22px; }
  .checkout__form { padding: 24px 20px; }
  .cityreg__list, .citysel__list { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------ 420 */
@media (max-width: 419px) {
  :root { --pad: 14px; }

  /* CTA на всю ширину */
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .btn--lg { min-height: 56px; padding: 16px 24px; font-size: 15.5px; }
  .e404__links { flex-direction: column; }
  .e404__links .btn { width: 100%; }
  .deliv__cta { flex-direction: column; }
  .deliv__cta .btn { width: 100%; }
  .art__ctab { flex-direction: column; }
  .art__ctab .btn { width: 100%; }
  .prod__revact { flex-direction: column; }
  .prod__revact .btn { width: 100%; }
  .ftr__btns { flex-direction: column; }
  .ftr__btns .btn { width: 100%; }

  /* Hero без обрезанного текста */
  .hero__h1 { font-size: 27px; }
  .hero__eyebrow { font-size: 12px; padding: 7px 14px; }
  .hero__sub { font-size: 15px; }
  .hero__metrics { grid-template-columns: 1fr; gap: 14px; }
  .hero__metric { flex-direction: row; align-items: center; gap: 10px; }
  .hero__metric .ico { margin-bottom: 0; }
  .hero__metric b { font-size: 14.5px; }
  .hero__metric span { font-size: 11.5px; }

  .grid--products { grid-template-columns: 1fr; }
  .works, .works--page { grid-template-columns: 1fr; }
  .e404 .grid--products { grid-template-columns: 1fr; }
  .tasks { grid-template-columns: 1fr 1fr; }
  .dfacts { grid-template-columns: 1fr; }
  .opts { grid-template-columns: 1fr; }
  .opts--row { grid-template-columns: 1fr; }
  .cityreg__list, .citysel__list { grid-template-columns: 1fr; }

  .pcard__spec { display: grid; }
  .pcard__act { grid-template-columns: 1fr; }

  .citem {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
  }
  .citem__media img { width: 64px; height: 52px; }
  .citem__x { grid-row: 1; grid-column: 2; justify-self: end; }
  .citem__qty, .citem__sum { grid-column: 1 / -1; }
  .citem__sum { text-align: right; }

  .logo__t2 { font-size: 10px; letter-spacing: .06em; }
  .logo__mark { width: 44px; height: 44px; font-size: 17px; }
  .logo__t1 { font-size: 17px; }
  .hdr__act { gap: 8px; }
  .hdr__wa { display: none; }

  .toast { flex-direction: column; gap: 8px; align-items: flex-start; border-radius: var(--r); padding: 14px 18px; }
  .citystat b { font-size: 28px; }
  .prod__now { font-size: 29px; }
  .prod__now i { font-size: 21px; }
}

/* ------------------------------------------------------------ 360 */
@media (max-width: 359px) {
  :root { --pad: 12px; }
  .hero__h1 { font-size: 24px; }
  .sec__t { font-size: 21px; }
  .pagehead__h1 { font-size: 25px; }
  .tasks { grid-template-columns: 1fr; }
  .btn { padding: 13px 18px; font-size: 14.5px; }
  .calc__step span { display: none; }
  .calc__steps { grid-template-columns: repeat(4, 1fr); }
  .tbl { min-width: 560px; }
  .sticky-bar__i span { font-size: 9.5px; }
}

/* ------------------------------------------------------------ Печать */
@media print {
  .hdr, .ftr, .sticky-bar, .modal, .citysel, .toast,
  .sec--cta, .btn, .cat__side { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .wrap { max-width: none; padding: 0; }
  .sec { padding: 12px 0; }
  a { color: #000; text-decoration: underline; }
}

/* ==========================================================================
   08. Тонкая настройка, состояния, тёмная тема печати, мелкие правки
   ========================================================================== */

/* ------------------------------------------ Отступы между секциями */
.sec--pagehead + .sec { padding-top: 0; }
.crumbs + .sec--pagehead { padding-top: 20px; }
.sec--seo + .sec--cta { padding-top: var(--sec-y); }
.sec--faq + .sec--seo { margin-top: 0; }
.sec--related { padding-top: var(--sec-y); }

/* Чередование фонов */
.sec--tasks { background: linear-gradient(180deg, transparent, rgba(230, 215, 196, .28)); }
.sec--rating { padding-top: var(--sec-y); }
.sec--quality { background: rgba(233, 236, 232, .5); padding-top: var(--sec-y); margin-top: var(--sec-y); }
.sec--quality + .sec { padding-top: var(--sec-y); }

/* ------------------------------------------------ Состояния ссылок */
.ftr__list a:focus-visible,
.citysel__a:focus-visible,
.cityreg__list a:focus-visible { outline-offset: -2px; }

/* Плавное появление секций при наличии поддержки */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pcard, .scard, .task, .step, .acard, .work {
      animation: appear linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    @keyframes appear {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: none; }
    }
  }
}

/* --------------------------------------------- Скроллбары */
.tblwrap::-webkit-scrollbar,
.citysel__body::-webkit-scrollbar,
.tabs__nav::-webkit-scrollbar,
.cat__side::-webkit-scrollbar,
.nav::-webkit-scrollbar { height: 7px; width: 7px; }
.tblwrap::-webkit-scrollbar-track,
.citysel__body::-webkit-scrollbar-track,
.tabs__nav::-webkit-scrollbar-track { background: var(--line); border-radius: 4px; }
.tblwrap::-webkit-scrollbar-thumb,
.citysel__body::-webkit-scrollbar-thumb,
.tabs__nav::-webkit-scrollbar-thumb,
.cat__side::-webkit-scrollbar-thumb,
.nav::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
.tblwrap::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ------------------------------------------- Выделение текста */
::selection { background: var(--acc); color: #fff; }

/* --------------------------------------- Контраст на изображениях */
.hero__bg img { will-change: auto; }

/* ------------------------- Резервный вид при отключённом JavaScript */
.no-js .cat__side { position: static; transform: none; width: auto; }
.no-js .cat__fbtn { display: none; }

/* Без JS фильтры остаются, но каталог полностью доступен */
noscript .cat__nojs {
  display: block;
  padding: 14px 16px;
  background: var(--sand-2);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 16px;
}

/* --------------------------------------------------- Мелкие правки */
.sec--svc + .sec--svc { padding-top: var(--sec-y); }
.sec--pricecat + .sec--pricecat { padding-top: calc(var(--sec-y) * .62); }

.grid--services .scard:nth-child(3n+2) { border-left-color: var(--pine); }
.grid--services .scard:nth-child(3n+3) { border-left-color: var(--graphite); }

.works .work:nth-child(4n+2) .work__cap { background: linear-gradient(to top, rgba(30, 37, 34, .92), transparent); }

/* Ссылки внутри таблиц не подчёркиваются лишний раз */
.tbl a { border-bottom: none; }

/* Аккуратный перенос длинных слов */
/* Длинные заголовки переносим только по границам слов: автоматическая
   расстановка переносов рвала слова вроде «складомет-рах». */
.pcard__t, .scard__t, .acard__t, .prod__h1, .svcpage__h1, .art__h1,
.hero__h1, .pagehead__h1, .sec__t, .seotext__t {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

/* Изображения не «прыгают» при загрузке */
img[width][height] { height: auto; }

/* Кнопка-ссылка внутри абзаца */
p .btn-link { vertical-align: baseline; }

/* Фокус на карточках при навигации с клавиатуры */
.pcard:focus-within { border-color: var(--acc); box-shadow: var(--sh-1); }
.acard:focus-within { border-color: var(--acc); }

/* Правильное отображение hidden у элементов с display */
[hidden] { display: none !important; }

/* ==========================================================================
   09. Утилитарный слой: отступы, типографика, сетки, флекс-хелперы
   Используется в шаблонах для точечной подстройки без новых компонентов.
   ========================================================================== */

/* --------------------------------------------------- Внешние отступы */
.mt-0 { margin-top: 0px; }
.mt-2 { margin-top: 2px; }
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }
.mt-56 { margin-top: 56px; }
.mt-64 { margin-top: 64px; }
.mt-72 { margin-top: 72px; }
.mt-88 { margin-top: 88px; }
.mt-104 { margin-top: 104px; }
.mb-0 { margin-bottom: 0px; }
.mb-2 { margin-bottom: 2px; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-28 { margin-bottom: 28px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }
.mb-48 { margin-bottom: 48px; }
.mb-56 { margin-bottom: 56px; }
.mb-64 { margin-bottom: 64px; }
.mb-72 { margin-bottom: 72px; }
.mb-88 { margin-bottom: 88px; }
.mb-104 { margin-bottom: 104px; }
.ml-0 { margin-left: 0px; }
.ml-2 { margin-left: 2px; }
.ml-4 { margin-left: 4px; }
.ml-6 { margin-left: 6px; }
.ml-8 { margin-left: 8px; }
.ml-10 { margin-left: 10px; }
.ml-12 { margin-left: 12px; }
.ml-14 { margin-left: 14px; }
.ml-16 { margin-left: 16px; }
.ml-20 { margin-left: 20px; }
.ml-24 { margin-left: 24px; }
.ml-28 { margin-left: 28px; }
.ml-32 { margin-left: 32px; }
.ml-40 { margin-left: 40px; }
.ml-48 { margin-left: 48px; }
.ml-56 { margin-left: 56px; }
.ml-64 { margin-left: 64px; }
.ml-72 { margin-left: 72px; }
.ml-88 { margin-left: 88px; }
.ml-104 { margin-left: 104px; }
.mr-0 { margin-right: 0px; }
.mr-2 { margin-right: 2px; }
.mr-4 { margin-right: 4px; }
.mr-6 { margin-right: 6px; }
.mr-8 { margin-right: 8px; }
.mr-10 { margin-right: 10px; }
.mr-12 { margin-right: 12px; }
.mr-14 { margin-right: 14px; }
.mr-16 { margin-right: 16px; }
.mr-20 { margin-right: 20px; }
.mr-24 { margin-right: 24px; }
.mr-28 { margin-right: 28px; }
.mr-32 { margin-right: 32px; }
.mr-40 { margin-right: 40px; }
.mr-48 { margin-right: 48px; }
.mr-56 { margin-right: 56px; }
.mr-64 { margin-right: 64px; }
.mr-72 { margin-right: 72px; }
.mr-88 { margin-right: 88px; }
.mr-104 { margin-right: 104px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* -------------------------------------------------- Внутренние отступы */
.pt-0 { padding-top: 0px; }
.pt-2 { padding-top: 2px; }
.pt-4 { padding-top: 4px; }
.pt-6 { padding-top: 6px; }
.pt-8 { padding-top: 8px; }
.pt-10 { padding-top: 10px; }
.pt-12 { padding-top: 12px; }
.pt-14 { padding-top: 14px; }
.pt-16 { padding-top: 16px; }
.pt-20 { padding-top: 20px; }
.pt-24 { padding-top: 24px; }
.pt-28 { padding-top: 28px; }
.pt-32 { padding-top: 32px; }
.pt-40 { padding-top: 40px; }
.pt-48 { padding-top: 48px; }
.pt-56 { padding-top: 56px; }
.pt-64 { padding-top: 64px; }
.pt-72 { padding-top: 72px; }
.pt-88 { padding-top: 88px; }
.pt-104 { padding-top: 104px; }
.pb-0 { padding-bottom: 0px; }
.pb-2 { padding-bottom: 2px; }
.pb-4 { padding-bottom: 4px; }
.pb-6 { padding-bottom: 6px; }
.pb-8 { padding-bottom: 8px; }
.pb-10 { padding-bottom: 10px; }
.pb-12 { padding-bottom: 12px; }
.pb-14 { padding-bottom: 14px; }
.pb-16 { padding-bottom: 16px; }
.pb-20 { padding-bottom: 20px; }
.pb-24 { padding-bottom: 24px; }
.pb-28 { padding-bottom: 28px; }
.pb-32 { padding-bottom: 32px; }
.pb-40 { padding-bottom: 40px; }
.pb-48 { padding-bottom: 48px; }
.pb-56 { padding-bottom: 56px; }
.pb-64 { padding-bottom: 64px; }
.pb-72 { padding-bottom: 72px; }
.pb-88 { padding-bottom: 88px; }
.pb-104 { padding-bottom: 104px; }
.pl-0 { padding-left: 0px; }
.pl-2 { padding-left: 2px; }
.pl-4 { padding-left: 4px; }
.pl-6 { padding-left: 6px; }
.pl-8 { padding-left: 8px; }
.pl-10 { padding-left: 10px; }
.pl-12 { padding-left: 12px; }
.pl-14 { padding-left: 14px; }
.pl-16 { padding-left: 16px; }
.pl-20 { padding-left: 20px; }
.pl-24 { padding-left: 24px; }
.pl-28 { padding-left: 28px; }
.pl-32 { padding-left: 32px; }
.pl-40 { padding-left: 40px; }
.pl-48 { padding-left: 48px; }
.pl-56 { padding-left: 56px; }
.pl-64 { padding-left: 64px; }
.pl-72 { padding-left: 72px; }
.pl-88 { padding-left: 88px; }
.pl-104 { padding-left: 104px; }
.pr-0 { padding-right: 0px; }
.pr-2 { padding-right: 2px; }
.pr-4 { padding-right: 4px; }
.pr-6 { padding-right: 6px; }
.pr-8 { padding-right: 8px; }
.pr-10 { padding-right: 10px; }
.pr-12 { padding-right: 12px; }
.pr-14 { padding-right: 14px; }
.pr-16 { padding-right: 16px; }
.pr-20 { padding-right: 20px; }
.pr-24 { padding-right: 24px; }
.pr-28 { padding-right: 28px; }
.pr-32 { padding-right: 32px; }
.pr-40 { padding-right: 40px; }
.pr-48 { padding-right: 48px; }
.pr-56 { padding-right: 56px; }
.pr-64 { padding-right: 64px; }
.pr-72 { padding-right: 72px; }
.pr-88 { padding-right: 88px; }
.pr-104 { padding-right: 104px; }
.p-0 { padding: 0px; }
.p-2 { padding: 2px; }
.p-4 { padding: 4px; }
.p-6 { padding: 6px; }
.p-8 { padding: 8px; }
.p-10 { padding: 10px; }
.p-12 { padding: 12px; }
.p-14 { padding: 14px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }
.p-28 { padding: 28px; }
.p-32 { padding: 32px; }
.p-40 { padding: 40px; }
.p-48 { padding: 48px; }
.p-56 { padding: 56px; }
.p-64 { padding: 64px; }
.p-72 { padding: 72px; }
.p-88 { padding: 88px; }
.p-104 { padding: 104px; }

/* --------------------------------------------------------- Типографика */
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }
.fs-17 { font-size: 17px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.fs-24 { font-size: 24px; }
.fs-28 { font-size: 28px; }
.fs-32 { font-size: 32px; }
.fs-38 { font-size: 38px; }
.fs-44 { font-size: 44px; }
.fs-52 { font-size: 52px; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.lh-tight { line-height: 1.2; }
.lh-snug { line-height: 1.38; }
.lh-normal { line-height: 1.62; }
.lh-loose { line-height: 1.8; }
.ff-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.ttu { text-transform: uppercase; letter-spacing: .05em; }
.ttn { text-transform: none; letter-spacing: normal; }
.ta-l { text-align: left; }
.ta-j { text-align: justify; }
.td-u { text-decoration: underline; }
.td-n { text-decoration: none; }
.ws-nw { white-space: nowrap; }
.ws-pw { white-space: pre-wrap; }
.break-word { overflow-wrap: break-word; word-break: break-word; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* -------------------------------------------------------------- Цвета */
.c-ink { color: var(--ink); }
.c-ink-2 { color: var(--ink-2); }
.c-ink-3 { color: var(--ink-3); }
.c-acc { color: var(--acc); }
.c-acc-dark { color: var(--acc-dark); }
.c-pine { color: var(--pine); }
.c-graphite { color: var(--graphite); }
.c-white { color: #fff; }
.c-err { color: var(--err); }
.c-ok { color: var(--ok); }
.c-warn { color: var(--warn); }
.bg-bg { background-color: var(--bg); }
.bg-white { background-color: #fff; }
.bg-sand { background-color: var(--sand); }
.bg-sand-2 { background-color: var(--sand-2); }
.bg-acc { background-color: var(--acc); }
.bg-acc-soft { background-color: var(--acc-soft); }
.bg-pine { background-color: var(--pine); }
.bg-pine-soft { background-color: var(--pine-soft); }
.bg-graphite { background-color: var(--graphite); }
.bg-line { background-color: var(--line); }

/* ----------------------------------------------------------- Раскладка */
.d-block { display: block; }
.d-inline { display: inline; }
.d-iblock { display: inline-block; }
.d-flex { display: flex; }
.d-iflex { display: inline-flex; }
.d-grid { display: grid; }
.d-igrid { display: inline-grid; }
.d-none { display: none; }
.d-contents { display: contents; }
.fd-row { flex-direction: row; }
.fd-col { flex-direction: column; }
.fd-row-rev { flex-direction: row-reverse; }
.fd-col-rev { flex-direction: column-reverse; }
.jc-start { justify-content: flex-start; }
.jc-end { justify-content: flex-end; }
.jc-center { justify-content: center; }
.jc-between { justify-content: space-between; }
.jc-around { justify-content: space-around; }
.jc-evenly { justify-content: space-evenly; }
.ai-start { align-items: flex-start; }
.ai-end { align-items: flex-end; }
.ai-center { align-items: center; }
.ai-stretch { align-items: stretch; }
.ai-base { align-items: baseline; }
.fw-wrap { flex-wrap: wrap; }
.fw-nowrap { flex-wrap: nowrap; }
.f-1 { flex: 1; }
.f-auto { flex: auto; }
.f-none { flex: none; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-28 { gap: 28px; }
.gap-32 { gap: 32px; }
.gap-40 { gap: 40px; }
.gap-48 { gap: 48px; }
.gtc-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gtc-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gtc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gtc-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gtc-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gtc-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gcs-1 { grid-column: span 1; }
.gcs-2 { grid-column: span 2; }
.gcs-3 { grid-column: span 3; }
.gcs-4 { grid-column: span 4; }
.gcs-5 { grid-column: span 5; }
.gcs-6 { grid-column: span 6; }
.gc-full { grid-column: 1 / -1; }

/* ------------------------------------------- Позиции, размеры, границы */
.pos-rel { position: relative; }
.pos-abs { position: absolute; }
.pos-fix { position: fixed; }
.pos-stick { position: sticky; }
.pos-stat { position: static; }
.inset-0 { inset: 0; }
.top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; }
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-5 { z-index: 5; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.w-auto { width: auto; }
.mw-100 { max-width: 100%; }
.mw-320 { max-width: 320px; }
.mw-420 { max-width: 420px; }
.mw-520 { max-width: 520px; }
.mw-620 { max-width: 620px; }
.mw-720 { max-width: 720px; }
.mw-820 { max-width: 820px; }
.mw-920 { max-width: 920px; }
.ov-hidden { overflow: hidden; }
.ov-auto { overflow: auto; }
.ov-x { overflow-x: auto; overflow-y: hidden; }
.br-xs { border-radius: var(--r-xs); }
.br-sm { border-radius: var(--r-sm); }
.br-md { border-radius: var(--r); }
.br-lg { border-radius: var(--r-lg); }
.br-pill { border-radius: var(--r-pill); }
.br-0 { border-radius: 0; }
.br-circle { border-radius: 50%; }
.bd { border: 1.5px solid var(--line); }
.bd-2 { border: 1.5px solid var(--line-2); }
.bd-t { border-top: 1px solid var(--line); }
.bd-b { border-bottom: 1px solid var(--line); }
.bd-l { border-left: 1px solid var(--line); }
.bd-r { border-right: 1px solid var(--line); }
.bd-none { border: 0; }
.sh-1 { box-shadow: var(--sh-1); }
.sh-2 { box-shadow: var(--sh-2); }
.sh-3 { box-shadow: var(--sh-3); }
.sh-none { box-shadow: none; }

/* --------------------------------------- Соотношения сторон, картинки */
.ar-1-1 { aspect-ratio: 1 / 1; }
.ar-4-3 { aspect-ratio: 4 / 3; }
.ar-3-2 { aspect-ratio: 3 / 2; }
.ar-16-9 { aspect-ratio: 16 / 9; }
.ar-3-4 { aspect-ratio: 3 / 4; }
.ar-21-9 { aspect-ratio: 21 / 9; }
.of-cover { object-fit: cover; }
.of-contain { object-fit: contain; }
.of-fill { object-fit: fill; }
.of-none { object-fit: none; }
.of-scale-down { object-fit: scale-down; }
.op-0 { opacity: 0; } .op-50 { opacity: .5; } .op-75 { opacity: .75; } .op-100 { opacity: 1; }
.pe-none { pointer-events: none; }
.pe-auto { pointer-events: auto; }
.us-none { user-select: none; }
.cur-pointer { cursor: pointer; }
.cur-default { cursor: default; }

/* ------------------------------------------------ Адаптивные хелперы */
@media (max-width: 1279px) {
  .hide-xl { display: none !important; }
  .xl-block { display: block !important; }
  .xl-flex { display: flex !important; }
  .xl-grid { display: grid !important; }
  .xl-gtc-1 { grid-template-columns: minmax(0, 1fr); }
  .xl-gtc-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xl-gtc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl-fd-col { flex-direction: column; }
  .xl-ta-l { text-align: left; }
  .xl-ta-c { text-align: center; }
  .xl-w-100 { width: 100%; }
  .xl-gc-full { grid-column: 1 / -1; }
  .xl-mt-0 { margin-top: 0px; }
  .xl-mb-0 { margin-bottom: 0px; }
  .xl-p-0 { padding: 0px; }
  .xl-gap-0 { gap: 0px; }
  .xl-mt-8 { margin-top: 8px; }
  .xl-mb-8 { margin-bottom: 8px; }
  .xl-p-8 { padding: 8px; }
  .xl-gap-8 { gap: 8px; }
  .xl-mt-12 { margin-top: 12px; }
  .xl-mb-12 { margin-bottom: 12px; }
  .xl-p-12 { padding: 12px; }
  .xl-gap-12 { gap: 12px; }
  .xl-mt-16 { margin-top: 16px; }
  .xl-mb-16 { margin-bottom: 16px; }
  .xl-p-16 { padding: 16px; }
  .xl-gap-16 { gap: 16px; }
  .xl-mt-20 { margin-top: 20px; }
  .xl-mb-20 { margin-bottom: 20px; }
  .xl-p-20 { padding: 20px; }
  .xl-gap-20 { gap: 20px; }
  .xl-mt-24 { margin-top: 24px; }
  .xl-mb-24 { margin-bottom: 24px; }
  .xl-p-24 { padding: 24px; }
  .xl-gap-24 { gap: 24px; }
  .xl-mt-32 { margin-top: 32px; }
  .xl-mb-32 { margin-bottom: 32px; }
  .xl-p-32 { padding: 32px; }
  .xl-gap-32 { gap: 32px; }
  .xl-mt-40 { margin-top: 40px; }
  .xl-mb-40 { margin-bottom: 40px; }
  .xl-p-40 { padding: 40px; }
  .xl-gap-40 { gap: 40px; }
  .xl-mt-48 { margin-top: 48px; }
  .xl-mb-48 { margin-bottom: 48px; }
  .xl-p-48 { padding: 48px; }
  .xl-gap-48 { gap: 48px; }
}

@media (max-width: 1023px) {
  .hide-lg { display: none !important; }
  .lg-block { display: block !important; }
  .lg-flex { display: flex !important; }
  .lg-grid { display: grid !important; }
  .lg-gtc-1 { grid-template-columns: minmax(0, 1fr); }
  .lg-gtc-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-gtc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg-fd-col { flex-direction: column; }
  .lg-ta-l { text-align: left; }
  .lg-ta-c { text-align: center; }
  .lg-w-100 { width: 100%; }
  .lg-gc-full { grid-column: 1 / -1; }
  .lg-mt-0 { margin-top: 0px; }
  .lg-mb-0 { margin-bottom: 0px; }
  .lg-p-0 { padding: 0px; }
  .lg-gap-0 { gap: 0px; }
  .lg-mt-8 { margin-top: 8px; }
  .lg-mb-8 { margin-bottom: 8px; }
  .lg-p-8 { padding: 8px; }
  .lg-gap-8 { gap: 8px; }
  .lg-mt-12 { margin-top: 12px; }
  .lg-mb-12 { margin-bottom: 12px; }
  .lg-p-12 { padding: 12px; }
  .lg-gap-12 { gap: 12px; }
  .lg-mt-16 { margin-top: 16px; }
  .lg-mb-16 { margin-bottom: 16px; }
  .lg-p-16 { padding: 16px; }
  .lg-gap-16 { gap: 16px; }
  .lg-mt-20 { margin-top: 20px; }
  .lg-mb-20 { margin-bottom: 20px; }
  .lg-p-20 { padding: 20px; }
  .lg-gap-20 { gap: 20px; }
  .lg-mt-24 { margin-top: 24px; }
  .lg-mb-24 { margin-bottom: 24px; }
  .lg-p-24 { padding: 24px; }
  .lg-gap-24 { gap: 24px; }
  .lg-mt-32 { margin-top: 32px; }
  .lg-mb-32 { margin-bottom: 32px; }
  .lg-p-32 { padding: 32px; }
  .lg-gap-32 { gap: 32px; }
  .lg-mt-40 { margin-top: 40px; }
  .lg-mb-40 { margin-bottom: 40px; }
  .lg-p-40 { padding: 40px; }
  .lg-gap-40 { gap: 40px; }
  .lg-mt-48 { margin-top: 48px; }
  .lg-mb-48 { margin-bottom: 48px; }
  .lg-p-48 { padding: 48px; }
  .lg-gap-48 { gap: 48px; }
}

@media (max-width: 819px) {
  .hide-md { display: none !important; }
  .md-block { display: block !important; }
  .md-flex { display: flex !important; }
  .md-grid { display: grid !important; }
  .md-gtc-1 { grid-template-columns: minmax(0, 1fr); }
  .md-gtc-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-gtc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md-fd-col { flex-direction: column; }
  .md-ta-l { text-align: left; }
  .md-ta-c { text-align: center; }
  .md-w-100 { width: 100%; }
  .md-gc-full { grid-column: 1 / -1; }
  .md-mt-0 { margin-top: 0px; }
  .md-mb-0 { margin-bottom: 0px; }
  .md-p-0 { padding: 0px; }
  .md-gap-0 { gap: 0px; }
  .md-mt-8 { margin-top: 8px; }
  .md-mb-8 { margin-bottom: 8px; }
  .md-p-8 { padding: 8px; }
  .md-gap-8 { gap: 8px; }
  .md-mt-12 { margin-top: 12px; }
  .md-mb-12 { margin-bottom: 12px; }
  .md-p-12 { padding: 12px; }
  .md-gap-12 { gap: 12px; }
  .md-mt-16 { margin-top: 16px; }
  .md-mb-16 { margin-bottom: 16px; }
  .md-p-16 { padding: 16px; }
  .md-gap-16 { gap: 16px; }
  .md-mt-20 { margin-top: 20px; }
  .md-mb-20 { margin-bottom: 20px; }
  .md-p-20 { padding: 20px; }
  .md-gap-20 { gap: 20px; }
  .md-mt-24 { margin-top: 24px; }
  .md-mb-24 { margin-bottom: 24px; }
  .md-p-24 { padding: 24px; }
  .md-gap-24 { gap: 24px; }
  .md-mt-32 { margin-top: 32px; }
  .md-mb-32 { margin-bottom: 32px; }
  .md-p-32 { padding: 32px; }
  .md-gap-32 { gap: 32px; }
  .md-mt-40 { margin-top: 40px; }
  .md-mb-40 { margin-bottom: 40px; }
  .md-p-40 { padding: 40px; }
  .md-gap-40 { gap: 40px; }
  .md-mt-48 { margin-top: 48px; }
  .md-mb-48 { margin-bottom: 48px; }
  .md-p-48 { padding: 48px; }
  .md-gap-48 { gap: 48px; }
}

@media (max-width: 639px) {
  .hide-sm { display: none !important; }
  .sm-block { display: block !important; }
  .sm-flex { display: flex !important; }
  .sm-grid { display: grid !important; }
  .sm-gtc-1 { grid-template-columns: minmax(0, 1fr); }
  .sm-gtc-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-gtc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm-fd-col { flex-direction: column; }
  .sm-ta-l { text-align: left; }
  .sm-ta-c { text-align: center; }
  .sm-w-100 { width: 100%; }
  .sm-gc-full { grid-column: 1 / -1; }
  .sm-mt-0 { margin-top: 0px; }
  .sm-mb-0 { margin-bottom: 0px; }
  .sm-p-0 { padding: 0px; }
  .sm-gap-0 { gap: 0px; }
  .sm-mt-8 { margin-top: 8px; }
  .sm-mb-8 { margin-bottom: 8px; }
  .sm-p-8 { padding: 8px; }
  .sm-gap-8 { gap: 8px; }
  .sm-mt-12 { margin-top: 12px; }
  .sm-mb-12 { margin-bottom: 12px; }
  .sm-p-12 { padding: 12px; }
  .sm-gap-12 { gap: 12px; }
  .sm-mt-16 { margin-top: 16px; }
  .sm-mb-16 { margin-bottom: 16px; }
  .sm-p-16 { padding: 16px; }
  .sm-gap-16 { gap: 16px; }
  .sm-mt-20 { margin-top: 20px; }
  .sm-mb-20 { margin-bottom: 20px; }
  .sm-p-20 { padding: 20px; }
  .sm-gap-20 { gap: 20px; }
  .sm-mt-24 { margin-top: 24px; }
  .sm-mb-24 { margin-bottom: 24px; }
  .sm-p-24 { padding: 24px; }
  .sm-gap-24 { gap: 24px; }
  .sm-mt-32 { margin-top: 32px; }
  .sm-mb-32 { margin-bottom: 32px; }
  .sm-p-32 { padding: 32px; }
  .sm-gap-32 { gap: 32px; }
  .sm-mt-40 { margin-top: 40px; }
  .sm-mb-40 { margin-bottom: 40px; }
  .sm-p-40 { padding: 40px; }
  .sm-gap-40 { gap: 40px; }
  .sm-mt-48 { margin-top: 48px; }
  .sm-mb-48 { margin-bottom: 48px; }
  .sm-p-48 { padding: 48px; }
  .sm-gap-48 { gap: 48px; }
}

@media (max-width: 419px) {
  .hide-xs { display: none !important; }
  .xs-block { display: block !important; }
  .xs-flex { display: flex !important; }
  .xs-grid { display: grid !important; }
  .xs-gtc-1 { grid-template-columns: minmax(0, 1fr); }
  .xs-gtc-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xs-gtc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xs-fd-col { flex-direction: column; }
  .xs-ta-l { text-align: left; }
  .xs-ta-c { text-align: center; }
  .xs-w-100 { width: 100%; }
  .xs-gc-full { grid-column: 1 / -1; }
  .xs-mt-0 { margin-top: 0px; }
  .xs-mb-0 { margin-bottom: 0px; }
  .xs-p-0 { padding: 0px; }
  .xs-gap-0 { gap: 0px; }
  .xs-mt-8 { margin-top: 8px; }
  .xs-mb-8 { margin-bottom: 8px; }
  .xs-p-8 { padding: 8px; }
  .xs-gap-8 { gap: 8px; }
  .xs-mt-12 { margin-top: 12px; }
  .xs-mb-12 { margin-bottom: 12px; }
  .xs-p-12 { padding: 12px; }
  .xs-gap-12 { gap: 12px; }
  .xs-mt-16 { margin-top: 16px; }
  .xs-mb-16 { margin-bottom: 16px; }
  .xs-p-16 { padding: 16px; }
  .xs-gap-16 { gap: 16px; }
  .xs-mt-20 { margin-top: 20px; }
  .xs-mb-20 { margin-bottom: 20px; }
  .xs-p-20 { padding: 20px; }
  .xs-gap-20 { gap: 20px; }
  .xs-mt-24 { margin-top: 24px; }
  .xs-mb-24 { margin-bottom: 24px; }
  .xs-p-24 { padding: 24px; }
  .xs-gap-24 { gap: 24px; }
  .xs-mt-32 { margin-top: 32px; }
  .xs-mb-32 { margin-bottom: 32px; }
  .xs-p-32 { padding: 32px; }
  .xs-gap-32 { gap: 32px; }
  .xs-mt-40 { margin-top: 40px; }
  .xs-mb-40 { margin-bottom: 40px; }
  .xs-p-40 { padding: 40px; }
  .xs-gap-40 { gap: 40px; }
  .xs-mt-48 { margin-top: 48px; }
  .xs-mb-48 { margin-bottom: 48px; }
  .xs-p-48 { padding: 48px; }
  .xs-gap-48 { gap: 48px; }
}

@media (min-width: 640px) {
  .show-from-sm { display: block; }
  .hide-from-sm { display: none !important; }
}

@media (min-width: 820px) {
  .show-from-md { display: block; }
  .hide-from-md { display: none !important; }
}

@media (min-width: 1024px) {
  .show-from-lg { display: block; }
  .hide-from-lg { display: none !important; }
}

@media (min-width: 1280px) {
  .show-from-xl { display: block; }
  .hide-from-xl { display: none !important; }
}

/* ==========================================================================
   10. Темизация: индивидуальная палитра каждого из 304 городов
   Цвета дублируют inline-переменные из <head> и служат резервом,
   если инлайновые стили будут вырезаны оптимизатором.
   Контраст белого текста на акценте — не ниже 4.5:1 (WCAG AA).
   ========================================================================== */

/* Московский */
body.city-moskovskiy {
  --acc: #6B362E;
  --acc-dark: #4F231C;
  --pine: #28523D;
  --acc-soft: #F3E5E2;
}
/* Раменское */
body.city-ramenskoe {
  --acc: #8B463C;
  --acc-dark: #713228;
  --pine: #2A5B48;
  --acc-soft: #F3E5E2;
}
/* Свердловский */
body.city-sverdlovskiy {
  --acc: #79392F;
  --acc-dark: #5D261D;
  --pine: #2B6455;
  --acc-soft: #F4E4E2;
}
/* Пески */
body.city-peski {
  --acc: #9A493C;
  --acc-dark: #803428;
  --pine: #2C6D64;
  --acc-soft: #F4E4E2;
}
/* Кратово */
body.city-kratovo {
  --acc: #883B30;
  --acc-dark: #6B291E;
  --pine: #2C7775;
  --acc-soft: #F4E4E1;
}
/* Подольск */
body.city-podolsk {
  --acc: #803428;
  --acc-dark: #622218;
  --pine: #2C7A81;
  --acc-soft: #F4E4E1;
}
/* Жуковский */
body.city-zhukovskiy {
  --acc: #A34233;
  --acc-dark: #872F22;
  --pine: #2A5541;
  --acc-soft: #F4E4E1;
}
/* Калининец */
body.city-kalininec {
  --acc: #8F3628;
  --acc-dark: #712519;
  --pine: #2B5E4C;
  --acc-soft: #F4E4E1;
}
/* Одинцово */
body.city-odincovo {
  --acc: #7A2B1F;
  --acc-dark: #5A1B11;
  --pine: #2C685A;
  --acc-soft: #F4E4E1;
}
/* Домодедово */
body.city-domodedovo {
  --acc: #AB3C2B;
  --acc-dark: #8D2A1B;
  --pine: #2D7169;
  --acc-soft: #F4E4E1;
}
/* Сергиев Посад */
body.city-sergiev-posad {
  --acc: #814237;
  --acc-dark: #662E24;
  --pine: #2D7B7B;
  --acc-soft: #F3E5E2;
}
/* Воскресенск */
body.city-voskresensk {
  --acc: #6E352B;
  --acc-dark: #51221A;
  --pine: #1F545B;
  --acc-soft: #F4E4E2;
}
/* Мытищи */
body.city-mytischi {
  --acc: #8F4538;
  --acc-dark: #743125;
  --pine: #2C5945;
  --acc-soft: #F4E4E2;
}
/* Чехов */
body.city-chehov {
  --acc: #7D382C;
  --acc-dark: #5F251B;
  --pine: #2D6251;
  --acc-soft: #F4E4E1;
}
/* Клин */
body.city-klin {
  --acc: #743125;
  --acc-dark: #561F15;
  --pine: #2E6B5F;
  --acc-soft: #F4E4E1;
}
/* Дмитров */
body.city-dmitrov {
  --acc: #973F30;
  --acc-dark: #7A2C1F;
  --pine: #2F756F;
  --acc-soft: #F4E4E1;
}
/* Балашиха */
body.city-balashiha {
  --acc: #833325;
  --acc-dark: #642216;
  --pine: #2F7C7F;
  --acc-soft: #F4E4E1;
}
/* Серпухов */
body.city-serpuhov {
  --acc: #A7412F;
  --acc-dark: #8A2E1E;
  --pine: #21565F;
  --acc-soft: #F4E4E1;
}
/* Истра */
body.city-istra {
  --acc: #9F3A28;
  --acc-dark: #812818;
  --pine: #2D5C4A;
  --acc-soft: #F4E4E1;
}
/* Щёлково */
body.city-schelkovo {
  --acc: #763E32;
  --acc-dark: #5B2A20;
  --pine: #2F6556;
  --acc-soft: #F3E5E2;
}
/* Ногинск */
body.city-noginsk {
  --acc: #964F40;
  --acc-dark: #7D392C;
  --pine: #2F6F64;
  --acc-soft: #F3E5E2;
}
/* Пушкино */
body.city-pushkino {
  --acc: #844133;
  --acc-dark: #692D21;
  --pine: #307875;
  --acc-soft: #F4E5E2;
}
/* Чёрное */
body.city-chernoe {
  --acc: #713428;
  --acc-dark: #542218;
  --pine: #215659;
  --acc-soft: #F4E4E1;
}
/* Люберцы */
body.city-lubercy {
  --acc: #9F4938;
  --acc-dark: #833525;
  --pine: #226343;
  --acc-soft: #F4E4E1;
}
/* Зеленоград */
body.city-zelenograd {
  --acc: #8C3C2C;
  --acc-dark: #6E291C;
  --pine: #2F604E;
  --acc-soft: #F4E4E1;
}
/* Химки */
body.city-himki {
  --acc: #773022;
  --acc-dark: #581F13;
  --pine: #30695B;
  --acc-soft: #F4E4E1;
}
/* Электросталь */
body.city-elektrostal {
  --acc: #9B3E2C;
  --acc-dark: #7D2C1C;
  --pine: #31726A;
  --acc-soft: #F4E4E1;
}
/* Сходня */
body.city-shodnya {
  --acc: #933725;
  --acc-dark: #742616;
  --pine: #317C7B;
  --acc-soft: #F4E4E1;
}
/* Можайск */
body.city-mozhaysk {
  --acc: #6B392E;
  --acc-dark: #4F251C;
  --pine: #22575D;
  --acc-soft: #F3E5E2;
}
/* Железнодорожный */
body.city-zheleznodorozhniy {
  --acc: #8B4A3C;
  --acc-dark: #713528;
  --pine: #236748;
  --acc-soft: #F3E5E2;
}
/* Новинки */
body.city-novinki {
  --acc: #793D2F;
  --acc-dark: #5D291D;
  --pine: #316352;
  --acc-soft: #F4E5E2;
}
/* Удельная */
body.city-udelnaya {
  --acc: #713528;
  --acc-dark: #542318;
  --pine: #326C60;
  --acc-soft: #F4E5E1;
}
/* Ивантеевка */
body.city-ivanteevka {
  --acc: #934534;
  --acc-dark: #773122;
  --pine: #32766F;
  --acc-soft: #F4E5E1;
}
/* Солнечногорск */
body.city-solnechnogorsk {
  --acc: #803828;
  --acc-dark: #622618;
  --pine: #235758;
  --acc-soft: #F4E5E1;
}
/* Ступино */
body.city-stupino {
  --acc: #A34833;
  --acc-dark: #873422;
  --pine: #245961;
  --acc-soft: #F4E5E1;
}
/* Апрелевка */
body.city-aprelevka {
  --acc: #8F3B28;
  --acc-dark: #712919;
  --pine: #246A4D;
  --acc-soft: #F4E5E1;
}
/* Лобня */
body.city-lobnya {
  --acc: #873422;
  --acc-dark: #672314;
  --pine: #326757;
  --acc-soft: #F4E5E1;
}
/* Королёв */
body.city-korolev {
  --acc: #AB422B;
  --acc-dark: #8D301B;
  --pine: #337065;
  --acc-soft: #F4E5E1;
}
/* Волоколамск */
body.city-volokolamsk {
  --acc: #814637;
  --acc-dark: #663124;
  --pine: #347975;
  --acc-soft: #F3E6E2;
}
/* Лесной */
body.city-lesnoy {
  --acc: #6E382B;
  --acc-dark: #51251A;
  --pine: #24585B;
  --acc-soft: #F4E5E2;
}
/* Октябрьский */
body.city-oktyabrskiy {
  --acc: #9A4F3C;
  --acc-dark: #803A28;
  --pine: #256545;
  --acc-soft: #F4E5E2;
}
/* Реутов */
body.city-reutov {
  --acc: #884130;
  --acc-dark: #6B2E1E;
  --pine: #266E52;
  --acc-soft: #F4E5E1;
}
/* Северный */
body.city-severniy {
  --acc: #743525;
  --acc-dark: #562215;
  --pine: #346A5C;
  --acc-soft: #F4E5E1;
}
/* Архангельское */
body.city-arhangelskoe {
  --acc: #974430;
  --acc-dark: #7A311F;
  --pine: #35736A;
  --acc-soft: #F4E5E1;
}
/* Троицк */
body.city-troick {
  --acc: #833825;
  --acc-dark: #642616;
  --pine: #255654;
  --acc-soft: #F4E5E1;
}
/* Газопровод */
body.city-gazoprovod {
  --acc: #7A311F;
  --acc-dark: #5A2011;
  --pine: #265A5F;
  --acc-soft: #F4E5E1;
}
/* Дубна */
body.city-dubna {
  --acc: #9F4028;
  --acc-dark: #812D18;
  --pine: #27684A;
  --acc-soft: #F4E5E1;
}
/* Орехово-Зуево */
body.city-orehovo-zuevo {
  --acc: #764132;
  --acc-dark: #5B2D20;
  --pine: #277258;
  --acc-soft: #F3E6E2;
}
/* Егорьевск */
body.city-egorevsk {
  --acc: #965340;
  --acc-dark: #7D3D2C;
  --pine: #366D60;
  --acc-soft: #F3E6E2;
}
/* Красногорск */
body.city-krasnogorsk {
  --acc: #8F4B38;
  --acc-dark: #743625;
  --pine: #37776F;
  --acc-soft: #F4E6E2;
}
/* Видное */
body.city-vidnoe {
  --acc: #7D3D2C;
  --acc-dark: #5F2A1B;
  --pine: #265959;
  --acc-soft: #F4E5E1;
}
/* Долгопрудный */
body.city-dolgoprudniy {
  --acc: #9F4E38;
  --acc-dark: #833925;
  --pine: #275C62;
  --acc-soft: #F4E5E1;
}
/* Кашира */
body.city-kashira {
  --acc: #8C412C;
  --acc-dark: #6E2D1C;
  --pine: #286C4E;
  --acc-soft: #F4E5E1;
}
/* Дзержинский */
body.city-dzerzhinskiy {
  --acc: #833925;
  --acc-dark: #642716;
  --pine: #28765D;
  --acc-soft: #F4E5E1;
}
/* Руза */
body.city-ruza {
  --acc: #A7492F;
  --acc-dark: #8A361E;
  --pine: #387165;
  --acc-soft: #F4E5E1;
}
/* Бронницы */
body.city-bronnicy {
  --acc: #933D25;
  --acc-dark: #742A16;
  --pine: #275450;
  --acc-soft: #F4E5E1;
}
/* Павловская слобода */
body.city-pavlovskaya-sloboda {
  --acc: #6B3C2E;
  --acc-dark: #4F281C;
  --pine: #285B5D;
  --acc-soft: #F3E6E2;
}
/* Киевский */
body.city-kievskiy {
  --acc: #8B4E3C;
  --acc-dark: #713928;
  --pine: #295D66;
  --acc-soft: #F3E6E2;
}
/* Нахабино */
body.city-nahabino {
  --acc: #844633;
  --acc-dark: #693221;
  --pine: #297054;
  --acc-soft: #F4E6E2;
}
/* Фрязино */
body.city-fryazino {
  --acc: #713928;
  --acc-dark: #542618;
  --pine: #2A7A63;
  --acc-soft: #F4E6E1;
}
/* Наро-Фоминск */
body.city-naro-fominsk {
  --acc: #934A34;
  --acc-dark: #773622;
  --pine: #39746A;
  --acc-soft: #F4E6E1;
}
/* Первомайское */
body.city-pervomayskoe {
  --acc: #803D28;
  --acc-dark: #622A18;
  --pine: #285755;
  --acc-soft: #F4E6E1;
}
/* Хотьково */
body.city-hotkovo {
  --acc: #773622;
  --acc-dark: #582313;
  --pine: #295D60;
  --acc-soft: #F4E6E1;
}
/* Луховицы */
body.city-luhovicy {
  --acc: #9B462C;
  --acc-dark: #7D321C;
  --pine: #2A6A4B;
  --acc-soft: #F4E6E1;
}
/* Шаховская */
body.city-shahovskaya {
  --acc: #873922;
  --acc-dark: #672714;
  --pine: #2B7359;
  --acc-soft: #F4E6E1;
}
/* Бутово */
body.city-butovo {
  --acc: #AB492B;
  --acc-dark: #8D361B;
  --pine: #2B7D69;
  --acc-soft: #F4E6E1;
}
/* Электроугли */
body.city-elektrougli {
  --acc: #814937;
  --acc-dark: #663424;
  --pine: #28524C;
  --acc-soft: #F3E7E2;
}
/* Купавна */
body.city-kupavna {
  --acc: #79422F;
  --acc-dark: #5D2D1D;
  --pine: #2A5B5A;
  --acc-soft: #F4E6E2;
}
/* Малаховка */
body.city-malahovka {
  --acc: #9A543C;
  --acc-dark: #803E28;
  --pine: #2B5E64;
  --acc-soft: #F4E6E2;
}
/* Речицы */
body.city-rechicy {
  --acc: #884630;
  --acc-dark: #6B321E;
  --pine: #2C6D50;
  --acc-soft: #F4E6E1;
}
/* Восточный */
body.city-vostochniy {
  --acc: #743925;
  --acc-dark: #562515;
  --pine: #2C775E;
  --acc-soft: #F4E6E1;
}
/* Лобаново */
body.city-lobanovo {
  --acc: #A34F33;
  --acc-dark: #873B22;
  --pine: #2C816F;
  --acc-soft: #F4E6E1;
}
/* Звенигород */
body.city-zvenigorod {
  --acc: #8F4228;
  --acc-dark: #712F19;
  --pine: #2A5551;
  --acc-soft: #F4E6E1;
}
/* Кубинка */
body.city-kubinka {
  --acc: #7A361F;
  --acc-dark: #5A2311;
  --pine: #2B5D5E;
  --acc-soft: #F4E6E1;
}
/* Павловский Посад */
body.city-pavlovskiy-posad {
  --acc: #9F4628;
  --acc-dark: #813218;
  --pine: #2C6068;
  --acc-soft: #F4E6E1;
}
/* Старая Купавна */
body.city-staraya-kupavna {
  --acc: #814B37;
  --acc-dark: #663524;
  --pine: #2D7155;
  --acc-soft: #F3E7E2;
}
/* Красноармейск */
body.city-krasnoarmeysk {
  --acc: #6E3D2B;
  --acc-dark: #51291A;
  --pine: #2D7B64;
  --acc-soft: #F4E6E2;
}
/* Тупиково */
body.city-tupikovo {
  --acc: #8F4F38;
  --acc-dark: #743A25;
  --pine: #1F5B50;
  --acc-soft: #F4E6E2;
}
/* Шатура */
body.city-shatura {
  --acc: #7D412C;
  --acc-dark: #5F2D1B;
  --pine: #2C5956;
  --acc-soft: #F4E6E1;
}
/* Щербинка */
body.city-scherbinka {
  --acc: #9F5338;
  --acc-dark: #833E25;
  --pine: #2D5F62;
  --acc-soft: #F4E6E1;
}
/* Климовск */
body.city-klimovsk {
  --acc: #974B30;
  --acc-dark: #7A371F;
  --pine: #2E6B4D;
  --acc-soft: #F4E6E1;
}
/* Некрасовский */
body.city-nekrasovskiy {
  --acc: #833E25;
  --acc-dark: #642B16;
  --pine: #2F755A;
  --acc-soft: #F4E6E1;
}
/* Бородино */
body.city-borodino {
  --acc: #A74F2F;
  --acc-dark: #8A3B1E;
  --pine: #2F7F69;
  --acc-soft: #F4E6E1;
}
/* Талдом */
body.city-taldom {
  --acc: #934225;
  --acc-dark: #742F16;
  --pine: #215F56;
  --acc-soft: #F4E6E1;
}
/* Икша */
body.city-iksha {
  --acc: #764632;
  --acc-dark: #5B3020;
  --pine: #2D5C5B;
  --acc-soft: #F3E7E2;
}
/* Красная Пахра */
body.city-krasnaya-pahra {
  --acc: #965940;
  --acc-dark: #7D432C;
  --pine: #2F6165;
  --acc-soft: #F3E7E2;
}
/* Куровское */
body.city-kurovskoe {
  --acc: #844A33;
  --acc-dark: #693521;
  --pine: #2F6F51;
  --acc-soft: #F4E7E2;
}
/* Ликино-Дулёво */
body.city-likino-dulevo {
  --acc: #713D28;
  --acc-dark: #542918;
  --pine: #30785F;
  --acc-soft: #F4E7E1;
}
/* Лопатинский */
body.city-lopatinskiy {
  --acc: #934F34;
  --acc-dark: #773A22;
  --pine: #21594C;
  --acc-soft: #F4E7E1;
}
/* Михнево */
body.city-mihnevo {
  --acc: #8C472C;
  --acc-dark: #6E331C;
  --pine: #22635B;
  --acc-soft: #F4E7E1;
}
/* Софрино */
body.city-sofrino {
  --acc: #773A22;
  --acc-dark: #582713;
  --pine: #2F6060;
  --acc-soft: #F4E7E1;
}
/* Черноголовка */
body.city-chernogolovka {
  --acc: #9B4B2C;
  --acc-dark: #7D371C;
  --pine: #306269;
  --acc-soft: #F4E7E1;
}
/* Электрогорск */
body.city-elektrogorsk {
  --acc: #873E22;
  --acc-dark: #672B14;
  --pine: #317256;
  --acc-soft: #F4E7E1;
}
/* Пролетарский */
body.city-proletarskiy {
  --acc: #6B402E;
  --acc-dark: #4F2B1C;
  --pine: #317C64;
  --acc-soft: #F3E7E2;
}
/* Лотошино */
body.city-lotoshino {
  --acc: #8B543C;
  --acc-dark: #713E28;
  --pine: #225D51;
  --acc-soft: #F3E7E2;
}
/* Молодёжный */
body.city-molodezhniy {
  --acc: #79452F;
  --acc-dark: #5D301D;
  --pine: #236761;
  --acc-soft: #F4E7E2;
}
/* Солнцево */
body.city-solncevo {
  --acc: #9A583C;
  --acc-dark: #804328;
  --pine: #316163;
  --acc-soft: #F4E7E2;
}
/* Барыбино */
body.city-barybino {
  --acc: #935034;
  --acc-dark: #773B22;
  --pine: #32646C;
  --acc-soft: #F4E7E1;
}
/* Внуково */
body.city-vnukovo {
  --acc: #804328;
  --acc-dark: #622F18;
  --pine: #32765B;
  --acc-soft: #F4E7E1;
}
/* Константиново */
body.city-konstantinovo {
  --acc: #A35533;
  --acc-dark: #874022;
  --pine: #235849;
  --acc-soft: #F4E7E1;
}
/* Молоково */
body.city-molokovo {
  --acc: #8F4728;
  --acc-dark: #713319;
  --pine: #246157;
  --acc-soft: #F4E7E1;
}
/* Яхрома */
body.city-yahroma {
  --acc: #7A3A1F;
  --acc-dark: #5A2711;
  --pine: #246A67;
  --acc-soft: #F4E7E1;
}
/* Быково */
body.city-bykovo {
  --acc: #AB512B;
  --acc-dark: #8D3D1B;
  --pine: #326367;
  --acc-soft: #F4E7E1;
}
/* Дубки */
body.city-dubki {
  --acc: #814E37;
  --acc-dark: #663924;
  --pine: #337053;
  --acc-soft: #F3E8E2;
}
/* Обухово */
body.city-obuhovo {
  --acc: #6E402B;
  --acc-dark: #512B1A;
  --pine: #347960;
  --acc-soft: #F4E7E2;
}
/* Протвино */
body.city-protvino {
  --acc: #8F5338;
  --acc-dark: #743E25;
  --pine: #245B4D;
  --acc-soft: #F4E7E2;
}
/* Богородское */
body.city-bogorodskoe {
  --acc: #884C30;
  --acc-dark: #6B371E;
  --pine: #25655C;
  --acc-soft: #F4E7E1;
}
/* Запрудня */
body.city-zaprudnya {
  --acc: #743E25;
  --acc-dark: #562A15;
  --pine: #266E6D;
  --acc-soft: #F4E7E1;
}
/* Тучково */
body.city-tuchkovo {
  --acc: #975030;
  --acc-dark: #7A3C1F;
  --pine: #34656A;
  --acc-soft: #F4E7E1;
}
/* Уваровка */
body.city-uvarovka {
  --acc: #834325;
  --acc-dark: #642F16;
  --pine: #357357;
  --acc-soft: #F4E7E1;
}
/* Верея */
body.city-vereya {
  --acc: #A7552F;
  --acc-dark: #8A401E;
  --pine: #255645;
  --acc-soft: #F4E7E1;
}
/* Некрасовка */
body.city-nekrasovka {
  --acc: #9F4E28;
  --acc-dark: #813918;
  --pine: #265F52;
  --acc-soft: #F4E7E1;
}
/* Яковлевское */
body.city-yakovlevskoe {
  --acc: #764932;
  --acc-dark: #5B3320;
  --pine: #276862;
  --acc-soft: #F3E8E2;
}
/* Ашукино */
body.city-ashukino {
  --acc: #965D40;
  --acc-dark: #7D472C;
  --pine: #277172;
  --acc-soft: #F3E8E2;
}
/* Вербилки */
body.city-verbilki {
  --acc: #844E33;
  --acc-dark: #693921;
  --pine: #36666D;
  --acc-soft: #F4E8E2;
}
/* Поварово */
body.city-povarovo {
  --acc: #7D472C;
  --acc-dark: #5F321B;
  --pine: #37775C;
  --acc-soft: #F4E7E1;
}
/* Красково */
body.city-kraskovo {
  --acc: #9F5A38;
  --acc-dark: #834425;
  --pine: #26594A;
  --acc-soft: #F4E7E1;
}
/* Рошаль */
body.city-roshal {
  --acc: #8C4C2C;
  --acc-dark: #6E371C;
  --pine: #276258;
  --acc-soft: #F4E7E1;
}
/* Селятино */
body.city-selyatino {
  --acc: #773E22;
  --acc-dark: #582A13;
  --pine: #286C67;
  --acc-soft: #F4E7E1;
}
/* Троицкое */
body.city-troickoe {
  --acc: #A7572F;
  --acc-dark: #8A421E;
  --pine: #287276;
  --acc-soft: #F4E7E1;
}
/* Белые Столбы */
body.city-belye-stolby {
  --acc: #934925;
  --acc-dark: #743516;
  --pine: #387154;
  --acc-soft: #F4E7E1;
}
/* Вороново */
body.city-voronovo {
  --acc: #6B432E;
  --acc-dark: #4F2E1C;
  --pine: #275442;
  --acc-soft: #F3E8E2;
}
/* Котельники */
body.city-kotelniki {
  --acc: #8B583C;
  --acc-dark: #714128;
  --pine: #285D4F;
  --acc-soft: #F3E8E2;
}
/* Краснознаменск */
body.city-krasnoznamensk {
  --acc: #79492F;
  --acc-dark: #5D341D;
  --pine: #29665D;
  --acc-soft: #F4E8E2;
}
/* Островцы */
body.city-ostrovcy {
  --acc: #714128;
  --acc-dark: #542D18;
  --pine: #29706D;
  --acc-soft: #F4E8E1;
}
/* Томилино */
body.city-tomilino {
  --acc: #935534;
  --acc-dark: #774022;
  --pine: #2A737A;
  --acc-soft: #F4E8E1;
}
/* Юпитер */
body.city-upiter {
  --acc: #804728;
  --acc-dark: #623218;
  --pine: #397459;
  --acc-soft: #F4E8E1;
}
/* Дедовск */
body.city-dedovsk {
  --acc: #A35A33;
  --acc-dark: #874522;
  --pine: #285747;
  --acc-soft: #F4E8E1;
}
/* Дорохово */
body.city-dorohovo {
  --acc: #9B532C;
  --acc-dark: #7D3E1C;
  --pine: #296054;
  --acc-soft: #F4E8E1;
}
/* Зарайск */
body.city-zaraysk {
  --acc: #874522;
  --acc-dark: #673114;
  --pine: #2A6A62;
  --acc-soft: #F4E8E1;
}
/* Заречье */
body.city-zarechie {
  --acc: #AB582B;
  --acc-dark: #8D431B;
  --pine: #2B7373;
  --acc-soft: #F4E8E1;
}
/* Зеленоградский */
body.city-zelenogradskiy {
  --acc: #815237;
  --acc-dark: #663C24;
  --pine: #2B747D;
  --acc-soft: #F3E8E2;
}
/* Коренево */
body.city-korenevo {
  --acc: #6E442B;
  --acc-dark: #512E1A;
  --pine: #285240;
  --acc-soft: #F4E8E2;
}
/* Пущино */
body.city-pushino {
  --acc: #9A5F3C;
  --acc-dark: #804828;
  --pine: #2A5B4B;
  --acc-soft: #F4E8E2;
}
/* Рождествено */
body.city-rozhdestveno {
  --acc: #885030;
  --acc-dark: #6B3B1E;
  --pine: #2B6459;
  --acc-soft: #F4E8E1;
}
/* Серебряные Пруды */
body.city-serebryannye-prudy {
  --acc: #744225;
  --acc-dark: #562D15;
  --pine: #2C6D68;
  --acc-soft: #F4E8E1;
}
/* Фосфоритный */
body.city-fosforitniy {
  --acc: #975630;
  --acc-dark: #7A401F;
  --pine: #2C7577;
  --acc-soft: #F4E8E1;
}
/* Авсюнино */
body.city-avsunino {
  --acc: #8F4E28;
  --acc-dark: #713919;
  --pine: #2C7481;
  --acc-soft: #F4E8E1;
}
/* Высоковск */
body.city-vysokovsk {
  --acc: #7A401F;
  --acc-dark: #5A2C11;
  --pine: #2A5544;
  --acc-soft: #F4E8E1;
}
/* Кокошкино */
body.city-kokoshkino {
  --acc: #9F5428;
  --acc-dark: #813F18;
  --pine: #2B5E50;
  --acc-soft: #F4E8E1;
}
/* Коммунарка */
body.city-kommunarka {
  --acc: #764C32;
  --acc-dark: #5B3620;
  --pine: #2C685E;
  --acc-soft: #F3E9E2;
}
/* Любучаны */
body.city-lubuchany {
  --acc: #6E452B;
  --acc-dark: #512F1A;
  --pine: #2D716E;
  --acc-soft: #F4E9E2;
}
/* Марфино */
body.city-marfino {
  --acc: #8F5938;
  --acc-dark: #744325;
  --pine: #2D767B;
  --acc-soft: #F4E9E2;
}
/* Монино */
body.city-monino {
  --acc: #7D4B2C;
  --acc-dark: #5F351B;
  --pine: #1F5B3E;
  --acc-soft: #F4E8E1;
}
/* Рассудово */
body.city-rassudovo {
  --acc: #9F5F38;
  --acc-dark: #834925;
  --pine: #2C5948;
  --acc-soft: #F4E8E1;
}
/* Столбовая */
body.city-stolbovaya {
  --acc: #8C512C;
  --acc-dark: #6E3B1C;
  --pine: #2D6255;
  --acc-soft: #F4E8E1;
}
/* Хорлово */
body.city-horlovo {
  --acc: #834925;
  --acc-dark: #643416;
  --pine: #2E6B63;
  --acc-soft: #F4E8E1;
}
/* Алабино */
body.city-alabino {
  --acc: #A75D2F;
  --acc-dark: #8A481E;
  --pine: #2F7574;
  --acc-soft: #F4E8E1;
}
/* Андреевка */
body.city-andreevka {
  --acc: #934F25;
  --acc-dark: #743A16;
  --pine: #2F777F;
  --acc-soft: #F4E8E1;
}
/* Барвиха */
body.city-barviha {
  --acc: #6B462E;
  --acc-dark: #4F301C;
  --pine: #215F43;
  --acc-soft: #F3E9E2;
}
/* Белоозёрский */
body.city-beloozerskiy {
  --acc: #966340;
  --acc-dark: #7D4C2C;
  --pine: #2D5C4D;
  --acc-soft: #F3E9E2;
}
/* Белоомут */
body.city-beloomut {
  --acc: #845433;
  --acc-dark: #693E21;
  --pine: #2F6559;
  --acc-soft: #F4E9E2;
}
/* Ватутинки */
body.city-vatutinki {
  --acc: #714528;
  --acc-dark: #543018;
  --pine: #2F6F68;
  --acc-soft: #F4E9E1;
}
/* Восход */
body.city-voshod {
  --acc: #935A34;
  --acc-dark: #774422;
  --pine: #307778;
  --acc-soft: #F4E9E1;
}
/* Горки Ленинские */
body.city-gorki-leninskie {
  --acc: #804B28;
  --acc-dark: #623618;
  --pine: #215259;
  --acc-soft: #F4E9E1;
}
/* Колюбакино */
body.city-kolubakino {
  --acc: #774422;
  --acc-dark: #582F13;
  --pine: #226348;
  --acc-soft: #F4E9E1;
}
/* Лукино */
body.city-lukino {
  --acc: #9B582C;
  --acc-dark: #7D431C;
  --pine: #2F6051;
  --acc-soft: #F4E9E1;
}
/* Новопетровское */
body.city-novopetrovskoe {
  --acc: #874A22;
  --acc-dark: #673514;
  --pine: #30695E;
  --acc-soft: #F4E9E1;
}
/* Ожерелье */
body.city-ozherelie {
  --acc: #AB5E2B;
  --acc-dark: #8D491B;
  --pine: #31726E;
  --acc-soft: #F4E9E1;
}
/* Развилка */
body.city-razvilka {
  --acc: #8B5D3C;
  --acc-dark: #714628;
  --pine: #31787C;
  --acc-soft: #F3E9E2;
}
/* Скоропусковский */
body.city-skoropuskovskiy {
  --acc: #794E2F;
  --acc-dark: #5D381D;
  --pine: #225D40;
  --acc-soft: #F4E9E2;
}
/* Успенское */
body.city-uspenskoe {
  --acc: #9A633C;
  --acc-dark: #804D28;
  --pine: #23674D;
  --acc-soft: #F4E9E2;
}
/* Фоминское */
body.city-fominskoe {
  --acc: #885430;
  --acc-dark: #6B3E1E;
  --pine: #316356;
  --acc-soft: #F4E9E1;
}
/* Демихово */
body.city-demihovo {
  --acc: #744625;
  --acc-dark: #563015;
  --pine: #326C64;
  --acc-soft: #F4E9E1;
}
/* Дрезна */
body.city-drezna {
  --acc: #A36233;
  --acc-dark: #874C22;
  --pine: #327674;
  --acc-soft: #F4E9E1;
}
/* Дружба */
body.city-druzhba {
  --acc: #8F5328;
  --acc-dark: #713E19;
  --pine: #235358;
  --acc-soft: #F4E9E1;
}
/* Косино */
body.city-kosino {
  --acc: #7A451F;
  --acc-dark: #5A2F11;
  --pine: #246144;
  --acc-soft: #F4E9E1;
}
/* Лунёво */
body.city-lunevo {
  --acc: #9F5A28;
  --acc-dark: #814418;
  --pine: #246A52;
  --acc-soft: #F4E9E1;
}
/* Лыткарино */
body.city-lytkarino {
  --acc: #815737;
  --acc-dark: #664024;
  --pine: #32675A;
  --acc-soft: #F3EAE2;
}
/* Полушкино */
body.city-polushkino {
  --acc: #6E482B;
  --acc-dark: #51321A;
  --pine: #337069;
  --acc-soft: #F4E9E2;
}
/* Мосрентген */
body.city-mosrentgen {
  --acc: #8F5E38;
  --acc-dark: #744725;
  --pine: #347979;
  --acc-soft: #F4E9E2;
}
/* Рогачёво */
body.city-rogachevo {
  --acc: #7D4F2C;
  --acc-dark: #5F391B;
  --pine: #24555B;
  --acc-soft: #F4E9E1;
}
/* Родники */
body.city-rodniki {
  --acc: #744725;
  --acc-dark: #563115;
  --pine: #256549;
  --acc-soft: #F4E9E1;
}
/* Рублёво */
body.city-rublevo {
  --acc: #975D30;
  --acc-dark: #7A461F;
  --pine: #266E57;
  --acc-soft: #F4E9E1;
}
/* Софьино */
body.city-sofino {
  --acc: #834E25;
  --acc-dark: #643816;
  --pine: #346A5F;
  --acc-soft: #F4E9E1;
}
/* Текстильщик */
body.city-tekstilshik {
  --acc: #A7632F;
  --acc-dark: #8A4D1E;
  --pine: #35736E;
  --acc-soft: #F4E9E1;
}
/* Фряново */
body.city-fryanovo {
  --acc: #935425;
  --acc-dark: #743F16;
  --pine: #255456;
  --acc-soft: #F4E9E1;
}
/* Екатеринбург */
body.city-ekaterinburg {
  --acc: #765132;
  --acc-dark: #5B3A20;
  --pine: #26565F;
  --acc-soft: #F3EAE2;
}
/* Новосибирск */
body.city-novosibirsk {
  --acc: #966740;
  --acc-dark: #7D502C;
  --pine: #27684E;
  --acc-soft: #F3EAE2;
}
/* Санкт-Петербург */
body.city-sankt-peterburg {
  --acc: #845833;
  --acc-dark: #694121;
  --pine: #27725D;
  --acc-soft: #F4EAE2;
}
/* Краснодар */
body.city-krasnodar {
  --acc: #714928;
  --acc-dark: #543318;
  --pine: #366D64;
  --acc-soft: #F4EAE1;
}
/* Тюмень */
body.city-tumen {
  --acc: #9F6638;
  --acc-dark: #834F25;
  --pine: #377774;
  --acc-soft: #F4EAE1;
}
/* Красноярск */
body.city-krasnoyarsk {
  --acc: #8C572C;
  --acc-dark: #6E411C;
  --pine: #265659;
  --acc-soft: #F4EAE1;
}
/* Челябинск */
body.city-chelyabinsk {
  --acc: #774822;
  --acc-dark: #583213;
  --pine: #276246;
  --acc-soft: #F4EAE1;
}
/* Владивосток */
body.city-vladivostok {
  --acc: #9B5E2C;
  --acc-dark: #7D481C;
  --pine: #286C53;
  --acc-soft: #F4EAE1;
}
/* Уфа */
body.city-ufa {
  --acc: #874F22;
  --acc-dark: #673914;
  --pine: #287662;
  --acc-soft: #F4EAE1;
}
/* Пермь */
body.city-perm {
  --acc: #6B4A2E;
  --acc-dark: #4F341C;
  --pine: #387169;
  --acc-soft: #F3EAE2;
}
/* Нижний Новгород */
body.city-nizhniy-novgorod {
  --acc: #8B613C;
  --acc-dark: #714A28;
  --pine: #275453;
  --acc-soft: #F3EAE2;
}
/* Воронеж */
body.city-voronezh {
  --acc: #79522F;
  --acc-dark: #5D3B1D;
  --pine: #28585D;
  --acc-soft: #F4EAE2;
}
/* Самара */
body.city-samara {
  --acc: #9A683C;
  --acc-dark: #805128;
  --pine: #29664A;
  --acc-soft: #F4EAE2;
}
/* Омск */
body.city-omsk {
  --acc: #936034;
  --acc-dark: #774A22;
  --pine: #297058;
  --acc-soft: #F4EAE1;
}
/* Ростов */
body.city-rostov {
  --acc: #805128;
  --acc-dark: #623B18;
  --pine: #2A7A68;
  --acc-soft: #F4EAE1;
}
/* Казань */
body.city-kazan {
  --acc: #A36733;
  --acc-dark: #875122;
  --pine: #39746E;
  --acc-soft: #F4EAE1;
}
/* Иркутск */
body.city-irkutsk {
  --acc: #8F5828;
  --acc-dark: #714219;
  --pine: #285757;
  --acc-soft: #F4EAE1;
}
/* Ярославль */
body.city-yaroslavl {
  --acc: #875122;
  --acc-dark: #673A14;
  --pine: #295960;
  --acc-soft: #F4EAE1;
}
/* Калининград */
body.city-kaliningrad {
  --acc: #6B4B2E;
  --acc-dark: #4F351C;
  --pine: #2A6A4F;
  --acc-soft: #F3EAE2;
}
/* Вологда */
body.city-vologda {
  --acc: #8B623C;
  --acc-dark: #714B28;
  --pine: #2B735E;
  --acc-soft: #F3EAE2;
}
/* Тверь */
body.city-tver {
  --acc: #79532F;
  --acc-dark: #5D3C1D;
  --pine: #2B7D6E;
  --acc-soft: #F4EAE2;
}
/* Сургут */
body.city-surgut {
  --acc: #9A6A3C;
  --acc-dark: #805328;
  --pine: #28524F;
  --acc-soft: #F4EAE2;
}
/* Тула */
body.city-tula {
  --acc: #936234;
  --acc-dark: #774B22;
  --pine: #2A585B;
  --acc-soft: #F4EAE1;
}
/* Томск */
body.city-tomsk {
  --acc: #805328;
  --acc-dark: #623C18;
  --pine: #2B6447;
  --acc-soft: #F4EAE1;
}
/* Ростов-на-Дону */
body.city-rostov-na-donu {
  --acc: #A36933;
  --acc-dark: #875222;
  --pine: #2C6D54;
  --acc-soft: #F4EAE1;
}
/* Хабаровск */
body.city-habarovsk {
  --acc: #8F5A28;
  --acc-dark: #714319;
  --pine: #2C7763;
  --acc-soft: #F4EAE1;
}
/* Киров */
body.city-kirov {
  --acc: #935A25;
  --acc-dark: #744316;
  --pine: #2C8174;
  --acc-soft: #F4EAE1;
}
/* Волгоград */
body.city-volgograd {
  --acc: #765432;
  --acc-dark: #5B3D20;
  --pine: #2A5554;
  --acc-soft: #F3EBE2;
}
/* Ижевск */
body.city-izhevsk {
  --acc: #966B40;
  --acc-dark: #7D542C;
  --pine: #2B5A5E;
  --acc-soft: #F3EBE2;
}
/* Саратов */
body.city-saratov {
  --acc: #845C33;
  --acc-dark: #694521;
  --pine: #2C684C;
  --acc-soft: #F4EBE2;
}
/* Оренбург */
body.city-orenburg {
  --acc: #714C28;
  --acc-dark: #543618;
  --pine: #2D7159;
  --acc-soft: #F4EBE1;
}
/* Петушки */
body.city-petushki {
  --acc: #9F6B38;
  --acc-dark: #835425;
  --pine: #2D7B69;
  --acc-soft: #F4EBE1;
}
/* Ульяновск */
body.city-ulyanovsk {
  --acc: #8C5C2C;
  --acc-dark: #6E451C;
  --pine: #1F5B54;
  --acc-soft: #F4EBE1;
}
/* Новокузнецк */
body.city-novokuzneck {
  --acc: #835425;
  --acc-dark: #643D16;
  --pine: #2C5959;
  --acc-soft: #F4EBE1;
}
/* Барнаул */
body.city-barnaul {
  --acc: #7A4C1F;
  --acc-dark: #5A3611;
  --pine: #2D5C62;
  --acc-soft: #F4EBE1;
}
/* Петрозаводск */
body.city-petrozavodsk {
  --acc: #6B4E2E;
  --acc-dark: #4F361C;
  --pine: #2E6B51;
  --acc-soft: #F3EBE2;
}
/* Калуга */
body.city-kaluga {
  --acc: #8B653C;
  --acc-dark: #714E28;
  --pine: #2F755E;
  --acc-soft: #F3EBE2;
}
/* Белгород */
body.city-belgorod {
  --acc: #79552F;
  --acc-dark: #5D3E1D;
  --pine: #2F7F6F;
  --acc-soft: #F4EBE2;
}
/* Рязань */
body.city-ryazan {
  --acc: #9A6D3C;
  --acc-dark: #805628;
  --pine: #215F5A;
  --acc-soft: #F4EBE2;
}
/* Советский */
body.city-sovetskiy {
  --acc: #936534;
  --acc-dark: #774E22;
  --pine: #2D5B5C;
  --acc-soft: #F4EBE1;
}
/* Курск */
body.city-kursk {
  --acc: #8C5D2C;
  --acc-dark: #6E461C;
  --pine: #2F5D65;
  --acc-soft: #F4EBE1;
}
/* Чебоксары */
body.city-cheboksary {
  --acc: #835625;
  --acc-dark: #643F16;
  --pine: #2F6F55;
  --acc-soft: #F4EBE1;
}
/* Владимир */
body.city-vladimir {
  --acc: #7A4E1F;
  --acc-dark: #5A3711;
  --pine: #307864;
  --acc-soft: #F4EBE1;
}
/* Архангельск */
body.city-arhangelsk {
  --acc: #9F6528;
  --acc-dark: #814E18;
  --pine: #215950;
  --acc-soft: #F4EBE1;
}
/* Кемерово */
body.city-kemerovo {
  --acc: #8B663C;
  --acc-dark: #714F28;
  --pine: #226360;
  --acc-soft: #F3EBE2;
}
/* Пенза */
body.city-penza {
  --acc: #79572F;
  --acc-dark: #5D3F1D;
  --pine: #2F5C60;
  --acc-soft: #F4EBE2;
}
/* Великий Новгород */
body.city-velikiy-novgorod {
  --acc: #714F28;
  --acc-dark: #543818;
  --pine: #30694D;
  --acc-soft: #F4EBE1;
}
/* Липецк */
body.city-lipeck {
  --acc: #936734;
  --acc-dark: #774F22;
  --pine: #31725A;
  --acc-soft: #F4EBE1;
}
/* Зима */
body.city-zima {
  --acc: #976730;
  --acc-dark: #7A501F;
  --pine: #317C69;
  --acc-soft: #F4EBE1;
}
/* Болотное */
body.city-bolotnoe {
  --acc: #8F5F28;
  --acc-dark: #714819;
  --pine: #225D55;
  --acc-soft: #F4EBE1;
}
/* Брянск */
body.city-bryansk {
  --acc: #875822;
  --acc-dark: #674014;
  --pine: #236765;
  --acc-soft: #F4EBE1;
}
/* Иваново */
body.city-ivanovo {
  --acc: #6B502E;
  --acc-dark: #4F381C;
  --pine: #315E63;
  --acc-soft: #F3EBE2;
}
/* Нижневартовск */
body.city-nizhnevartovsk {
  --acc: #8B673C;
  --acc-dark: #715028;
  --pine: #326C52;
  --acc-soft: #F3EBE2;
}
/* Ставрополь */
body.city-stavropol {
  --acc: #846033;
  --acc-dark: #694821;
  --pine: #32765F;
  --acc-soft: #F4EBE2;
}
/* Улан-Удэ */
body.city-ulan-ude {
  --acc: #7D582C;
  --acc-dark: #5F411B;
  --pine: #23584C;
  --acc-soft: #F4ECE1;
}
/* Новороссийск */
body.city-novorossiysk {
  --acc: #745025;
  --acc-dark: #563915;
  --pine: #24615B;
  --acc-soft: #F4ECE1;
}
/* Смоленск */
body.city-smolensk {
  --acc: #976930;
  --acc-dark: #7A511F;
  --pine: #24696A;
  --acc-soft: #F4ECE1;
}
/* Тамбов */
body.city-tambov {
  --acc: #9B692C;
  --acc-dark: #7D511C;
  --pine: #326067;
  --acc-soft: #F4ECE1;
}
/* Череповец */
body.city-cherepovec {
  --acc: #936125;
  --acc-dark: #744A16;
  --pine: #337057;
  --acc-soft: #F4ECE1;
}
/* Чита */
body.city-chita {
  --acc: #765932;
  --acc-dark: #5B4120;
  --pine: #347965;
  --acc-soft: #F3ECE2;
}
/* Сочи */
body.city-sochi {
  --acc: #6E512B;
  --acc-dark: #51391A;
  --pine: #245B51;
  --acc-soft: #F4ECE2;
}
/* Благовещенск */
body.city-blagoveshensk {
  --acc: #715128;
  --acc-dark: #543A18;
  --pine: #256560;
  --acc-soft: #F4ECE1;
}
/* Саранск */
body.city-saransk {
  --acc: #936A34;
  --acc-dark: #775222;
  --pine: #266B6E;
  --acc-soft: #F4ECE1;
}
/* Новый Уренгой */
body.city-noviy-urengoy {
  --acc: #8C622C;
  --acc-dark: #6E4A1C;
  --pine: #346A4F;
  --acc-soft: #F4ECE1;
}
/* Астрахань */
body.city-astrahan {
  --acc: #835A25;
  --acc-dark: #644216;
  --pine: #35735B;
  --acc-soft: #F4ECE1;
}
/* Тольятти */
body.city-tolyatti {
  --acc: #7A531F;
  --acc-dark: #5A3A11;
  --pine: #255649;
  --acc-soft: #F4ECE1;
}
/* Симферополь */
body.city-simferopol {
  --acc: #6B522E;
  --acc-dark: #4F3A1C;
  --pine: #265F56;
  --acc-soft: #F3ECE2;
}
/* Орёл */
body.city-orel {
  --acc: #8B6A3C;
  --acc-dark: #715328;
  --pine: #276866;
  --acc-soft: #F3ECE2;
}
/* Псков */
body.city-pskov {
  --acc: #846333;
  --acc-dark: #694B21;
  --pine: #276C72;
  --acc-soft: #F4ECE2;
}
/* Всеволожск */
body.city-vsevolzhsk {
  --acc: #7D5B2C;
  --acc-dark: #5F431B;
  --pine: #366D53;
  --acc-soft: #F4ECE1;
}
/* Магнитогорск */
body.city-magnitogorsk {
  --acc: #805B28;
  --acc-dark: #624318;
  --pine: #377760;
  --acc-soft: #F4ECE1;
}
/* Кострома */
body.city-kostroma {
  --acc: #775422;
  --acc-dark: #583B13;
  --pine: #26594D;
  --acc-soft: #F4ECE1;
}
/* Набережные Челны */
body.city-naberezhnye-chelny {
  --acc: #9B6D2C;
  --acc-dark: #7D551C;
  --pine: #27625C;
  --acc-soft: #F4ECE1;
}
/* Курган */
body.city-kurgan {
  --acc: #936525;
  --acc-dark: #744D16;
  --pine: #286C6C;
  --acc-soft: #F4ECE1;
}
/* Нижний Тагил */
body.city-nizhniy-tagil {
  --acc: #816337;
  --acc-dark: #664B24;
  --pine: #286D76;
  --acc-soft: #F3ECE2;
}
/* Мурманск */
body.city-murmansk {
  --acc: #846433;
  --acc-dark: #694C21;
  --pine: #387158;
  --acc-soft: #F4ECE2;
}
/* Севастополь */
body.city-sevastopol {
  --acc: #7D5C2C;
  --acc-dark: #5F441B;
  --pine: #275446;
  --acc-soft: #F4ECE1;
}
/* Тобольск */
body.city-tobolsk {
  --acc: #745425;
  --acc-dark: #563C15;
  --pine: #285D52;
  --acc-soft: #F4ECE1;
}
/* Старый Оскол */
body.city-stariy-oskol {
  --acc: #976E30;
  --acc-dark: #7A561F;
  --pine: #296661;
  --acc-soft: #F4ECE1;
}
/* Шахты */
body.city-shahty {
  --acc: #7A561F;
  --acc-dark: #5A3D11;
  --pine: #296D70;
  --acc-soft: #F4ECE1;
}
/* Прокопьевск */
body.city-prokopevsk {
  --acc: #6B542E;
  --acc-dark: #4F3C1C;
  --pine: #2A6E7A;
  --acc-soft: #F3EDE2;
}
/* Йошкар-Ола */
body.city-yoshkar-ola {
  --acc: #8B6D3C;
  --acc-dark: #715528;
  --pine: #39745D;
  --acc-soft: #F3EDE2;
}
/* Приморск */
body.city-primorsk {
  --acc: #846533;
  --acc-dark: #694D21;
  --pine: #28574A;
  --acc-soft: #F4EDE2;
}
/* Нея */
body.city-neya {
  --acc: #886630;
  --acc-dark: #6B4E1E;
  --pine: #296057;
  --acc-soft: #F4EDE1;
}
/* Абакан */
body.city-abakan {
  --acc: #805E28;
  --acc-dark: #624618;
  --pine: #2A6A67;
  --acc-soft: #F4EDE1;
}
/* Выборг */
body.city-vyborg {
  --acc: #835F25;
  --acc-dark: #644616;
  --pine: #2B6F73;
  --acc-soft: #F4EDE1;
}
/* Нефтеюганск */
body.city-nefteugansk {
  --acc: #876022;
  --acc-dark: #674714;
  --pine: #2B7D56;
  --acc-soft: #F4EDE1;
}
/* Анапа */
body.city-anapa {
  --acc: #765D32;
  --acc-dark: #5B4520;
  --pine: #285243;
  --acc-soft: #F3EDE2;
}
/* Гатчина */
body.city-gatchina {
  --acc: #795E2F;
  --acc-dark: #5D461D;
  --pine: #2A5B4F;
  --acc-soft: #F4EDE2;
}
/* Сыктывкар */
body.city-syktyvkar {
  --acc: #715628;
  --acc-dark: #543E18;
  --pine: #2B645C;
  --acc-soft: #F4EDE1;
}
/* Магадан */
body.city-magadan {
  --acc: #937034;
  --acc-dark: #775822;
  --pine: #2C6D6C;
  --acc-soft: #F4EDE1;
}
/* Энгельс */
body.city-engels {
  --acc: #8C692C;
  --acc-dark: #6E501C;
  --pine: #2C7077;
  --acc-soft: #F4EDE1;
}
/* Первоуральск */
body.city-pervouralsk {
  --acc: #7A591F;
  --acc-dark: #5A3F11;
  --pine: #2C815B;
  --acc-soft: #F4EDE1;
}
/* Стерлитамак */
body.city-sterlitamak {
  --acc: #6B562E;
  --acc-dark: #4F3D1C;
  --pine: #2A5547;
  --acc-soft: #F3EDE2;
}
/* Волжский */
body.city-volzhskiy {
  --acc: #8B6F3C;
  --acc-dark: #715828;
  --pine: #2B5E53;
  --acc-soft: #F3EDE2;
}
/* Колпино */
body.city-kolpino {
  --acc: #846833;
  --acc-dark: #695021;
  --pine: #2C6862;
  --acc-soft: #F4EDE2;
}
/* Уссурийск */
body.city-ussuriysk {
  --acc: #7D602C;
  --acc-dark: #5F471B;
  --pine: #2D7071;
  --acc-soft: #F4EDE1;
}
/* Березники */
body.city-berezniki {
  --acc: #8C6A2C;
  --acc-dark: #6E511C;
  --pine: #2D717B;
  --acc-soft: #F4EDE1;
}
/* Нижнекамск */
body.city-nizhnekamsk {
  --acc: #8F6B28;
  --acc-dark: #715219;
  --pine: #1F5B42;
  --acc-soft: #F4EDE1;
}
/* Ачинск */
body.city-achinsk {
  --acc: #936C25;
  --acc-dark: #745316;
  --pine: #2C594B;
  --acc-soft: #F4EDE1;
}
/* Армавир */
body.city-armavir {
  --acc: #816837;
  --acc-dark: #665024;
  --pine: #2D6258;
  --acc-soft: #F3EDE2;
}
/* Артём */
body.city-artem {
  --acc: #846933;
  --acc-dark: #695121;
  --pine: #2E6B67;
  --acc-soft: #F4EEE2;
}
/* Находка */
body.city-nahodka {
  --acc: #7D622C;
  --acc-dark: #5F491B;
  --pine: #2F7175;
  --acc-soft: #F4EEE1;
}
/* Белово */
body.city-belovo {
  --acc: #806328;
  --acc-dark: #624918;
  --pine: #2F7F57;
  --acc-soft: #F4EEE1;
}
/* Ухта */
body.city-uhta {
  --acc: #836425;
  --acc-dark: #644A16;
  --pine: #215F47;
  --acc-soft: #F4EEE1;
}
/* Азов */
body.city-azov {
  --acc: #936E25;
  --acc-dark: #745416;
  --pine: #2D5C50;
  --acc-soft: #F4EEE1;
}
/* Ковров */
body.city-kovrov {
  --acc: #816937;
  --acc-dark: #665124;
  --pine: #2F655D;
  --acc-soft: #F3EEE2;
}
/* Междуреченск */
body.city-mezhdurechensk {
  --acc: #79622F;
  --acc-dark: #5D491D;
  --pine: #2F6F6D;
  --acc-soft: #F4EEE2;
}
/* Выкса */
body.city-vyksa {
  --acc: #7D632C;
  --acc-dark: #5F4A1B;
  --pine: #307278;
  --acc-soft: #F4EEE1;
}
/* Кстово */
body.city-kstovo {
  --acc: #806428;
  --acc-dark: #624B18;
  --pine: #21593F;
  --acc-soft: #F4EEE1;
}
/* Махачкала */
body.city-mahachkala {
  --acc: #8F6F28;
  --acc-dark: #715519;
  --pine: #22634C;
  --acc-soft: #F4EEE1;
}
/* Южно-Сахалинск */
body.city-uzhno-sahalinsk {
  --acc: #937025;
  --acc-dark: #745616;
  --pine: #2F6054;
  --acc-soft: #F4EEE1;
}
/* Ессентуки */
body.city-essentuki {
  --acc: #816A37;
  --acc-dark: #665224;
  --pine: #306962;
  --acc-soft: #F3EEE2;
}
/* Нефтекамск */
body.city-neftekamsk {
  --acc: #79632F;
  --acc-dark: #5D4A1D;
  --pine: #317272;
  --acc-soft: #F4EEE2;
}
/* Ноябрьск */
body.city-noyabrsk {
  --acc: #886D30;
  --acc-dark: #6B541E;
  --pine: #31737C;
  --acc-soft: #F4EEE1;
}
/* Керчь */
body.city-kerch {
  --acc: #8C6F2C;
  --acc-dark: #6E551C;
  --pine: #225D44;
  --acc-soft: #F4EEE1;
}
/* Александров */
body.city-aleksandrov {
  --acc: #8F7028;
  --acc-dark: #715619;
  --pine: #236751;
  --acc-soft: #F4EEE1;
}
/* Приозерск */
body.city-priozersk {
  --acc: #6B5A2E;
  --acc-dark: #4F411C;
  --pine: #316359;
  --acc-soft: #F3EEE2;
}
/* Пятигорск */
body.city-pyatigorsk {
  --acc: #6E5B2B;
  --acc-dark: #51421A;
  --pine: #326C67;
  --acc-soft: #F4EEE2;
}
/* Бийск */
body.city-biiysk {
  --acc: #7D662C;
  --acc-dark: #5F4C1B;
  --pine: #327476;
  --acc-soft: #F4EFE1;
}
/* Миасс */
body.city-miass {
  --acc: #806728;
  --acc-dark: #624D18;
  --pine: #235058;
  --acc-soft: #F4EFE1;
}
/* Братск */
body.city-bratsk {
  --acc: #836925;
  --acc-dark: #644E16;
  --pine: #246148;
  --acc-soft: #F4EFE1;
}
/* Орск */
body.city-orsk {
  --acc: #876A22;
  --acc-dark: #674F14;
  --pine: #246A57;
  --acc-soft: #F4EFE1;
}
/* Сызрань */
body.city-syzran {
  --acc: #6E5C2B;
  --acc-dark: #51431A;
  --pine: #32675E;
  --acc-soft: #F4EFE2;
}
/* Якутск */
body.city-yakutsk {
  --acc: #715E28;
  --acc-dark: #544418;
  --pine: #33706D;
  --acc-soft: #F4EFE1;
}
/* Таганрог */
body.city-taganrog {
  --acc: #745F25;
  --acc-dark: #564515;
  --pine: #347579;
  --acc-soft: #F4EFE1;
}
/* Владикавказ */
body.city-vladikavkaz {
  --acc: #776022;
  --acc-dark: #584613;
  --pine: #245B41;
  --acc-soft: #F4EFE1;
}

/* Корневой домен — базовая палитра бренда */
body.is-root {
  --acc: #B86535;
  --acc-dark: #8A4A26;
  --pine: #2F6451;
  --acc-soft: #F3E3D6;
}

/* ==========================================================================
   11. Движение, состояния загрузки, скелетоны, тонкая интерактивность
   ========================================================================== */

/* ------------------------------------------------------- Ключевые кадры */
@keyframes dd-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dd-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dd-fade-down {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dd-fade-left {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dd-fade-right {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dd-zoom-in {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes dd-shimmer {
  from { background-position: -420px 0; }
  to   { background-position: 420px 0; }
}
@keyframes dd-bounce-sm {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes dd-flicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  40%      { opacity: .82; transform: scale(.97) rotate(-1.5deg); }
  70%      { opacity: .94; transform: scale(1.02) rotate(1deg); }
}
@keyframes dd-ring {
  0%   { box-shadow: 0 0 0 0 rgba(184, 101, 53, .38); }
  70%  { box-shadow: 0 0 0 12px rgba(184, 101, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 101, 53, 0); }
}
@keyframes dd-slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes dd-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ------------------------------------------------------- Классы анимаций */
.an-fade      { animation: dd-fade-in .34s ease both; }
.an-up        { animation: dd-fade-up .38s cubic-bezier(.2, .8, .3, 1) both; }
.an-down      { animation: dd-fade-down .38s cubic-bezier(.2, .8, .3, 1) both; }
.an-left      { animation: dd-fade-left .38s cubic-bezier(.2, .8, .3, 1) both; }
.an-right     { animation: dd-fade-right .38s cubic-bezier(.2, .8, .3, 1) both; }
.an-zoom      { animation: dd-zoom-in .32s cubic-bezier(.2, .9, .3, 1.05) both; }
.an-d1 { animation-delay: .06s; }
.an-d2 { animation-delay: .12s; }
.an-d3 { animation-delay: .18s; }
.an-d4 { animation-delay: .24s; }
.an-d5 { animation-delay: .3s; }
.an-d6 { animation-delay: .36s; }

/* Иконка пламени слегка «дышит» */
.promo3__ico .ico[class*="flame"],
.hero__eyebrow .ico {
  animation: dd-flicker 4.5s ease-in-out infinite;
}

/* Привлечение внимания к кнопке корзины после добавления */
.hdr__cart.is-bump { animation: dd-ring 1s ease-out; }
.hdr__cart-c { transition: transform var(--tr); }
.hdr__cart.is-bump .hdr__cart-c { animation: dd-bounce-sm .4s ease; }

/* --------------------------------------------------------- Скелетоны */
.skel {
  position: relative;
  background: linear-gradient(90deg,
    var(--line) 0%, rgba(255, 255, 255, .75) 50%, var(--line) 100%);
  background-size: 420px 100%;
  animation: dd-shimmer 1.3s linear infinite;
  border-radius: var(--r-xs);
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}
.skel--text { height: 14px; margin-bottom: 8px; }
.skel--text:last-child { width: 62%; }
.skel--title { height: 24px; margin-bottom: 14px; width: 70%; }
.skel--img { aspect-ratio: 4 / 3; border-radius: var(--r); }
.skel--btn { height: 48px; border-radius: var(--r-pill); }
.skel--chip { height: 36px; width: 120px; border-radius: var(--r-pill); display: inline-block; }

.skelcard {
  padding: 20px;
  background: #fff;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
}

/* ------------------------------------------------ Индикатор загрузки */
.loadbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 200;
  background: var(--acc);
  transform-origin: left;
  animation: dd-progress 1.4s ease-out both;
}

.spinner {
  display: inline-block;
  width: 22px; height: 22px;
  border: 2.5px solid var(--line-2);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.spinner--lg { width: 34px; height: 34px; border-width: 3px; }

/* --------------------------------------------- Микровзаимодействия */
.lift { transition: transform var(--tr), box-shadow var(--tr); }
.lift:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }

.press { transition: transform .12s ease; }
.press:active { transform: scale(.97); }

.underline-slide {
  position: relative;
  display: inline-block;
}
.underline-slide::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--tr);
}
.underline-slide:hover::after { transform: scaleX(1); transform-origin: left; }

.icon-shift .ico { transition: transform var(--tr); }
.icon-shift:hover .ico { transform: translateX(4px); }

.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform var(--tr-slow); }
.img-zoom:hover img { transform: scale(1.06); }

/* --------------------------------------------- Состояния элементов */
.is-disabled {
  opacity: .5;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(.3);
}
.is-busy { position: relative; pointer-events: none; }
.is-busy::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(246, 243, 237, .68);
  backdrop-filter: blur(1px);
  border-radius: inherit;
}
.is-hidden { visibility: hidden; }
.is-invisible { opacity: 0; pointer-events: none; }

/* ------------------------------------------------- Подсказки (tooltip) */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(4px);
  padding: 8px 13px;
  border-radius: var(--r-xs);
  background: var(--graphite);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr), transform var(--tr);
  z-index: 20;
}
.tip::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--graphite);
  opacity: 0;
  transition: opacity var(--tr);
  z-index: 20;
}
.tip:hover::after, .tip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tip:hover::before, .tip:focus-visible::before { opacity: 1; }

/* ----------------------------------------- Прокрутка внутри блоков */
.scroll-x {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.scroll-x > * { scroll-snap-align: start; flex: none; }

/* ------------------------------------- Уважение к настройкам системы */
@media (prefers-reduced-motion: reduce) {
  .an-fade, .an-up, .an-down, .an-left, .an-right, .an-zoom,
  .promo3__ico .ico, .hero__eyebrow .ico, .hdr__cart.is-bump,
  .skel, .loadbar, .spinner, .stock__dot {
    animation: none !important;
  }
  .lift:hover, .press:active, .img-zoom:hover img { transform: none; }
}

/* --------------------------------------- Высокая контрастность */
@media (prefers-contrast: more) {
  :root {
    --ink-2: #333B37;
    --ink-3: #4A544F;
    --line: #C9D0CB;
    --line-2: #A9B3AD;
  }
  .btn-outline { --btn-bd: var(--graphite); }
  .pcard, .scard, .acard, .infobox, .tblwrap { border-width: 2px; }
  .fld__i { border-width: 2px; }
}

/* ------------------------------------------- Принудительные цвета */
@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
  .badge { border: 1px solid CanvasText; }
  .pcard, .scard, .acard { border: 1px solid CanvasText; }
  .ico { forced-color-adjust: auto; }
}

/* ==========================================================================
   12. Секционные акценты, вариации компонентов, состояния печати
   ========================================================================== */

/* ------------------------------------- Акценты категорий каталога */
/* Колотые дрова */
.cat-kolotye { --cat-acc: #B86535; --cat-acc-dark: #8A4A26; --cat-soft: #F3E3D6; }
.cat-kolotye .pagehead__h1::after {
  content: '';
  display: block;
  width: 64px; height: 4px;
  margin-top: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, #B86535, #8A4A26);
}
.cat-kolotye .chip.is-act { background: #8A4A26; border-color: #8A4A26; }
.cat-kolotye .sec--seo { background: #F3E3D6; }
.cat-kolotye .badge--tag { background: #F3E3D6; color: #8A4A26; }

/* Фасованные дрова */
.cat-fasovka { --cat-acc: #C0803E; --cat-acc-dark: #8E5A22; --cat-soft: #F6E9D6; }
.cat-fasovka .pagehead__h1::after {
  content: '';
  display: block;
  width: 64px; height: 4px;
  margin-top: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, #C0803E, #8E5A22);
}
.cat-fasovka .chip.is-act { background: #8E5A22; border-color: #8E5A22; }
.cat-fasovka .sec--seo { background: #F6E9D6; }
.cat-fasovka .badge--tag { background: #F6E9D6; color: #8E5A22; }

/* Брикеты и пеллеты */
.cat-brikety { --cat-acc: #6B4A2E; --cat-acc-dark: #412915; --cat-soft: #EADFD3; }
.cat-brikety .pagehead__h1::after {
  content: '';
  display: block;
  width: 64px; height: 4px;
  margin-top: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6B4A2E, #412915);
}
.cat-brikety .chip.is-act { background: #412915; border-color: #412915; }
.cat-brikety .sec--seo { background: #EADFD3; }
.cat-brikety .badge--tag { background: #EADFD3; color: #412915; }

/* Уголь и растопка */
.cat-ugol { --cat-acc: #4A4440; --cat-acc-dark: #26221F; --cat-soft: #E4E2DF; }
.cat-ugol .pagehead__h1::after {
  content: '';
  display: block;
  width: 64px; height: 4px;
  margin-top: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4A4440, #26221F);
}
.cat-ugol .chip.is-act { background: #26221F; border-color: #26221F; }
.cat-ugol .sec--seo { background: #E4E2DF; }
.cat-ugol .badge--tag { background: #E4E2DF; color: #26221F; }

/* Готовые наборы */
.cat-nabory { --cat-acc: #2F6451; --cat-acc-dark: #234B3D; --cat-soft: #E2EDE7; }
.cat-nabory .pagehead__h1::after {
  content: '';
  display: block;
  width: 64px; height: 4px;
  margin-top: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2F6451, #234B3D);
}
.cat-nabory .chip.is-act { background: #234B3D; border-color: #234B3D; }
.cat-nabory .sec--seo { background: #E2EDE7; }
.cat-nabory .badge--tag { background: #E2EDE7; color: #234B3D; }

/* Кругляк и чурки */
.cat-kruglyak { --cat-acc: #A98454; --cat-acc-dark: #75552B; --cat-soft: #F1E7D8; }
.cat-kruglyak .pagehead__h1::after {
  content: '';
  display: block;
  width: 64px; height: 4px;
  margin-top: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, #A98454, #75552B);
}
.cat-kruglyak .chip.is-act { background: #75552B; border-color: #75552B; }
.cat-kruglyak .sec--seo { background: #F1E7D8; }
.cat-kruglyak .badge--tag { background: #F1E7D8; color: #75552B; }

/* --------------------------------- Акценты подборок по назначению */
/* Для дома */
.purpose-dom .task__media { outline-color: #F3E3D6; }
.purpose-dom .cond__ico { background: #F3E3D6; }
.purpose-dom .pagehead__lead { border-left: 3px solid #F3E3D6; padding-left: 18px; }

/* Для бани */
.purpose-banya .task__media { outline-color: #F6EBD6; }
.purpose-banya .cond__ico { background: #F6EBD6; }
.purpose-banya .pagehead__lead { border-left: 3px solid #F6EBD6; padding-left: 18px; }

/* Для камина */
.purpose-kamin .task__media { outline-color: #F5E2D5; }
.purpose-kamin .cond__ico { background: #F5E2D5; }
.purpose-kamin .pagehead__lead { border-left: 3px solid #F5E2D5; padding-left: 18px; }

/* Для длительного отопления */
.purpose-otoplenie .task__media { outline-color: #EFE1D2; }
.purpose-otoplenie .cond__ico { background: #EFE1D2; }
.purpose-otoplenie .pagehead__lead { border-left: 3px solid #EFE1D2; padding-left: 18px; }

/* Для мангала и гриля */
.purpose-mangal .task__media { outline-color: #E7E4E0; }
.purpose-mangal .cond__ico { background: #E7E4E0; }
.purpose-mangal .pagehead__lead { border-left: 3px solid #E7E4E0; padding-left: 18px; }

/* Для дачи */
.purpose-dacha .task__media { outline-color: #EDEFE6; }
.purpose-dacha .cond__ico { background: #EDEFE6; }
.purpose-dacha .pagehead__lead { border-left: 3px solid #EDEFE6; padding-left: 18px; }

/* Для копчения */
.purpose-kopchenie .task__media { outline-color: #F2E6D8; }
.purpose-kopchenie .cond__ico { background: #F2E6D8; }
.purpose-kopchenie .pagehead__lead { border-left: 3px solid #F2E6D8; padding-left: 18px; }

/* Для ресторана */
.purpose-restoran .task__media { outline-color: #E3EAE6; }
.purpose-restoran .cond__ico { background: #E3EAE6; }
.purpose-restoran .pagehead__lead { border-left: 3px solid #E3EAE6; padding-left: 18px; }

/* -------------------------------- Акценты категорий услуг */
.svc-poroda .scard { border-left-color: #B86535; }
.svc-poroda .scard__cat { color: #B86535; }
.svc-poroda .svcbox { border-top: 4px solid #B86535; }

.svc-dostavka .scard { border-left-color: #2F6451; }
.svc-dostavka .scard__cat { color: #2F6451; }
.svc-dostavka .svcbox { border-top: 4px solid #2F6451; }

.svc-podgotovka .scard { border-left-color: #C0803E; }
.svc-podgotovka .scard__cat { color: #C0803E; }
.svc-podgotovka .svcbox { border-top: 4px solid #C0803E; }

.svc-hranenie .scard { border-left-color: #8C5C36; }
.svc-hranenie .scard__cat { color: #8C5C36; }
.svc-hranenie .svcbox { border-top: 4px solid #8C5C36; }

.svc-pechi .scard { border-left-color: #A65A2E; }
.svc-pechi .scard__cat { color: #A65A2E; }
.svc-pechi .svcbox { border-top: 4px solid #A65A2E; }

.svc-naznachenie .scard { border-left-color: #3D7058; }
.svc-naznachenie .scard__cat { color: #3D7058; }
.svc-naznachenie .svcbox { border-top: 4px solid #3D7058; }

/* ------------------------------------------ Вариации таблиц */
.tbl--compact tbody th,
.tbl--compact tbody td { padding: 10px 14px; font-size: 13.5px; }
.tbl--compact thead th { padding: 12px 14px; font-size: 11.5px; }

.tbl--striped tbody tr:nth-child(odd) { background: rgba(230, 215, 196, .22); }
.tbl--striped tbody tr:hover { background: var(--sand-2); }

.tbl--bordered th, .tbl--bordered td { border-right: 1px solid var(--line); }
.tbl--bordered th:last-child, .tbl--bordered td:last-child { border-right: 0; }

.tbl--fixed { table-layout: fixed; }
.tbl--fixed td, .tbl--fixed th { overflow-wrap: break-word; }

.tbl caption {
  padding: 14px 18px;
  text-align: left;
  font-size: 13px;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}

/* Адаптивные таблицы-карточки на узких экранах */
@media (max-width: 639px) {
  .tbl--stack { min-width: 0; }
  .tbl--stack thead { display: none; }
  .tbl--stack tbody tr {
    display: block;
    padding: 16px;
    border-bottom: 1px solid var(--line);
  }
  .tbl--stack tbody th,
  .tbl--stack tbody td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border: 0;
    text-align: right;
  }
  .tbl--stack tbody td::before {
    content: attr(data-label);
    color: var(--ink-3);
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    flex: none;
  }
  .tbl--stack tbody th { font-size: 15px; padding-bottom: 10px; }
}

/* ---------------------------------------- Вариации бейджей */
.badge--outline {
  background: transparent;
  border: 1.5px solid currentColor;
  color: var(--acc-dark);
}
.badge--pine { background: var(--pine); color: #fff; }
.badge--sand { background: var(--sand); color: var(--acc-dark); }
.badge--ghost { background: rgba(30, 37, 34, .06); color: var(--ink-2); }
.badge--lg { padding: 7px 15px; font-size: 12.5px; }
.badge--dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  flex: none;
}

/* ------------------------------------- Вариации карточек */
.pcard--wide {
  flex-direction: row;
}
.pcard--wide .pcard__media { width: 42%; aspect-ratio: auto; }
.pcard--wide .pcard__body { width: 58%; }
@media (max-width: 639px) {
  .pcard--wide { flex-direction: column; }
  .pcard--wide .pcard__media,
  .pcard--wide .pcard__body { width: 100%; }
  .pcard--wide .pcard__media { aspect-ratio: 4 / 3; }
}

.pcard--flat { border-color: transparent; background: var(--sand-2); }
.pcard--flat:hover { background: #fff; }

.scard--plain { background: #fff; border: 1.5px solid var(--line); border-left-width: 4px; }
.scard--dark { background: var(--graphite); border-left-color: var(--acc); }
.scard--dark .scard__t a { color: #fff; }
.scard--dark .scard__d { color: rgba(255, 255, 255, .72); }
.scard--dark .scard__cat { color: var(--sand); }
.scard--dark .scard__foot { border-top-color: rgba(255, 255, 255, .12); }

/* ---------------------------------------- Списки описаний */
.dlist { display: grid; gap: 0; }
.dlist__r {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14.5px;
}
.dlist__r:last-child { border-bottom: 0; }
.dlist dt { color: var(--ink-3); margin: 0; }
.dlist dd { margin: 0; color: var(--graphite); font-weight: 600; }
@media (max-width: 419px) {
  .dlist__r { grid-template-columns: 1fr; gap: 3px; padding: 10px 0; }
}

/* ------------------------------------------ Разделители */
.hr {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 32px 0;
}
.hr--dashed { background: none; border-top: 1px dashed var(--line-2); }
.hr--thick { height: 3px; background: var(--sand); border-radius: 2px; }
.hr--short { width: 64px; height: 4px; background: var(--acc); border-radius: 2px; margin: 20px 0; }

/* --------------------------------------------- Цитаты */
.quote {
  position: relative;
  padding: 24px 28px 24px 60px;
  background: var(--sand-2);
  border-radius: var(--r);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 28px 0;
}
.quote::before {
  content: '\201C';
  position: absolute;
  left: 20px; top: 8px;
  font-size: 58px;
  line-height: 1;
  color: var(--acc);
  opacity: .5;
  font-family: Georgia, serif;
}
.quote__author {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--graphite);
}

/* -------------------------------------------- Метки-факты */
.factline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 26px 0;
}
.factline__i {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.factline__i .ico { width: 19px; height: 19px; color: var(--acc); }
.factline__i b { color: var(--graphite); }

/* ------------------------------------------ Плитка ссылок */
.linktiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.linktile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 600;
  transition: all var(--tr);
}
.linktile:hover {
  border-color: var(--acc);
  color: var(--acc-dark);
  transform: translateX(3px);
}
.linktile .ico { width: 18px; height: 18px; flex: none; opacity: .55; }
.linktile:hover .ico { opacity: 1; }

/* ------------------------------------- Пагинация (резерв) */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 44px;
}
.pager__i {
  min-width: 46px; height: 46px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 14.5px;
  transition: all var(--tr);
}
.pager__i:hover { border-color: var(--acc); color: var(--acc-dark); }
.pager__i.is-act { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.pager__i.is-gap { border: 0; background: none; pointer-events: none; }

/* --------------------------------------- Уведомления-полоски */
.alert {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 20px;
}
.alert .ico { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.alert--info  { background: var(--pine-soft); color: var(--pine); }
.alert--warn  { background: #FBF0DC; color: #8A6216; }
.alert--err   { background: #FBE8E5; color: var(--err); }
.alert--ok    { background: var(--pine-soft); color: var(--pine); }
.alert--sand  { background: var(--sand-2); color: var(--ink-2); }
.alert a { color: inherit; font-weight: 700; border-bottom: 1px solid currentColor; }

/* ---------------------------------------------- Печать */
@media print {
  :root { --sec-y: 16px; }
  html { font-size: 11pt; }
  body { background: #fff !important; color: #000; }
  .hero { background: none; padding: 0 0 16px; }
  .hero__bg { display: none; }
  .hero__main, .hero__h1, .hero__sub { color: #000 !important; }
  .hero__metrics { border-top-color: #ccc; }
  .hero__metric, .hero__metric b { color: #000 !important; }
  .pcard, .scard, .acard, .infobox, .tblwrap, .acc__i {
    border: 1px solid #bbb !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .pcard__media, .acard__media, .work, .step__media { display: none; }
  .acc__p { display: block !important; }
  .acc__p[hidden] { display: block !important; }
  .tabs__p[hidden] { display: block !important; }
  .tabs__nav { display: none; }
  .seotext p { font-size: 10.5pt; }
  .sec--seo { background: none; padding: 12px 0; }
  a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: 8.5pt;
    color: #555;
    word-break: break-all;
  }
  a[href^="/"]::after { content: ''; }
  .crumbs, .grid--products, .promo3 { break-inside: avoid; }
  .ctablock { background: none; border: 1px solid #bbb; }
  .ctablock__t, .ctablock__d, .ctablock__list li { color: #000 !important; }
}


/* ==========================================================================
   13. Карточки отзывов
   ========================================================================== */
.revlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.revcard {
  display: flex;
  flex-direction: column;
  padding: 26px 28px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  transition: box-shadow var(--tr), transform var(--tr);
}
.revcard:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.revcard__hd {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}
.revcard__av {
  flex: none;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--acc-soft);
  color: var(--acc-dark);
  font-weight: 800;
  font-size: 19px;
}
.revcard__meta { display: flex; flex-direction: column; line-height: 1.25; }
.revcard__name { font-size: 15.5px; color: var(--graphite); }
.revcard__city { font-size: 12.5px; color: var(--ink-3); }
.revcard__date { margin-left: auto; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.revcard__topic {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 11px;
  margin-bottom: 12px;
  border-radius: var(--r-pill);
  background: var(--pine-soft);
  color: var(--pine);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.revcard__text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); }

@media (max-width: 819px) {
  .revlist { grid-template-columns: 1fr; gap: 14px; }
  .revcard { padding: 22px 20px; }
}

/* ==========================================================================
   14. Сводка рейтинга на странице отзывов
   ========================================================================== */
.ratebox {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 36px;
  align-items: center;
  padding: 30px 34px;
  margin-bottom: 30px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.ratebox__score { text-align: center; }
.ratebox__num {
  display: block;
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
}
.ratebox__stars { display: flex; gap: 3px; justify-content: center; margin: 8px 0 6px; }
.ratebox__star { width: 20px; height: 20px; color: var(--acc); }
.ratebox__star { fill: currentColor; }
.ratebox__cnt { display: block; font-size: 12.5px; color: var(--ink-3); }

.ratebox__bars { display: grid; gap: 6px; }
.ratebox__bar { display: grid; grid-template-columns: 14px 1fr 36px; align-items: center; gap: 10px; }
.ratebox__bl { font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.ratebox__track {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.ratebox__track i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--acc), var(--acc-dark));
}
.ratebox__bc { font-size: 12.5px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }

.ratebox__note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 280px;
  padding-left: 28px;
  border-left: 1px solid var(--line);
}
.ratebox__note .ico { width: 22px; height: 22px; color: var(--pine); flex: none; }
.ratebox__note p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

.revcard__rate { display: flex; gap: 2px; margin-bottom: 10px; }
.revcard__star { width: 16px; height: 16px; color: var(--acc); }
.revcard__star { fill: currentColor; }

@media (max-width: 1023px) {
  .ratebox { grid-template-columns: auto 1fr; gap: 28px; }
  .ratebox__note { grid-column: 1 / -1; padding-left: 0; padding-top: 20px; border-left: 0; border-top: 1px solid var(--line); max-width: none; }
}
@media (max-width: 639px) {
  .ratebox { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; text-align: center; }
  .ratebox__num { font-size: 44px; }
  .ratebox__note { text-align: left; }
}

/* ==========================================================================
   15. Мобильная шапка и выдвижные панели: защита от горизонтального вылета
   ========================================================================== */

/*
 * Шапка не должна расширять документ ни при каких размерах экрана.
 * Логотип сжимается, блок действий — нет: кнопки остаются нажимаемыми
 * по всей площади (минимум 44x44 px по рекомендациям Apple HIG).
 */
@media (max-width: 1023px) {
  .hdr,
  .hdr__top,
  .hdr__main {
    max-width: 100%;
    overflow-x: clip;
  }

  .hdr__main-in {
    gap: 10px;
    min-width: 0;
  }

  /* Логотип уступает место кнопкам, а не выталкивает их за экран */
  .logo {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .logo__txt { min-width: 0; }
  .logo__t1,
  .logo__t2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hdr__act {
    flex: 0 0 auto;
    gap: 8px;
    margin-left: auto;
  }

  /* Верхняя строка: город не выдавливает почту за край */
  .hdr__top-in { gap: 12px; min-width: 0; }
  .city-btn { min-width: 0; }
  .city-btn__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 46vw;
  }
}

/* --------------------------------------------- Узкие экраны: 420 px и ниже */
@media (max-width: 419px) {
  .hdr__main-in { gap: 8px; }
  .hdr__act { gap: 6px; }

  /* Круглые кнопки уменьшаем, но не ниже комфортных 44 px */
  .hdr__tel,
  .hdr__cart,
  .burger {
    width: 44px;
    height: 44px;
  }
  .hdr__tel .ico,
  .hdr__cart .ico { width: 19px; height: 19px; }

  .logo__mark { width: 40px; height: 40px; font-size: 15px; border-radius: 12px; }
  .logo { gap: 9px; }
  .logo__t1 { font-size: 15.5px; }
  .logo__t2 { font-size: 8.5px; letter-spacing: .05em; }
}

/* ------------------------------------- Очень узкие экраны: 360 px и меньше */
@media (max-width: 360px) {
  .hdr__main-in { gap: 6px; }
  .hdr__act { gap: 4px; }

  .hdr__tel,
  .hdr__cart,
  .burger { width: 42px; height: 42px; }

  /* На таких экранах подпись под логотипом не читается — скрываем её,
     освобождая место для кнопок действий. */
  .logo__t2 { display: none; }
  .logo__mark { width: 38px; height: 38px; font-size: 14px; }
  .logo__t1 { font-size: 15px; }

  .city-btn__name { max-width: 40vw; }
  .city-btn__chg { display: none; }
}

/* ------------------------------------------------ Совсем узкие: до 330 px */
@media (max-width: 329px) {
  .logo__txt { display: none; }   /* остаётся только монограмма «ДД» */
  .hdr__tel { display: none; }    /* звонок доступен в нижней панели */
}

/*
 * Выдвижные панели никогда не выходят за пределы вьюпорта.
 * Дублируем ограничение отдельно: правило должно пережить любые
 * последующие переопределения ширины.
 */
.nav,
.cat__side,
.citysel__win,
.modal__win {
  max-width: 100vw;
}

/* Затемнение под открытой панелью учитывает вырезы экрана */
body.menu-open::after,
.modal__ov,
.citysel__ov {
  width: 100%;
  max-width: 100vw;
}

/*
 * Блокировка прокрутки фона при открытой панели.
 * position: fixed на body в iOS сбрасывает позицию скролла,
 * поэтому используем только overflow — этого достаточно
 * вместе с overscroll-behavior на самой панели.
 */
body.no-scroll,
body.menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Ни один элемент не должен расширять документ по горизонтали */
img,
video,
iframe,
table,
pre,
canvas,
svg { max-width: 100%; }

/* Таблицы прокручиваются внутри контейнера, а не растягивают страницу */
.tblwrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ---------------------------------------- Нижняя панель быстрых действий */
/*
 * Панель фиксированная, но её содержимое считалось по минимальной ширине
 * кнопок и растягивало документ на узких экранах. Задаём жёсткое
 * ограничение по вьюпорту и разрешаем кнопкам сжиматься.
 */
.sticky-bar {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
.sticky-bar__i {
  flex: 1 1 0;
  min-width: 0;          /* без этого flex-элемент не сжимается ниже контента */
  padding-left: 2px;
  padding-right: 2px;
}
.sticky-bar__i span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Длинные технические строки в тексте не растягивают страницу */
code,
kbd,
samp {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
}
.prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--sand-2);
  font-size: .92em;
}

@media (max-width: 360px) {
  .sticky-bar__i { font-size: 9.5px; gap: 2px; }
  .sticky-bar__i .ico { width: 20px; height: 20px; }
}

/* Плашка-примечание: длинные технические строки не должны её распирать */
.sec__disclaimer { min-width: 0; }
.sec__disclaimer > *:not(.ico) { min-width: 0; overflow-wrap: break-word; }

/* Карточки в сетках сжимаются вместе с колонкой */
.revlist > *,
.grid > *,
.works > * { min-width: 0; }

/* Универсальная страховка: flex- и grid-потомки по умолчанию
   не сжимаются ниже своего контента и распирают контейнер */
.wrap > *,
.prose > *,
.notice__body > * { min-width: 0; max-width: 100%; }

/* --------------------------------- Слои при открытом мобильном меню -------
 * Шапка лежит в собственном контексте наложения (z-index: 100), поэтому
 * z-index бургера внутри неё не может перебить оверлей. Пока меню открыто,
 * поднимаем всю шапку выше затемнения — иначе кнопку «Закрыть» не нажать.
 */
@media (max-width: 1023px) {
  body.menu-open .hdr {
    z-index: 125;              /* выше оверлея (110), ниже панели (120)… */
  }
  body.menu-open .hdr__main {
    position: relative;
    z-index: 2;
  }
  /* …но сам бургер должен быть поверх панели, чтобы оставаться доступным */
  body.menu-open .burger {
    position: relative;
    z-index: 131;
  }
  /* Верхнюю строку при открытом меню притемняем вместе с фоном */
  body.menu-open .hdr__top { opacity: .35; pointer-events: none; }
}

/* ------------------------- Оформление открытого мобильного меню ----------
 * Панель делаем уже, чтобы за ней оставался видимый край страницы —
 * так пользователю понятно, что это слой поверх сайта, и по этому краю
 * можно закрыть меню тапом.
 */
@media (max-width: 1023px) {
  .nav {
    width: min(320px, 82vw);
    border-radius: 20px 0 0 20px;
  }

  /* Заголовок панели: подпись и явная кнопка закрытия */
  .nav::before {
    content: 'Меню';
    display: block;
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .nav__l {
    display: flex;
    align-items: center;
    min-height: 52px;          /* комфортная зона нажатия */
    padding: 12px 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--r-sm);
  }
  .nav__l + .nav__l { margin-top: 2px; }
  .nav__l:active { background: var(--sand-2); }

  /* Бургер превращается в крестик — видно, что кнопка активна */
  body.menu-open .burger {
    background: var(--graphite);
    border-radius: 50%;
  }
  body.menu-open .burger span { background: #fff; }
}

@media (max-width: 360px) {
  .nav { width: min(300px, 86vw); padding-left: 16px; padding-right: 16px; }
  .nav__l { min-height: 48px; font-size: 15.5px; }
}

/* ------------------------------------------- Комфортные зоны нажатия -----
 * Apple HIG и Material Design требуют минимум 44x44 px для тач-элементов.
 * Визуальный размер кнопок оставляем прежним, зону нажатия расширяем
 * псевдоэлементом — так вёрстка не разъезжается на узких экранах.
 */
@media (max-width: 1023px) {
  .city-btn {
    position: relative;
    min-height: 34px;
  }
  .city-btn::after {
    content: '';
    position: absolute;
    left: 0;
    right: -4px;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

@media (max-width: 360px) {
  /* На самых узких экранах кнопки визуально 42 px, зона нажатия — 44 */
  .burger,
  .hdr__cart,
  .hdr__tel {
    position: relative;
  }
  .burger::after,
  .hdr__cart::after,
  .hdr__tel::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  /* Счётчик корзины не должен перекрываться расширенной зоной */
  .hdr__cart-c { z-index: 1; }
}