/* ==========================================================================
   MOBILAND — новый дизайн (с 08.10.2026, по макету)
   https://claude.ai/artifact/L4NsHKyaV8Tyuod3LLhTQh
   Подключается последним в <head>. Своя сетка .m-wrap: тянется плавно от
   телефона до большого экрана (у старой темы было две ширины — 788 и 1440,
   и на ноутбуке 1280–1400 сайт сжимался в колонку 708 px).
   Разделы: токены → основа → шапка → каталог → поиск → нижняя панель →
   карточка → главная → наличие и аксессуары → прежние страницы → подвал.
   ========================================================================== */

:root {
  --m-ink: #231F20; --m-ink-2: #4E4852; --m-dim: #677178; --m-mute: #8C8696;
  --m-bg: #F6F6F7; --m-card: #FFFFFF; --m-line: #ECEAF0; --m-line-2: #E3DFEA;
  --m-accent: #8654CC; --m-accent-ink: #5B2E9E; --m-accent-soft: #F3ECFE; --m-brand: #5F03F3;
  --m-ok: #3F6F17;   --m-ok-dot: #6FA33A;   --m-ok-bg: #EEF6E6;
  --m-way: #1D5FB4;  --m-way-dot: #2F7DE1;  --m-way-bg: #EAF2FC;
  --m-wait: #4E4852; --m-wait-dot: #B7B2BD; --m-wait-bg: #F3F1F6;
  --m-r-card: 24px; --m-r-ctrl: 14px;
  --m-max: 1320px; --m-gut: 24px;
  --m-shadow: 0 10px 30px rgba(35,31,32,.08);
  --m-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-base: var(--m-font);
}
@media (max-width: 767px) { :root { --m-gut: 16px; --m-r-card: 20px; } }

html body { background: var(--m-bg); color: var(--m-ink); font-family: var(--m-font); }
/* ШРИФТ — Manrope (24.10, владелец выбрал из пяти). Старая тема ставит Montserrat
   на элементы поимённо (site.css: a, button, input, h1–h6, span, p, li; настройки
   темы: body, button, input, select, textarea; shop.css: баннеры Apple) — перекрываем
   тем же списком, но сильнее. Значки темы (free-font) задаются классами и не задеты. */
html :is(a, button, input, optgroup, select, textarea, h1, h2, h3, h4, h5, h6, span, p, li, label, td, th, dt, dd, small, b, strong, em, summary),
html .apple-bnr, html .apple-bnr .bnr-caption span, html .apple-alert { font-family: var(--m-font); }
html.m-lock, html.m-lock body { overflow: hidden; }
.m-wrap { width: 100%; max-width: calc(var(--m-max) + 2 * var(--m-gut)); margin: 0 auto; padding: 0 var(--m-gut); box-sizing: border-box; }
/* Старые страницы на tw-container — та же ширина, без «колонки 708 px». */
.tw-container { max-width: calc(var(--m-max) + 2 * var(--m-gut)) !important; padding-left: var(--m-gut) !important; padding-right: var(--m-gut) !important; }
.tw-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }

/* ── Кнопки ──────────────────────────────────────────────────────────── */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border-radius: var(--m-r-ctrl); border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 15px; text-decoration: none !important; transition: background .15s, border-color .15s, color .15s;
}
.m-btn--light  { background: #fff; color: var(--m-ink) !important; }
.m-btn--light:hover { background: var(--m-accent-soft); }
.m-btn--ghost  { color: #fff !important; border: 1.5px solid rgba(255,255,255,.5); background: transparent; }
.m-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.m-btn--accent { background: var(--m-accent); color: #fff !important; }
.m-btn--accent:hover { background: var(--m-accent-ink); }
.m-link { font: inherit; font-weight: 600; color: var(--m-accent-ink) !important; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.m-link:hover { text-decoration: underline; }

/* ── Шапка ───────────────────────────────────────────────────────────── */
.m-header { position: sticky; top: -39px; z-index: 60; background: #fff; box-shadow: 0 1px 0 var(--m-line); }
.m-top { border-bottom: 1px solid var(--m-line); font-size: 13px; }
.m-top-in { display: flex; align-items: center; gap: 18px; height: 38px; }
.m-top-city { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.m-top-link { color: var(--m-accent-ink) !important; font-weight: 600; text-decoration: none; }
.m-top-phone { font-weight: 700; }
.m-top-space { flex: 1; }
.m-top-pages { display: flex; gap: 18px; }
.m-top-pages a { color: var(--m-ink-2) !important; font-weight: 500; text-decoration: none; white-space: nowrap; }
.m-top-pages a:hover, .m-top-link:hover { color: var(--m-accent) !important; }

.m-bar { position: relative; }
.m-bar-in { display: flex; align-items: center; gap: 14px; min-height: 76px; }
.m-logo { line-height: 0; flex: none; }
.m-logo svg { width: 64px; height: 40px; }
.m-bar-phone { display: none; }
.m-catbtn {
  flex: none; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border: 0; cursor: pointer;
  border-radius: 12px; background: var(--m-accent); color: #fff; font: inherit; font-weight: 700; font-size: 15px; transition: background .15s;
}
.m-catbtn:hover, .m-catbtn.is-open { background: var(--m-accent-ink); }
/* Три полоски → крестик: средняя гаснет, крайние сходятся в центр и поворачиваются */
.m-catbtn-ico { position: relative; width: 18px; height: 14px; display: inline-block; flex: none; }
.m-catbtn-ico i { position: absolute; left: 0; width: 100%; height: 2.2px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease, top .25s ease; }
.m-catbtn-ico i:nth-child(1) { top: 0; }
.m-catbtn-ico i:nth-child(2) { top: 6px; }
.m-catbtn-ico i:nth-child(3) { top: 12px; }
.m-catbtn.is-open .m-catbtn-ico i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.m-catbtn.is-open .m-catbtn-ico i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.m-catbtn.is-open .m-catbtn-ico i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .m-catbtn-ico i { transition: none; } }

.m-search { position: relative; flex: 1 1 320px; display: flex; align-items: center; height: 48px; border-radius: 12px; background: #F3F1F6; min-width: 0; }
.m-search:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--m-accent) inset; }
.m-search-ico { position: absolute; left: 14px; color: var(--m-dim); pointer-events: none; }
.m-search input { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; outline: none; box-shadow: none !important; font: inherit; font-size: 15px; padding: 0 8px 0 42px; color: var(--m-ink); }
.m-search input::-webkit-search-cancel-button { display: none; }
.m-search-go { flex: none; height: 38px; margin-right: 5px; padding: 0 16px; border: 0; border-radius: 9px; background: var(--m-ink); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.m-search-go:hover { background: var(--m-accent-ink); }

.m-icons { display: flex; align-items: center; gap: 4px; flex: none; }
.m-icon { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border-radius: 12px; color: var(--m-ink) !important; font-weight: 600; font-size: 14px; text-decoration: none; }
.m-icon:hover { background: var(--m-bg); }
.m-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--m-accent); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.m-badge.is-empty { background: var(--m-line); color: var(--m-dim); }
.m-login { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: 12px; background: var(--m-accent-soft); color: var(--m-accent-ink) !important; font-weight: 700; font-size: 14px; text-decoration: none; margin-left: 4px; max-width: 180px; }
.m-login span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-login:hover { background: #E9DDFC; }

.m-nav { border-top: 1px solid var(--m-line); }
.m-nav-list { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; }
.m-nav-list::-webkit-scrollbar { display: none; }
.m-nav-list a { flex: none; white-space: nowrap; padding: 11px 10px; font-size: 14px; font-weight: 600; color: var(--m-ink-2) !important; text-decoration: none; border-bottom: 2px solid transparent; }
.m-nav-list a:hover { color: var(--m-accent) !important; }
.m-nav-list a.is-on { color: var(--m-accent-ink) !important; border-bottom-color: var(--m-accent); }

/* ── Каталог-выпадашка: слева разделы, справа подразделы ─────────────── */
.m-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 70; background: #fff; border-top: 1px solid var(--m-line); box-shadow: 0 24px 48px rgba(35,31,32,.12); }
.m-mega[hidden], .m-mega-shade[hidden] { display: none !important; }
.m-mega-in { display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0 28px; padding-top: 14px; padding-bottom: 16px; height: min(660px, calc(100vh - 140px)); box-sizing: border-box; }
.m-mega-head { display: none; }
.m-mega-roots { list-style: none; margin: 0; padding: 0 12px 0 0; border-right: 1px solid var(--m-line); overflow-y: auto; }
.m-mega-roots a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; border-radius: 10px; color: var(--m-ink) !important; font-size: 14px; font-weight: 600; text-decoration: none; }
.m-mega-roots a svg { color: var(--m-mute); flex: none; }
.m-mega-roots a:hover, .m-mega-roots a.is-on { background: var(--m-accent-soft); color: var(--m-accent-ink) !important; }
.m-mega-roots a.is-on svg { color: var(--m-accent); }
.m-mega-panes { overflow-y: auto; padding-right: 6px; }
.m-mega-pane-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.m-mega-pane-head > a { font-size: 22px; font-weight: 800; color: var(--m-ink) !important; text-decoration: none; display: flex; align-items: baseline; gap: 12px; }
.m-mega-pane-head > a span { font-size: 14px; font-weight: 600; color: var(--m-accent-ink); }
.m-mega-pane-head > a:hover span { text-decoration: underline; }
.m-mega-back { display: none; }
.m-mega-cols { columns: 3 200px; column-gap: 28px; }
.m-mega-col { break-inside: avoid; display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.m-mega-sub { font-weight: 700; font-size: 14px; color: var(--m-ink) !important; text-decoration: none; padding: 4px 0; }
.m-mega-leaf { font-size: 13px; color: var(--m-ink-2) !important; text-decoration: none; padding: 3px 0; }
.m-mega-sub:hover, .m-mega-leaf:hover { color: var(--m-accent) !important; }
.m-mega-shade { position: fixed; inset: 0; z-index: 50; background: rgba(35,31,32,.45); }

/* ── Подсказки поиска ────────────────────────────────────────────────── */
.m-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 80; background: #fff; border-radius: 18px; box-shadow: var(--m-shadow), 0 0 0 1px var(--m-line); padding: 8px; max-height: min(70vh, 560px); overflow-y: auto; }
.m-suggest[hidden] { display: none; }
.m-sg-note { margin: 6px 10px; font-size: 13px; color: var(--m-dim); }
.m-sg-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 6px 10px; border-bottom: 1px solid var(--m-line); margin-bottom: 4px; }
.m-sg-cat { padding: 6px 12px; border-radius: 999px; background: var(--m-accent-soft); color: var(--m-accent-ink) !important; font-size: 13px; font-weight: 600; text-decoration: none; }
.m-sg-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; color: var(--m-ink) !important; text-decoration: none; }
.m-sg-item:hover, .m-sg-item.is-on, .m-sg-cat.is-on, .m-sg-all.is-on { background: var(--m-bg); }
.m-sg-img { width: 52px; height: 52px; border-radius: 10px; background: #fff; overflow: hidden; display: block; }
.m-sg-img img { width: 100%; height: 100%; object-fit: contain; }
.m-sg-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-sg-name { font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.m-sg-txt .m-chip { margin: 0; font-size: 11px; }
.m-sg-price { font-size: 15px; white-space: nowrap; }
.m-sg-all { display: block; margin-top: 4px; padding: 12px; border-radius: 12px; text-align: center; font-weight: 700; color: var(--m-accent-ink) !important; text-decoration: none; background: var(--m-accent-soft); }
.m-sg-empty { margin: 10px; color: var(--m-ink-2); font-size: 14px; }

/* ── Нижняя панель (телефон) ─────────────────────────────────────────── */
.m-tabs { display: none; }

/* ── Шапка на планшете и телефоне ────────────────────────────────────── */
@media (max-width: 1159px) {
  .m-top-pages { display: none; }
  .m-icon-t { display: none; }
}
@media (max-width: 1023px) {
  .m-top { display: none; }
  .m-header { top: 0; }
  .m-nav { display: none; }
  .m-bar-in { flex-wrap: wrap; gap: 10px 12px; min-height: 0; padding-top: 10px; padding-bottom: 12px; }
  .m-logo svg { width: 58px; height: 36px; }
  .m-bar-phone { display: flex; flex-direction: column; flex: 1; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--m-accent-ink) !important; text-decoration: none; }
  .m-bar-phone span { font-weight: 500; font-size: 12px; color: var(--m-dim); }
  .m-catbtn { display: none; }
  .m-icons .m-icon { display: none; }
  .m-login { height: 40px; padding: 0 14px; margin: 0; }
  .m-search { order: 5; flex: 1 1 100%; height: 46px; }
  .m-search-go { display: none; }
  .m-suggest { position: fixed; left: 8px; right: 8px; top: 112px; max-height: calc(100dvh - 190px); }
  /* Каталог — во весь экран, с переходом вглубь */
  .m-mega { position: fixed; inset: 0 0 64px; top: 0; border: 0; box-shadow: none; overflow-y: auto; z-index: 90; }
  .m-mega-in { display: block; height: auto; padding-top: 0; padding-bottom: 24px; }
  .m-mega-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #fff; padding: 14px 0; z-index: 1; font-size: 22px; font-weight: 800; }
  .m-mega-close { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--m-bg); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--m-ink); }
  .m-mega-roots { border: 0; padding: 0; overflow: visible; }
  .m-mega-roots a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--m-line); font-size: 16px; }
  .m-mega-roots a.is-on { background: transparent; color: var(--m-ink) !important; }
  .m-mega-panes { display: none; overflow: visible; padding: 0; }
  .m-mega.is-deep .m-mega-roots, .m-mega.is-deep .m-mega-head { display: none; }
  .m-mega.is-deep .m-mega-panes { display: block; }
  .m-mega-pane-head { position: sticky; top: 0; background: #fff; padding: 12px 0; margin: 0; z-index: 1; }
  .m-mega-back { display: flex; width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; background: var(--m-bg); align-items: center; justify-content: center; cursor: pointer; color: var(--m-ink); }
  .m-mega-pane-head > a { font-size: 19px; flex-direction: column; gap: 2px; }
  .m-mega-pane-head > a span { font-size: 13px; }
  .m-mega-cols { columns: 1; }
  .m-mega-col { border-bottom: 1px solid var(--m-line); padding: 6px 0 10px; margin: 0; }
  .m-mega-sub { font-size: 16px; padding: 8px 0; }
  .m-mega-leaf { font-size: 15px; padding: 7px 0 7px 12px; }
  .m-mega-shade { display: none !important; }

  .m-tabs {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: #fff; border-top: 1px solid var(--m-line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .m-tabs > a, .m-tabs > button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px;
    font: inherit; font-size: 11px; font-weight: 600; color: var(--m-dim) !important; text-decoration: none; background: none; border: 0; cursor: pointer;
  }
  .m-tabs > .is-on, .m-tabs > button.is-open { color: var(--m-accent-ink) !important; }
  .m-tabs .m-badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: 11px; }
  .m-tabs .m-badge.is-empty { display: none; }
  body { padding-bottom: 70px; }
  /* Старая нижняя панель заменена на .m-tabs. */
  .bottom-panel { display: none !important; }
}

/* ── Секции ──────────────────────────────────────────────────────────── */
.m-sec { margin-top: 48px; }
.m-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 16px; }
.m-sec-head h2 { margin: 0 !important; font-size: 28px !important; font-weight: 800 !important; letter-spacing: -.4px; line-height: 1.15; }
.m-sec-note { color: var(--m-dim); font-size: 14px; }

/* ── Карточка товара ─────────────────────────────────────────────────── */
.m-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.m-cards--row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.m-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 22px; background: var(--m-card);
  transition: box-shadow .2s, transform .2s; min-width: 0;
}
.m-card:hover { box-shadow: var(--m-shadow); transform: translateY(-2px); }
.m-card-img { position: relative; display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #fff; margin-bottom: 4px; }
.m-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .25s, transform .3s; }
.m-card-img2 { opacity: 0; }
.m-card:hover .m-card-img2 { opacity: 1; }
.m-card:hover .m-card-img img:only-child { transform: scale(1.04); }
.m-card-fav {
  position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--m-mute); display: flex; align-items: center; justify-content: center; transition: color .15s;
}
.m-card-fav:hover { color: var(--m-accent); }
.m-card-fav.active { color: #E0457B; }
.m-card-fav.active svg { fill: currentColor; }
.m-card .m-chip { margin: 0; }
.m-card-name {
  color: var(--m-ink) !important; font-size: 15px; font-weight: 600; line-height: 1.35; text-decoration: none; min-height: 40px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.m-card-name:hover { color: var(--m-accent-ink) !important; }
.m-card-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: auto; }
.m-card-price b { font-size: 20px; font-weight: 800; white-space: nowrap; }
.m-card-price small { font-size: 14px; font-weight: 600; color: var(--m-ink-2); }
.m-card-price s { font-size: 14px; color: var(--m-mute); }
.m-card-ask { font-size: 16px !important; color: var(--m-ink-2); }
.m-card-price { margin-top: auto; }
/* Бонусы — строкой под ценой, целиком (09.10: плашка рядом с кнопкой обрезалась «до 1 263 …») */
.m-card-bonus { display: flex; align-items: center; gap: 5px; color: var(--m-accent-ink); font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.m-card-bonus::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--m-accent-soft); box-shadow: inset 0 0 0 3.5px var(--m-accent); }
.m-card-buy {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; width: 100%; padding: 0 12px; margin-top: 2px; box-sizing: border-box;
  border: 0; border-radius: 12px; background: var(--m-accent); color: #fff !important; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none !important;
}
.m-card-buy:hover { background: var(--m-accent-ink); }
.m-card-buy--pick { background: var(--m-accent-soft); color: var(--m-accent-ink) !important; }
.m-card-buy--pick:hover { background: var(--m-accent); color: #fff !important; }
.m-card-buy.is-added { background: var(--m-ok-bg); color: var(--m-ok) !important; }
.m-card-buy:disabled { opacity: .6; cursor: progress; }

/* ── Наклейки на фото (09.10) — подсказка при наведении / по нажатию ── */
.m-stickers { position: absolute; top: 18px; left: 18px; right: 18px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.m-sticker {
  display: inline-block; padding: 5px 10px; border-radius: 10px; font-size: 13px; font-weight: 800; line-height: 1.1; color: #fff;
  background: #D2456E; cursor: help; outline: 0; white-space: nowrap; pointer-events: auto;
}
.m-sticker--last { background: #E07A1F; }
.m-sticker--hit  { background: var(--m-ink); }
.m-sticker--new  { background: var(--m-way-dot); }
.m-sticker::after {
  /* подсказка — от левого до правого края блока наклеек (в пределах карточки): за экран не вылезает */
  content: attr(data-hint); position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; white-space: normal;
  padding: 9px 12px; border-radius: 12px; background: var(--m-ink); color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s, transform .15s;
}
.m-sticker:hover::after, .m-sticker:focus::after, .m-sticker.is-open::after { opacity: 1; transform: none; }
.m-sticker[hidden] { display: none; }
.m-pd-main .m-stickers { top: 20px; left: 20px; right: 72px; }
.m-pd-main .m-sticker::after { right: auto; max-width: 300px; width: max-content; }
.m-pd-main .m-sticker { font-size: 15px; padding: 7px 12px; }

/* ── Главная ─────────────────────────────────────────────────────────── */
.m-home { padding-top: 20px; }
.m-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 16px; }
.m-hero-main {
  position: relative; overflow: hidden; border-radius: 28px; min-height: 420px; color: #fff;
  background: radial-gradient(120% 110% at 92% 100%, #7A2CF7 0%, var(--m-brand) 55%, #4B02C4 100%);
  display: flex; flex-direction: column; justify-content: space-between;
}
.m-hero-text { position: relative; z-index: 1; padding: 40px 40px 0; display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.m-hero-tag { align-self: flex-start; background: rgba(255,255,255,.14); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: #EDE3FF; }
.m-hero-text h1 { margin: 0; color: #fff !important; font-size: 46px !important; line-height: 1.04; font-weight: 800 !important; letter-spacing: -1px; }
.m-hero-text p { margin: 0; font-size: 17px; line-height: 1.5; color: #E5DAFF; }
.m-hero-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.m-hero-img { align-self: flex-end; width: min(70%, 440px); height: auto; margin: -8px -16px -6px 0; filter: drop-shadow(0 18px 30px rgba(20,0,60,.35)); }
.m-promos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 16px; }
.m-promo {
  position: relative; overflow: hidden; border-radius: 24px; background: #fff; color: var(--m-ink) !important; text-decoration: none;
  display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; transition: transform .2s, box-shadow .2s;
}
.m-promo:hover { transform: translateY(-2px); box-shadow: var(--m-shadow); }
.m-promo-t { position: relative; z-index: 1; padding: 20px 20px 0; display: flex; flex-direction: column; gap: 4px; max-width: 75%; }
.m-promo-t b { font-size: 20px; font-weight: 800; }
.m-promo-t span { font-size: 13px; line-height: 1.4; color: var(--m-dim); }
.m-promo img { position: absolute; right: 0; bottom: 0; height: 66%; width: auto; max-width: 70%; object-fit: contain; object-position: right bottom; }
.m-promo--violet { background: var(--m-accent); color: #fff !important; }
.m-promo--violet .m-promo-t span { color: #EFE6FF; }
.m-promo img.m-promo-wide { left: 0; right: 0; width: 100%; max-width: none; height: auto; object-position: center bottom; bottom: 8px; }
.m-promo--dark { background: var(--m-ink); color: #fff !important; }
.m-promo--dark .m-promo-t span { color: #D9D6DE; }

.m-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.m-cat {
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 168px; padding: 16px; border-radius: 22px;
  background: #fff; color: var(--m-ink) !important; text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.m-cat:hover { transform: translateY(-2px); box-shadow: var(--m-shadow); color: var(--m-accent-ink) !important; }
.m-cat b { font-size: 15px; font-weight: 700; line-height: 1.25; }
.m-cat img { width: 100%; height: 100px; object-fit: contain; object-position: right bottom; }

.m-banner { display: block; margin-top: 48px; border-radius: 24px; overflow: hidden; line-height: 0; }
.m-banner img { width: 100%; height: auto; }

.m-loyal {
  margin-top: 48px; background: #fff; border-radius: 28px; padding: 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: center;
}
.m-loyal-text { display: flex; flex-direction: column; gap: 14px; }
.m-loyal-text h2 { margin: 0; font-size: 30px !important; line-height: 1.15; }
.m-loyal-text p { margin: 0; color: var(--m-ink-2); font-size: 16px; line-height: 1.6; }
.m-loyal-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.m-levels { list-style: none; margin: 0; padding: 0; height: 220px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end; }
.m-levels li { height: var(--h); min-height: 74px; border-radius: 16px; padding: 12px 10px; background: linear-gradient(180deg, var(--m-accent-soft), #E7DBFB); display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; }
.m-levels li:last-child { background: linear-gradient(180deg, #9B6BE0, var(--m-accent)); color: #fff; }
.m-levels b { font-size: 20px; font-weight: 800; color: var(--m-accent-ink); }
.m-levels li:last-child b { color: #fff; }
.m-levels span { font-size: 12px; color: var(--m-dim); line-height: 1.3; }
/* 09.10: первая покупка — 1,5% сразу, отдельным столбиком и с отступом от лестницы уровней */
.m-levels--first { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.m-levels li.is-first { background: linear-gradient(180deg, #F3C35B, #E79A2E); color: #fff; margin-right: 8px; position: relative; }
.m-levels li.is-first b, .m-levels li.is-first span { color: #fff; }
.m-levels li.is-first::after { content: ""; position: absolute; right: -9px; top: 12%; bottom: 12%; border-right: 2px dashed var(--m-line-2); }
.m-loyal-btns .m-btn { min-height: 48px; font-size: 15px; }
.m-levels li:last-child span { color: #EFE6FF; }

.m-place { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.m-place-map { background: #fff; border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.m-place-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.m-place-head h2, .m-social h2 { margin: 0 !important; font-size: 24px !important; }
.m-place-frames { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; height: 340px; }
.m-place-frames iframe { width: 100%; height: 100%; border: 0; border-radius: 18px; background: var(--m-bg); }
.m-place-addr { margin: 0; color: var(--m-ink-2); font-size: 14px; }
.m-social { background: var(--m-ink); color: #fff; border-radius: 28px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.m-social h2 { color: #fff !important; margin-bottom: 8px !important; }
.m-social p { margin: 0; color: #D9D6DE; line-height: 1.6; }
.m-social-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.m-social-btns .m-btn { min-height: 48px; }
.m-social-btns .m-btn--ghost { border-color: #6E6872; }
.m-social-note { font-size: 12px; color: #9C96A3 !important; }
.m-social-note a { color: #D9D6DE !important; text-decoration: underline; }
.m-brands, .m-plugin-block { margin-top: 48px; }
.m-seo { margin-top: 48px; background: #fff; border-radius: 24px; padding: 28px 32px; color: var(--m-ink-2); font-size: 14px; line-height: 1.7; }
.m-seo h2 { font-size: 20px !important; color: var(--m-ink); margin: 0 0 10px; }

@media (max-width: 1279px) {
  .m-cards--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .m-cards--row > .m-card:nth-child(n+9) { display: none; }
  .m-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .m-hero-text h1 { font-size: 40px !important; }
}
@media (max-width: 1023px) {
  .m-hero { grid-template-columns: 1fr; }
  .m-promos { grid-auto-rows: 170px; }
  .m-place { grid-template-columns: 1fr; }
  .m-loyal { grid-template-columns: 1fr; padding: 28px; }
  .m-cards--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-cards--row > .m-card:nth-child(n+7) { display: none; }
}
@media (max-width: 767px) {
  .m-home { padding-top: 12px; }
  .m-sec, .m-banner, .m-loyal, .m-place, .m-brands, .m-seo { margin-top: 32px; }
  .m-sec-head h2 { font-size: 22px !important; }
  .m-hero-main { border-radius: 24px; min-height: 0; }
  .m-hero-text { padding: 22px 20px 0; }
  .m-hero-text h1 { font-size: 30px !important; }
  .m-hero-text p { font-size: 15px; }
  .m-hero-btns .m-btn { flex: 1 1 auto; min-height: 48px; padding: 0 16px; font-size: 14px; }
  .m-hero-img { width: 78%; margin-top: 6px; }
  .m-promos { gap: 10px; grid-auto-rows: 132px; }
  .m-promo { min-height: 0; border-radius: 20px; }
  .m-promo-t { padding: 14px 14px 0; max-width: 100%; }
  .m-promo-t b { font-size: 16px; }
  .m-promo-t span { font-size: 11px; max-width: 70%; }
  .m-promo img { height: 58%; }
  .m-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .m-cat { min-height: 0; padding: 10px; border-radius: 16px; flex-direction: column-reverse; align-items: center; text-align: center; }
  .m-cat b { font-size: 12px; }
  .m-cat img { height: auto; aspect-ratio: 1; object-position: center; }
  /* Подборки на телефоне — лентой с прокруткой, по две карточки на экран */
  /* scroll-padding (15.10): без него «прилипание» ставит первую карточку к самому краю
     экрана — отступ слева пропадал у «Лучшего предложения», «Можно забрать сегодня»,
     «Похожих» и «Вы смотрели», справа отступ был. */
  .m-cards--row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 calc(-1 * var(--m-gut)); padding: 0 var(--m-gut) 6px; scroll-padding-inline: var(--m-gut); scrollbar-width: none; }
  .m-cards--row::-webkit-scrollbar { display: none; }
  .m-cards--row > .m-card { flex: 0 0 46%; scroll-snap-align: start; display: flex !important; }
  .m-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .m-card { padding: 10px; border-radius: 18px; gap: 6px; }
  .m-card-fav { top: 12px; right: 12px; width: 34px; height: 34px; }
  .m-card-name { font-size: 13px; min-height: 35px; }
  .m-card-price b { font-size: 16px; }
  .m-card-bonus { font-size: 11.5px; }
  .m-card-buy { height: 38px; font-size: 13px; }
  .m-stickers { top: 12px; left: 12px; right: 12px; gap: 4px; }
  .m-sticker { font-size: 11px; padding: 4px 7px; border-radius: 8px; }
  .m-loyal { padding: 22px; border-radius: 24px; gap: 20px; }
  .m-loyal-text h2 { font-size: 22px !important; }
  .m-levels { height: 170px; gap: 6px; }
  .m-levels li { padding: 10px 6px; border-radius: 12px; min-height: 64px; }
  .m-levels b { font-size: 15px; }
  .m-levels span { font-size: 10px; }
  .m-place-map { padding: 16px; border-radius: 24px; }
  .m-place-frames { grid-template-columns: 1fr; height: auto; }
  .m-place-frames iframe { height: 260px; }
  .m-social { padding: 22px; border-radius: 24px; }
  .m-social-btns .m-btn { flex: 1 1 auto; }
  .m-seo { padding: 20px; }
}

/* ── Наличие на странице товара, аксессуары, статусы ─────────────────── */
.product_stocks .stock-high,
.product_stocks .stock-none,
.product_stocks .m-status {
  display: flex !important; align-items: flex-start !important; gap: 10px !important;
  padding: 12px 14px; border-radius: 16px; font-weight: 700 !important; font-size: 15px !important; line-height: 1.35;
}
.product_stocks .m-status-hint { display: block; font-weight: 500; font-size: 13px; color: var(--m-ink-2); margin-top: 2px; }
.product_stocks .m-status svg { margin-top: 6px; flex: none; }
.m-status--ok   { background: var(--m-ok-bg);   color: var(--m-ok) !important; }
.m-status--way  { background: var(--m-way-bg);  color: var(--m-way) !important; }
.m-status--wait { background: var(--m-wait-bg); color: var(--m-wait) !important; }
.m-status--ok circle   { fill: var(--m-ok-dot); }
.m-status--way circle  { fill: var(--m-way-dot); }
.m-status--wait circle { fill: var(--m-wait-dot); }

/* Кешбэк — фирменный чип */
.cashback-txt { color: var(--m-accent-ink) !important; font-weight: 600; }

/* ── Аксессуары для модели (вместо «С этим товаром покупают») ─────────── */
.m-acc { background: var(--m-card); border-radius: var(--m-r-card); padding: 24px; margin-top: 20px; }
.m-acc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.m-acc-head h2 { margin: 0; font-size: 24px; }
.m-acc-head span { color: var(--m-dim); font-size: 14px; }
.m-acc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.m-acc-tabs button {
  font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; padding: 0 16px; cursor: pointer;
  border-radius: 12px; border: 1.5px solid var(--m-line); background: #fff; color: var(--m-ink);
}
.m-acc-tabs button[aria-pressed="true"] { background: var(--m-accent-soft); border-color: var(--m-accent); color: var(--m-accent-ink); }
.m-acc-tabs button span { opacity: .6; margin-left: 4px; }
.m-acc [data-m-type][hidden] { display: none !important; }

/* Лентой (корзина, 09.10): одна прокручиваемая строка, стрелки на компьютере,
   вкладки — тоже лентой, чтобы не занимать несколько строк на телефоне */
.m-acc-rail { position: relative; }
.m-acc--row { padding: 18px 18px 14px; margin-top: 4px; }
.m-acc--row .m-acc-head { margin-bottom: 10px; }
.m-acc--row .m-acc-head h2 { font-size: 19px; }
.m-acc--row .m-acc-head span { font-size: 13px; }
.m-acc--row .m-acc-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px 12px; padding: 0 18px; }
.m-acc--row .m-acc-tabs::-webkit-scrollbar { display: none; }
.m-acc--row .m-acc-tabs button { flex: none; min-height: 38px; padding: 0 12px; font-size: 13px; }
.m-acc--row .m-acc-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 10px; margin: 0 -18px; padding: 0 18px 4px; scroll-padding: 0 18px; }
.m-acc--row .m-acc-grid::-webkit-scrollbar { display: none; }
.m-acc--row .m-acc-card { flex: 0 0 178px; scroll-snap-align: start; padding: 10px; gap: 6px; border-radius: 16px; }
.m-acc--row .m-acc-name { font-size: 13px; min-height: 35px; }
.m-acc--row .m-acc-price b { font-size: 16px; }
.m-acc--row .m-acc-add { width: 100%; }
.m-acc-arrow {
  position: absolute; top: 38%; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--m-ink); box-shadow: 0 4px 16px rgba(35,31,32,.18); display: flex; align-items: center; justify-content: center;
}
.m-acc-arrow[hidden] { display: none; }
.m-acc-arrow--prev { left: -8px; }
.m-acc-arrow--next { right: -8px; }
@media (max-width: 767px) {
  .m-acc-arrow { display: none !important; }
  .m-acc--row .m-acc-card { flex-basis: 44%; }
  .m-acc--row .m-acc-head h2 { font-size: 17px; }
  .m-acc--row .m-acc-head span { display: none; }
}

/* Карточка аксессуара: вариант под модель и «в корзину» прямо здесь */
.m-acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.m-acc-card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 20px;
  background: #fff; border: 1.5px solid var(--m-line); transition: border-color .15s, box-shadow .15s;
}
.m-acc-card:hover { border-color: #DCD3EC; box-shadow: 0 6px 20px rgba(35,31,32,.06); }
.m-acc-img { display: block; aspect-ratio: 1; border-radius: 14px; background: #fff; overflow: hidden; }
.m-acc-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.m-acc-card .m-chip { margin: 2px 0 0; }
.m-acc-name {
  color: var(--m-ink) !important; font-size: 14px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px;
}
.m-acc-name:hover { color: var(--m-accent-ink) !important; }
.m-acc-skus { display: flex; flex-wrap: wrap; gap: 6px; }
.m-acc-sku {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--m-ink);
  min-height: 32px; min-width: 32px; padding: 0 10px; border-radius: 10px;
  border: 1.5px solid var(--m-line); background: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.m-acc-sku--color { padding: 0; width: 32px; border-radius: 50%; }
.m-acc-sku--color i { width: 22px; height: 22px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.m-acc-sku[aria-checked="true"] { border-color: var(--m-accent); box-shadow: 0 0 0 1px var(--m-accent); }
.m-acc-sku[aria-checked="true"]:not(.m-acc-sku--color) { background: var(--m-accent-soft); color: var(--m-accent-ink); }
.m-acc-label { font-size: 12px; color: var(--m-dim); min-height: 16px; }
.m-acc-buy { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.m-acc-price { display: flex; flex-direction: column; line-height: 1.15; }
.m-acc-price b { font-size: 18px; font-weight: 800; }
.m-acc-price s { font-size: 12px; color: #8C8696; }
.m-acc-price s:empty { display: none; }
.m-acc-add {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border: 0; color: #fff;
  background: var(--m-accent); border-radius: 12px; min-height: 44px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s;
}
.m-acc-add:hover { background: var(--m-accent-ink); }
.m-acc-add:disabled { opacity: .6; cursor: progress; }
.m-acc-add.is-added { background: var(--m-ok-bg); color: var(--m-ok); }
.m-acc-more {
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; margin: 16px auto 0; display: block;
  min-height: 46px; padding: 0 24px; border-radius: 14px; border: 1.5px solid var(--m-line); background: #fff; color: var(--m-accent-ink);
}
.m-acc-more[hidden] { display: none; }
.m-acc-card[hidden] { display: none !important; }

/* ── Телефон ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .header-bottom { border-radius: 0 0 20px 20px; margin-top: 0; }
  .m-acc { padding: 16px; border-radius: 20px; }
  .m-acc-head h2 { font-size: 20px; }
  .m-acc-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px; scrollbar-width: none; }
  .m-acc-tabs::-webkit-scrollbar { display: none; }
  .m-acc-tabs button { white-space: nowrap; }
  .m-acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .m-acc-card { padding: 10px; border-radius: 16px; }
  .m-acc-add { width: 100%; justify-content: center; }
  .m-acc-price b { font-size: 16px; }
}

/* ── Статус на карточке в списках ─────────────────────────────────────── */
.m-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.m-chip i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.m-chip--in_stock { color: var(--m-ok); }   .m-chip--in_stock i { background: var(--m-ok-dot); }
.m-chip--incoming { color: var(--m-way); }  .m-chip--incoming i { background: var(--m-way-dot); }
.m-chip--on_order { color: var(--m-wait); } .m-chip--on_order i { background: var(--m-wait-dot); }


/* ── Прежние шаблоны карточек (каталог до переделки) и подвал ─────────── */
/* ── Карточка товара в подборках и каталоге — порядок как в макете:
      наличие → название → цена → кешбэк → кнопка ───────────────────────── */
.thumb.js-Product-grid {
  background: var(--m-card) !important; border-radius: 22px !important; border: 0 !important;
  box-shadow: none !important; transition: box-shadow .2s, transform .2s;
}
.thumb.js-Product-grid:hover { box-shadow: 0 10px 30px rgba(35,31,32,.08) !important; transform: translateY(-2px); }
.thumb.js-Product-grid .thumb-img img { transition: transform .3s; }
.thumb.js-Product-grid:hover .thumb-img img { transform: scale(1.03); }
.thumb.js-Product-grid .thumb-bottom { display: flex !important; flex-direction: column; gap: 6px; }
.thumb.js-Product-grid .thumb-bottom > .m-chip { order: 1; margin: 0; }
.thumb.js-Product-grid .thumb-bottom > .thumb-name { order: 2; font-weight: 600; line-height: 1.35; min-height: 2.7em; }
.thumb.js-Product-grid .thumb-bottom > .thumb-price { order: 3; font-size: 20px; font-weight: 800; }
.thumb.js-Product-grid .thumb-bottom > .item-cashback { order: 4; margin: 0 !important; }
.thumb.js-Product-grid .thumb-bottom > .button,
.thumb.js-Product-grid .thumb-bottom > .button-one-click__wrap { order: 5; margin-top: 4px; }
.thumb.js-Product-grid .thumb-bottom > input { order: 9; }
.thumb.js-Product-grid .button {
  background: var(--m-accent) !important; border-radius: 12px !important; min-height: 44px; font-weight: 700 !important;
}
.thumb.js-Product-grid .button:hover { background: var(--m-accent-ink) !important; }
.thumb.js-Product-grid .thumb-bottom { text-align: left !important; align-items: stretch !important; }
.thumb.js-Product-grid .thumb-bottom > .m-chip,
.thumb.js-Product-grid .thumb-bottom > .item-cashback { align-self: flex-start; justify-content: flex-start; }
.thumb.js-Product-grid .thumb-bottom > .thumb-name, .thumb.js-Product-grid .thumb-bottom > .thumb-price { justify-content: flex-start !important; text-align: left !important; }

/* ── Подвал (макет) ───────────────────────────────────────────────────── */
.m-footer { background: var(--m-ink) !important; color: #D9D6DE; margin-top: 56px; padding: 0 !important; }
.m-footer-in { padding-top: 44px; padding-bottom: 28px; }
.m-footer-cols { display: grid; grid-template-columns: 1.1fr .9fr .7fr 1.5fr 1.1fr; gap: 28px; }
.m-footer-col { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; min-width: 0; }
.m-footer-col b { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.m-footer-col a { color: #D9D6DE !important; text-decoration: none; }
.m-footer-col a:hover { color: #fff !important; }
.m-footer-col address { font-style: normal; color: #fff; font-weight: 600; }
.m-footer-logo { display: inline-block; line-height: 0; margin-bottom: 8px; }
.m-footer-phone { color: #fff !important; font-weight: 800; font-size: 18px; }
.m-footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.m-footer-social a { border: 1.5px solid #4A444F; border-radius: 10px; padding: 6px 12px; font-weight: 600; font-size: 13px; }
.m-footer-social a:hover { border-color: #fff; }
.m-footer-cats > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.m-footer-map { margin-top: 32px; border-radius: 22px; overflow: hidden; height: 260px; background: #2E292F; }
.m-footer-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.m-footer-bottom { margin-top: 28px; padding-top: 20px; border-top: 1px solid #3A353C; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: #9C96A3; }
.m-footer-dev img { height: 22px; width: auto; opacity: .55; filter: grayscale(1) brightness(2); }
.m-footer-dev:hover img { opacity: .9; }
#note_alert { background: var(--m-ink); color: #9C96A3; }
@media (max-width: 1159px) { .m-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .m-footer-cats { grid-column: span 2; } }
@media (max-width: 767px) {
  .m-footer { margin-top: 36px; padding-bottom: 90px !important; }   /* место под нижнюю панель телефона */
  .m-footer-in { padding-top: 32px; }
  .m-footer-cols { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .m-footer-brand, .m-footer-cats { grid-column: 1 / -1; }
  .m-footer-map { height: 200px; }
}

/* Общие мелочи прежних страниц */
h1, .product-name, .category-name { font-weight: 800 !important; letter-spacing: -.2px; }
.button-custom, .js-submit-form.button-custom { background: var(--m-accent) !important; border-radius: var(--m-r-ctrl) !important; min-height: 52px; font-weight: 700 !important; box-shadow: none !important; }
.button-custom:hover { background: var(--m-accent-ink) !important; }

/* ── Внутренние страницы: крошки, заголовок, пустое, страницы ─────────── */
.m-page { padding-top: 16px; padding-bottom: 8px; }
.m-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--m-dim); margin-bottom: 10px; }
.m-crumbs a { color: var(--m-dim) !important; text-decoration: none; }
.m-crumbs a:hover { color: var(--m-accent) !important; }
.m-crumbs > * + *::before { content: "›"; margin-right: 6px; color: var(--m-mute); }
.m-page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 16px; }
.m-page-head h1 { margin: 0 !important; font-size: 32px !important; font-weight: 800 !important; letter-spacing: -.5px; line-height: 1.15; }
.m-page-count { color: var(--m-dim); font-size: 14px; }
.m-search-fixed { margin: -6px 0 14px; color: var(--m-ink-2); }
.m-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; padding-bottom: 2px; }
.m-chips::-webkit-scrollbar { display: none; }
.m-chip-link { flex: none; white-space: nowrap; padding: 9px 14px; border-radius: 12px; background: #fff; color: var(--m-ink) !important; font-size: 14px; font-weight: 600; text-decoration: none; border: 1.5px solid transparent; }
.m-chip-link:hover { border-color: var(--m-line-2); }
.m-chip-link.is-on { background: var(--m-accent-soft); color: var(--m-accent-ink) !important; border-color: var(--m-accent); }
.m-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.m-pager a, .m-pager span, .m-pager i { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 700; font-style: normal; text-decoration: none; }
.m-pager a { background: #fff; color: var(--m-ink) !important; }
.m-pager a:hover { background: var(--m-accent-soft); }
.m-pager span { background: var(--m-accent); color: #fff; }
.m-empty { background: #fff; border-radius: 24px; padding: 32px; color: var(--m-ink-2); line-height: 1.6; }
.m-empty p { margin: 0 0 8px; }
.m-empty-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.m-btn--soft { background: var(--m-accent-soft); color: var(--m-accent-ink) !important; }
.m-btn--soft:hover { background: #E9DDFC; }
@media (max-width: 767px) { .m-page-head h1 { font-size: 24px !important; } .m-empty { padding: 20px; } }

/* ── Раздел каталога: фильтры слева, сортировка, карточки ─────────────── */
.m-cat-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; }
.m-cat-layout--wide { grid-template-columns: minmax(0, 1fr); }
.m-cat-main { min-width: 0; transition: opacity .2s; }
.m-cat-main.is-loading { opacity: .45; pointer-events: none; }
.m-cat-main .m-cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.m-cat-side { position: sticky; top: 132px; max-height: calc(100vh - 150px); overflow-y: auto; scrollbar-width: thin; border-radius: 22px; }
.m-cat-banner { margin-bottom: 16px; border-radius: 22px; overflow: hidden; line-height: 0; }
.m-cat-banner img { width: 100%; height: auto; }

.m-filters { background: #fff; border-radius: 22px; padding: 6px 16px 16px; }
.m-filters-head { display: none; }
.m-f { border: 0; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--m-line); min-width: 0; }
.m-f legend { float: left; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; font-weight: 700; font-size: 14px; cursor: pointer; user-select: none; }
.m-f legend::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--m-mute); border-bottom: 2px solid var(--m-mute); transform: rotate(45deg); margin: -4px 4px 0 auto; transition: transform .2s; }
.m-f.is-closed legend::after { transform: rotate(-45deg); margin-top: 0; }
.m-f > div, .m-f > button { clear: both; }
.m-f.is-closed > :not(legend) { display: none; }
.m-f-n { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--m-accent); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; box-sizing: border-box; }
.m-f legend .m-f-n { margin-left: auto; }
.m-f-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 10px; }
.m-f-range label { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 10px; border-radius: 10px; background: var(--m-bg); font-size: 13px; color: var(--m-dim); }
.m-f-range input { width: 100%; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font: inherit; font-size: 14px; color: var(--m-ink); padding: 0; }
.m-f-opts { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
.m-f-opts--inline { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.m-f--many:not(.is-all) .m-f-opts > :nth-child(n+9) { display: none; }
.m-f-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.m-f-check input { width: 18px; height: 18px; accent-color: var(--m-accent); margin: 0; flex: none; }
.m-f-pill input, .m-f-color input { position: absolute; opacity: 0; pointer-events: none; }
.m-f-pill span { display: inline-flex; padding: 7px 12px; border-radius: 10px; border: 1.5px solid var(--m-line); font-size: 13px; font-weight: 600; cursor: pointer; }
.m-f-pill input:checked + span { background: var(--m-accent-soft); border-color: var(--m-accent); color: var(--m-accent-ink); }
.m-f-color { position: relative; cursor: pointer; }
.m-f-color span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 999px; border: 1.5px solid var(--m-line); font-size: 13px; font-weight: 600; }
.m-f-color i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); flex: none; }
.m-f-color input:checked + span { border-color: var(--m-accent); background: var(--m-accent-soft); color: var(--m-accent-ink); }
.m-f-more { margin-top: 6px; padding: 4px 0; background: none; border: 0; color: var(--m-accent-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.m-filters-foot { display: flex; gap: 8px; padding-top: 14px; }
.m-filters-foot .m-btn { flex: 1; min-height: 46px; padding: 0 12px; font-size: 14px; }
.m-filters.is-live .m-filters-foot button[type=submit] { display: none; }

.m-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.m-toolbar-filters { display: none; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--m-ink); flex: none; }
.m-sort { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; background: #fff; border-radius: 12px; padding: 4px; }
.m-sort::-webkit-scrollbar { display: none; }
.m-sort a { flex: none; white-space: nowrap; padding: 8px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--m-ink-2) !important; text-decoration: none; }
.m-sort a:hover { color: var(--m-ink) !important; background: var(--m-bg); }
.m-sort a.is-on { background: var(--m-ink); color: #fff !important; }

.m-seo--fold .m-seo-in { max-height: 320px; overflow: hidden; position: relative; }
.m-seo--fold .m-seo-in::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, #fff); }
.m-seo--fold.is-open .m-seo-in { max-height: none; }
.m-seo--fold.is-open .m-seo-in::after { display: none; }
.m-seo--fold .m-link { margin-top: 10px; }
.m-side-shade[hidden] { display: none; }

@media (max-width: 1023px) {
  .m-cat-layout { grid-template-columns: minmax(0, 1fr); }
  .m-toolbar-filters { display: inline-flex; }
  .m-cat-side { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 100; max-height: 86dvh; border-radius: 24px 24px 0 0; transform: translateY(105%); transition: transform .25s ease; box-shadow: 0 -10px 40px rgba(0,0,0,.15); }
  .m-cat-side.is-open { transform: none; }
  .m-filters { border-radius: 24px 24px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .m-filters-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #fff; padding: 12px 0; z-index: 1; font-size: 20px; font-weight: 800; }
  .m-filters-x { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--m-bg); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--m-ink); }
  .m-filters-foot { position: sticky; bottom: 0; background: #fff; padding-bottom: 4px; }
  .m-filters.is-live .m-filters-foot button[type=submit] { display: inline-flex; }
  .m-side-shade { position: fixed; inset: 0; z-index: 99; background: rgba(35,31,32,.45); }
}
@media (max-width: 767px) { .m-cat-main .m-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.m-cat-main .m-cat-banner { margin: 28px 0 0; }

/* ── Страница товара (макет) ─────────────────────────────────────────── */
.m-admin-edit { display: inline-block; margin-bottom: 10px; font-size: 13px; color: var(--m-accent-ink) !important; }
.m-pd { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); gap: 20px; align-items: start; }
.m-pd-gallery { position: sticky; top: 132px; background: #fff; border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.m-pd-main { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #fff; }
.m-pd-main img { width: 100%; height: 100%; object-fit: contain; transition: opacity .2s; }
.m-pd-noimg { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--m-mute); background: var(--m-bg); border-radius: 20px; }
.m-pd-fav { top: 8px; right: 8px; width: 44px; height: 44px; background: var(--m-bg); }
.m-pd-badge { position: absolute; top: 12px; left: 12px; background: #E0457B; color: #fff; font-weight: 800; font-size: 13px; border-radius: 10px; padding: 5px 10px; }
.m-pd-badge[hidden] { display: none; }
.m-pd-thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.m-pd-thumbs::-webkit-scrollbar { display: none; }
.m-pd-thumbs[hidden] { display: none; }
.m-pd-thumb { flex: 0 0 76px; height: 76px; padding: 6px; border-radius: 14px; background: #fff; border: 1.5px solid var(--m-line); cursor: pointer; }
.m-pd-thumb img { width: 100%; height: 100%; object-fit: contain; }
.m-pd-thumb.is-on { border-color: var(--m-accent); box-shadow: 0 0 0 1px var(--m-accent); }
.m-pd-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.m-pd-card { background: #fff; border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.m-pd-card h1 { margin: 0 !important; font-size: 28px !important; line-height: 1.2; font-weight: 800 !important; letter-spacing: -.4px; }
.m-pd-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--m-dim); margin-top: -8px; }
.m-pd-meta b { color: var(--m-ink-2); font-weight: 600; }
.m-pd-opt { display: flex; flex-direction: column; gap: 10px; }
.m-pd-opt-t { font-size: 14px; color: var(--m-dim); }
.m-pd-opt-t b { color: var(--m-ink); }
.m-pd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m-pd-chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 14px;
  border-radius: 12px; border: 1.5px solid var(--m-line-2); background: #fff; color: var(--m-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s;
}
.m-pd-chip:hover { border-color: var(--m-accent); }
.m-pd-chip.is-on { background: var(--m-accent-soft); border-color: var(--m-accent); color: var(--m-accent-ink); }
.m-pd-chip.is-none { opacity: .45; }
.m-pd-sw { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); flex: none; }
.m-pd-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.m-pd-dot--in_stock { background: var(--m-ok-dot); }
.m-pd-dot--incoming { background: var(--m-way-dot); }
.m-pd-dot--on_order { background: var(--m-wait-dot); }
.m-pd-legend { margin: -4px 0 0; font-size: 12px; color: var(--m-dim); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.m-pd-legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.m-pd-legend .d-ok { background: var(--m-ok-dot); } .m-pd-legend .d-way { background: var(--m-way-dot); } .m-pd-legend .d-wait { background: var(--m-wait-dot); }
.m-pd-buy { gap: 14px; }
.m-pd-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.m-pd-price b { font-size: 36px; font-weight: 800; letter-spacing: -.5px; }
.m-pd-price s { color: var(--m-mute); font-size: 18px; }
.m-pd-price s:empty { display: none; }
.m-pd-bonus { background: var(--m-accent-soft); color: var(--m-accent-ink); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.m-pd-bonus[hidden] { display: none; }
.m-pd-status { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; }
.m-pd-status > i { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; flex: none; }
.m-pd-status > span { display: flex; flex-direction: column; gap: 3px; }
.m-pd-status b { font-size: 16px; }
.m-pd-status span span { font-size: 14px; color: var(--m-ink-2); line-height: 1.5; }
.m-pd-status--in_stock { background: var(--m-ok-bg); } .m-pd-status--in_stock b { color: var(--m-ok); } .m-pd-status--in_stock > i { background: var(--m-ok-dot); }
.m-pd-status--incoming { background: var(--m-way-bg); } .m-pd-status--incoming b { color: var(--m-way); } .m-pd-status--incoming > i { background: var(--m-way-dot); }
.m-pd-status--on_order { background: var(--m-wait-bg); } .m-pd-status--on_order b { color: var(--m-wait); } .m-pd-status--on_order > i { background: var(--m-wait-dot); }
.m-pd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.m-pd-add { flex: 1 1 200px; min-height: 56px; font-size: 16px; }
.m-pd-add[hidden] { display: none !important; }
.m-pd-add.is-added { background: var(--m-ok); }
.m-pd-add:disabled { opacity: .55; cursor: not-allowed; }
.m-pd-credit { flex: 1 1 150px; min-height: 56px; border: 1.5px solid var(--m-line-2); color: var(--m-ink) !important; background: #fff; }
.m-pd-credit:hover { border-color: var(--m-accent); }
.m-pd-services { flex: 1 1 100%; border: 0; margin: 0; padding: 0; }
.m-pd-services legend { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.m-pd-ways { display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 14px; }
.m-pd-ways > div { background: var(--m-bg); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.m-pd-ways span { color: var(--m-dim); line-height: 1.4; }
.m-pd-ways a { color: var(--m-accent-ink) !important; }
.m-pd-tradein { background: var(--m-ink); color: #fff; border-radius: 28px; overflow: hidden; }
.m-pd-tradein summary { list-style: none; padding: 22px 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; }
.m-pd-tradein summary::-webkit-details-marker { display: none; }
.m-pd-tradein summary svg { flex: none; transition: transform .2s; }
.m-pd-tradein[open] summary svg { transform: rotate(180deg); }
.m-pd-tradein summary > span { display: flex; flex-direction: column; gap: 3px; }
.m-pd-tradein b { font-size: 17px; }
.m-pd-tradein summary span span { color: #D9D6DE; font-size: 14px; }
.m-pd-tradein-in { padding: 0 28px 22px; color: #E6E3EA; font-size: 14px; line-height: 1.5; }
.m-pd-tradein-in p { margin: 0 0 8px; }
.m-pd-tradein-in a { color: #fff !important; text-decoration: underline; }
.m-product .m-acc { margin-top: 20px; padding: 28px; border-radius: 28px; }
.m-pd-info { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.m-pd-block { background: #fff; border-radius: 28px; padding: 28px; margin-top: 20px; }
.m-pd-info .m-pd-block { margin-top: 0; }
.m-pd-block h2 { margin: 0 0 14px !important; font-size: 22px !important; }
.m-pd-block h2 small { font-size: 15px; color: var(--m-dim); font-weight: 600; }
.m-pd-specs dl { margin: 0; display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 10px 24px; font-size: 15px; }
.m-pd-specs dt { color: var(--m-dim); }
.m-pd-specs dd { margin: 0; }
.m-pd-why ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.m-pd-why li { display: flex; flex-direction: column; gap: 2px; }
.m-pd-why li span { color: var(--m-ink-2); font-size: 14px; line-height: 1.5; }
.m-pd-why a { color: var(--m-accent-ink) !important; }
.m-product .m-seo--fold .m-seo-in { color: var(--m-ink-2); line-height: 1.7; font-size: 15px; }

@media (max-width: 1023px) {
  .m-pd { grid-template-columns: 1fr; }
  .m-pd-gallery { position: static; }
  .m-pd-info { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .m-pd-gallery, .m-pd-card, .m-pd-block, .m-product .m-acc { border-radius: 22px; padding: 18px; }
  .m-pd-card h1 { font-size: 22px !important; }
  .m-pd-price b { font-size: 28px; }
  .m-pd-thumb { flex-basis: 60px; height: 60px; }
  .m-pd-ways { grid-template-columns: 1fr; }
  .m-pd-tradein { border-radius: 22px; }
  .m-pd-tradein summary { padding: 18px 20px; }
  .m-pd-tradein-in { padding: 0 20px 18px; }
  .m-pd-specs dl { grid-template-columns: 1fr; gap: 2px; }
  .m-pd-specs dd { margin-bottom: 8px; }
  /* Кнопка покупки всегда под рукой на телефоне */
  .m-pd-actions { position: sticky; bottom: 76px; z-index: 5; background: #fff; padding: 8px 0; margin: 0 -2px; }
}

/* Кнопка связи (пингвин) — на телефоне меньше и над нижней панелью */
@media (max-width: 1023px) {
  .tw-fixed.tw-right-5.tw-bottom-\[100px\] { right: 10px !important; bottom: 84px !important; transform: scale(.72); transform-origin: right bottom; }
}

/* ── «Крошки» прежних страниц (корзина, страницы, блог) — как в новом ── */
ul.breadcrumbs { list-style: none; display: flex !important; flex-wrap: wrap; justify-content: flex-start !important; gap: 4px 6px; max-width: calc(var(--m-max) + 2 * var(--m-gut)); margin: 16px auto 10px !important; padding: 0 var(--m-gut) !important; font-size: 13px; color: var(--m-dim); box-sizing: border-box; }
ul.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
ul.breadcrumbs a { color: var(--m-dim) !important; text-decoration: none; }
ul.breadcrumbs a:hover { color: var(--m-accent) !important; }
ul.breadcrumbs .rarr { color: var(--m-mute); font-size: 0; }
ul.breadcrumbs .rarr::before { content: "›"; font-size: 13px; }

/* ── Корзина (логика прежняя, вид — новый) ───────────────────────────── */
.cart-head h1, .cart-header { font-size: 32px !important; font-weight: 800 !important; letter-spacing: -.5px; }
.cart-products > *, .cart-aside { border-radius: 22px !important; }
.cart-aside { position: sticky; top: 132px; }
.cart-aside-header { font-size: 22px !important; font-weight: 800 !important; }
.cart-page .m-acc, .m-wrap > .m-acc { margin-top: 32px; }
@media (max-width: 767px) { .cart-head h1, .cart-header { font-size: 24px !important; } .cart-aside { position: static; } }

/* ── Оформление заказа (qdi_order), 09.10: шаги слева, сводка справа ──── */
.info-page > .container:has(#create_order) { max-width: calc(var(--m-max) + 2 * var(--m-gut)) !important; width: 100%; padding: 0 var(--m-gut) !important; box-sizing: border-box; }
.m-co-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin: 0 0 16px; }
.m-co-head h1 { margin: 0 !important; font-size: 32px !important; font-weight: 800 !important; letter-spacing: -.5px; }
#create_order.m-co { display: grid !important; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; transition: opacity .15s; }
#create_order.loading { opacity: 1; }
#create_order.loading [data-m-co-ship], #create_order.loading [data-m-co-pay], #create_order.loading [data-m-co-summary] { opacity: .55; pointer-events: none; }
#create_order .m-co-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#create_order .m-co-step { background: var(--m-card); border-radius: var(--m-r-card); padding: 24px; transition: opacity .15s; }
#create_order .m-co-title { display: flex; align-items: center; gap: 12px; margin: 0 0 18px !important; font-size: 20px !important; font-weight: 800 !important; }
#create_order .m-co-title i { font-style: normal; width: 32px; height: 32px; border-radius: 50%; background: var(--m-accent-soft); color: var(--m-accent-ink); display: grid; place-items: center; font-size: 15px; }
#create_order #checkout-step-contact-form.m-co-fields, #create_order .m-co-fields { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: none !important; gap: 14px 16px; }
#create_order .m-co-fields > .m-co-f { grid-column: auto !important; grid-area: auto !important; width: auto !important; max-width: none !important; }
#create_order .m-co-fields > .m-co-f--wide { grid-column: 1 / -1 !important; }
#create_order .m-co-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 16px; }
#create_order .m-co-f { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; }
#create_order .m-co-f--wide { grid-column: 1 / -1; }
#create_order .wa-name { font-size: 13px; font-weight: 700; color: var(--m-ink-2); padding: 0 !important; width: auto !important; float: none !important; }
#create_order .wa-name small { font-weight: 500; color: var(--m-mute); }
#create_order .wa-value { padding: 0 !important; margin: 0 !important; }
#create_order input[type=text], #create_order input[type=tel], #create_order input[type=email], #create_order select, #create_order textarea {
  width: 100% !important; box-sizing: border-box; min-height: 46px; padding: 11px 14px !important; border: 1.5px solid var(--m-line) !important; border-radius: 12px !important;
  background: #fff !important; font: inherit; font-size: 15px !important; color: var(--m-ink); box-shadow: none !important; }
#create_order textarea { min-height: 72px; resize: vertical; }
#create_order input:focus, #create_order select:focus, #create_order textarea:focus { outline: none; border-color: var(--m-accent) !important; }
#create_order .wa-error input, #create_order .wa-error select { border-color: #d6332c !important; background: #fff6f5 !important; }
#create_order .wa-error .wa-name::after { content: " — заполните"; color: #d6332c; font-weight: 600; }
#create_order .m-co-fixed { display: flex; align-items: center; min-height: 46px; font-weight: 700; }
#create_order .m-co-options { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
#create_order .m-co-options li { margin: 0; padding: 0; }
#create_order .m-co-opt { display: block; position: relative; cursor: pointer; height: 100%; }
#create_order .m-co-opt input { position: absolute; opacity: 0; pointer-events: none; }
#create_order .m-co-opt-body { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 14px 16px; border: 1.5px solid var(--m-line); border-radius: 16px; background: #fff; transition: border-color .15s, background .15s; }
#create_order .m-co-opt-body b { font-size: 15px; }
#create_order .m-co-opt-body small { font-size: 12px; color: var(--m-mute); line-height: 1.4; }
#create_order .m-co-opt-ico { width: 28px; height: 28px; object-fit: contain; margin-bottom: 4px; }
#create_order .m-co-opt:hover .m-co-opt-body { border-color: var(--m-line-2); }
#create_order .m-co-opt input:checked + .m-co-opt-body { border-color: var(--m-accent); background: var(--m-accent-soft); }
#create_order .m-co-opt input:checked + .m-co-opt-body b { color: var(--m-accent-ink); }
#create_order .m-co-opt input:focus-visible + .m-co-opt-body { outline: 2px solid var(--m-accent); outline-offset: 2px; }
#create_order .m-co-note { margin: 12px 0 0; font-size: 13px; color: var(--m-mute); line-height: 1.5; }
#create_order .m-co-pickup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; margin-top: 16px; align-items: start; }
#create_order .m-co-pickup-txt { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--m-ink-2); }
#create_order .m-co-pickup-txt b { color: var(--m-ink); font-size: 15px; }
#create_order .m-co-pickup-txt .m-chip { margin: 0; }
#create_order .m-co-map { border-radius: 16px; overflow: hidden; min-height: 180px; }
#create_order .m-co-map iframe { width: 100% !important; height: 220px !important; border: 0; display: block; }
#create_order .m-co-map .page_contacts { margin: 0 !important; padding: 0 !important; }
#create_order .m-co-search { display: flex; gap: 8px; margin-top: 14px; border: 0; border-radius: 0; background: none; } /* 24.10: без рамки старой темы вокруг поля и кнопки */
#create_order .m-co-search input { flex: 1; }
#create_order .m-co-search button { flex: none; width: 46px; border: 0; border-radius: 12px; background: var(--m-ink); color: #fff; display: grid; place-items: center; cursor: pointer; }
#create_order .m-co-pvz .list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 360px; overflow: auto; }
#create_order .m-co-pvz .list:empty { display: none; }
#create_order .m-co-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 132px; min-width: 0; }
#create_order .m-co-card { background: var(--m-card); border-radius: var(--m-r-card); padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: opacity .15s; }
#create_order .m-co-sum-head { display: flex; justify-content: space-between; align-items: baseline; }
#create_order .m-co-sum-head h2 { margin: 0 !important; font-size: 20px !important; font-weight: 800 !important; }
#create_order .m-co-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow: auto; }
#create_order .m-co-items li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0; }
#create_order .m-co-item-img { width: 48px; height: 48px; border-radius: 12px; background: var(--m-bg); display: grid; place-items: center; overflow: hidden; }
#create_order .m-co-item-img img { max-width: 42px; max-height: 42px; object-fit: contain; }
#create_order .m-co-item-name { font-size: 13px; font-weight: 600; line-height: 1.3; display: flex; flex-direction: column; }
#create_order .m-co-item-name small { font-weight: 500; color: var(--m-mute); }
#create_order .m-co-item-q { font-size: 13px; color: var(--m-mute); white-space: nowrap; }
#create_order .m-co-coupon { display: flex; gap: 8px; flex-wrap: wrap; }
#create_order .m-co-coupon .wa-field { flex: 1; margin: 0; }
#create_order .m-co-coupon input { width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px; border: 1.5px solid var(--m-line); border-radius: 12px; font: inherit; font-size: 14px; }
#create_order .m-co-coupon .m-btn { height: 42px; }
#create_order .m-co-buyer { margin: 0; font-size: 13px; color: var(--m-mute); }
/* Имя ещё не ввели — пустое «Покупатель:» не показываем (21.10). */
#create_order .m-co-buyer:has(.js-firstname:empty):has(.js-lastname:empty) { display: none; }
#create_order .m-co-err { margin: 0; color: #c0392b; font-size: 13px; font-weight: 600; }
#create_order .m-co-go { width: 100%; justify-content: center; height: 54px; font-size: 16px; }
#create_order .m-co-agree { display: flex; flex-direction: column; gap: 8px; }
#create_order .m-co-agree label { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--m-mute); line-height: 1.4; cursor: pointer; }
#create_order .m-co-agree input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--m-accent); }
#create_order .m-co-agree .wa-error { color: #c0392b; }
@media (max-width: 1023px) {
  #create_order.m-co { grid-template-columns: 1fr; }
  #create_order .m-co-side { position: static; }
}
@media (max-width: 767px) {
  .m-co-head h1 { font-size: 24px !important; }
  #create_order .m-co-step { padding: 18px; }
  #create_order #checkout-step-contact-form.m-co-fields, #create_order .m-co-fields, #create_order .m-co-grid, #create_order .m-co-pickup { grid-template-columns: 1fr !important; }
  #create_order .m-co-options { grid-template-columns: 1fr; }
}

/* ── Страница «Каталог» и текстовые страницы ─────────────────────────── */
.catalog-page.home-nav_cats { display: none !important; }   /* список разделов дублирует карточки */
h1.page-header.container { max-width: calc(var(--m-max) + 2 * var(--m-gut)) !important; margin: 8px auto 16px !important; padding: 0 var(--m-gut) !important; font-size: 32px !important; font-weight: 800 !important; letter-spacing: -.5px; box-sizing: border-box; }
.m-cats--all { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-items: start; }
.m-cat--full { padding: 0; min-height: 0; overflow: hidden; }
.m-cat--full:hover { transform: none; }
.m-cat-top { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 150px; padding: 16px; color: var(--m-ink) !important; text-decoration: none; }
.m-cat-top:hover { color: var(--m-accent-ink) !important; }
.m-cat-top img { width: 100%; height: 96px; object-fit: contain; object-position: right bottom; }
.m-cat-ico { align-self: flex-end; width: 64px; height: 64px; border-radius: 18px; background: var(--m-accent-soft); color: var(--m-accent); font-weight: 800; font-size: 28px; display: flex; align-items: center; justify-content: center; }
.m-cat-subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px; }
.m-cat-subs a { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--m-bg); color: var(--m-ink-2) !important; text-decoration: none; }
.m-cat-subs a:hover { background: var(--m-accent-soft); color: var(--m-accent-ink) !important; }
/* Текстовые страницы (доставка, гарантия, трейд-ин…) — по центру, ширина под их вёрстку */
.info-page > .container:not(:has(#create_order)) { max-width: 1188px !important; width: 100%; margin: 0 auto !important; padding: 0 var(--m-gut) !important; box-sizing: border-box; }
@media (max-width: 767px) {
  h1.page-header.container { font-size: 24px !important; }
  /* 09.10: на телефоне плитки разъезжались — правила плиток главной (столбец наоборот,
     по центру) действовали и здесь, а длинные подразделы распирали колонки */
  .m-cats--all { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .m-cat--full { flex-direction: column; align-items: stretch; text-align: left; padding: 0; }
  .m-cat-top { min-height: 0; padding: 12px; }
  .m-cat-top b { font-size: 14px; }
  .m-cat-top img { height: 64px; aspect-ratio: auto; object-position: right bottom; }
  .m-cat-subs { padding: 0 12px 12px; gap: 5px; }
  .m-cat-subs a { font-size: 11.5px; padding: 4px 8px; white-space: normal; }
}
/* Заголовок текстовой страницы — по её содержимому */
h1.page-header.container { max-width: 1188px !important; }
.info-page .m-wrap { padding: 0; max-width: none; }

/* Первый экран на телефоне — компактный: заголовок, две кнопки в ряд, картинка ниже */
@media (max-width: 767px) {
  .m-hero-tag { display: none; }
  .m-hero-text { gap: 10px; padding-bottom: 0; }
  .m-hero-text h1 { font-size: 27px !important; }
  .m-hero-text p { font-size: 14px; }
  .m-hero-btns { flex-wrap: nowrap; }
  .m-hero-btns .m-btn { flex: 1 1 0; min-height: 46px; padding: 0 8px; font-size: 12.5px; white-space: nowrap; }
  .m-hero-img { width: 62%; margin: 0 -6px -6px auto; }
}

/* ── Личный кабинет (макет LkHome) ───────────────────────────────────── */
.info-page > .container:has(#lk) { max-width: calc(var(--m-max) + 2 * var(--m-gut)) !important; }
#lk { display: grid !important; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
#lk > aside { position: sticky; top: 132px; background: #fff; border-radius: 24px; padding: 12px; width: auto !important; margin: 0 !important; }
#lk > aside ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#lk > aside li a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; font-weight: 600; font-size: 14px; color: var(--m-ink) !important; text-decoration: none; }
#lk > aside li a:hover { background: var(--m-bg); }
#lk > aside li.active a { background: var(--m-accent-soft); color: var(--m-accent-ink) !important; }
#lk > aside li:last-child a { color: var(--m-dim) !important; }
#lk > .body { min-width: 0; width: auto !important; margin: 0 !important; }
.m-lk { display: flex; flex-direction: column; gap: 20px; }
.m-lk-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.m-lk-head h1 { margin: 0 !important; font-size: 30px !important; font-weight: 800 !important; letter-spacing: -.5px; }
.m-lk-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.m-lk-points { background: var(--m-accent); color: #fff; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.m-lk-points > span { font-size: 14px; opacity: .9; }
.m-lk-points b { font-size: 44px; line-height: 1; font-weight: 800; }
.m-lk-points em { font-style: normal; margin-top: 4px; background: rgba(255,255,255,.18); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.m-lk-level, .m-lk-block { background: #fff; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.m-lk-level > span:first-child, .m-lk-block--slim > span:first-child { font-size: 14px; color: var(--m-dim); }
.m-lk-level b, .m-lk-block--slim b { font-size: 26px; font-weight: 800; }
.m-lk-bar { height: 10px; border-radius: 99px; background: var(--m-accent-soft); overflow: hidden; display: block; }
.m-lk-bar i { display: block; height: 100%; background: var(--m-accent); border-radius: 99px; }
.m-lk-note { font-size: 14px; color: var(--m-ink-2); line-height: 1.5; }
.m-lk-block-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; }
.m-lk-block-head h2 { margin: 0 !important; font-size: 20px !important; font-weight: 800 !important; }  /* 24.10: было 500 — тоньше остальных заголовков сайта */
.m-lk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.m-lk-tile { border: 1.5px solid var(--m-line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.m-lk-tile-k { font-size: 12px; color: var(--m-dim); }
.m-lk-tile b { font-size: 15px; line-height: 1.3; }
.m-lk-tile .m-chip { margin: 0; }
.m-lk-tile-s { font-weight: 700; }
.m-lk-list { list-style: none; margin: 0; padding: 0; }
.m-lk-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--m-line); }
.m-lk-list li:first-child { border-top: 0; }
.m-lk-date { color: var(--m-dim); font-size: 13px; }
.m-lk-what { display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; }
.m-lk-what small { color: var(--m-dim); font-size: 12px; }
.m-lk-list b { white-space: nowrap; }
.m-lk-table-wrap { overflow-x: auto; }
.m-lk-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.m-lk-table th { color: var(--m-dim); text-align: left; font-weight: 600; padding: 8px 0; }
.m-lk-table th:last-child, .m-lk-table td:last-child { text-align: right; }
.m-lk-table td { padding: 12px 0; border-top: 1px solid var(--m-line); }
.m-lk-table td:first-child { color: var(--m-dim); white-space: nowrap; padding-right: 16px; }
.is-plus { color: var(--m-ok) !important; font-weight: 700; }
.is-minus { color: #C0392B !important; font-weight: 700; }
.m-lk-empty { margin: 0; color: var(--m-ink-2); }
@media (max-width: 1023px) {
  #lk { grid-template-columns: 1fr; }
  #lk > aside { position: static; padding: 6px; overflow-x: auto; }
  #lk > aside ul { flex-direction: row; gap: 4px; }
  #lk > aside li a { white-space: nowrap; min-height: 40px; }
}
@media (max-width: 767px) {
  .m-lk-head h1 { font-size: 24px !important; }
  .m-lk-points, .m-lk-level, .m-lk-block { padding: 18px; border-radius: 20px; }
  .m-lk-points b { font-size: 36px; }
  .m-lk-list li { grid-template-columns: 1fr auto; }
  .m-lk-date { grid-column: 1 / -1; }
}
.m-levels--lk { background: #fff; border-radius: 24px; padding: 20px; height: 200px; box-sizing: content-box; }
.m-levels--lk li { background: var(--m-bg); }
.m-levels--lk li.is-done { background: linear-gradient(180deg, var(--m-accent-soft), #E7DBFB); }
.m-levels--lk li.is-on { background: linear-gradient(180deg, #9B6BE0, var(--m-accent)); }
.m-levels--lk li.is-on b, .m-levels--lk li.is-on span { color: #fff; }
.m-levels--lk li:last-child:not(.is-on) { background: var(--m-bg); color: var(--m-ink); }
.m-levels--lk li:last-child:not(.is-on) b { color: var(--m-accent-ink); }
.m-levels--lk li:last-child:not(.is-on) span { color: var(--m-dim); }
#lk > .body { background: transparent !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
#lk > aside li, #lk > aside li.active { background: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
#lk > aside li.active a { background: var(--m-accent-soft) !important; color: var(--m-accent-ink) !important; }
#lk > aside li a::before, #lk > aside li a::after { display: none !important; }

/* ── Палитра старой темы → макет (08.10): старые блоки того же цвета ──── */
:root {
  --color-accent: #8654CC; --color-accent-hover: #5B2E9E; --color-accent-active: #4A2482;
  --color-accent-third: #C9B2EE; --color-light: #F6F6F7; --color-black: #231F20; --color-gray: #677178;
}

/* ── Текстовые страницы (доставка, гарантия, рассрочка, о нас, контакты,
      лояльность, документы) в стиле макета — 08.10. Содержимое страниц
      в админке не трогаем: оно размечено общими классами page-*. ─────── */
.info-page .container:not(:has(#create_order)):not(:has(#lk)) { max-width: 1188px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--m-gut) !important; padding-right: var(--m-gut) !important; box-sizing: border-box; }
.info-page .page-content { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; margin-top: 16px; margin-bottom: 16px; }
.info-page .page-content > .page-column { display: flex; flex-direction: column; gap: 16px !important; min-width: 0; }
.info-page .page-column-item { background: #fff; border-radius: 24px; padding: 28px !important; gap: 12px !important; }
.info-page .page-column[style*="100%"] { grid-column: 1 / -1; }
.info-page .page-subheader { font-size: 22px !important; line-height: 1.25 !important; font-weight: 800 !important; letter-spacing: -.3px; color: var(--m-ink) !important; margin: 0 !important; }
.info-page .page-text { font-size: 15px !important; line-height: 1.65 !important; color: var(--m-ink-2) !important; margin: 0 !important; }
.info-page .page-text + .page-text { margin-top: 10px !important; }
.info-page .text-bold { color: var(--m-ink); font-weight: 700; }
.info-page .text-accent, .info-page .page-text a { color: var(--m-accent-ink) !important; }
.info-page .page-material { background: var(--m-accent-soft) !important; border: 0 !important; border-radius: 16px !important; padding: 16px 18px !important; }
.info-page .page-material::before, .info-page .page-material::after, .info-page .page-material-with-circle::before { display: none !important; }
.info-page .page-material_column { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.info-page .page-list { margin: 0; padding-left: 0; list-style: none; counter-reset: m-step; display: flex; flex-direction: column; gap: 10px; }
.info-page .page-list_item { counter-increment: m-step; position: relative; padding-left: 40px; font-size: 15px; line-height: 1.55; color: var(--m-ink-2); }
.info-page ol.page-list .page-list_item::before { content: counter(m-step); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--m-accent); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.info-page ul.page-list .page-list_item::before { content: ""; position: absolute; left: 10px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--m-accent); }
.info-page .page-delivery-bnr, .info-page .page-image, .info-page .page_simple_banner { border-radius: 24px; overflow: hidden; line-height: 0; }
.info-page .page-delivery-bnr img, .info-page .page_simple_banner img { width: 100%; height: auto; border-radius: 24px; }
.info-page .page-banner-item, .info-page .page-banners > * { border-radius: 24px !important; }
.info-page .page-garant-stage { background: #fff; border-radius: 20px; padding: 18px !important; }
.info-page .page-garant-stage_number { color: var(--m-accent) !important; font-weight: 800 !important; }
.info-page .privacy-policy { background: #fff; border-radius: 24px; padding: 32px; max-width: 900px; margin: 0 auto 24px; line-height: 1.7; color: var(--m-ink-2); font-size: 15px; }
.info-page .privacy-policy h2, .info-page .privacy-policy h3 { color: var(--m-ink); font-size: 19px; margin: 24px 0 8px; }
.info-page .button-custom, .info-page .btn, .info-page .social-button { border-radius: 14px !important; }
@media (max-width: 1023px) {
  .info-page .page-content { grid-template-columns: 1fr !important; }
}
@media (max-width: 767px) {
  .info-page .page-column-item { padding: 20px !important; border-radius: 20px; }
  .info-page .page-subheader { font-size: 19px !important; }
  .info-page .page-material_column { grid-template-columns: 1fr; }
  .info-page .privacy-policy { padding: 20px; }
}

/* ── Корзина (08.10): без перезагрузки, блок обновляется на месте ───────── */
.m-cart .m-page-head { align-items: center; }
.m-cart-clear { margin-left: auto; background: none; border: 0; cursor: pointer; font-size: 14px; }
.m-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.m-cart-items { display: flex; flex-direction: column; gap: 12px; transition: opacity .15s; min-width: 0; }
.m-cart-items > [data-m-cart-acc] { min-width: 0; }
.m-cart.is-busy .m-cart-items, .m-cart.is-busy .m-cart-card { opacity: .6; pointer-events: none; }
.m-cart-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 140px 40px; gap: 16px; align-items: center;
  background: var(--m-card); border-radius: var(--m-r-card); padding: 16px; transition: opacity .2s, transform .2s; }
.m-cart-item.is-gone { opacity: .3; }
.m-cart-img { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 16px; background: var(--m-bg); overflow: hidden; }
.m-cart-img img { max-width: 84px; max-height: 84px; object-fit: contain; }
.m-cart-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.m-cart-name { color: var(--m-ink) !important; font-weight: 700; font-size: 15px; line-height: 1.35; text-decoration: none; }
.m-cart-name:hover { color: var(--m-accent-ink) !important; }
.m-cart-sku { color: var(--m-mute); font-size: 13px; }
.m-cart-info .m-chip { margin: 2px 0 0; }
.m-cart-err { color: #c0392b; font-size: 13px; }
.m-cart-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--m-line); border-radius: 12px; height: 40px; }
.m-cart-qty button { width: 36px; height: 100%; border: 0; background: none; color: var(--m-ink); cursor: pointer; display: grid; place-items: center; }
.m-cart-qty button:disabled { color: var(--m-line-2); cursor: default; }
.m-cart-qty input { width: 40px; border: 0; text-align: center; font: inherit; font-weight: 700; background: none; -moz-appearance: textfield; }
.m-cart-qty input::-webkit-outer-spin-button, .m-cart-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.m-cart-sum { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; }
.m-cart-sum b { font-size: 18px; font-weight: 800; white-space: nowrap; }
.m-cart-sum small, .m-cart-sum s { color: var(--m-mute); font-size: 12px; white-space: nowrap; }
.m-cart-del { width: 40px; height: 40px; border-radius: 12px; border: 0; background: none; color: var(--m-mute); cursor: pointer; display: grid; place-items: center; }
.m-cart-del:hover { background: var(--m-bg); color: #c0392b; }
.m-cart-aside { position: sticky; top: 96px; }
.m-cart-card { background: var(--m-card); border-radius: var(--m-r-card); padding: 24px; display: flex; flex-direction: column; gap: 16px; transition: opacity .15s; }
.m-cart-card h2 { margin: 0 !important; font-size: 20px !important; font-weight: 800 !important; }
.m-cart-rows { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.m-cart-rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--m-ink-2); }
.m-cart-rows dt, .m-cart-rows dd { margin: 0; }
.m-cart-rows dd { white-space: nowrap; font-weight: 600; color: var(--m-ink); }
.m-cart-rows .is-good dd { color: var(--m-ok); }
.m-cart-rows .is-accent dd { color: var(--m-accent-ink); }
.m-cart-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--m-line); }
.m-cart-total span { font-weight: 700; }
.m-cart-total b { font-size: 26px; font-weight: 800; white-space: nowrap; }
.m-cart-pay { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.m-cart-pay legend { font-size: 13px; font-weight: 700; color: var(--m-mute); margin-bottom: 8px; padding: 0; }
.m-cart-pay .m-f-pill { position: relative; }
.m-cart-hint { margin: 0; font-size: 13px; color: var(--m-mute); line-height: 1.45; width: 100%; }
.m-cart-switch { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; cursor: pointer; position: relative; }
.m-cart-switch input { position: absolute; opacity: 0; pointer-events: none; }
.m-cart-switch span { flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--m-line-2); position: relative; transition: background .15s; }
.m-cart-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.m-cart-switch input:checked + span { background: var(--m-accent); }
.m-cart-switch input:checked + span::after { transform: translateX(16px); }
.m-cart-switch input:focus-visible + span { outline: 2px solid var(--m-accent); outline-offset: 2px; }
.m-cart-go { width: 100%; justify-content: center; height: 52px; font-size: 16px; }
@media (max-width: 1023px) {
  .m-cart-layout { grid-template-columns: minmax(0, 1fr); }
  .m-cart-aside { position: static; }
}
@media (max-width: 767px) {
  .m-cart-item { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img info del" "img qty sum"; gap: 8px 12px; padding: 12px; }
  .m-cart-img { grid-area: img; width: 72px; height: 72px; align-self: start; }
  .m-cart-img img { max-width: 64px; max-height: 64px; }
  .m-cart-info { grid-area: info; }
  .m-cart-qty { grid-area: qty; justify-self: start; height: 36px; }
  .m-cart-sum { grid-area: sum; justify-self: end; }
  .m-cart-del { grid-area: del; width: 36px; height: 36px; align-self: start; justify-self: end; }
  .m-cart-name { font-size: 14px; }
  .m-cart-card { padding: 18px; }
}

/* ── Разделы: порядок на телефоне (09.10) ───────────────────────────────── */
.m-nav-list.is-more, .m-chips.is-more, .m-sort.is-more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.m-sort-select { display: none; position: relative; flex: 1; min-width: 0; }
.m-sort-select select { width: 100%; height: 42px; border: 0; border-radius: 12px; background: #fff; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--m-ink); padding: 0 36px 0 14px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.m-sort-select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--m-ink-2); border-bottom: 2px solid var(--m-ink-2); transform: rotate(45deg); pointer-events: none; }
@media (max-width: 767px) {
  .m-sort-select { display: block; }
  .m-toolbar .m-sort { display: none; }
}
.m-f-find { width: 100%; box-sizing: border-box; height: 36px; margin: 0 0 8px; padding: 0 12px; border: 1.5px solid var(--m-line); border-radius: 10px; font: inherit; font-size: 13px; background: #fff; }
.m-f-find:focus { outline: none; border-color: var(--m-accent); }
.m-f.is-closed .m-f-find { display: none; }
.m-f-opts label[hidden] { display: none !important; }

/* ── Кнопка чата (пингвин) — поверх всего, кроме открытых шторок (09.10) ──
   Команда: «кнопка с чатом должна быть поверх всегда». Была z-index 3 —
   под ней оказывались закреплённая «В корзину» и «В рассрочку». */
.tw-fixed:has(> button.connect) { z-index: 97 !important; }
@media (max-width: 767px) {
  .tw-fixed:has(> button.connect) { bottom: 92px !important; right: 12px !important; }
  /* на странице товара — над закреплённой «В корзину», чтобы не закрывать её */
  body:has(.m-pd-actions) .tw-fixed:has(> button.connect) { bottom: 160px !important; }
}

/* Оформление (09.10): подсказка у имени, заметки рассрочки и кредита */
#create_order.m-co .m-co-fio-hint { display: block; margin-top: 6px; color: #B4541B; font-size: 12.5px; line-height: 1.35; }
#create_order.m-co .m-co-paynote { background: var(--m-accent-soft); color: var(--m-ink-2); border-radius: 12px; padding: 10px 14px; margin: 10px 0 0; line-height: 1.45; }
#create_order.m-co .m-co-paynote[hidden] { display: none !important; }
#create_order.m-co [data-m-co-disc][hidden] { display: none !important; }
#create_order.m-co .m-co-pickup { grid-template-columns: 1fr !important; }
@media (max-width: 767px) {
  /* первая покупка на телефоне — полосой над лестницей уровней */
  .m-levels--first { height: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto 150px; }
  .m-levels--first li.is-first { grid-column: 1 / -1; height: auto; min-height: 0; flex-direction: row; align-items: baseline; gap: 8px; margin: 0 0 4px; padding: 10px 14px; }
  .m-levels--first li.is-first::after { display: none; }
  .m-levels--first li.is-first span { font-size: 13px; }
}

/* ==========================================================================
   ФИРМЕННЫЙ СИНИЙ (09.10, владелец: «оставляем синий, всё под него»):
   тёмно-синий #283548 и светлый #CED9EB сняты с логотипа. Перекрывает
   фиолетовую палитру выше — фиолетового варианта больше нет.
   ========================================================================== */
html:root {   /* :root выше по силе, чем просто html — иначе фиолетовые токены перебивали */
  --m-accent: #283548; --m-accent-ink: #283548; --m-accent-soft: #EAF0F8; --m-brand: #283548;
  --m-line: #E8ECF2; --m-line-2: #DCE3ED;
  --color-accent: #283548; --color-accent-hover: #1B2534; --color-accent-active: #141C28; --color-accent-third: #CED9EB;
}
html .m-btn--accent:hover, html .m-card-buy:hover, html .m-catbtn:hover,
html .m-catbtn.is-open, html .m-search-go:hover { background: #1B2534; }
html .m-login:hover, html .m-btn--soft:hover { background: #DCE5F2; }
html .m-card-buy--pick { background: #EAF0F8; color: #283548 !important; }
html .m-card-buy--pick:hover { background: #283548; color: #fff !important; }
html .m-hero-main { background: radial-gradient(120% 110% at 92% 100%, #3D5175 0%, #283548 55%, #1A2333 100%) !important; }
html .m-hero-tag { color: #DCE5F2; }
html .m-hero-text p { color: #CED9EB; }
html .m-hero-img { filter: drop-shadow(0 18px 30px rgba(8,14,26,.45)); }
html .m-promo--violet { background: #283548; }
html .m-promo--violet .m-promo-t span { color: #CED9EB; }
html .m-levels li { background: linear-gradient(180deg, #EAF0F8, #CED9EB); }
html .m-levels li:last-child { background: linear-gradient(180deg, #3D5175, #283548); }
html .m-levels li:last-child span { color: #CED9EB; }
html .m-levels li.is-first { background: linear-gradient(180deg, #F3C35B, #E79A2E); }
html .m-levels--lk li.is-done { background: linear-gradient(180deg, #EAF0F8, #CED9EB); }
html .m-levels--lk li.is-on { background: linear-gradient(180deg, #3D5175, #283548); }
html .m-acc-card:hover { border-color: #CED9EB; }
html .m-logo svg rect { fill: #283548; }
html .m-logo svg path { fill: #CED9EB; }
html .product-cart--box .product_add2cart .button { background: #283548; }
html .m-sticker--hit { background: #E07A1F; }
html ::selection { background: #CED9EB; }

/* Переключатель вариантов — только на тестовом сайте */

/* «Подходит к» по семействам — строка на семейство (09.10) */
/* только строка «Подходит к» — у страницы модели обёртка тоже .m-fits, без span её прибивало влево (margin: 0 вместо auto) */
span.m-fits { display: block; margin: 0 0 4px; line-height: 1.5; }
span.m-fits b { font-weight: 700; }

/* Цена на карточке — всегда в две строки: цена, под ней зачёркнутая (09.10:
   «какие-то в строку, какие-то в две — сделать единообразно»). Без скидки —
   пустая вторая строка той же высоты, чтобы кнопки стояли ровно. */
.m-card-price { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.m-card-price s { display: block; min-height: 1.3em; line-height: 1.3; }
.m-card-price:not(:has(s))::after { content: ""; display: block; height: calc(1.3em + 2px); }

/* Плашка «лимит заказов — войдите по номеру» на оформлении (09.10) */
.m-co-limit { display: flex; gap: 14px; align-items: flex-start; background: #FFF4E8; color: #6B3410; border-radius: 20px; padding: 18px 20px; margin: 0 0 20px; }
.m-co-limit > svg { flex: none; color: #B4541B; margin-top: 2px; }
.m-co-limit b { display: block; font-size: 16px; margin-bottom: 4px; color: #231F20; }
.m-co-limit span { display: block; font-size: 14px; line-height: 1.5; }
.m-co-limit-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.m-co-limit-btns .m-btn { min-height: 44px; font-size: 14px; }
/* синий: логотип в подвале и меню, тёмные блоки — в цвет логотипа (09.10) */
html .m-footer-logo svg rect { fill: #CED9EB; }
html .m-footer-logo svg path { fill: #283548; }
html .m-pd-tradein { background: #283548; }
html .m-footer { background: #1C2230 !important; }
/* синий: фиолетовые значки доставки в оформлении — в тёмно-синий (картинки, перекрашиваем фильтром) */
html #create_order .m-co-opt-body > img { filter: grayscale(1) brightness(.55) sepia(.35) hue-rotate(185deg) saturate(1.6); }

/* страница «Каталог»: стили текстовой страницы обнуляли отступы обёртки — плитки липли к краям (09.10) */
.info-page .m-catalog-all.m-wrap { padding-left: var(--m-gut) !important; padding-right: var(--m-gut) !important; }

/* ── Кабинет 2.0 (09.10): карта на кассе (телефон), мои устройства ── */
.m-lk-card { background: var(--m-accent); color: #fff; border-radius: 22px; overflow: hidden; }
.m-lk-card summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.m-lk-card summary::-webkit-details-marker { display: none; }
.m-lk-card summary > span { display: flex; flex-direction: column; gap: 2px; }
.m-lk-card summary b { font-size: 16px; }
.m-lk-card summary span span { font-size: 13px; color: #CED9EB; }
.m-lk-card summary svg { flex: none; transition: transform .2s; }
.m-lk-card[open] summary svg { transform: rotate(180deg); }
.m-lk-card-in { background: #fff; color: var(--m-ink); margin: 0 12px 12px; border-radius: 16px; padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.m-lk-barcode { width: 100%; max-width: 320px; height: 90px; }
.m-lk-card-num { font-size: 18px; font-weight: 700; letter-spacing: 1px; }
.m-lk-card-hint { font-size: 12.5px; color: var(--m-dim); line-height: 1.4; }
@media (min-width: 768px) { .m-lk-card { display: none; } }   /* на компьютере карта не нужна */
.m-lk-sub { color: var(--m-dim); font-size: 14px; }
.m-lk-devs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.m-lk-dev { border: 1.5px solid var(--m-line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.m-lk-dev-top b { display: block; font-size: 16px; line-height: 1.3; }
.m-lk-dev-top span { font-size: 12.5px; color: var(--m-dim); }
.m-lk-dev-w { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.m-lk-dev-w b.is-ok { color: var(--m-ok); }
.m-lk-dev-w b.is-off { color: #B4541B; }
.m-lk-dev .m-lk-bar { height: 6px; }
.m-lk-dev-trade { background: var(--m-accent-soft); border-radius: 14px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.m-lk-dev-trade > span { display: flex; flex-direction: column; font-size: 12.5px; color: var(--m-ink-2); }
.m-lk-dev-trade > span b { font-size: 17px; color: var(--m-accent-ink); }
.m-lk-dev-trade .m-btn { min-height: 40px; padding: 0 12px; font-size: 13px; flex: none; }
.m-lk-dev-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.m-lk-dev-btns a { min-height: 40px; border-radius: 10px; background: var(--m-bg); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--m-ink) !important; text-decoration: none; }
@media (max-width: 767px) { .m-lk-devs { grid-template-columns: 1fr; } }

/* ── Синий: остатки фиолетового в старой теме (09.10, «пройтись по всем кнопкам») ── */
html .connect-back { background: rgba(206, 217, 235, .35) !important; border-color: rgba(40, 53, 72, .12) !important; }
html .connect-back_icon, html .connect-back_icon use { color: rgba(40, 53, 72, .7) !important; }
html .item-cashback-in, html .cashback-popover-block .tw-bg-accent-second\/10 { background: #EAF0F8 !important; color: #283548 !important; }
html .cashback-icon, html .cashback-txt, html .cashback-txt b { color: #283548 !important; }
html .page-text_border, html .page-garant-about.page-text_border { border-color: rgba(40, 53, 72, .2) !important; }
html .page-garant-about_header { color: #283548 !important; }
html span.num { background: #283548 !important; color: #fff !important; }
html .page-banner-item_credit { background: #283548 !important; color: #fff !important; }
html .bnr-first-cashback-caption, html .info-page .price, html .info-page b[style*="color"], html .info-page a:not(.m-btn) { color: #283548 !important; }
html .conctacts-thanks-social-item, html .conctacts-thanks-action { background: #EAF0F8 !important; color: #283548 !important; }
html .conctacts-thanks-action .icon-text-text, html .conctacts-thanks-action .icon-text-icon, html .conctacts-thanks-action svg { color: #283548 !important; }
html .me { color: #5E6878 !important; }
html .btn-magnoliya { background: #EAF0F8 !important; color: #283548 !important; border-color: #CED9EB !important; }
html .btn-magnoliya:hover { background: #283548 !important; color: #fff !important; }
html .btn-magnoliya .btn-icon, html .btn-magnoliya .btn-txt, html .btn-magnoliya svg { color: inherit !important; }
/* синий: состояния наведения/выбора старой темы и оформления */
html .connect:hover, html .connect:hover .connect-back { border-color: rgba(40, 53, 72, .3) !important; }
html .connect:active, html .connect:active .connect-back { border-color: rgba(40, 53, 72, .5) !important; }
html .connect:hover .connect-back_icon, html .connect:active .connect-back_icon { color: #283548 !important; }
html .connect { border-color: rgba(40, 53, 72, .1) !important; }
html .banners .page-banner-item_credit:hover, html .page-banner-item_smartphone:hover { background-color: #1B2534 !important; }
html .page-banner-item_smartphone { background-color: #283548 !important; }
html .nothing-text a:hover { color: #283548 !important; }
html .qdi-color-checkbox input:checked ~ .qdi-color-checkbox-field { border-color: #283548 !important; background: #EAF0F8 !important; }
html .shipping-cart-select.checked { background: #CED9EB !important; }
html .checkout-options.payment label.checked { border-color: #283548 !important; }
html .qdi-checkbox2 input:checked ~ .qdi-checkbox2-icon { background: #283548 !important; }
html .cart_products_row .js-qty button:hover svg path { stroke: #283548 !important; }
html #cart_basket_tools a.active span.icon svg path { fill: #283548 !important; }
html .has-\[\:checked\]\:tw-bg-accent-second\/10:has(:checked) { background-color: #EAF0F8 !important; }
html #qdi-search-right::-webkit-scrollbar-thumb:active { background-color: #283548 !important; }
html .info-page [class*="bnr"] b, html .info-page .caption b, html .info-page [class*="cashback"] b { color: #283548 !important; }
/* вход в кабинет: «Получить код в SMS» — главное действие шага, сплошной синей */
html #qdi_popup_auth .step1 .btn-magnoliya { background: #283548 !important; color: #fff !important; border-color: #283548 !important; }
html #qdi_popup_auth .step1 .btn-magnoliya:hover { background: #1B2534 !important; }
html #qdi_popup_auth .step1 .btn-magnoliya svg path { fill: #fff !important; }
html .info-page .container p > b { color: #283548 !important; }   /* «до 10%» на странице программы лояльности */

/* ── Кабинет 2.0, правки 09.10 вечер ── */
.m-lk-dev-trade { flex-wrap: wrap; }
.m-lk-dev-trade > span { flex: 1 1 140px; min-width: 0; }
.m-lk-dev-trade > span b { white-space: nowrap; }
.m-lk-dev-trade .m-btn { flex: 1 0 auto; }
.m-lk-dev-ask { font-size: 14px !important; }
.m-lk-dev-btns button, .m-lk-dev-btns .is-off { min-height: 40px; border-radius: 10px; background: var(--m-bg); display: flex; align-items: center; justify-content: center; font: inherit; font-size: 13px; font-weight: 700; color: var(--m-ink); border: 0; cursor: pointer; }
.m-lk-dev-btns .is-off { color: var(--m-mute); cursor: default; }
.m-lk-dev-btns a:hover, .m-lk-dev-btns button:hover { background: var(--m-accent-soft); }
/* окно заявки */
/* по центру: общий сброс * { margin: 0 } старой темы уводил окно в угол */
.m-lk-req { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100dvh - 32px); overflow: auto; border: 0; border-radius: 24px; padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.m-lk-req::backdrop { background: rgba(28,34,48,.5); }
.m-lk-req-in { position: relative; padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 10px; font-family: var(--m-font); }
.m-lk-req-in h2 { margin: 0; font-size: 22px; }
.m-lk-req-x { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--m-bg); font-size: 22px; cursor: pointer; }
.m-lk-req-dev { margin: 0; font-weight: 700; }
.m-lk-req-hint { margin: 0; color: var(--m-ink-2); font-size: 14px; line-height: 1.45; }
.m-lk-req-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--m-dim); }
.m-lk-req-f textarea { font: inherit; font-size: 15px; padding: 10px 12px; border: 1.5px solid var(--m-line-2); border-radius: 12px; resize: vertical; }
.m-lk-req-err { margin: 0; color: #B4541B; font-weight: 600; }
.m-lk-req-ok { margin: 0; color: var(--m-ok); font-weight: 700; }
.m-lk-req-ok[hidden], .m-lk-req-err[hidden], .m-lk-req .m-btn[hidden] { display: none; }
/* чек покупки */
.m-lk-receipt { background: #fff; border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 14px; border: 2px solid var(--m-accent); }
.m-lk-receipt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.m-lk-receipt-head b { display: block; font-size: 20px; }
.m-lk-receipt-head span { font-size: 13px; color: var(--m-dim); }
.m-lk-receipt-sum { display: flex; justify-content: flex-end; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.m-lk-receipt-sum b { font-size: 20px; }
.m-lk-receipt-note { margin: 0; font-size: 12.5px; color: var(--m-dim); }
.m-lk-list li.is-current { background: var(--m-accent-soft); border-radius: 12px; }
@media print { .m-header, .m-bar, .m-nav, .m-footer, #lk > aside, .m-lk-list, .m-lk-receipt .m-btn, .tw-fixed { display: none !important; } }
/* меню кабинета: выбранный пункт — белым по синему (было тёмным по синему, не читалось) */
#lk > aside li.active a, #lk > aside li.active a * { background: #283548 !important; color: #fff !important; }
#lk > aside li a:hover { background: #EAF0F8 !important; color: #283548 !important; }
/* страница «Аксессуары для модели» */
.m-fits-lead { color: var(--m-ink-2); margin: -6px 0 16px; }
.m-fits-tabs { margin-bottom: 16px; }
.m-fits-item > .m-card { height: 100%; box-sizing: border-box; }
.m-fits-item[hidden] { display: none; }
.m-fits-seo { margin-top: 28px; }
.m-fits-seo p { color: var(--m-ink-2); line-height: 1.6; }
.m-product .m-pd-desc .m-seo-in { color: var(--m-ink-2); line-height: 1.7; font-size: 15px; }

/* Корзина: аксессуары ко всем устройствам — переключатель + лента (09.10) */
.m-cart-acc { background: var(--m-card); border-radius: var(--m-r-card); padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 12px; }
.m-cart-acc-head { display: flex; flex-direction: column; gap: 10px; }
.m-cart-acc-head h2 { margin: 0; font-size: 19px; }
.m-cart-acc-devs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 0 18px; }
.m-cart-acc-devs::-webkit-scrollbar { display: none; }
.m-cart-acc-devs button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--m-line-2); background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: var(--m-ink); cursor: pointer; }
.m-cart-acc-devs button[aria-selected="true"] { background: var(--m-accent); border-color: var(--m-accent); color: #fff; }
.m-cart-acc-set[hidden] { display: none; }
.m-acc--bare { background: none; padding: 0; margin: 0; }
.m-acc--bare .m-acc-grid { margin: 0 -18px; padding: 0 18px 4px; }
@media (max-width: 767px) { .m-cart-acc-head h2 { font-size: 17px; } }

/* ══ ИНФОРМАЦИОННЫЕ СТРАНИЦЫ (11.10) ═══════════════════════════════════════
   Доставка, гарантия, рассрочка, лояльность, о нас, контакты, трейд-ин —
   один набор: шапка, факты, шаги, карточки текста, таблица, плитки-ссылки.
   Владелец: «текст поровнее, вертикальные расстояния, плашки снизу заменить». */
.m-info { padding-bottom: 8px; color: var(--m-ink); }
.m-info * { box-sizing: border-box; }
.m-info h1, .m-info h2, .m-info h3 { font-family: inherit; color: inherit; letter-spacing: -.02em; }
.m-info p { margin: 0; }
.m-info p + p { margin-top: 10px; }
.m-info-sec { margin-top: 40px; }
.m-info-sec > h2 { margin: 0 0 16px !important; font-size: 28px !important; font-weight: 800 !important; line-height: 1.15; }
.m-info-sec > .m-info-lead { margin: -6px 0 18px; color: var(--m-ink-2); font-size: 16px; line-height: 1.55; max-width: 760px; }

/* Шапка: синяя, текст слева, справа место под креатив (картинка или плитки) */
.m-ihero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: center;
  margin-top: 8px; padding: 40px 44px; border-radius: 28px; color: #fff;
  background: radial-gradient(120% 120% at 100% 100%, #3D5175 0%, #283548 55%, #1A2333 100%); }
.m-ihero-tag { display: inline-block; padding: 6px 12px; border-radius: 50px; background: rgba(206,217,235,.16); color: #CED9EB; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.m-ihero h1 { margin: 0 0 12px !important; color: #fff !important; font-size: 38px !important; font-weight: 800 !important; line-height: 1.12; }
.m-ihero p { color: #CED9EB; font-size: 16px; line-height: 1.55; max-width: 560px; }
.m-ihero-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.m-ihero-art { position: relative; min-height: 220px; display: flex; align-items: center; justify-content: flex-end; }
.m-ihero-art img { max-width: 100%; max-height: 300px; width: auto; height: auto; object-fit: contain; }
/* Шапка без картинки: справа — крупные факты на полупрозрачных плитках */
.m-ihero-facts { display: grid; gap: 10px; }
.m-ihero-facts > div { padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.08); }
.m-ihero-facts b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; color: #fff; }
.m-ihero-facts span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: #CED9EB; }

/* Карточки текста: сетка 2 колонки, внутри — заголовок, абзацы, список */
.m-igrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.m-igrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-icard { background: #fff; border: 1px solid var(--m-line); border-radius: 22px; padding: 24px 26px; font-size: 15px; line-height: 1.6; color: var(--m-ink-2); }
.m-icard > h2, .m-icard > h3 { margin: 0 0 10px !important; font-size: 19px !important; font-weight: 800 !important; line-height: 1.25; color: var(--m-ink) !important; }
.m-icard--soft { background: var(--m-accent-soft); border-color: transparent; }
.m-icard--wide { grid-column: 1 / -1; }
.m-icard b, .m-icard strong { color: var(--m-ink); }
.m-icard a:not(.m-btn) { color: var(--m-accent-ink); font-weight: 600; }
/* Список с одной точкой: у старой темы на li свой маркер, отсюда были «• •» */
.m-ilist { list-style: none !important; margin: 10px 0 0 !important; padding: 0 !important; display: grid; gap: 8px; }
.m-ilist > li { position: relative; padding-left: 20px; margin: 0 !important; list-style: none !important; }
.m-ilist > li::before { content: ""; position: absolute; left: 4px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--m-accent); }
.m-ilist > li::marker { content: ""; }
.m-ilist--check > li::before { width: 10px; height: 6px; top: .5em; left: 2px; border-radius: 0; background: none; border: solid var(--m-ok); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.m-ilist--cross > li::before { width: 10px; height: 2px; top: .75em; left: 2px; border-radius: 0; background: #C0392B; transform: rotate(45deg); box-shadow: none; }

/* Крупные факты: «1 год», «3 месяца» */
.m-ifacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.m-ifact { padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--m-line); }
.m-ifact b { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--m-accent-ink); }
.m-ifact span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--m-ink-2); }

/* Шаги: номер в квадрате */
.m-isteps { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; counter-reset: mi; }
.m-isteps > li { counter-increment: mi; margin: 0 !important; padding: 22px 22px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--m-line); font-size: 15px; line-height: 1.5; color: var(--m-ink-2); list-style: none !important; }
.m-isteps > li::before { content: counter(mi); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 12px; background: var(--m-accent); color: #fff; font-size: 17px; font-weight: 800; }
.m-isteps > li b { display: block; margin-bottom: 4px; color: var(--m-ink); font-size: 16px; }

/* Таблица «место — цена» */
.m-itable { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin-top: 6px; }
.m-itable > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--m-line); font-size: 15px; }
.m-itable > div span { color: var(--m-ink-2); }
.m-itable > div b { white-space: nowrap; color: var(--m-ink); font-variant-numeric: tabular-nums; }

/* Выделенная строка-сноска */
.m-inote { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--m-accent-soft); color: var(--m-ink); font-size: 14px; line-height: 1.5; }
.m-inote::before { content: "i"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--m-accent); color: #fff; font: 800 13px/1 Georgia, serif; }
.m-icard .m-inote { margin-top: 14px; }

/* Плитки-ссылки «ещё полезное» (вместо старых плашек page.banner.*) */
.m-ilinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.m-ilink { display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--m-line);
  color: var(--m-ink) !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s, transform .15s; }
.m-ilink:hover { border-color: #CED9EB; box-shadow: var(--m-shadow); transform: translateY(-2px); }
.m-ilink-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--m-accent); display: grid; place-items: center; }
.m-ilink-ico svg, .m-ico svg { width: 24px; height: 24px; fill: none; stroke: #CED9EB; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-ilink b { display: block; font-size: 16px; font-weight: 800; }
.m-ilink span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--m-dim); }
.m-ilink-go { width: 20px; height: 20px; fill: none; stroke: var(--m-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Иконка в квадрате для карточек */
.m-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--m-accent); display: grid; place-items: center; margin-bottom: 14px; }

/* Банки-партнёры: логотипы плиткой */
.m-ibanks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.m-ibanks > div { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--m-line); font-size: 14px; font-weight: 600; }
.m-ibanks img { width: 32px; height: 32px; object-fit: contain; border-radius: 8px; }

/* Подписка в Telegram — тёмная плашка как на главной */
.m-isub { margin-top: 40px; }

@media (max-width: 1000px) {
  .m-ihero { grid-template-columns: 1fr; padding: 30px 28px; }
  .m-ihero-art { min-height: 0; justify-content: center; }
  .m-ihero-art img { max-height: 220px; }
  .m-igrid, .m-igrid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .m-ihero { padding: 24px 18px; border-radius: 22px; gap: 18px; }
  .m-ihero h1 { font-size: 27px !important; }
  .m-ihero p { font-size: 15px; }
  .m-ihero-btns .m-btn { flex: 1 1 100%; }
  .m-info-sec { margin-top: 32px; }
  .m-info-sec > h2 { font-size: 22px !important; }
  .m-icard { padding: 20px 18px; }
  .m-itable { grid-template-columns: 1fr; }
  .m-ifact b { font-size: 26px; }
}

/* Лояльность: лестница уровней в карточке, калькулятор, вопросы */
.m-loyal-ladder { padding-top: 28px; }
.m-loyal-ladder .m-levels { margin: 0; }
.m-lcalc { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.m-lcalc-in { display: grid; gap: 14px; }
.m-lcalc-f { display: flex; align-items: center; gap: 10px; max-width: 360px; padding: 0 18px; height: 60px; border: 1.5px solid var(--m-line-2); border-radius: 16px; background: #fff; }
.m-lcalc-f:focus-within { border-color: var(--m-accent); box-shadow: 0 0 0 4px rgba(40,53,72,.12); }
.m-lcalc-f > span { font-size: 13px; color: var(--m-dim); white-space: nowrap; }
.m-lcalc-f input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 22px; font-weight: 800; color: var(--m-ink); text-align: right; }
.m-lcalc-f em { font-style: normal; font-size: 20px; font-weight: 800; }
.m-lcalc-seg { display: flex; flex-wrap: wrap; gap: 8px; transition: opacity .15s; }
.m-lcalc-seg button { min-height: 40px; padding: 0 16px; border-radius: 50px; border: 1.5px solid var(--m-line-2); background: #fff; font: inherit; font-size: 14px; font-weight: 700; color: var(--m-ink); cursor: pointer; }
.m-lcalc-seg button[aria-pressed="true"] { background: var(--m-accent); border-color: var(--m-accent); color: #fff; }
.m-lcalc-out { padding: 24px; border-radius: 20px; background: var(--m-accent); color: #fff; text-align: center; }
.m-lcalc-out span { display: block; font-size: 14px; color: #CED9EB; }
.m-lcalc-out b { display: block; margin: 6px 0; font-size: 44px; line-height: 1.05; font-weight: 800; }
.m-lcalc-out b::after { content: " бонусов"; font-size: 18px; font-weight: 700; color: #CED9EB; }
.m-lcalc-out small { font-size: 12px; color: #CED9EB; }
.m-faq { display: grid; gap: 10px; }
.m-faq details { background: #fff; border: 1px solid var(--m-line); border-radius: 18px; }
.m-faq summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 22px; position: relative; font-weight: 700; font-size: 16px; }
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border: solid var(--m-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
.m-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.m-faq details p { padding: 0 22px 18px; color: var(--m-ink-2); font-size: 15px; line-height: 1.6; }
.m-faq a { color: var(--m-accent-ink); font-weight: 600; }
@media (max-width: 760px) {
  .m-lcalc { grid-template-columns: 1fr; }
  .m-lcalc-f { max-width: none; }
  .m-lcalc-out b { font-size: 36px; }
}

/* Контакты: карта и фото магазина */
.m-cmap { border-radius: 22px; overflow: hidden; background: var(--m-line); height: 420px; }
.m-cmap iframe { display: block; width: 100%; height: 100%; border: 0; }
.m-cgal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.m-cgal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; display: block; }
.m-ihero-facts b { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .m-cmap { height: 320px; border-radius: 18px; }
  .m-cgal { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 14px calc(-1 * var(--m-gut)) 0; padding: 0 var(--m-gut); scroll-padding-inline: var(--m-gut); scrollbar-width: none; }
  .m-cgal img { scroll-snap-align: start; }
}

/* Каталог на телефоне (11.10, владелец): две узкие колонки — подразделы не читались.
   Одна колонка: название слева, картинка справа, подразделы — под ними строкой. */
@media (max-width: 767px) {
  .m-cats--all { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .m-cat--full .m-cat-top { flex-direction: row; align-items: center; justify-content: space-between; min-height: 84px; padding: 14px 16px; }
  .m-cat--full .m-cat-top b { font-size: 17px; }
  .m-cat--full .m-cat-top img { width: 96px; height: 64px; flex: none; object-position: right center; }
  .m-cat--full .m-cat-subs { padding: 0 16px 16px; gap: 6px; }
  .m-cat--full .m-cat-subs a { font-size: 13px; padding: 7px 12px; }
}

/* Якоря (11.10): «Забрать сегодня» прокручивал так, что заголовок раздела уходил под
   липкую шапку с поиском. Отступ прокрутки = высота шапки. */
html { scroll-padding-top: 150px; }
@media (min-width: 768px) { html { scroll-padding-top: 130px; } }
/* .info-page .m-wrap обнуляет отступы (для старых страниц в .container) — у новых свои */
.info-page .m-wrap.m-info { padding: 0 var(--m-gut); max-width: calc(var(--m-max) + 2 * var(--m-gut)); margin: 0 auto; }
@media (max-width: 600px) {
  .m-ihero-facts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .m-ihero-facts > div { padding: 12px 14px; border-radius: 14px; }
  .m-ihero-facts > div:nth-child(3):last-child { grid-column: 1 / -1; }
  .m-ihero-facts b { font-size: 18px; }
  .m-ihero-facts span { font-size: 12px; }
  .m-ihero-btns { margin-top: 18px; }
  .m-ihero-btns .m-btn { min-height: 48px; }
}
@media (max-width: 600px) {
  .m-isteps { gap: 10px; }
  .m-isteps > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 16px; font-size: 14px; }
  .m-isteps > li::before { grid-row: span 2; width: 36px; height: 36px; margin: 0; font-size: 15px; }
  .m-isteps > li b { margin-bottom: 2px; font-size: 15px; }
  .m-ico { width: 42px; height: 42px; margin-bottom: 10px; }
}
.m-lcalc > * { min-width: 0; }
.m-icard .m-lcalc-out b { color: #fff; }
.m-lcalc-out small { display: block; overflow-wrap: anywhere; }
@media (max-width: 760px) { .m-lcalc { grid-template-columns: minmax(0, 1fr); } }
.m-lcalc-f input { width: 100%; }
/* 11.10, владелец: «минусы поехали» — крест одной чертой выглядел как минус; «длинные
   пробелы» в сноске — flex делал из каждого куска текста и ссылки отдельный блок с отступом. */
.m-ilist--cross > li::before { content: "✕"; width: auto; height: auto; top: .1em; left: 1px; background: none; transform: none;
  font-size: 12px; font-weight: 800; line-height: 1.6; color: #C0392B; }
.m-inote { display: block; position: relative; padding: 16px 18px 16px 52px; }
.m-inote::before { position: absolute; left: 18px; top: 16px; }
.m-inote a { color: var(--m-accent-ink); font-weight: 700; white-space: nowrap; }
/* Одна ровная строка карточек («Лучшее предложение»): без сироты на второй строке */
@media (max-width: 1279px) { .m-cards--one-row > .m-card:nth-child(n+5) { display: none; } }
@media (max-width: 1023px) { .m-cards--one-row > .m-card:nth-child(n+4) { display: none; } }
/* «Ещё полезное»: 2×2, на широком — строкой из четырёх; отзывы на «Контактах» — сколько влезет */
.m-ilinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1280px) { .m-ilinks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.m-ilinks.m-ilinks--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 600px) { .m-ilinks, .m-ilinks.m-ilinks--auto { grid-template-columns: minmax(0, 1fr); } }
/* Подвал на телефоне (11.10): место под нижнюю панель уже есть у самого подвала —
   отступ у body давал пустую серую полосу; плашка «не является офертой» висела
   отдельным старым блоком поверх — теперь строкой в подвале. */
.m-footer-note { margin: 24px 0 0; font-size: 12px; line-height: 1.5; color: #8A93A3; }
#note_alert { display: none !important; }
@media (max-width: 767px) { body { padding-bottom: 0 !important; } }
.m-footer { margin-bottom: 0 !important; }   /* старая тема давала подвалу 112px снизу — серая полоса */

/* Всплывашка избранного (11.10) — вместо пустых белых плашек старой темы */
#notifications-container { display: none !important; }
.m-toast { position: fixed; z-index: 9990; right: 20px; top: 96px; display: flex; align-items: center; gap: 12px; max-width: 360px; padding: 12px 14px; border-radius: 18px;
  background: #1C2230; color: #fff; box-shadow: 0 16px 40px rgba(10,16,30,.28); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.m-toast.is-on { opacity: 1; transform: none; pointer-events: auto; }
.m-toast img { width: 48px; height: 48px; flex: none; object-fit: contain; border-radius: 10px; background: #fff; }
.m-toast div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-toast b { font-size: 14px; }
.m-toast span { font-size: 12px; color: #CED9EB; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-toast-go { flex: none; margin-left: auto; padding: 8px 12px; border-radius: 10px; background: #CED9EB; color: #1C2230 !important; font-size: 13px; font-weight: 700; text-decoration: none !important; }
@media (max-width: 767px) { .m-toast { left: 12px; right: 12px; top: auto; bottom: 84px; max-width: none; transform: translateY(8px); } }

/* Большие экраны (11.10, владелец): на iMac пустые поля по бокам, а растягивать
   на весь 34" — тоже плохо. Ширина растёт ступенями и упирается в 1680 px. */
@media (min-width: 1680px) { html:root { --m-max: 1520px; } }
@media (min-width: 2200px) { html:root { --m-max: 1680px; } }

/* Окно заявки кабинета (11.10, «кривое»): заголовок жирный и не под крестиком,
   отступы ровные, после отправки — итог вместо формы. */
.m-lk-req-in { padding: 24px 22px 22px; gap: 12px; color: var(--m-ink); }
.m-lk-req-in h2 { margin: 0 44px 0 0 !important; font-size: 21px !important; font-weight: 800 !important; line-height: 1.25; letter-spacing: -.01em; color: var(--m-ink) !important; }
.m-lk-req-x { top: 14px; right: 14px; display: grid; place-items: center; line-height: 1; color: var(--m-ink); }
.m-lk-req-dev { padding: 12px 14px; border-radius: 14px; background: var(--m-accent-soft); font-size: 14px; line-height: 1.4; }
.m-lk-req-f { gap: 8px; font-size: 13px; font-weight: 600; color: var(--m-ink); }
.m-lk-req-f textarea { min-height: 96px; }
.m-lk-req-f textarea:focus { outline: none; border-color: var(--m-accent); box-shadow: 0 0 0 4px rgba(40,53,72,.12); }
.m-lk-req .m-btn { width: 100%; }
.m-lk-req-f[hidden], .m-lk-req-hint[hidden], .m-lk-req-done[hidden] { display: none !important; }
.m-lk-req-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 4px 0 0; }
.m-lk-req-check { width: 56px; height: 56px; border-radius: 50%; background: var(--m-ok-bg); display: grid; place-items: center; }
.m-lk-req-check svg { width: 28px; height: 28px; fill: none; stroke: var(--m-ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.m-lk-req-done b { font-size: 18px; color: var(--m-ok); }
.m-lk-req-done p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--m-ink-2); }
.m-lk-req-done a { color: var(--m-accent-ink); font-weight: 700; white-space: nowrap; }

/* Меню кабинета на телефоне — сверху (11.10): было под содержимым */
@media (max-width: 1023px) {
  #lk > aside { order: -1; grid-row: 1; }
}
.m-lk-pages { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 18px; }
.m-lk-pages a { min-width: 40px; height: 40px; padding: 0 10px; display: grid; place-items: center; border-radius: 12px; background: var(--m-bg); color: var(--m-ink) !important; font-weight: 700; text-decoration: none; }
.m-lk-pages a:hover { background: var(--m-accent-soft); }
.m-lk-pages a[aria-current="page"] { background: var(--m-accent); color: #fff !important; }
.m-lk-block--warn { border: 1.5px solid #F3C35B; }
.m-lk-orders li { align-items: center; }
.m-lk-ord-img { width: 52px; height: 52px; flex: none; object-fit: contain; border-radius: 12px; background: var(--m-bg); }
.m-lk-ord-r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; }
.m-lk-pay { min-height: 40px !important; padding: 0 18px !important; font-size: 14px !important; }
.m-lk-st { font-weight: 700; color: var(--m-ink-2); }
.m-lk-st--completed { color: var(--m-ok); }
.m-lk-st--deleted, .m-lk-st--refunded { color: var(--m-dim); }
.m-lk-pages li { list-style: none; }
ul.m-lk-pages { padding: 0; }
ul.m-lk-pages li a, ul.m-lk-pages li span { min-width: 40px; height: 40px; padding: 0 10px; display: grid; place-items: center; border-radius: 12px; background: var(--m-bg); color: var(--m-ink) !important; font-weight: 700; text-decoration: none; }
ul.m-lk-pages li.selected a, ul.m-lk-pages li.selected span { background: var(--m-accent); color: #fff !important; }
.m-lk-list.m-lk-orders li { grid-template-columns: 52px minmax(0, 1fr) auto; }
.m-lk-fio-note { margin: 4px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--m-accent-soft); font-size: 13px; line-height: 1.5; color: var(--m-ink-2); } .m-lk-fio-note a { color: var(--m-accent-ink); font-weight: 700; white-space: nowrap; }

/* ── Блог (11.10, «на ваше усмотрение»): синяя шапка вместо фиолетовой, без бледных
   надписей-водяных знаков («MOBILAND», «#статьи»), разделы и статьи — ровные карточки. */
#blog_header { display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px !important; margin: 8px 0 32px !important; }
#blog_header .header { display: flex !important; flex-direction: column; justify-content: center; gap: 12px; padding: 32px !important; border-radius: 28px;
  background: radial-gradient(120% 120% at 100% 100%, #3D5175 0%, #283548 55%, #1A2333 100%) !important; min-height: 220px; }
#blog_header .header h1 { margin: 0 !important; color: #fff !important; font-size: 34px !important; font-weight: 800 !important; line-height: 1.12 !important; }
#blog_header .header .me { align-self: flex-start; padding: 6px 12px !important; border-radius: 50px; background: rgba(206,217,235,.16) !important; color: #CED9EB !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; }
#blog_header .header .me::before, #blog_header .header .me::after { display: none !important; }
#blog_header .header .logotext, .blog_zag .hashtag { display: none !important; }
#blog_header .cat { position: relative; min-height: 220px !important; height: auto !important; border-radius: 28px !important; background-size: cover !important; background-position: center !important; overflow: hidden; }
#blog_header .cat a { position: absolute !important; inset: auto 16px 16px auto; padding: 10px 18px !important; border-radius: 50px !important; background: #fff !important; color: #1C2230 !important; border: 0 !important; font-weight: 800 !important; font-size: 15px !important; backdrop-filter: none !important; }
.blog_zag { display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 16px !important; }
.blog_zag h2 { margin: 0 !important; font-size: 28px !important; font-weight: 800 !important; }
.blog_zag aside .more a { color: #283548 !important; font-weight: 700; }
.blog .item { border-radius: 24px !important; overflow: hidden; background-size: cover !important; }
.blog .item .cat { background: #fff !important; color: #1C2230 !important; font-weight: 700 !important; }
.blog .item .name a { color: #1C2230 !important; font-weight: 800 !important; }
@media (max-width: 900px) {
  #blog_header { grid-template-columns: 1fr 1fr; }
  #blog_header .header { grid-column: 1 / -1; min-height: 0; padding: 24px 20px !important; }
  #blog_header .cat { min-height: 140px !important; }
}
@media (max-width: 600px) {
  #blog_header .header h1 { font-size: 26px !important; }
  #blog_header .cat { min-height: 120px !important; border-radius: 20px !important; }
  #blog_header .cat a { inset: auto 10px 10px auto; padding: 8px 14px !important; font-size: 14px !important; }
  .blog_zag h2 { font-size: 22px !important; }
}

/* Баннеры главной кодом (11.10): синий фон, текст, пингвин с прозрачным фоном */
.m-pbanner { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; gap: 12px;
  margin-top: 48px; min-height: 300px; padding: 0 0 0 44px; border-radius: 28px; color: #fff !important; text-decoration: none !important;
  background: radial-gradient(110% 130% at 85% 100%, #4A6189 0%, #283548 52%, #1A2333 100%); }
.m-pbanner::before { content: ""; position: absolute; right: -60px; top: -80px; width: 380px; height: 380px; border-radius: 50%; background: rgba(206,217,235,.07); }
.m-pbanner-t { position: relative; z-index: 1; align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 36px 0; }
.m-pbanner-t > b { font-size: 40px; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.m-pbanner-t > span:not([class]) { max-width: 460px; color: #CED9EB; font-size: 16px; line-height: 1.55; }
.m-pbanner-t .m-btn { margin-top: 6px; }
.m-pbanner-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.m-pbanner-btns .m-btn { margin-top: 0; }
.m-pbanner-img { position: relative; z-index: 1; justify-self: end; align-self: end; width: auto; max-width: 100%; height: auto; max-height: 270px; margin-top: 24px; }
.m-pbanner--vk { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.m-pbanner--vk .m-pbanner-img { max-width: 330px; margin-right: 48px; }
@media (max-width: 767px) {
  .m-pbanner, .m-pbanner--vk { grid-template-columns: 1fr; padding: 0 20px; min-height: 0; border-radius: 22px; margin-top: 32px; }
  .m-pbanner-t { padding: 26px 0 4px; }
  .m-pbanner-t > b { font-size: 28px; }
  .m-pbanner-t > span:not([class]) { font-size: 15px; }
  .m-pbanner-img { justify-self: center; max-width: 100%; margin: 0 -8px; }
  .m-pbanner--vk .m-pbanner-img { max-width: 220px; margin: 0 auto; }
  .m-pbanner-btns .m-btn { flex: 1 1 100%; }
}
@media (max-width: 767px) { .m-pbanner--vk .m-pbanner-img { max-width: 170px; } }
/* Баннер «Хит раздела» (11.10): фото товара (белый фон) — в белой карточке на синем */
.m-pbanner--hit { min-height: 260px; margin-top: 28px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; padding-right: 32px; }
.m-pbanner--hit .m-pbanner-t > b { font-size: 32px; }
.m-pbanner-tag { display: inline-block; padding: 6px 12px; border-radius: 50px; background: rgba(206,217,235,.16); color: #CED9EB; font-size: 13px; font-weight: 700; }
.m-pbanner-pic { position: relative; z-index: 1; justify-self: end; width: 230px; height: 230px; border-radius: 32px; background: #fff; display: grid; place-items: center;
  box-shadow: 0 24px 50px rgba(8,14,26,.35); }
.m-pbanner-pic img { width: 82%; height: 82%; object-fit: contain; }
@media (max-width: 767px) {
  .m-pbanner--hit { grid-template-columns: minmax(0, 1fr) 120px; padding: 0 16px 0 20px; gap: 10px; min-height: 0; }
  .m-pbanner--hit .m-pbanner-t { padding: 22px 0; gap: 8px; }
  .m-pbanner--hit .m-pbanner-t > b { font-size: 20px; }
  .m-pbanner--hit .m-pbanner-t > span:not([class]) { font-size: 13px; }
  .m-pbanner--hit .m-btn { min-height: 42px; padding: 0 18px; }
  .m-pbanner-pic { width: 120px; height: 120px; border-radius: 22px; }
  .m-pbanner-tag { font-size: 11px; padding: 4px 10px; }
}
/* 11.10: картинка баннера не выше 270 px и с отступом сверху — телефон с планшетом обрезались краем; без движения при наведении */
.m-pbanner { min-height: 300px; }
.m-pbanner--vk .m-pbanner-img { max-height: 280px; }
@media (max-width: 767px) { .m-pbanner-img { max-height: 220px; margin-top: 8px; } .m-pbanner--vk .m-pbanner-img { max-height: 200px; } }
/* Хит раздела наверху (11.10): компактно, чтобы товары были видны сразу под ним */
.m-pbanner--top { min-height: 0; margin: 16px 0 20px; padding: 0 28px 0 32px; }
.m-pbanner--top .m-pbanner-t { padding: 22px 0; gap: 8px; }
.m-pbanner--top .m-pbanner-t > b { font-size: 26px; }
.m-pbanner--top .m-pbanner-t > span:not([class]) { font-size: 14px; }
.m-pbanner--top .m-btn { min-height: 42px; margin-top: 2px; }
.m-pbanner--top .m-pbanner-pic { width: 170px; height: 170px; border-radius: 26px; }
@media (max-width: 767px) {
  .m-pbanner--top { margin: 12px 0 16px; padding: 0 14px 0 18px; }
  .m-pbanner--top .m-pbanner-t { padding: 16px 0; }
  .m-pbanner--top .m-pbanner-t > b { font-size: 17px; }
  .m-pbanner--top .m-pbanner-t > span:not([class]) { display: none; }
  .m-pbanner--top .m-pbanner-pic { width: 96px; height: 96px; border-radius: 18px; }
  .m-pbanner--top.m-pbanner--hit { grid-template-columns: minmax(0, 1fr) 96px; }
}

/* 13.10: отдельная страница входа не занимает колонку меню ЛК. */
#lk > .body:has(> #qdi_popup_auth) { grid-column: 1 / -1; }
html #qdi_popup_auth { width: 420px; max-width: 100%; margin-inline: auto; }
@media (max-width: 600px) {
  .info-page > .container:has(#qdi_popup_auth) { padding-inline: 12px !important; }
  /* #lk .qdi-auth-popup {padding:0} из style.css кабинета весомее — форма липла к краям. */
  html #qdi_popup_auth, #lk #qdi_popup_auth { padding: 16px; }
}
@media (max-width: 359px) {
  .info-page > .container:has(#qdi_popup_auth) { padding-inline: 0 !important; }
  html #qdi_popup_auth, #lk #qdi_popup_auth { padding: 10px; }
}

/* 13.10: на телефоне касание оставляет :hover — и кнопка «В корзине»
   оставалась тёмной (зелёный текст на тёмном фоне, «меняется наполовину»).
   Наведение — только там, где есть мышь; «в корзине» сильнее наведения. */
@media (hover: none) {
  html .m-btn--accent:hover, html .m-card-buy:hover, html .m-acc-add:hover { background: var(--m-accent); }
  html .m-card-buy--pick:hover { background: #EAF0F8; color: #283548 !important; }
}
html .m-card-buy.is-added, html .m-card-buy.is-added:hover { background: var(--m-ok-bg); color: var(--m-ok) !important; }
html .m-acc-add.is-added, html .m-acc-add.is-added:hover { background: var(--m-ok-bg); color: var(--m-ok); }
html .m-pd-add.is-added, html .m-pd-add.is-added:hover { background: var(--m-ok); color: #fff !important; }

/* 13.10: корзина на телефоне «отдалялась» — страница 3184 px вместо 375.
   Скрытые подписи цвета (.tw-sr-only, position:absolute) в карточках ленты
   аксессуаров считали отступ от всей ленты и вылезали из её прокрутки.
   Карточка — их опора, тогда они обрезаются вместе с лентой. */
.m-acc-card { position: relative; }
/* Шире вёрстки страница не бывает: отдалять жестом некуда. */
html, body { overflow-x: clip; }
/* Двойное касание по плашкам и кнопкам не приближает страницу — только
   щипок. На телефоне поле ввода ≥16px: иначе iPhone сам приближает при
   нажатии на него. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
@media (max-width: 760px) {
  input[type="text"], input[type="tel"], input[type="search"], input[type="email"],
  input[type="number"], input:not([type]), select, textarea { font-size: 16px !important; }
}

/* 13.10: «Ещё полезное» — иконка в углу квадрата: правило подписи
   (.m-ilink span — display:block) задевало и сам квадрат-span. */
.m-ilink .m-ilink-ico { display: grid; place-items: center; margin: 0; flex: none; }
.m-ilink .m-ilink-ico svg { display: block; }

/* 13.10: кнопки ВК/Telegram у пингвина — крупнее и ближе к нему
   (были 34 px и висели на 60 px выше кнопки). */
/* Тема ставила блоку высоту на 4 ряда, привязку сверху и сдвиг на половину
   своей высоты вверх — ссылки висели высоко и сжимались до 37 px. */
html .connect-links { top: auto !important; bottom: calc(100% + 14px) !important; left: 50% !important;
  width: 52px !important; height: auto !important; display: flex !important; flex-direction: column; gap: 12px !important;
  grid-template-rows: none !important; transform-origin: 50% 100%; transform: translateX(-50%) scaleY(0); }
html .connect.active .connect-links, html .connect.active + .connect-links { transform: translateX(-50%) scaleY(1) !important; }
html .connect-link { flex: none; width: 52px !important; height: 52px !important; max-width: none !important; display: grid !important; place-items: center; }
html .connect-link_icon { width: 52px !important; height: 52px !important; }

/* 13.10: окно входа в кабинет на телефоне — поля по краям экрана, воздух
   внутри, крестик отдельно от заголовка (наезжал на «кабинет»). */
.fancybox-slide--html:has(> #qdi_popup_auth) { padding: 16px !important; }
html #qdi_popup_auth.fancybox-content { padding: 28px 22px 22px !important; border-radius: 22px; }
#qdi_popup_auth .caption { padding-right: 40px; font-size: 24px; line-height: 1.2; margin: 0 0 10px; }
#qdi_popup_auth .note { margin: 0 0 20px; line-height: 1.45; }
#qdi_popup_auth .field { margin-bottom: 16px; }
#qdi_popup_auth .m-lk-captcha { margin: 0 0 16px; }
#qdi_popup_auth > .fancybox-close-small, #qdi_popup_auth .fancybox-close-small {
  top: 12px !important; right: 12px !important; width: 40px !important; height: 40px !important;
  padding: 7px !important; border-radius: 12px; background: #F1F4F9; color: #283548; opacity: 1; }
@media (max-width: 400px) {
  #qdi_popup_auth .caption { font-size: 21px; }
}
@media (max-width: 600px) {
  .m-ilinks, .m-ilinks.m-ilinks--auto { gap: 10px; }
  .m-ilink { padding: 16px; gap: 12px; grid-template-columns: 44px minmax(0, 1fr) 18px; border-radius: 18px; }
  .m-ilink .m-ilink-ico { width: 44px; height: 44px; border-radius: 12px; }
  .m-ilink b { font-size: 15px; }
  .m-ilink span { margin-top: 3px; }
}
/* Виджет связи на телефоне уменьшен целиком (scale .72) — ссылки задаём с
   запасом, чтобы на экране вышло ~50 px. */
@media (max-width: 760px) {
  html .connect-links { width: 70px !important; gap: 16px !important; bottom: calc(100% + 16px) !important; }
  html .connect-link, html .connect-link_icon { width: 70px !important; height: 70px !important; }
}
/* 23.10, владелец: пингвин на телефоне закрывал край полей и карточек — меньше
   (68 → 52 px). Открытый — как был: .tw-fixed:has(> button.connect.active) {transform:none} весомее. */
@media (max-width: 760px) {
  .tw-fixed.tw-right-5.tw-bottom-\[100px\] { transform: scale(.56); }
}
/* Оформление: «Вернуться в корзину» не прилипает к шагам. */
.m-co-head { margin-bottom: 18px; }
.m-co-head h1 { margin-bottom: 8px !important; }

/* ── ОДНА ЛИНИЯ СЛЕВА НА ВСЕХ СТРАНИЦАХ (15.10, владелец: «по отступам надо везде
   посмотреть и на мобилке и на ПК») ───────────────────────────────────────────
   Текстовые страницы (info-page) жили в своей колонке 1188 px: на широком экране
   заголовок «Каталог» и тексты начинались на 66 px правее шапки и крошек, а
   плитки «Каталога» вообще растягивались на всё окно и липли к краям (24 px).
   Теперь у всех один контейнер шапки: m-max + поля m-gut. */
h1.page-header.container,
.info-page > .container:not(:has(#create_order)),
.info-page .container:not(:has(#create_order)):not(:has(#lk)) {
  max-width: calc(var(--m-max) + 2 * var(--m-gut)) !important;
}
.info-page .m-catalog-all.m-wrap {
  max-width: calc(var(--m-max) + 2 * var(--m-gut)) !important;
  margin-left: auto !important; margin-right: auto !important;
}

/* ==========================================================================
   16.10 — ЧИТАЕМОСТЬ И ТЕЛЕФОН (проверка дизайна, владелец: «контрасты,
   телефон: ВК и „В корзину“»). Цены и их схема не меняются.
   ========================================================================== */
/* Контраст: всё, что ниже 4,5:1 на живых страницах. */
html .m-card-price s, html .m-card-price s .ruble,
html .m-pd-price s, html .m-pd-price s .ruble { color: #6B6574; }        /* было #8C8696 — 3,5:1 */
html .m-sticker--sale { background: #B8325A; }                           /* белым — 5,6:1 (было 4,4) */
html .m-sticker--hit, html .m-sticker--last { background: #B3560C; }     /* белым — 4,9:1 (было 3,0) */
html .m-sticker--new  { background: #2463B8; }                           /* белым — 5,9:1 (было 4,1) */
html .m-levels li.is-first, html .m-levels li.is-first b,
html .m-levels li.is-first span { color: #2B1A05 !important; }            /* белое на жёлтом не читалось */
ul.breadcrumbs li:last-child, ul.breadcrumbs li:last-child span { color: var(--m-ink-2) !important; }
@media (max-width: 767px) {
  .m-levels span { font-size: 11.5px; }                                    /* было 10px */
  ul.breadcrumbs { font-size: 12.5px; }
}

/* Кнопка «Написать нам» (пингвин) на телефоне: меньше, не поверх
   открытого каталога и не на закреплённой «В корзину». */
@media (max-width: 767px) {
  .tw-fixed:has(> button.connect) { transform: scale(.74); transform-origin: right bottom; right: 10px !important;
    bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
  html.m-lock .tw-fixed:has(> button.connect) { display: none !important; }
  body.m-has-bar .tw-fixed:has(> button.connect) { bottom: calc(144px + env(safe-area-inset-bottom)) !important; }
}

/* Закреплённая «В корзину» на телефоне: цена и кнопка над вкладками,
   пока настоящая кнопка карточки не на экране (mobiland-new.js). */
.m-pd-bar { display: none; }
@media (max-width: 767px) {
  .m-pd-bar { position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 96;
    display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff;
    border-top: 1px solid var(--m-line); transform: translateY(0); transition: transform .2s ease, opacity .2s ease; }
  .m-pd-bar[hidden] { display: flex; transform: translateY(110%); opacity: 0; pointer-events: none; }
  .m-pd-bar-price { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
  .m-pd-bar-price b { font-size: 19px; font-weight: 800; color: var(--m-ink); white-space: nowrap; }
  .m-pd-bar-price s { font-size: 12.5px; color: #6B6574; }
  .m-pd-bar .m-btn { flex: none; min-height: 46px; padding: 0 20px; }
  .m-pd-bar .m-btn.is-added { background: var(--m-ok); }
  .m-pd-bar .m-btn:disabled { opacity: .55; cursor: not-allowed; }
  .m-pd-actions { position: static; }                                     /* прежняя «липкая» внутри карточки уезжала */
}

/* Профиль: две колонки без прежней пустой колонки аватара. */
#lk #edit_lk_params.m-profile {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px; background: #fff; border-radius: 24px; padding: 24px;
  margin: 0; width: 100%; box-sizing: border-box; line-height: 1.5;
  color: var(--m-ink);
}
#lk #edit_lk_params.m-profile > .col { min-width: 0; width: auto; margin: 0; float: none; }
#lk #edit_lk_params.m-profile .field { display: block; margin: 0 0 20px; }
#lk #edit_lk_params.m-profile .l { display: block; color: #586174; font-size: 14px; line-height: 1.5; margin-bottom: 6px; }
#lk #edit_lk_params.m-profile .v { display: block; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; min-height: 24px; }
#lk #edit_lk_params.m-profile input[type="text"],
#lk #edit_lk_params.m-profile input[type="email"] {
  width: 100%; min-width: 0; height: 46px; border-radius: 10px;
  padding: 10px 12px; color: var(--m-ink); border: 1px solid #B8C2D0;
  background: #fff; font-size: 16px; line-height: 1.5; box-sizing: border-box;
}
#lk #edit_lk_params.m-profile input:focus-visible,
#lk #edit_lk_params.m-profile a:focus-visible { outline: 2px solid #3567B7; outline-offset: 3px; }
#lk #edit_lk_params.m-profile .error input { border-color: #B42318; }
#lk #edit_lk_params.m-profile .error-message { color: #B42318; line-height: 1.5; }
#lk #edit_lk_params.m-profile .qdi-radio-flex { display: flex; flex-wrap: wrap; gap: 12px 20px; line-height: 1.5; }
#lk #edit_lk_params.m-profile .m-lk-fio-note { color: #586174; font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
#lk #edit_lk_params.m-profile .btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
#lk #edit_lk_params.m-profile .btns .btn { margin: 0; min-height: 46px; width: auto; padding: 12px 20px; line-height: 1.5; font-size: 16px; border-radius: 12px; text-align: center; }
#lk #edit_lk_params.m-profile .btns input[type="submit"] { background: #283548; color: #fff; }
#lk #edit_lk_params.m-profile .btns input[type="submit"]:hover { background: #1B2534; }
#lk #edit_lk_params.m-profile .edit { margin: 24px 0 0; }
#lk #edit_lk_params.m-profile .edit a { display: inline-flex; align-items: center; gap: 8px; line-height: 1.5; }
@media (max-width: 767px) {
  #lk #edit_lk_params.m-profile { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 20px; }
  #lk #edit_lk_params.m-profile .btns .btn { width: 100%; }
}

/* Checkout bonus selection: one checkbox, one optional amount. */
#create_order .m-co-bonus-toggle{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
#create_order .m-co-bonus-toggle input[type=checkbox]{appearance:auto!important;-webkit-appearance:checkbox!important;position:static!important;opacity:1!important;pointer-events:auto!important;width:20px!important;height:20px!important;margin:0;flex:none}
#create_order .m-co-bonus-toggle input::before,#create_order .m-co-bonus-toggle input::after{display:none!important}
#create_order .m-co-bonus-amount{display:flex;align-items:center;gap:12px;margin:14px 0 8px;flex-wrap:wrap}
#create_order .m-co-bonus-amount[hidden]{display:none}
#create_order .m-co-bonus{margin-top:16px}

/* Краткая подсказка о начислении: без денежного значка. */
.m-bonus-info{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;padding:0;border:1px solid #a6adba;border-radius:50%;background:transparent;color:#657083;font:inherit;font-weight:700;font-size:14px;line-height:1;cursor:pointer;flex:none;vertical-align:middle}
/* 24.10: по центру — общий сброс margin у dialog уводил окно в угол (iPad) */
.m-bonus-popup{position:fixed;inset:0;margin:auto;height:fit-content;box-sizing:border-box;width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;border:0;border-radius:20px;padding:24px;background:#fff;color:#283548;box-shadow:0 18px 60px #0003}
.m-bonus-popup::backdrop{background:#10182766}.m-bonus-popup h2{margin:0 0 14px;font-size:20px}.m-bonus-popup ul{padding-left:20px;margin:0 0 20px}.m-bonus-popup li{margin:8px 0;font-size:14px;line-height:1.45}.m-cart-bonus-note{display:flex;align-items:center;gap:9px;margin:16px 0;font-size:13px;color:var(--m-ink-2)}

/* ── 21.10 полировка телефона (владелец: «отступы и полировка») ───────────── */
/* Заголовки без «висячего» последнего слова: «Apple iPhone 18 Pro SIM + / eSIM». */
h1, h2, .m-promo-t b, .m-card-name, .m-loyal-text h2 { text-wrap: balance; }
/* Длинная подсказка поиска на узком экране обрывается многоточием, а не на полуслове. */
.m-search input { text-overflow: ellipsis; }
@media (max-width: 767px) {
  /* Плитки каталога: подпись в одну и в две строки — картинки на одной линии. */
  .m-cat { justify-content: flex-end; }
  .m-cat b { min-height: 2.5em; display: flex; align-items: center; justify-content: center; }
  /* Плитки «Trade-in / Рассрочка / Доставка»: описание 11px читалось с трудом. */
  .m-promo-t span { font-size: 12px; line-height: 1.35; }
  /* Кнопки программы лояльности — одной ширины, друг под другом. */
  .m-loyal-btns { flex-direction: column; align-items: stretch; gap: 10px; }
  .m-loyal-btns .m-btn { width: 100%; justify-content: center; }
  /* Уровни бонусов: пять столбиков по 60px рвали «до 100 / 000 ₽».
     На телефоне — лесенка полосами: длина растёт с уровнем, текст в строку. */
  .m-levels, .m-levels--first { height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .m-levels li { width: calc(50% + var(--h) / 2); height: auto; min-height: 0; flex-direction: row; align-items: baseline;
                 gap: 8px; padding: 10px 14px; border-radius: 12px; }
  .m-levels--first li.is-first { width: 100%; margin: 0 0 6px; }
  .m-levels b { font-size: 16px; }
  .m-levels span { font-size: 12.5px; white-space: nowrap; }
}

/* ── 21.10 телефон, второй заход: шапка, плитки, пингвин ─────────────────── */
@media (max-width: 767px) {
  /* Шапка: строка логотипа, телефона и входа уезжает вверх, приклеенным
     остаётся только поиск (было 118 px шапки на каждом экране). */
  .m-header { top: -52px; }
  /* «Рассрочка», «Доставка»: описание на всю ширину плитки, картинка меньше. */
  .m-promo-t span { max-width: 100%; }
  .m-promo img { height: 44%; max-width: 58%; }
  /* Пингвин чата: две трети размера, при прокрутке вниз уходит, при прокрутке
     вверх возвращается. Открытый — в полный размер, со ссылками ВК/Telegram. */
  .tw-fixed:has(> button.connect) { transform: scale(.66); transform-origin: 100% 100%; transition: transform .25s ease, opacity .2s; }
  .tw-fixed:has(> button.connect.active) { transform: none; }
  html.m-down .tw-fixed:has(> button.connect:not(.active)) { transform: translateY(24px) scale(.66); opacity: 0; pointer-events: none; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .tw-fixed:has(> button.connect) { transition: none; }
}

/* ── 21.10 телефон, путь покупки: корзина, оформление, подвал ────────────── */
/* Подписи полей оформления: тема красила их в #999 с !important — 2,8:1 на белом. */
#create_order .wa-field .wa-name, #create_order .checkout-step-content .wa-name { color: var(--m-ink-2) !important; }
@media (max-width: 767px) {
  /* iPhone приближает страницу при касании поля со шрифтом мельче 16 px
     (оформление, поиск, кабинет). 16 px — и страница стоит на месте. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea,
  html #create_order input:not([type=checkbox]):not([type=radio]), html #create_order select, html #create_order textarea { font-size: 16px !important; }
  /* Способы получения и оплаты: значок слева, текст справа — три карточки
     по 106 px сжимаются до ~64 px, весь шаг виден без долгой прокрутки. */
  #create_order .m-co-opt-body { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-content: center; padding: 12px 14px; }
  #create_order .m-co-opt-body > * { grid-column: 2; }
  #create_order .m-co-opt-ico { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; width: 26px; height: 26px; }
  #create_order .m-co-options li { min-height: 0 !important; }   /* тема держала 75 px даже под одну строку «Наличный расчёт» */
  /* Аксессуары в корзине: «В корзину» в одну строку, без переноса слова. */
  .m-acc-add { white-space: nowrap; padding: 0 10px; gap: 5px; }
  .m-acc-add svg { width: 16px; height: 16px; flex: none; }
  /* Подвал: «Документы» — длинные названия, им нужна вся ширина. */
  .m-footer-cols > .m-footer-col:last-child { grid-column: 1 / -1; }
}

/* ── Ряды на компьютере: колесо и стрелки (21.10) ───────────────────────── */
.m-nav-list.is-more.is-less, .m-chips.is-more.is-less, .m-sort.is-more.is-less {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.m-nav-list.is-less:not(.is-more), .m-chips.is-less:not(.is-more), .m-sort.is-less:not(.is-more) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px);
          mask-image: linear-gradient(to right, transparent, #000 48px); }
[data-m-arrows] { position: relative; }
.m-row-arrow { position: absolute; top: 50%; z-index: 2; display: none; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-top: -15px; padding: 0 0 2px; border: 1px solid var(--m-line); border-radius: 50%;
  background: var(--m-card, #fff); color: var(--m-ink); font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: var(--m-shadow); }
.m-row-arrow:hover { color: var(--m-accent); border-color: var(--m-accent); }
.m-row-arrow.is-prev { left: 0; }
.m-row-arrow.is-next { right: 0; }
[data-m-arrows].can-prev .m-row-arrow.is-prev, [data-m-arrows].can-next .m-row-arrow.is-next { display: flex; }

/* ── Пингвин чата на компьютере (21.10): стоял на 100 px от низа — место под
   нижнюю панель телефона, которой здесь нет, — и закрывал край правой
   колонки товара и кнопку «Подтвердить заказ». В угол, размером как на
   телефоне — на 1440 влезает в поле справа от колонки; открытый — в полный размер. ── */
@media (min-width: 768px) {
  .tw-fixed:has(> button.connect) { bottom: 16px !important; right: 12px !important; transform: scale(.66); transform-origin: 100% 100%; transition: transform .2s ease; }
  .tw-fixed:has(> button.connect.active) { transform: none; }
}

/* ── 404 (21.10): серый #B9B9B9 на светлом фоне не читался. ─────────────── */
/* 404.css подключается после темы — нужен вес выше. */
body #page404 .head .note { color: var(--m-dim); }

/* 24.10 SEO: ссылка «Все аксессуары для <модель>» в шапке блока аксессуаров. */
.m-acc-head .m-acc-all { align-self: flex-start; font-weight: 700; font-size: 14px; color: var(--m-accent); text-decoration: none; }
.m-acc-head .m-acc-all:hover { text-decoration: underline; }
.m-fits a { color: inherit; text-decoration: underline; text-decoration-color: rgba(40, 53, 72, .3); text-underline-offset: 2px; }
.m-fits a:hover { text-decoration-color: currentColor; }
/* 24.10 SEO: указатель моделей и ссылки на странице модели. */
.m-fi-family h2, .m-fits-links h2 { font-size: 19px; margin: 0 0 12px; }
.m-fi-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 16px; }
.m-fi-list li { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.m-fi-list a { color: var(--m-ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.m-fi-list a:hover { color: var(--m-accent); text-decoration: underline; }
.m-fi-list span { color: var(--m-mute); font-size: 12px; flex: none; }
.m-fi-family + .m-fi-family { margin-top: 12px; }
.m-fits-device { margin: 0 0 14px; }
.m-fits-device a, .m-fits-links .m-acc-all { color: var(--m-accent); font-weight: 700; }
.m-acc-solo { margin: 12px 0 0; }
@media (max-width: 600px) { .m-fi-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* SEO 24.10: ярлык страницы внутри h1 (поисковое слово первым), вид прежний */
.m-ihero h1 .m-ihero-tag, .ti-hero h1 .ti-tag { display: table; line-height: normal; letter-spacing: normal; }

/* Аксессуары по моделям плитками: бренд → тип → модель (24.10) */
.m-fi-tiles { margin-bottom: 24px; }
.m-fi-tile b { display: block; }
.m-fi-tile b span { display: block; margin-top: 4px; color: var(--m-mute); font-size: 12px; font-weight: 600; }
@media (max-width: 600px) { .m-fi-tile b span { font-size: 11px; margin-top: 2px; } }
.m-fi-tile img { mix-blend-mode: multiply; }
.m-fi-mono { display: flex; align-self: stretch; width: 100%; box-sizing: border-box; align-items: center; justify-content: center; height: 100px; border-radius: 16px;
  background: var(--m-accent-soft); color: var(--m-accent-ink); font-size: 30px; font-weight: 800; letter-spacing: -.02em; text-align: center; line-height: 1.05; padding: 0 8px; }
@media (max-width: 600px) { .m-fi-mono { height: auto; aspect-ratio: 1; font-size: 22px; } }
.m-fi-h { font-size: 19px; margin: 8px 0 12px; }
.m-fi-all { margin-top: 8px; }
.m-fi-all summary { cursor: pointer; font-weight: 700; font-size: 16px; }
.m-fi-all[open] summary { margin-bottom: 14px; }
/* описание товара из ERP: списки с точками */
#product-description ul { list-style: disc; padding-left: 20px; margin: 0 0 12px; }
#product-description li { margin: 3px 0; }

/* ── 404 в стиле сайта (24.10): тёмный первый экран как у инфостраниц, справа — крупное «404» ── */
.m-404-num { justify-self: end; font-size: clamp(96px, 16vw, 220px); font-weight: 800; line-height: .9; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 2px rgba(206,217,235,.35); user-select: none; }
.m-404-search { max-width: 520px; margin-top: 22px; flex: none; }
.m-404 .m-ihero-btns { margin-top: 14px; }
@media (max-width: 1023px) { .m-404-num { display: none; } }
.m-404-search .m-search-go { display: block; } /* в шапке на телефоне кнопку прячут, здесь — нужна */

/* ── Кабинет, 24.10 ── */
/* «Мои заказы»: у строки нет картинки, а сетка была на три колонки (52px | текст | сумма) —
   номер заказа и «Состав заказа» сжимались в колонку 52 px. */
.m-lk-list.m-lk-orders li:not(:has(> .m-lk-ord-img)) { grid-template-columns: minmax(0, 1fr) auto; }
.m-lk-orders details ul { margin: 8px 0 0; }
/* Настройки уведомлений */
.m-lk-set { display: grid; gap: 16px; justify-items: start; }
.m-lk-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.m-lk-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--m-accent); }
.m-lk-check span { display: grid; gap: 4px; }
.m-lk-check small { color: var(--m-dim); font-size: 13px; line-height: 1.45; }
.m-lk-saved { margin: 0 0 14px; color: var(--m-ok); font-weight: 700; }
.m-lk-block-head + .m-lk-text { margin-top: 12px; }
.m-lk-text { margin: 0; line-height: 1.55; }
.m-lk-text + .m-lk-text { margin-top: 8px; }
/* «Давайте познакомимся» (24.10): текст не должен липнуть к карточке формы. */
.m-lk-hello { margin-bottom: 28px; }
.m-lk-hello h1 { margin-bottom: 10px; }
@media (max-width: 599px) { .m-lk-hello { margin-bottom: 20px; } }

/* Телефон не по формату (24.10) — рамка и строка под полем. */
input.m-phone-bad { border-color: #D64545 !important; }
.m-phone-err { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: #C23B3B; }
.m-lk-welcome .m-btn { margin-top: 16px; }

/* ── Страница «Каталог» (27.10): как выпадашка «Каталог» в шапке, раскрытая целиком.
   Слева все разделы (подсвечен тот, что на экране), справа каждый раздел со всеми
   подразделами, их моделями и брендами. Телефон — разделы лентой сверху.
   Прежняя сетка карточек (24.10) — home.catalog.categories.before-2710.html. */
.m-cat2 { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 28px; align-items: start; }
.m-cat2 a:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; border-radius: 8px; }
.m-cat2-rail { position: sticky; top: 112px; max-height: calc(100vh - 132px); overflow-y: auto; scrollbar-width: thin; background: var(--m-card); border-radius: 22px; padding: 10px; }
.m-cat2-rail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.m-cat2-rail a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--m-ink) !important; text-decoration: none !important; transition: background-color .15s ease-out, color .15s ease-out; }
.m-cat2-rail img, .m-cat2-rail i { flex: none; width: 30px; height: 30px; object-fit: contain; border-radius: 8px; }
.m-cat2-rail i { background: var(--m-bg); }
.m-cat2-rail a:hover { background: var(--m-bg); }
.m-cat2-rail a.is-on { background: var(--m-accent-soft); color: var(--m-accent-ink) !important; }
.m-cat2-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.m-cat2-group { background: var(--m-card); border-radius: var(--m-r-card); padding: 26px 32px 10px; scroll-margin-top: 112px; }
.m-cat2-head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--m-line); }
.m-cat2-head img { flex: none; width: 56px; height: 56px; object-fit: contain; }
.m-cat2-head h2 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -.015em; }
.m-cat2-head h2 a { color: var(--m-ink) !important; text-decoration: none !important; }
.m-cat2-head h2 a:hover { color: var(--m-accent-ink) !important; }
.m-cat2-all { margin-left: auto; flex: none; font-size: 14px; font-weight: 700; color: var(--m-accent-ink) !important; text-decoration: none !important; font-variant-numeric: tabular-nums; }
.m-cat2-all::after { content: " →"; }
.m-cat2-all:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.m-cat2-group:not(:has(.m-cat2-subs)) { padding-bottom: 26px; }
.m-cat2-group:not(:has(.m-cat2-subs)) .m-cat2-head { border-bottom: 0; padding-bottom: 0; }
.m-cat2-subs { columns: 4 190px; column-gap: 32px; padding-top: 20px; }
.m-cat2-sub { break-inside: avoid; margin-bottom: 18px; }
.m-cat2-subname { display: inline-flex; align-items: baseline; gap: 7px; padding: 2px 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--m-ink) !important; text-decoration: none !important; }
.m-cat2-subname small { font-size: 12px; font-weight: 600; color: var(--m-mute); font-variant-numeric: tabular-nums; }
.m-cat2-subname:hover { color: var(--m-accent-ink) !important; }
.m-cat2-leaves { list-style: none; margin: 4px 0 0; padding: 0; }
.m-cat2-leaves li { margin: 0; padding: 0; }
.m-cat2-leaves > li > a { display: inline-block; padding: 3px 0; font-size: 14px; line-height: 1.35; color: var(--m-ink-2) !important; text-decoration: none !important; }
.m-cat2-deep { display: flex; flex-wrap: wrap; gap: 0 10px; padding: 0 0 4px 12px; }
.m-cat2-deep a { padding: 2px 0; font-size: 13px; line-height: 1.35; color: var(--m-dim) !important; text-decoration: none !important; }
.m-cat2-leaves a:hover, .m-cat2-deep a:hover { color: var(--m-accent-ink) !important; }
@media (max-width: 1023px) {
  .m-cat2 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .m-cat2-rail { position: static; max-height: none; overflow-x: auto; overflow-y: hidden; background: none; padding: 0 var(--m-gut) 4px; margin: 0 calc(-1 * var(--m-gut)); scrollbar-width: none; border-radius: 0; }
  .m-cat2-rail::-webkit-scrollbar { display: none; }
  .m-cat2-rail ul { flex-direction: row; gap: 8px; width: max-content; }
  .m-cat2-rail a { padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--m-card); white-space: nowrap; }
  .m-cat2-rail a:hover { background: var(--m-card); }
  .m-cat2-rail img, .m-cat2-rail i { width: 28px; height: 28px; }
  .m-cat2-group { scroll-margin-top: 140px; }
}
@media (max-width: 599px) {
  .m-cat2-group { padding: 18px 16px 4px; }
  .m-cat2-group:not(:has(.m-cat2-subs)) { padding-bottom: 18px; }
  .m-cat2-head { flex-wrap: wrap; gap: 4px 12px; padding-bottom: 14px; }
  .m-cat2-head img { width: 44px; height: 44px; }
  .m-cat2-head h2 { font-size: 19px; flex: 1; }
  .m-cat2-all { font-size: 13px; }
  .m-cat2-subs { columns: 2 130px; column-gap: 16px; padding-top: 14px; }
  .m-cat2-sub { margin-bottom: 14px; }
  .m-cat2-subname { font-size: 14.5px; }
  .m-cat2-leaves > li > a { font-size: 13.5px; }
}

/* Услуги (06.11): без наличия — нейтральная плашка; в корзине — блок галочек. */
.m-chip--service { color: var(--m-accent-ink); } .m-chip--service i { background: var(--m-accent); }
.m-pd-status--service { background: var(--m-accent-soft); } .m-pd-status--service b { color: var(--m-accent-ink); } .m-pd-status--service > i { background: var(--m-accent); }
.m-cart-svc { background: var(--m-card); border-radius: var(--m-r-card); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.m-cart-svc h2 { margin: 0; font-size: 19px; }
.m-cart-svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.m-cart-svc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; border-top: 1px solid var(--m-line); }
.m-cart-svc-row:first-child { border-top: 0; }
.m-cart-svc-check { flex: 0 1 auto; min-height: 40px; font-size: 15px; }
.m-cart-svc-price { margin-left: auto; white-space: nowrap; font-size: 15px; }
.m-cart-svc-help { flex-basis: 100%; padding: 0 0 4px 28px; }
.m-cart-svc-help[hidden] { display: none; }
@media (max-width: 767px) { .m-cart-svc h2 { font-size: 17px; } }