/* ==========================================================
   Мебель перемен — редизайн. Токены, база, компоненты, страницы
   ========================================================== */
:root {
  --bg: #f3f6f9;
  --surface: #ffffff;
  --surface-2: #e8eef4;
  --ink: #16202a;
  --ink-2: #3f4a55;
  --muted: #75808b;
  --line: #dbe3eb;
  --brand: #133550;        /* тёмно-синий, как шапка сайта */
  --brand-2: #266a9f;      /* синий ссылок сайта */
  --brand-3: #6caddf;      /* светло-синий акцент */
  --accent: #c60001;       /* фирменный красный логотипа */
  --accent-hover: #a10001;
  --sale: #c60001;
  --ok: #2f8a57;
  --gold: #e8b04b;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 24, 22, .04), 0 8px 24px rgba(20, 24, 22, .06);
  --shadow-lg: 0 20px 50px rgba(20, 24, 22, .16);
  --wrap: 1280px;
  --header-h: 125px;       /* реальная высота шапки — обновляет app.js */
  --ptabs-h: 0px;          /* высота липких вкладок товара */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Настройки шаблона → Оформление (system/config/template_style.php) переопределяют эти значения */
  --accent-text: #fff;
  --page-bg: #fff;
  --tint: #f6f7f8;
  --topbar-bg: #133550;
  --topbar-text: #fff;
  --header-bg: #fff;
  --catnav-bg: #f9f9f9;
  --menu-text: #1d1d1b;
  --footer-bg: #0c2336;
  --footer-text: rgba(255, 255, 255, .72);
  --footer-head: #fff;
  --fs-base: 15px;
  --lh-base: 1.55;
  --h1: 44px;
  --h2: 32px;
  --h3: 17px;
  --h-section: 28px;
  --fw-head: 800;
  --card-title: 15px;
  --price: 20px;
  --price-lg: 36px;
  --menu-fs: 16px;
  --btn-h: 44px;
  --btn-r: 12px;
  --btn-fs: 15px;
  --btn-fw: 700;
  --btn-tt: none;
  --cart-r: 24px;
  --citem-img: 96px;
  --citem-name-fs: 15px;
  --citem-name-fw: 700;
  --citem-opts-fs: 13px;
  --citem-price-fs: 18px;
  --step-fs: 20px;
  --opt-fs: 15px;
  --opt-active-bg: #f1f7fc;
  --summary-title-fs: 22px;
  --summary-row-fs: 15px;
  --total-fs: 30px;
  --btn-px: 20px;
  --dark-text: #fff;
  --search-bg: #f0f0f0;
  --phone-color: #1d1d1b;
  --ls-head: -.02em;
  --topbar-fs: 14px;
  --footer-fs: 14px;
  --chip-fs: 12px;
  --chip-r: 8px;
  --qty-r: 10px;
  --field-h: 48px;
  --field-r: 12px;
  --card-bw: 1px;
  --section-pad: 32px;
  --grid-gap: 16px;
  --link-more: #266a9f;
  --link-more-hover: #266a9f;
  --cat-cols: 4;
  --cat-h: 210px;
  --cat-gap: 16px;
  --cat-big: 2;
  --cat-name: #fff;
  --cat-fs: 20px;
  --cat-shade: rgba(10, 14, 12, .72);
  --crumbs-fs: 13px;
  --h1-product: 34px;
  /* свои настройки блоков: по умолчанию — как у сайта (общие переменные) */
  --menu-fw: 400;
  --cat-fw: 800;
  --card-title-fw: 700;
  --field-bg: #fff;
  --field-fs: 16px;
}

/* Переменные, которые ссылаются на другие («как у сайта»): объявлены и на #main — там их пересчитывают
   значения вкладки страницы (Настройки шаблона → Оформление), а шапка и подвал остаются со значениями :root */
:root, #main {
  --cart-bg: var(--surface);
  --citem-name: var(--ink);
  --citem-name-hover: var(--brand-2);
  --citem-opts: var(--muted);
  --citem-opts-value: var(--ink-2);
  --citem-price: var(--ink);
  --citem-old: var(--muted);
  --step-color: var(--ink);
  --step-num: var(--brand);
  --opt-note: var(--muted);
  --opt-active: var(--brand-2);
  --opt-price: var(--brand);
  --summary-row: var(--ink-2);
  --summary-sale: var(--accent);
  --total-color: var(--ink);
  --summary-save: var(--ok);
  --font-head: var(--font);
  --card-link: var(--ink);
  --card-link-hover: var(--brand-2);
  --crumbs-link: var(--muted);
  --crumbs-hover: var(--ink);
  --crumbs-current: var(--muted);
  --crumbs-sep: var(--line);
  --topbar-font: var(--font);
  --header-font: var(--font);
  --header-icons: var(--ink);
  --header-icons-hover: var(--brand-2);
  --catnav-font: var(--font);
  --menu-hover: var(--brand-2);
  --crumbs-font: var(--font);
  --section-color: var(--ink);
  --section-font: var(--font-head);
  --cat-font: var(--font);
  --card-font: var(--font);
  --card-bg: var(--surface);
  --card-line: var(--line);
  --card-price: var(--ink);
  --product-font: var(--font-head);
  --product-title: var(--ink);
  --product-price: var(--ink);
  --btn-font: var(--font);
  --field-line: var(--line);
  --footer-font: var(--font);
  --footer-link: var(--footer-text);
  --header-call: var(--accent);
  --header-call-hover: var(--accent-hover);
  --header-call-text: var(--accent-text);
}
#main { background: var(--page-bg); }
/* Кнопки «Купить», «В корзину» и прочий акцент внутри страниц — тёмно-синие (Оформление → поле «Фон» кнопки «Купить»);
   шапка, всплывающие окна и страница «Все производители» (там этого поля нет) — фирменный красный из :root */
#main { --accent: #133550; --accent-hover: #1f496b; }
body.product-manufacturer #main { --accent: #c60001; --accent-hover: #a10001; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--ptabs-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--fs-base)/var(--lh-base) var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: clip; }  /* clip: ленты с запасом под тень не дают прокрутки вбок, липкая шапка работает */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: var(--ls-head); font-family: var(--font-head); }
h1 { font-size: clamp(min(28px, var(--h1)), calc(var(--h1) - 44px + 4vw), var(--h1)); font-weight: var(--fw-head); color: var(--h1-color); }
h2 { font-size: clamp(min(22px, var(--h2)), calc(var(--h2) - 32px + 2.6vw), var(--h2)); font-weight: var(--fw-head); color: var(--h2-color); }
h3 { font-size: var(--h3); font-weight: 700; color: var(--h3-color); }
/* --h1-color, --text-color… задаются только в «Оформлении»: пока не заданы, цвет наследуется как раньше */
#main { color: var(--text-color, var(--ink)); --ink-2: var(--text-color, #3f4a55); font: 400 var(--fs-base)/var(--lh-base) var(--font); }
.feedback h2, .why__item h3, .seo__text h2, .seo__text h3 { color: inherit; }
p { margin: 0 0 12px; }
[hidden] { display: none !important; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i.rot { transform: rotate(-90deg); }

/* ---------- Кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--b-font, var(--btn-font)); height: var(--b-h, var(--btn-h)); padding: 0 var(--btn-px); border: 1px solid transparent; border-radius: var(--b-r, var(--btn-r)); font-weight: var(--b-fw, var(--btn-fw)); font-size: var(--b-fs, var(--btn-fs)); text-transform: var(--btn-tt); white-space: nowrap; transition: background .15s, color .15s, border-color .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--sm { height: calc(var(--b-h, var(--btn-h)) - 6px); padding: 0 max(6px, calc(var(--btn-px) - 6px)); font-size: calc(var(--b-fs, var(--btn-fs)) - 1px); border-radius: max(0px, calc(var(--b-r, var(--btn-r)) - 2px)); }
.btn--lg { height: calc(var(--b-h, var(--btn-h)) + 10px); padding: 0 calc(var(--btn-px) + 6px); font-size: calc(var(--b-fs, var(--btn-fs)) + 1px); border-radius: calc(var(--b-r, var(--btn-r)) + 2px); }
.btn--block { width: 100%; }
.btn--accent { background: var(--accent); color: var(--accent-text); --b-font: var(--btn-accent-font); --b-fs: var(--btn-accent-fs); --b-fw: var(--btn-accent-fw); --b-h: var(--btn-accent-h); --b-r: var(--btn-accent-r); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--accent:hover, .btn--accent:focus { color: var(--accent-text); }
.btn--dark { background: var(--btn-dark-bg, var(--brand)); color: var(--dark-text); --b-font: var(--btn-dark-font); --b-fs: var(--btn-dark-fs); --b-fw: var(--btn-dark-fw); --b-h: var(--btn-dark-h); --b-r: var(--btn-dark-r); }
.btn--dark:hover { background: var(--brand-2); }
.btn--dark:hover, .btn--dark:focus { color: var(--dark-text); }
.btn--light { background: var(--surface); border-color: var(--line); }
.btn--light:hover { border-color: var(--ink); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.link { background: none; border: 0; padding: 0; color: var(--brand-2); font-weight: 600; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--link-more); }
.link-arrow:hover { gap: 10px; color: var(--link-more-hover); }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--ink); transition: background .15s; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn .i { width: 22px; height: 22px; }
.icon-btn--glass { background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px); }
.badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.badge--inline { position: static; }

.chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: var(--chip-r); background: var(--surface-2); font-size: var(--chip-fs); font-weight: 700; }
.chip .i { width: 14px; height: 14px; }
.chip--sale { background: var(--sale); color: #fff; }
.chip--hit { background: var(--gold); color: #3b2a07; }
.chip--ok { background: #e3f3e9; color: var(--ok); }
.chip--lg { height: 32px; font-size: calc(var(--chip-fs) + 2px); padding: 0 12px; }

.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.price b { font-size: var(--price); font-weight: 800; letter-spacing: -.01em; }
.card .price b { color: var(--card-price); }
.buy .price b { color: var(--product-price); }
.price s { color: var(--muted); font-size: 14px; }
.card .price s { color: var(--card-old, var(--muted)); }
.buy .price s { color: var(--product-old, var(--muted)); }
.price--sm b { font-size: calc(var(--price) - 4px); }
.price--sm s { font-size: 12px; }
.price--lg b { font-size: var(--price-lg); }
.price--lg s { font-size: 18px; }
.price--lg .chip { align-self: center; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fde5e5; color: var(--accent); font-size: 13px; font-weight: 700; }
.eyebrow .i { width: 16px; height: 16px; }
.eyebrow--light { background: rgba(255, 255, 255, .14); color: #fff; }

.check { display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
/* галочка в стиле сайта: скруглённый квадрат, включена — фирменная заливка и белая галочка */
.check input[type="checkbox"] { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 0; border: 1.5px solid #b9c5d1; border-radius: 6px; background: #fff no-repeat center / 0 0; cursor: pointer; transition: background-color .15s, border-color .15s, background-size .15s, box-shadow .15s; }
.check input[type="checkbox"]:checked { border-color: var(--brand); background-color: var(--brand); background-size: 14px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.check:hover input[type="checkbox"]:not(:checked) { border-color: var(--brand-2); }
.check input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(38, 106, 159, .25); }
.check input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
.check em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 12px; }
.check a { text-decoration: underline; }

.logo { display: flex; align-items: center; flex: none; }
.logo img { width: auto; height: 48px; }
.search { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; height: 48px; padding: 4px 4px 4px 44px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .15s; }
.search:focus-within { border-color: var(--brand); }
.search > .i { position: absolute; left: 14px; color: var(--muted); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; height: 100%; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }

.drawer { position: fixed; inset: 0; z-index: 60; background: rgba(15, 18, 17, .45); }
.drawer__panel { width: min(360px, 88vw); height: 100%; overflow-y: auto; background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 4px; animation: slide .22s ease; }
@keyframes slide { from { transform: translateX(-100%); } }
.drawer__top { display: flex; justify-content: space-between; align-items: center; font-size: 20px; margin-bottom: 8px; }
.drawer__group summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; font-weight: 700; list-style: none; cursor: pointer; border-bottom: 1px solid var(--line); }
.drawer__group summary::-webkit-details-marker { display: none; }
.drawer__group[open] summary .i { transform: rotate(180deg); }
/* название раздела — ссылка на раздел с иконкой, стрелка справа — раскрыть подразделы */
.drawer__group summary { padding: 0 0 0 4px; }
.drawer__cat { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 10px 0; color: inherit; }
.drawer__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; }
.drawer__icon img { width: 100%; height: 100%; object-fit: contain; }
.drawer__icon--photo { border-radius: 6px; overflow: hidden; }
.drawer__icon--photo img { object-fit: cover; }
.drawer__toggle { flex: none; display: grid; place-items: center; width: 48px; align-self: stretch; margin-left: 8px; color: var(--ink-2); }
.drawer__toggle .i { transition: transform .2s; }
.drawer__link .drawer__cat { padding: 0; }
.drawer__group ul { list-style: none; margin: 0; padding: 6px 12px 12px; display: grid; gap: 8px; color: var(--ink-2); }
.drawer__links { display: grid; gap: 10px; padding: 16px 4px; color: var(--ink-2); }
.drawer .btn { margin-top: auto; }

/* ---------- Секции ---------- */
.section { padding: var(--section-pad) 0; }  /* между соседними секциями — 64 px */
.section--tint { background: var(--surface-2); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.section__head p { margin: 6px 0 0; }

/* Категории */
.cats { display: grid; grid-template-columns: repeat(var(--cat-cols), 1fr); grid-auto-rows: var(--cat-h); gap: var(--cat-gap); }
.cat { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); isolation: isolate; }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .4s; }
.cat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, var(--cat-shade)); }
.cat:hover img { transform: scale(1.05); }
.cat__name { color: var(--cat-name); font-family: var(--cat-font); font-weight: var(--cat-fw); font-size: var(--cat-fs); }
.cat__sub { color: rgba(255, 255, 255, .8); font-size: 13px; }
.cat--big { grid-column: span var(--cat-big); grid-row: span var(--cat-big); }
.cat--big .cat__name { font-size: calc(var(--cat-fs) + 10px * (var(--cat-big) - 1)); }
.cat--sale { background: var(--accent); }
.cat--sale::after { display: none; }
.cat__pct { font-size: 56px; font-weight: 800; color: #fff; letter-spacing: -.04em; line-height: 1; margin-bottom: auto; }

/* Карточка товара */
.card { position: relative; display: flex; flex-direction: column; font-family: var(--card-font); background: var(--card-bg); border-radius: var(--radius); overflow: hidden; border: var(--card-bw) solid var(--card-line); transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: transparent; }
.card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); touch-action: pan-y; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .18s; }
.card__media img.is-loading { opacity: .55; }
.card__dots { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s; }
.card__dots i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .55); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: background .15s; }
.card__dots i.is-active { background: #fff; }
.card__count { position: absolute; right: 10px; bottom: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; background: rgba(12, 35, 54, .6); color: #fff; font-size: 12px; font-weight: 700; transition: opacity .2s; }
.card__count .i { width: 14px; height: 14px; }
.card__media:hover .card__dots, .card__media.is-touched .card__dots { opacity: 1; }
.card__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12, 35, 54, .55); color: #fff; font-weight: 800; font-size: 16px; pointer-events: none; }
.card__media:hover .card__count, .card__media.is-touched .card__count { opacity: 0; }
@media (hover: none) { .card__dots { opacity: 1; } .card__count { display: none; } }
.card__media .chip { position: absolute; top: 12px; left: 12px; }
.card__media .chip--hit { left: 70px; }
.card__fav { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: var(--ink-2); box-shadow: var(--shadow); }
.card__fav.is-on, [data-fav].is-on { color: var(--sale); }
.card__fav.is-on .i, [data-fav].is-on .i { fill: currentColor; }
.card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.card__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.card__meta .ok { color: var(--ok); font-weight: 600; }
.dots { display: inline-flex; }
.dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; margin-left: -4px; background: #cfc6b8; }
.dots i:first-child { margin-left: 0; background: #e9e6df; }
.dots i:last-child { background: #5d6a73; }
.card__title { font-family: var(--card-font); font-size: var(--card-title); font-weight: var(--card-title-fw); line-height: 1.3; margin-bottom: auto; padding-bottom: 4px; }
.card__title a { color: var(--card-link); }
.card__title a:hover { color: var(--card-link-hover); }
.card__note { font-size: 12px; color: var(--muted); margin: -4px 0 4px; }
.card__actions { display: flex; gap: 8px; margin-top: 4px; }
.card__actions > .btn { flex: none; }
.card__actions > .btn--accent { flex: 1; min-width: 0; }  /* «В корзину» тянется; без «В 1 клик» — на всю ширину без лишнего зазора */
.card__actions .i { width: 18px; height: 18px; }

.i.left { transform: rotate(90deg); }
.i.right { transform: rotate(-90deg); }
.carousel { --per: 4; --gap: var(--grid-gap); position: relative; }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 8px 16px 44px; margin: -8px -16px -36px; scroll-padding-inline: 16px; }  /* запас под тень при наведении; по бокам = промежутку — соседние карточки за краем не видны */
.carousel__track .card:hover { box-shadow: 0 20px 30px -14px rgba(20, 24, 22, .28); }  /* тень вниз, в стороны не дальше 16 px — не обрезается */
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.carousel__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.carousel__track.is-dragging * { pointer-events: none; user-select: none; }
.carousel__btn { position: absolute; top: calc(50% - 40px); z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); box-shadow: 0 6px 20px rgba(12, 35, 54, .18); transition: opacity .2s, transform .2s, background .15s; }
.carousel__btn:hover { background: var(--brand); color: #fff; }
.carousel__btn .i { width: 22px; height: 22px; }
.carousel__btn--prev { left: -20px; }
.carousel__btn--next { right: -20px; }
.carousel__btn:disabled { opacity: 0; pointer-events: none; transform: scale(.8); }
.carousel__bar { position: relative; height: 4px; margin: 18px auto 0; max-width: 240px; border-radius: 2px; background: var(--line); overflow: hidden; }
.carousel__bar span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 2px; background: var(--brand); transition: left .2s, width .2s; }
.carousel.is-static .carousel__bar { display: none; }
.tabs-inline { display: flex; gap: 4px; padding: 4px; background: var(--surface); border-radius: 12px; }
.tabs-inline button { border: 0; background: none; padding: 8px 14px; border-radius: 9px; font-weight: 600; color: var(--ink-2); }
.tabs-inline .is-active { background: var(--ink); color: #fff; }
/* Преимущества: светлая плашка, значок слева от заголовка, текст ниже */
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 20px; }
.why__item { display: grid; grid-template-columns: 35px 1fr; align-items: center; column-gap: 15px; align-content: start; padding: 20px; border-radius: 5px; background: #f4f7f8; border: 1px solid #e8edf1; color: #2d2f33; }
.why__item .i { width: 35px; height: 35px; padding: 0; margin: 0; background: none; border-radius: 0; color: #2d2f33; stroke-width: 1.4; }
.why__item h3 { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.2; }
.why__item .i + h3 { grid-column: 2; }
.why__item h3:first-child, .why__item p { grid-column: 1 / -1; }
.why__item p { margin: 15px 0 0; color: #2d2f33; font-size: 14px; line-height: 1.4; }
.why__item h3:first-child + p { margin-top: 10px; }
a.why__item { color: #2d2f33; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
a.why__item:hover { border-color: #d5dee5; box-shadow: 0 8px 20px -12px rgba(20,24,22,.25); }

.promo { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 32px; padding: 40px; border-radius: 28px; background: var(--brand); color: #fff; overflow: hidden; }
.promo h2 { margin: 16px 0 12px; }
.promo p { color: rgba(255, 255, 255, .78); max-width: 460px; margin-bottom: 24px; }
.promo img { width: 100%; border-radius: 18px; aspect-ratio: 16/11; object-fit: cover; }

.about { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
.about h2, .about .about__title { margin-bottom: 18px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; line-height: 1.15; }
.about p { color: var(--ink-2); }
.visit { padding: 24px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.visit h3 { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.visit__map { display: grid; place-items: center; height: 180px; margin-bottom: 16px; border-radius: 12px; color: var(--muted); font-size: 13px; background: repeating-linear-gradient(45deg, #e3eaf1 0 12px, #edf2f7 12px 24px); }

/* Подписка и подвал */
.footer { background: var(--footer-bg); color: var(--footer-text); font-family: var(--footer-font); padding: 56px 0 24px; font-size: var(--footer-fs); }
.footer a { color: var(--footer-link); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.footer h3 { color: var(--footer-head); font-size: 15px; margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a:hover { color: var(--footer-head); }
.footer__brand p { margin: 16px 0; max-width: 320px; }
.footer__brand .footer__more { margin-top: -4px; font-size: 13px; opacity: .8; }
.footer__brand .footer__more a { color: inherit; text-decoration: underline; }
.footer__social { display: flex; gap: 8px; }
.footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .08); font-weight: 800; font-size: 12px; color: #fff; }
.footer__contacts { display: flex; flex-direction: column; gap: 6px; }
.footer__phone { font-size: 22px; font-weight: 800; color: #fff; }
.footer__contacts p { margin-top: 8px; }
.footer__bottom { display: flex; gap: 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }
.footer__bottom span { margin-right: auto; }

/* Модалка, тост, cookie */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(15, 18, 17, .5); animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal__box { position: relative; width: min(440px, 100%); padding: 32px; border-radius: 22px; background: var(--surface); display: grid; gap: 14px; box-shadow: var(--shadow-lg); }
.modal__box h2 { font-size: 24px; padding-right: 32px; }
.modal__box p { margin: 0; }
.modal__close { position: absolute; top: 14px; right: 14px; }
.field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; height: var(--field-h); padding: 0 14px; border: 1.5px solid var(--field-line); border-radius: var(--field-r); background: var(--field-bg); font-size: var(--field-fs); font-weight: 400; outline: 0; }
.field textarea { height: auto; padding: 12px 14px; resize: vertical; font: inherit; font-size: 15px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-2); }
.field input:user-invalid { border-color: var(--accent); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translate(-50%, calc(100% + 40px)); visibility: hidden; padding: 14px 20px; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 600; box-shadow: var(--shadow-lg); transition: transform .25s, visibility .25s; max-width: calc(100% - 32px); }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; }
.toast--ok { background: var(--ok); }
.cookie { position: fixed; left: 24px; bottom: 24px; z-index: 70; display: flex; align-items: center; gap: 16px; max-width: 480px; padding: 14px 16px 14px 20px; border-radius: 16px; background: var(--cookie-bg, var(--surface)); color: var(--cookie-text, var(--ink)); box-shadow: var(--shadow-lg); font-size: 13px; }
.cookie p { margin: 0; }
.cookie .btn--dark { background: var(--cookie-btn, var(--brand)); color: var(--cookie-btn-text, var(--dark-text)); }
.cookie a { text-decoration: underline; }

/* ---------- Каталог ---------- */
.page { padding: 20px 0 64px; }
.crumbs ol { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--crumbs-font); font-size: var(--crumbs-fs); color: var(--crumbs-current); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--crumbs-sep); }
.crumbs a { color: var(--crumbs-link); }
.crumbs a:hover { color: var(--crumbs-hover); }
.page-head { margin-bottom: 20px; }
.page-head h1 sup { font-size: 16px; color: var(--muted); font-weight: 600; vertical-align: top; }
.page-head p { margin: 8px 0 0; max-width: 640px; }
.subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }  /* на узком экране — на новые строки, а не вбок */
.pill--more { cursor: pointer; color: var(--brand-2); background: #f7fbfe; }
.pill--more .i { width: 14px; height: 14px; transition: transform .2s; }
.pill--more[aria-expanded="true"] .i { transform: rotate(180deg); }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; white-space: nowrap; font-size: 14px; }
.pill em { font-style: normal; color: var(--muted); font-size: 12px; }
.pill:hover { border-color: var(--ink); }
.pill.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill.is-active em { color: rgba(255, 255, 255, .6); }
.pill--sm { height: 32px; padding: 0 6px 0 12px; font-size: 13px; background: var(--surface-2); border: 0; }
.pill--sm button { border: 0; background: none; font-size: 16px; line-height: 1; color: var(--muted); padding: 0 4px; }

.catalog { display: grid; grid-template-columns: 272px 1fr; gap: 28px; align-items: start; }
.catalog__side { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; scrollbar-width: thin; }
/* Настройки шаблона → Фильтр → «Прокрутка колонки»: page — вместе со страницей; sticky — вместе со страницей, затем прилипает
   (top считает app.js: длинный фильтр прилипает низом к низу экрана) */
@media (min-width: 961px) {
  .catalog__side--page { position: static; max-height: none; overflow: visible; }
  .catalog__side--sticky { max-height: none; overflow: visible; top: var(--side-top, calc(var(--header-h) + 16px)); }
}
.filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 20px 20px; }
.filters__top { display: none; }
.filters fieldset { border: 0; border-bottom: 1px solid var(--line); margin: 0; padding: 18px 0; }
.filters legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; font-weight: 800; font-size: 14px; }
.filters legend + * { clear: both; }
.filters .link { margin-top: 6px; }
.range { display: flex; align-items: center; gap: 8px; }
.range input { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; }
.slider { width: 100%; margin-top: 14px; accent-color: var(--brand); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch input { position: absolute; opacity: 0; }
.swatch i { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); cursor: pointer; transition: box-shadow .15s; }
.swatch input:checked + i { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
.toggle { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.toggle span { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--line); transition: background .15s; flex: none; }
.toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.toggle input:checked + span { background: var(--brand); }
.toggle input:checked + span::after { transform: translateX(16px); }
.filters__foot { display: grid; gap: 8px; padding-top: 18px; }
.filters__foot .btn--accent { display: none; }

.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar__filters { display: none; }
.applied { display: flex; gap: 6px; flex-wrap: wrap; }
.select { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-left: auto; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.select .i { width: 18px; height: 18px; color: var(--muted); }
.select select { border: 0; background: none; outline: 0; font-weight: 600; font-size: 14px; cursor: pointer; }
.view { display: flex; padding: 3px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.view button { display: grid; place-items: center; width: 34px; height: 32px; border: 0; border-radius: 7px; background: none; color: var(--muted); }
.view .is-active { background: var(--surface-2); color: var(--ink); }
.view .i { width: 18px; height: 18px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.more { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; }
.more p { margin: 0; font-size: 13px; }
.pager { display: flex; gap: 6px; }
.pager a { display: grid; place-items: center; min-width: 40px; height: 40px; border-radius: 10px; font-weight: 700; background: var(--surface); border: 1px solid var(--line); }
.pager a:hover { border-color: var(--ink); }
.pager .is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.seo { margin-top: 64px; padding: 36px; border-radius: 24px; background: var(--surface); }
.seo h2 { font-size: 24px; margin-bottom: 18px; }
.seo__cols { columns: 2; column-gap: 40px; color: var(--ink-2); font-size: 14px; }

/* ---------- Карточка товара (PDP) ---------- */
.pdp { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-areas: "gallery buy" "specs buy"; grid-template-rows: auto 1fr; gap: 24px 40px; align-items: start; }
.pspecs { grid-area: specs; padding: 24px 28px; border-radius: 24px; background: var(--surface); }
.pspecs h2 { font-size: 22px; margin-bottom: 6px; }
.pspecs__more { margin-top: 14px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; }
.pspecs__more .i { transition: transform .3s ease; }
/* Плавное раскрытие: высота 0 → авто через grid-rows + лёгкое проявление */
.pspecs__extra { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.2, .7, .3, 1); }
.pspecs__extra > .specs { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .24s ease; }
.pspecs__extra.is-open { grid-template-rows: 1fr; }
.pspecs__extra.is-open > .specs { opacity: 1; transition-delay: .06s; }
.specs--extra div { border-top: 1px dashed var(--line); border-bottom: 0; }
.pspecs__more.is-open .i { transform: rotate(180deg); }
.gallery { grid-area: gallery; display: grid; gap: 12px; }
.gallery__main { position: relative; border-radius: 24px; overflow: hidden; background: var(--surface); cursor: pointer; }
.gallery__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); box-shadow: 0 4px 14px rgba(12, 35, 54, .18); transition: background .15s, color .15s, opacity .2s; }
.gallery__nav:hover { background: var(--brand); color: #fff; }
.gallery__nav .i { width: 22px; height: 22px; }
.gallery__nav--prev { left: 14px; }
.gallery__nav--next { right: 14px; }
@media (hover: hover) { .gallery__nav { opacity: 0; } .gallery__main:hover .gallery__nav, .gallery__nav:focus-visible { opacity: 1; } }
.gallery__main img { width: 100%; aspect-ratio: 1000/722; object-fit: cover; transition: opacity .2s, transform .25s ease; }
.gallery__main { touch-action: pan-y; }  /* листание пальцем по горизонтали — наше (app.js), по вертикали — прокрутка страницы */
.gallery__thumbs { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; padding: 2px; margin: -2px; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumbs button { flex: none; scroll-snap-align: start; }
.gallery__count { position: absolute; left: 14px; bottom: 14px; padding: 4px 10px; border-radius: 8px; background: rgba(12, 35, 54, .6); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.gallery__thumbs button { width: 84px; height: 84px; padding: 0; border-radius: calc(var(--radius-sm) + 4px); overflow: hidden; border: 2px solid transparent; background: var(--surface); opacity: .7; transition: opacity .15s, border-color .15s; }
.gallery__thumbs button:hover { opacity: 1; }
.gallery__thumbs .is-active { border-color: var(--brand); opacity: 1; }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.buy { grid-area: buy; position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.buy__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.buy__top h1 { flex: 1; min-width: 0; }
/* Наличие: зелёная плашка с галочкой и мягко «дышащим» ободком */
.stock-badge { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 12px 0 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: #e9f7ef; border: 1px solid #c6e9d4; color: #1f7a47; font-weight: 700; font-size: 14px; }
.stock-badge__icon { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ok); color: #fff; flex: none; }
.stock-badge__icon .i { width: 15px; height: 15px; stroke-width: 2.6; }
.stock-badge__icon::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; animation: stock-pulse 2.4s ease-out infinite; }
@keyframes stock-pulse { 0% { transform: scale(.8); opacity: .5; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.buy__actions { display: flex; gap: 6px; flex: none; }
.icon-btn--soft { width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); }
.icon-btn--soft:hover { background: var(--line); color: var(--ink); }
.icon-btn--soft .i { width: 20px; height: 20px; }
.icon-btn--soft[data-fav].is-on { background: #fde5e5; color: var(--accent); }
.buy h1 { font-family: var(--product-font); color: var(--product-title); font-weight: var(--product-title-fw, var(--fw-head)); font-size: clamp(min(26px, var(--h1-product)), calc(var(--h1-product) - 34px + 3vw), var(--h1-product)); }
.buy__rating { margin-top: -8px; color: var(--gold); font-size: 15px; letter-spacing: 1px; }
.buy__rating .muted { letter-spacing: 0; font-size: 13px; margin-left: 6px; }
.buy__label { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.buy__label b { color: var(--ink); }
.colors { display: flex; flex-wrap: wrap; gap: 10px; }
.color { width: 48px; height: 48px; padding: 3px; border-radius: 50%; border: 2px solid transparent; background: none; transition: border-color .15s; }
.color img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* кружок с картинкой: подложка и тонкая обводка — белая и светлая картинка не сливается с фоном страницы */
.color:not(.color--text) { background: var(--bg); }
.color img { box-shadow: 0 0 0 1px rgba(19, 53, 80, .18); background: #fff; }
.color:hover { border-color: var(--line); }
.color.is-active { border-color: var(--brand); }
.buy__price { padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.save { display: inline-block; margin: 8px 0 6px; padding: 4px 10px; border-radius: 8px; background: #fde8e8; color: var(--sale); font-weight: 700; font-size: 13px; }
.buy__price p { margin: 4px 0 0; }
.buy__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.buy__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.buy__perks li { display: flex; gap: 12px; align-items: flex-start; }
.buy__perks .i { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--surface-2); color: var(--brand-2); }
.buy__perks div { display: flex; flex-direction: column; font-size: 14px; }
.buy__perks span { color: var(--muted); font-size: 13px; }

.ptabs { position: sticky; top: calc(var(--header-h) + 8px); z-index: 20; display: flex; gap: 4px; margin: 48px 0 28px; padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.features { list-style: none; margin: 0; padding: 20px; display: grid; gap: 12px; border-radius: 16px; background: var(--surface-2); }
.features li { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 14px; }
.features .i { color: var(--ok); }
.specs { margin: 0; display: grid; }
.specs div { display: grid; grid-template-columns: 44% 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.specs div:last-child { border-bottom: 0; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; font-weight: 600; }

.ptabset__body { display: grid; gap: 24px; align-items: start; }
.ptabset__body.has-kit { grid-template-columns: minmax(0, 1fr) 320px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.seg button { height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 14px; }
.seg button em { font-style: normal; color: var(--muted); font-size: 12px; }
.seg .is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.seg .is-active em { color: rgba(255, 255, 255, .6); }
.mods { display: grid; grid-template-columns: repeat(var(--mods-pc, 4), minmax(0, 1fr)); gap: 12px; }  /* в ряд — Настройки шаблона → Карточка товара */
@media (max-width: 1180px) { .mods { grid-template-columns: repeat(var(--mods-tablet, 3), minmax(0, 1fr)); } }
.mod { display: flex; flex-direction: column; padding: 12px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); transition: border-color .15s; }
.mod:hover { border-color: var(--brand-2); }
.mod.is-picked { border-color: var(--brand); box-shadow: 0 0 0 3px #dbe8f4; }
.mod__media { position: relative; aspect-ratio: 1; margin-bottom: 8px; border-radius: var(--radius-sm); overflow: hidden; touch-action: pan-y; }
.mod__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .18s; } /* белый фон фото принимает цвет карточки */
.mod__media .card__dots { left: 8px; right: 8px; bottom: 6px; }
.mod__media .card__dots i { background: rgba(19, 53, 80, .18); box-shadow: none; }
.mod__media .card__dots i.is-active { background: var(--brand-2); }
.mod__media .card__count { right: 6px; bottom: 6px; }
.mod__media:hover .card__dots, .mod__media.is-touched .card__dots { opacity: 1; }
.mod__media:hover .card__count, .mod__media.is-touched .card__count { opacity: 0; }
.mod__body { flex: 1; display: flex; flex-direction: column; }
.mod h3 { font-size: var(--mod-title, 13px); font-weight: 600; line-height: 1.35; margin-bottom: auto; padding-bottom: 8px; }
.qty { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; height: 38px; margin-top: 10px; border-radius: var(--qty-r); background: var(--surface-2); }
.qty button { height: calc(100% - 6px); margin: 3px; border: 0; background: none; font-size: 18px; font-weight: 700; border-radius: calc(var(--qty-r, 10px) - 3px); color: var(--ink); transition: background .15s, box-shadow .15s; }
.qty button:hover:not(:disabled) { background: var(--surface); box-shadow: 0 1px 3px rgba(12, 35, 54, .12); }
.qty button:disabled { opacity: .35; cursor: default; }
.qty output { text-align: center; font-weight: 800; }
.kit { position: sticky; top: calc(var(--header-h) + var(--ptabs-h) + 24px); display: grid; gap: 12px; padding: 24px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.kit h3 { font-size: 20px; }
.kit__list { list-style: none; margin: 0; padding: 0 0 12px; display: grid; gap: 8px; max-height: 240px; overflow-y: auto; font-size: 13px; border-bottom: 1px solid var(--line); }
.kit__list li { display: flex; justify-content: space-between; gap: 10px; }
.kit__list b { white-space: nowrap; }
.kit__list { overflow-x: hidden; }
.kit__list li > span { flex: 1; min-width: 0; }
.kit__list li.is-busy { opacity: .45; }
.kit__del { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin: -2px 0 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.kit__del:hover, .kit__del:focus-visible { background: #fdecec; color: var(--accent); outline: none; }
.kit__row { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.kit__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 4px; }
.kit__total b { font-size: 28px; font-weight: 800; }
/* «Мои комплекты» (product/kits.tpl) */
.mykits { display: grid; gap: 20px; }
.mykit { border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.mykit__head { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.mykit__img img { display: block; width: 160px; height: 120px; object-fit: cover; border-radius: calc(var(--radius-sm) + 2px); }
.mykit__name { font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.mykit__name:hover { color: var(--brand); }
.mykit__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.mykit__badge { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 600; }
.mykit__badge .i { width: 15px; height: 15px; }
.mykit__tools { display: flex; gap: 8px; align-self: start; }
.mykit__items { margin: 0; padding: 4px 24px; list-style: none; }
.mykit__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) 120px 110px 32px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); transition: opacity .2s; }
.mykit__item:last-child { border-bottom: 0; }
.mykit__item.is-removing { opacity: 0; }
.mykit__thumb img { display: block; width: 64px; height: 64px; object-fit: contain; border-radius: var(--radius-sm); background: var(--surface-2); }
.mykit__info { display: grid; gap: 4px; min-width: 0; }
.mykit__info a { font-weight: 600; color: var(--ink); line-height: 1.3; }
.mykit__info a:hover { color: var(--brand); }
.mykit__unit { font-size: 13px; color: var(--muted); }
.mykit__unit s { margin-left: 4px; }
.mykit__item .qty { margin: 0; height: 36px; }
.mykit__item .qty output { line-height: 36px; }
.mykit__sum { text-align: right; font-size: 16px; white-space: nowrap; }
.mykit__del { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.mykit__del:hover { background: #fde5e5; color: var(--accent); }
.mykit__del .i { width: 16px; height: 16px; }
.mykit__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 24px; background: var(--surface-2); }
.mykit__old { font-size: 14px; color: var(--muted); }
.mykit__old b { color: var(--sale); }
.mykit__total { display: flex; align-items: baseline; gap: 10px; }
.mykit__total span { font-size: 15px; color: var(--muted); }
.mykit__total b { font-size: 28px; font-weight: 800; }
.mykit__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) {
  .mykit__head { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .mykit__img img { width: 96px; height: 72px; }
  .mykit__name { font-size: 17px; }
  .mykit__tools { grid-column: 1 / -1; }
  .mykit__items { padding: 0 16px; }
  .mykit__item { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px 12px; }
  .mykit__thumb { grid-row: span 2; }
  .mykit__thumb img { width: 56px; height: 56px; }
  .mykit__item .qty { grid-column: 2; width: 120px; }
  .mykit__sum { grid-column: 3 / 4; grid-row: 2; text-align: right; }
  .mykit__del { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
  .mykit__foot { padding: 16px; }
  .mykit__actions, .mykit__actions .btn { width: 100%; }
}
/* «Ваш комплект» без боковой панели — полоса под модулями (Настройки шаблона → Корзина) */
.kit--bar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 20px; }
.kit--bar h3 { font-size: 17px; margin: 0; }
.kit--bar .kit__note { flex: 1 1 100%; order: 9; margin: 0; }
.kit--bar .kit__count { color: var(--muted); font-size: 14px; }
.kit--bar .kit__total { margin-left: auto; gap: 8px; padding: 0; }
.kit--bar .kit__total b { font-size: 22px; }
.kit--bar .kit__mine { justify-self: auto; }
.kit__hint { margin: -6px 0 0; font-size: 13px; color: var(--muted); }
.mod.is-busy .qty { opacity: .5; pointer-events: none; }
/* «Состав корзины» по ссылке (checkout/shared.tpl) — карточка как у «Моих комплектов» */
.shared__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.shared__all { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; cursor: pointer; }
.shared__picked { font-size: 14px; color: var(--muted); }
.shared__check input:indeterminate + span { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; }
.shared__check input:disabled + span { opacity: .6; cursor: default; }
.shared__items { padding: 4px 24px; }
.shared__item { display: grid; grid-template-columns: 28px 88px minmax(0, 1fr) 120px 130px; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); transition: opacity .2s; }
.shared__item:last-child { border-bottom: 0; }
.shared__item.is-off { opacity: .45; }
.shared__check { position: relative; display: grid; place-items: center; width: 28px; height: 28px; cursor: pointer; }
.shared__check input { position: absolute; opacity: 0; }
.shared__check span { width: 22px; height: 22px; border: 2px solid var(--line); border-radius: 6px; background: var(--surface); transition: background .15s, border-color .15s; }
.shared__check input:checked + span { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.shared__check input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.shared__thumb img { display: block; width: 88px; height: 88px; object-fit: contain; border-radius: calc(var(--radius-sm) + 2px); background: var(--surface-2); }
.shared__info { display: grid; gap: 6px; min-width: 0; }
.shared__name { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.shared__name:hover { color: var(--brand); }
.shared__opts { margin: 0; font-size: 13px; color: var(--muted); }
.shared__opts b { color: var(--ink-2, var(--ink)); font-weight: 600; }
.shared__stock { font-size: 13px; font-weight: 600; color: var(--ok); }
.shared__stock.is-out { color: #8a5a00; }
.shared__price { display: grid; justify-items: end; gap: 4px; text-align: right; }
.shared__unit { font-size: 13px; color: var(--muted); white-space: nowrap; }
.shared__unit s { margin-left: 4px; }
.shared__sum { font-size: 18px; white-space: nowrap; }
.shared__qty { width: 120px; margin: 0; }
.shared__item.is-off .shared__qty { opacity: .7; }
@media (max-width: 860px) {
  .shared__items { padding: 0 16px; }
  .shared__head { padding: 12px 16px; }
  .shared__item { grid-template-columns: 28px 64px minmax(0, 1fr); gap: 10px 12px; }
  .shared__thumb img { width: 64px; height: 64px; }
  .shared__qty { grid-column: 3; width: 120px; }
  .shared__price { grid-column: 3; justify-items: start; text-align: left; }
}
.cart-notice { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #e9f7ef; color: #1f7a47; font-weight: 600; }
.cart-notice .i { width: 18px; height: 18px; }
.kit__mine { justify-self: center; font-size: 14px; color: var(--muted); }
.kit__mine:hover { color: var(--accent); }
.kit__note { margin: -4px 0 0; font-size: 13px; color: var(--muted); }
.kit__note button { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }

.sticky-buy { display: none; }

/* ---------- Адаптив ---------- */
/* ---------- Окно просмотра фото ---------- */
.lightbox { position: fixed; inset: 0; z-index: 95; display: grid; grid-template-rows: auto 1fr auto auto; background: #08141f; color: #fff; animation: fade .2s; }
.lightbox__top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
.lightbox__count { font-weight: 700; min-width: 56px; }
.lightbox__title { flex: 1; color: rgba(255, 255, 255, .7); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox .icon-btn { color: #fff; }
.lightbox .icon-btn:hover { background: rgba(255, 255, 255, .12); }
.lightbox__stage { position: relative; overflow: hidden; display: grid; place-items: center; cursor: zoom-in; touch-action: none; user-select: none; }
.lightbox__stage img { max-width: min(100%, 1200px); max-height: 100%; object-fit: contain; transform-origin: 0 0; will-change: transform; transition: transform .25s ease; }
.lightbox__stage.is-zoomed { cursor: grab; }
.lightbox__stage.is-panning { cursor: grabbing; }
.lightbox__stage.is-panning img { transition: none; }
.lightbox__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; transition: background .15s; }
.lightbox__nav:hover { background: rgba(255, 255, 255, .25); }
.lightbox__nav .i { width: 26px; height: 26px; }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }
.lightbox__thumbs { display: flex; gap: 10px; padding: 12px 16px 4px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin; }
.lightbox__thumbs > :first-child { margin-left: auto; }  /* центр, пока влезает; при переполнении — прокрутка с начала */
.lightbox__thumbs > :last-child { margin-right: auto; }
.lightbox__thumbs button { flex: none; width: 72px; height: 54px; padding: 0; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; background: none; opacity: .5; transition: opacity .15s, border-color .15s; }
.lightbox__thumbs button.is-active { opacity: 1; border-color: #fff; }
.lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__hint { margin: 0; padding: 8px 16px 14px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .5); }

/* ---------- Контакты ---------- */
/* Информационные страницы (Оплата, Доставка, Гарантия…): меню «Покупателям» + текст из админки */
.info { display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.info__nav { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.info__nav-title { padding: 8px 12px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.info__nav a { padding: 10px 12px; border-radius: 10px; color: var(--ink); font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.info__nav a:hover { background: var(--surface-2); }
.info__nav a.is-active { background: var(--brand); color: #fff; }
.info__main { min-width: 0; }
.info__aside { position: sticky; top: calc(var(--header-h) + 16px); }
.article { padding: 32px 36px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); line-height: 1.65; }
.article > :first-child { margin-top: 0; }
.article > :last-child { margin-bottom: 0; }
.article p { margin: 0 0 14px; }
.article h2, .article h3 { margin: 28px 0 12px; font-size: 20px; line-height: 1.25; }
.article ul, .article ol { margin: 0 0 16px; padding-left: 0; }
.article ul { list-style: none; }
.article ol { padding-left: 22px; }
.article li { margin: 6px 0; }
.article ul > li { position: relative; padding-left: 22px; }
.article ul > li::before { content: ''; position: absolute; left: 4px; top: .65em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.article a { color: var(--brand-2); text-decoration: underline; text-underline-offset: 3px; }
.article img, .article iframe { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.article__table { margin: 16px 0 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.article table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.article td, .article th { padding: 10px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article tr:last-child td { border-bottom: 0; }
.article td + td:last-child { text-align: right; white-space: nowrap; font-weight: 700; }
.article tr.is-head td { background: var(--surface-2); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.article tr.is-section td { padding-top: 16px; background: #f6f8fa; font-weight: 800; }
.article tbody tr:not(.is-head):not(.is-section):hover td { background: #fafbfc; }
.info__help { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--radius); background: #f1f7fc; }
.info__help-head { display: flex; gap: 14px; align-items: flex-start; }
.info__help-head > .i { flex: none; width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: #e3eef8; color: var(--brand-2); }
.info__help-head > div { display: flex; flex-direction: column; gap: 4px; }
.info__help b { font-size: 17px; font-weight: 800; line-height: 1.25; }
.info__help span { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.info__phone { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; color: var(--ink); text-decoration: none; white-space: nowrap; }
.info__phone .i { width: 22px; height: 22px; color: var(--brand-2); }
.info__phone:hover { color: var(--brand-2); }
.info__addr { display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid #dbe7f2; }
.info__addr > .i { flex: none; width: 22px; height: 22px; color: var(--brand-2); }
.info__addr > div { display: flex; flex-direction: column; gap: 2px; }
.info__addr small { color: var(--muted); font-size: 12px; }
.info__addr b { font-size: 15px; font-weight: 700; }
.info__more { color: var(--brand-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.info__more:hover { text-decoration: underline; }
@media (max-width: 1200px) {
  .info { grid-template-columns: 220px minmax(0, 1fr); }
  .info__aside { position: static; grid-column: 2; }
  .info__help { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .info__help-head, .info__addr, .info__more { grid-column: 1 / -1; }
  .info__help .btn { width: auto; }
}
@media (max-width: 900px) {
  .info { grid-template-columns: 1fr; gap: 16px; }
  .info__aside { grid-column: auto; }
  .info__help { display: flex; }
  .info__help .btn { width: 100%; }
  .info__nav { position: static; flex-direction: row; gap: 8px; padding: 0 0 4px; border: 0; background: none; overflow-x: auto; scrollbar-width: none; }
  .info__nav-title { display: none; }
  .info__nav a { flex: none; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; white-space: nowrap; }
  .info__nav a.is-active { border-color: var(--brand); }
  .article { padding: 20px 18px; }
  .article td, .article th { padding: 9px 12px; }
}
.page-head--row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.contacts { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; align-items: stretch; }
.contacts__info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.ccard { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: border-color .15s; }
a.ccard:hover { border-color: var(--brand-2); }
.ccard > .i { width: 48px; height: 48px; padding: 12px; border-radius: 12px; background: #e3eef8; color: var(--brand-2); }
.ccard > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ccard small { color: var(--muted); font-size: 13px; }
.ccard b { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.ccard span { color: var(--ink-2); font-size: 14px; }
.ccard--accent { background: var(--brand); border-color: var(--brand); color: #fff; }
.ccard--accent > .i { background: rgba(255, 255, 255, .12); color: #fff; }
.ccard--accent small, .ccard--accent span { color: rgba(255, 255, 255, .7); }
.ccard--accent b { font-size: 24px; }
.hours { margin: 6px 0 4px; display: grid; gap: 4px; }
.hours div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.hours dt { color: var(--ink-2); }
.hours dd { margin: 0; font-weight: 700; }
.open-now { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 700; }
.open-now::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.open-now.is-open { color: var(--ok) !important; }
.open-now.is-closed { color: var(--accent) !important; }
.contacts__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.contacts__map { min-height: 480px; border-radius: 24px; overflow: hidden; background: repeating-linear-gradient(45deg, #e3eaf1 0 12px, #edf2f7 12px 24px); box-shadow: var(--shadow); }
.contacts__map iframe { display: block; width: 100%; height: 100%; min-height: 480px; border: 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.step { padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.step > span { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; }
.step h3 { margin-bottom: 6px; }
.step p { margin: 0; color: var(--ink-2); font-size: 14px; }
.feedback { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; padding: 40px; border-radius: 28px; background: var(--brand); color: #fff; }
.feedback h2 { margin-bottom: 12px; }
.feedback .muted { color: rgba(255, 255, 255, .7); }
.feedback__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; font-weight: 600; }
.feedback__list li { display: flex; gap: 10px; align-items: center; }
.feedback__list .i { color: var(--brand-3); }
.feedback__form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 24px; border-radius: 20px; background: var(--surface); color: var(--ink); }
.field--wide { grid-column: 1 / -1; }
.requisites { margin-top: 56px; padding: 28px; border-radius: 24px; background: var(--surface); }
.requisites h2 { font-size: 22px; margin-bottom: 12px; }

/* ---------- Корзина ---------- */
.link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 600; }
.link-btn:hover { color: var(--ink); }
.link-btn .i { width: 16px; height: 16px; }
.link-btn[data-remove]:hover { color: var(--accent); }
.link-btn.is-on { color: var(--accent); }
.link-btn.is-on .i { fill: currentColor; }
.cart { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.cart__main { display: grid; gap: 24px; }
.cart__items { background: var(--cart-bg); border-radius: var(--cart-r); padding: 8px 24px; }
.citem { display: grid; grid-template-columns: var(--citem-img) 1fr auto 150px; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); transition: opacity .25s, transform .25s; }
.citem:last-child { border-bottom: 0; }
.citem.is-removing { opacity: 0; transform: translateX(24px); }
.citem__img { display: block; width: var(--citem-img); height: var(--citem-img); border-radius: calc(var(--radius-sm) + 4px); overflow: hidden; background: #fff; border: 1px solid var(--line); }
.citem__img img { width: 100%; height: 100%; object-fit: contain; }
.citem__info { min-width: 0; display: grid; gap: 6px; }
.citem__name { font-size: var(--citem-name-fs); font-weight: var(--citem-name-fw); line-height: 1.3; color: var(--citem-name); }
.citem__name:hover { color: var(--citem-name-hover); }
.citem__opts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--citem-opts-fs); color: var(--citem-opts); }
.citem__opts b { color: var(--citem-opts-value); font-weight: 600; }
.citem__opts .ok { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 600; }
.citem__opts .i { width: 14px; height: 14px; }
.citem__tools { display: flex; gap: 18px; }
.qty--cart { width: 120px; margin: 0; }
.citem__price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.citem__price b { font-size: var(--citem-price-fs); font-weight: 800; color: var(--citem-price); }
.citem__price s { color: var(--citem-old); font-size: 13px; }
.citem__price small { color: var(--muted); font-size: 12px; }
.checkout { display: grid; gap: 16px; }
.checkout__step { padding: 24px; border-radius: var(--cart-r); background: var(--cart-bg); }
.checkout__step h2 { display: flex; align-items: center; gap: 12px; font-size: var(--step-fs); color: var(--step-color); margin-bottom: 18px; }
.checkout__step h2 span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--step-num); color: #fff; font-size: 15px; }
.checkout__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.opts + .checkout__grid, .checkout__comment { margin-top: 16px; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.opt input { position: absolute; opacity: 0; }
.opt__box { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 14px 16px 14px 44px; position: relative; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.opt__box::before { content: ""; position: absolute; left: 16px; top: 16px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); background: #fff; transition: border .15s; }
.opt__box b { font-size: var(--opt-fs); }
.opt__box small { color: var(--opt-note); font-size: 13px; line-height: 1.35; }
.opt input:checked + .opt__box { border-color: var(--opt-active); background: var(--opt-active-bg); }
.opt input:checked + .opt__box::before { border: 6px solid var(--opt-active); }
.opt input:focus-visible + .opt__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.summary { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 12px; padding: 24px; border-radius: var(--cart-r); background: var(--cart-bg); box-shadow: var(--shadow); }
.summary h2 { font-size: var(--summary-title-fs); margin-bottom: 4px; }
.summary__row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--summary-row-fs); color: var(--summary-row); }
.summary__row--sale span:last-child { color: var(--summary-sale); font-weight: 700; }
.promo-code { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.promo-code input { min-width: 0; height: 38px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 10px; outline: 0; }
.promo-code input:focus { border-color: var(--brand-2); }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; }
.summary__total span { font-weight: 700; font-size: 17px; }
.summary__total b { font-size: var(--total-fs); font-weight: 800; letter-spacing: -.02em; color: var(--total-color); }
.summary__save { margin: -6px 0 4px; color: var(--summary-save); font-weight: 700; font-size: 14px; text-align: right; }
.summary .small { margin: 0; }
.summary .small a { text-decoration: underline; }
.summary__perks { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 13px; color: var(--ink-2); }
.summary__perks li { display: flex; gap: 8px; align-items: center; }
.summary__perks .i { width: 18px; height: 18px; color: var(--brand-2); }
.cart-state { display: grid; justify-items: center; gap: 12px; padding: 64px 24px; border-radius: 24px; background: var(--surface); text-align: center; }
.cart-state__icon { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 8px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.cart-state__icon .i { width: 40px; height: 40px; }
.cart-state--ok .cart-state__icon { background: #e3f3e9; color: var(--ok); }
.cart-state p { max-width: 440px; }
.mini { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); height: 100%; }
.mini img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.mini h3 { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.35; }
.mini .btn { margin-top: 4px; }
.carousel--mini { --per: 5; }

@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .why { grid-template-columns: repeat(2, 1fr); }
  .ptabset__body.has-kit { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 960px) {
  .about, .promo, .pdp { grid-template-columns: minmax(0, 1fr); }
  .pdp { grid-template-areas: "gallery" "buy" "specs"; grid-template-rows: auto; }
  .buy { position: static; }
  .cats { grid-template-columns: repeat(2, 1fr); grid-auto-rows: max(80px, calc(var(--cat-h) - 40px)); }
  .catalog { grid-template-columns: 1fr; }
  .catalog__side { position: fixed; inset: 0; z-index: 70; max-height: none; padding: 0; background: rgba(15, 18, 17, .45); display: none; }
  .catalog__side.is-open { display: block; }
  .catalog__side .filters { height: 100%; width: min(380px, 100%); margin-left: auto; overflow-y: auto; border-radius: 0; animation: slideR .22s ease; }
  @keyframes slideR { from { transform: translateX(100%); } }
  .filters__top { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 18px; }
  .filters__foot { position: sticky; bottom: 0; background: var(--surface); padding-bottom: 12px; }
  .filters__foot .btn--accent { display: flex; }
  .toolbar__filters { display: inline-flex; }
  .applied { display: none; }
  .ptabset__body.has-kit { grid-template-columns: 1fr; }
  .kit { position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .seo__cols { columns: 1; }
  .sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, .08); transform: translateY(110%); transition: transform .25s; }
  .sticky-buy.is-on { transform: none; }
  .sticky-buy b { font-size: 20px; font-weight: 800; display: block; line-height: 1.1; }
  .sticky-buy s { color: var(--muted); font-size: 13px; }
  /* нижняя панель карточки товара — только когда в корзине что-то есть: цена, «Нужна помощь с подбором», «Перейти в корзину» */
  .sticky-buy--cart { flex-wrap: wrap; gap: 8px; }
  .sticky-buy--cart.is-empty { display: none; }
  .sticky-buy--cart > div:first-child { display: flex; align-items: baseline; gap: 8px; flex: 1 1 100%; }
  .sticky-buy--cart b { font-size: 18px; }
  .sticky-buy--cart small { color: var(--muted); font-size: 13px; }
  .sticky-buy__btns { display: flex; gap: 8px; flex: 1 1 100%; }
  .sticky-buy__btns .btn { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 14px; line-height: 1.2; white-space: normal; text-align: center; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  body, #main { font-size: calc(var(--fs-base) - 1px); }
  .hide-sm { display: none; }
  .logo img { height: 40px; }
  .search { order: 5; flex-basis: 100%; height: 44px; margin-bottom: 10px; }
  .section { padding: calc(var(--section-pad) * .75) 0; }
  .cats { grid-auto-rows: max(80px, calc(var(--cat-h) - 70px)); gap: max(4px, calc(var(--cat-gap) - 6px)); }
  .cat--big { grid-row: span 1; }
  .cat--big .cat__name, .cat__name { font-size: max(13px, calc(var(--cat-fs) - 3px)); }
  .cat__sub { display: none; }
  .cat__pct { font-size: 36px; }
  .grid { gap: max(4px, calc(var(--grid-gap) - 6px)); }
  .card__body { padding: 12px; }
  .card__actions .btn--ghost { display: none; }
  .card__title { font-size: calc(var(--card-title) - 1px); }
  .card__meta { flex-wrap: wrap; }
  .card__meta .ok { display: none; }
  .price b { font-size: calc(var(--price) - 3px); }
  .why { grid-template-columns: 1fr; }
  .promo { padding: 24px; border-radius: 20px; }
  .seo { padding: 24px; }
  .select { margin-left: 0; flex: 1; }
  .view { display: none; }
  .buy { padding: 20px; }
  .buy__cta { grid-template-columns: 1fr; }
  .price--lg b { font-size: calc(var(--price-lg) - 6px); }
  .gallery__thumbs button { width: 64px; height: 64px; }
  .pspecs { padding: 20px; }
  .specs div { grid-template-columns: 1fr; gap: 2px; }
  .mods { grid-template-columns: repeat(var(--mods-phone, 2), minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; gap: 8px; }
  .cookie { left: 16px; right: 16px; bottom: 16px; }
  .page { padding-bottom: 96px; }
}
@media (max-width: 1180px) {
  .carousel { --per: 3; }
  .carousel__btn--prev { left: -8px; }
  .carousel__btn--next { right: -8px; }
  .cart { grid-template-columns: 1fr 320px; }
  .citem { grid-template-columns: max(48px, calc(var(--citem-img) - 16px)) 1fr auto; }
  .citem__img { width: max(48px, calc(var(--citem-img) - 16px)); height: max(48px, calc(var(--citem-img) - 16px)); }
  .citem__price { grid-column: 2 / -1; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 10px; }
}
@media (max-width: 960px) {
  .contacts, .feedback, .cart { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  .steps { grid-template-columns: 1fr; }
  .lightbox__nav { display: none; }
}
@media (max-width: 640px) {
  .carousel { --per: 2; --gap: max(4px, calc(var(--grid-gap) - 4px)); }  /* телефон: две карточки в ленте целиком */
  .carousel__track { padding-inline: var(--gap); margin-inline: calc(-1 * var(--gap)); scroll-padding-inline: var(--gap); }  /* запас по бокам = промежутку: третья карточка за краем не выглядывает */
  .carousel__btn { display: none; }
  .contacts__actions, .checkout__grid, .opts, .feedback__form { grid-template-columns: 1fr; }
  .contacts__map, .contacts__map iframe { min-height: 340px; }
  .feedback { padding: 24px; gap: 24px; border-radius: 20px; }
  .feedback__form { padding: 18px; }
  .cart__items { padding: 4px 16px; border-radius: 20px; }
  .citem { grid-template-columns: max(48px, calc(var(--citem-img) - 24px)) 1fr; gap: 12px; }
  .citem__img { width: max(48px, calc(var(--citem-img) - 24px)); height: max(48px, calc(var(--citem-img) - 24px)); }
  .qty--cart { grid-column: 1 / 2; width: 100%; grid-template-columns: 24px 1fr 24px; }
  .citem__price { grid-column: 2; }
  .checkout__step { padding: 18px; border-radius: 20px; }
  .gallery__nav { width: 36px; height: 36px; margin-top: -18px; }
  .gallery__nav--prev { left: 8px; }
  .gallery__nav--next { right: 8px; }
}
/* ---------- Размеры модулей ---------- */
/* Строка размеров всегда в одну строку: шрифт сжимается под ширину карточки (12px → 9px) */
.dims { container-type: inline-size; margin: 0 0 6px; }
.dims__in { display: flex; flex-wrap: nowrap; align-items: center; gap: .3em; font-size: clamp(9px, 5.6cqi, 12px); line-height: 1.2; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dims span { display: inline-flex; align-items: center; gap: .15em; padding: .2em .45em; border-radius: .5em; background: var(--surface-2); font-weight: 600; }
.dims span[data-tip] { cursor: default; }
.dims i { display: inline-grid; place-items: center; width: 1em; height: 1em; margin-left: .15em; border-radius: 50%; background: var(--brand-3); color: #fff; font: italic 700 .75em/1 Georgia, serif; }
.dims b { color: var(--muted); font-weight: 400; }
.dims em { font-style: normal; color: var(--muted); }
@container (max-width: 170px) {  /* узкая карточка (телефон): без плашек, чтобы влезло в одну строку */
  .dims__in { gap: .25em; }
  .dims span { padding: .2em 0; background: none; }
}
.citem .dims { margin: 0; }
.mods-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.mods-bar .seg { margin-bottom: 0; }
.mods-bar .select { margin-left: 0; }
.ptabset__body > * { min-width: 0; }
.mod__media { display: block; }
.mod h3 a { color: inherit; text-decoration: none; }
.mod h3 a:hover { color: var(--brand-2); }  /* длинный пункт в фильтре не распирает колонку на телефоне */
.mods-empty { padding: 32px; text-align: center; border-radius: 14px; background: var(--surface); }
@media (max-width: 640px) {
  .mods-bar .select { width: 100%; }
}

/* ---------- Большие экраны ---------- */
@media (min-width: 1600px) {
  :root { --wrap: 1540px; --wrap-pad: 40px; }
  .wrap { padding: 0 40px; }
  .grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .carousel { --per: 5; --gap: calc(var(--grid-gap) + 4px); }
  .cats { grid-auto-rows: calc(var(--cat-h) + 30px); gap: calc(var(--cat-gap) + 4px); }
  .catalog { grid-template-columns: 300px 1fr; gap: 32px; }
  .pdp { gap: 24px 56px; }
  .ptabset__body.has-kit { grid-template-columns: minmax(0, 1fr) 360px; }
  .cart { grid-template-columns: 1fr 400px; }
  .contacts__map, .contacts__map iframe { min-height: 560px; }
}
@media (min-width: 1920px) {
  :root { --wrap: 1800px; }
  .grid { grid-template-columns: repeat(5, 1fr); }
  .carousel { --per: 6; }
  .cats { grid-auto-rows: calc(var(--cat-h) + 70px); }
  .buy { padding: 36px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Страница товара без характеристик / без списка преимуществ ---------- */
.pdp--nospecs { grid-template-areas: "gallery buy"; grid-template-rows: auto; }
@media (max-width: 960px) { .pdp--nospecs { grid-template-areas: "gallery" "buy"; } }

/* ---------- Комплект «как на фото» ---------- */
.mod { position: relative; }
.mod__badge { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 3px 8px; border-radius: 7px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.mod--preset { border-color: var(--brand-3); }
.set-box { margin: 12px 0 4px; padding: 14px 16px; border-radius: 14px; background: #eef5fb; border: 1px solid #d3e5f4; font-size: 14px; }
.set-box__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; color: var(--brand); }
.set-box__head .i { width: 18px; height: 18px; color: var(--brand-2); }
.set-box ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.set-box li { display: flex; justify-content: space-between; gap: 12px; }
.set-box li em { font-style: normal; white-space: nowrap; font-weight: 600; }
.set-box li.is-in em { color: var(--ok); }
.set-box li.is-missing span { color: var(--muted); }
.set-box li.is-missing em { color: var(--muted); font-weight: 500; font-size: 13px; }
.set-box .link-arrow { font-size: 13px; }

/* ---------- Два пути покупки: «Как на фото» / «Собрать свой» ---------- */
.buyway { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); }
.buyway button { height: 40px; border: 0; border-radius: 10px; background: none; font-weight: 700; color: var(--ink-2); transition: background .15s, color .15s, box-shadow .15s; }
.buyway button:hover { color: var(--ink); }
.buyway button.is-active { background: var(--surface); color: var(--brand); box-shadow: 0 1px 3px rgba(12, 35, 54, .12); }
.buyway__panel { display: grid; gap: 10px; animation: fade .2s ease; }
.buyway__panel .buy__cta { margin-top: 4px; }
.buyway__panel .set-box { margin: 2px 0 0; }
.buyway__hint { margin: -2px 0 0; color: var(--muted); font-size: 14px; }
.buyway__panel .price--lg b[data-kit-mirror-total] { transition: color .2s; }
.buyway__panel .btn:disabled { opacity: .45; }

/* ---------- Размеры в одной карточке модуля ---------- */
.vsizes { margin: 2px 0 8px; }
.vsizes__cap { display: block; margin-bottom: 5px; font-size: 11px; color: var(--muted); }
.vsizes__list { display: flex; flex-wrap: wrap; gap: 4px; }
.vsize { position: relative; min-width: 38px; height: 30px; padding: 0 8px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); font-weight: 700; font-size: 13px; color: var(--ink-2); transition: border-color .15s, color .15s, background .15s; }
.vsize:hover { border-color: var(--brand-3); color: var(--ink); }
.vsize.is-active { border-color: var(--brand); background: var(--brand); color: #fff; }
.vsize.has-qty::after { content: ""; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.mod__unit { display: flex; flex-direction: column; }
.mod--variants .mod__body { display: flex; flex-direction: column; }
.mod--variants h3 { margin-bottom: 6px; padding-bottom: 0; }
.mod--variants .vsizes { margin-bottom: auto; padding-bottom: 8px; }

/* ---------- Точки на фото: предмет → модуль ---------- */
.hotspot { position: absolute; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; background: none; cursor: pointer; }
.hotspot__dot { position: absolute; inset: 7px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(12, 35, 54, .35); transition: transform .2s; }
.hotspot__dot::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--accent); }
.hotspot__dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #fff; opacity: 0; animation: stock-pulse 2.4s ease-out infinite; }
.hotspot--info .hotspot__dot::before { background: var(--brand-2); }
.hotspot:hover .hotspot__dot, .hotspot:focus-visible .hotspot__dot, .hotspot.is-open .hotspot__dot { transform: scale(1.15); }
.hotspot__tip { position: absolute; bottom: calc(100% + 6px); left: 50%; display: grid; gap: 2px; min-width: 170px; max-width: 240px; padding: 10px 12px; border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .18s, transform .18s; }
.hotspot--l .hotspot__tip { left: -4px; transform: translate(0, 4px); }
.hotspot--r .hotspot__tip { left: auto; right: -4px; transform: translate(0, 4px); }
.hotspot__tip b { font-size: 13px; line-height: 1.3; }
.hotspot__tip em { font-style: normal; font-weight: 800; color: var(--accent); font-size: 14px; }
.hotspot--info .hotspot__tip em { color: var(--muted); font-weight: 600; font-size: 12px; }
.hotspot__tip small { color: var(--brand-2); font-weight: 700; font-size: 12px; }
.hotspot:hover .hotspot__tip, .hotspot:focus-visible .hotspot__tip, .hotspot.is-open .hotspot__tip { opacity: 1; transform: translate(-50%, 0); }
.hotspot--l:hover .hotspot__tip, .hotspot--l:focus-visible .hotspot__tip, .hotspot--l.is-open .hotspot__tip,
.hotspot--r:hover .hotspot__tip, .hotspot--r:focus-visible .hotspot__tip, .hotspot--r.is-open .hotspot__tip { transform: translate(0, 0); }
/* подсветка модуля, к которому перешли с фото */
.mod.is-flash { animation: mod-flash 1.6s ease; }
@keyframes mod-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(38, 106, 159, 0); } 20%, 60% { box-shadow: 0 0 0 4px rgba(38, 106, 159, .45); } }
@media (max-width: 640px) { .hotspot { width: 30px; height: 30px; margin: -15px 0 0 -15px; } .hotspot__tip { min-width: 140px; } }

/* ---------- Тема OpenCart: дополнения к макету ---------- */
a.eyebrow { text-decoration: none; }
.drawer__link { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; font-weight: 700; border-bottom: 1px solid var(--line); }
.visit__more { margin-top: 12px; font-size: 14px; }
.visit .btn { margin-top: 8px; }
.card__meta span:not(.ok) { color: var(--muted); }

/* Страницы, у которых пока нет своего шаблона (оформление заказа, кабинет и т. д.):
   их контент на Bootstrap, а шапка и подвал — наши. Bootstrap не должен трогать шапку/подвал. */
.is-legacy .footer a:hover, .is-legacy .drawer a:hover { text-decoration: none; }
.is-legacy .footer a:focus { text-decoration: none; }
.is-legacy .footer { font-size: 15px; line-height: 1.55; }
.is-legacy .footer h3 { margin-top: 0; }
.is-legacy .modal label { font-weight: 600; margin-bottom: 0; }
.is-legacy > .container, .is-legacy #content { padding-bottom: 40px; }
.is-legacy .breadcrumb { margin-top: 20px; background: var(--surface); }
/* верхняя строка всегда в одну линию: длинный адрес обрезается многоточием */

/* ---------- Форма обратного звонка ---------- */
.cb-body { display: grid; gap: 14px; }
.cb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cb-product { margin: -4px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-weight: 700; font-size: 14px; }
.field__error { display: block; min-height: 0; font-style: normal; font-size: 13px; font-weight: 600; color: var(--accent); }
.field__error:empty { display: none; }
.field.has-error input, .field.has-error textarea { border-color: var(--accent); }
.cb-agree { align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.cb-agree { gap: 12px; line-height: 1.45; }
.cb-agree input[type="checkbox"] { margin-top: 0; }
.cb-agree a, .cb-note a { color: var(--brand-2); text-decoration: underline; }
.cb-form-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fde5e5; color: var(--accent); font-weight: 600; font-size: 14px; }
.cb-done { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 8px 0; }
.cb-done__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #e3f3e9; color: var(--ok); }
.cb-done__icon .i { width: 32px; height: 32px; stroke-width: 2.4; }
.cb-done p { margin: 0 0 6px; }
.modal__box .btn:disabled { opacity: .6; cursor: wait; }

/* ---------- Карточка товара (тема OpenCart) ---------- */
.buy__form { display: grid; gap: 16px; }
.buy__form .field { gap: 6px; }
label.color { position: relative; display: inline-grid; place-items: center; cursor: pointer; }
label.color input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
label.color:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.color--text { width: auto; min-width: 48px; height: 40px; padding: 0 12px; border-radius: 10px; border-color: var(--line); font-size: 13px; font-weight: 600; }
.color--text.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.buy__select select { height: 48px; }
.stock-badge--out { background: #fff6e5; border-color: #f3dfb5; color: #8a5a00; }
.stock-badge--out .stock-badge__icon { background: #d99a1e; }
.stock-badge--out .stock-badge__icon::after { display: none; }
.buy__cta { grid-template-columns: 1fr; }
[data-form-error]:empty { display: none; }
[data-form-error] { display: block; font-style: normal; font-weight: 600; font-size: 14px; color: var(--accent); }
.buy > .btn--block { margin-top: -6px; }
.pabout__html { color: var(--ink-2); }
.pabout__html img { max-width: 100%; height: auto; border-radius: calc(var(--radius-sm) + 2px); }
.pabout__html table { width: 100%; border-collapse: collapse; }
.pabout__html td, .pabout__html th { padding: 6px 8px; border-bottom: 1px solid var(--line); }

/* ---------- Корзина в теме OpenCart ---------- */
.cart-tools { display: flex; gap: 20px; flex-wrap: wrap; }
.citem.is-busy { opacity: .6; pointer-events: none; }
.citem__opts .wait { display: inline-flex; align-items: center; gap: 4px; color: #8a5a00; font-weight: 600; }
.checkout__step .field--wide { grid-column: 1 / -1; }
.checkout__step > .field--wide { display: grid; }
.mini h3 a { color: inherit; }
.mini h3 a:hover { color: var(--brand-2); }
.print-order { display: none; }

/* Печать состава заказа: на бумаге — только бланк */
@media print {
  body > *:not(main):not(.print-order), .page > .wrap > *, .sticky-buy, .toast { display: none !important; }
  body { background: #fff !important; }
  main.page { padding: 0 !important; }
  .print-order { display: block !important; color: #000; font: 12pt/1.4 Arial, sans-serif; }
  .print-order__head { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 10px; border-bottom: 2px solid #000; font-size: 10pt; }
  .print-order__store { font-size: 13pt; }
  .print-order__date { white-space: nowrap; }
  .print-order h1 { margin: 16px 0 10px; font-size: 18pt; }
  .print-order__table { width: 100%; border-collapse: collapse; }
  .print-order__table th, .print-order__table td { padding: 6px 8px; border: 1px solid #999; text-align: left; vertical-align: top; }
  .print-order__table th { background: #eee; }
  .print-order__table td:nth-child(1), .print-order__table td:nth-child(3) { text-align: center; white-space: nowrap; }
  .print-order__table td:nth-child(4), .print-order__table td:nth-child(5) { text-align: right; white-space: nowrap; }
  .print-order__table small { color: #444; }
  .print-order__table tr { page-break-inside: avoid; }
  .print-order__bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: 12px; page-break-inside: avoid; }
  .print-order__qr { display: flex; gap: 12px; align-items: center; max-width: 60%; }
  .print-order__qr[hidden] { display: none; }
  .print-order__qr svg { flex: none; width: 32mm; height: 32mm; }
  .print-order__qr p { margin: 0; font-size: 9pt; }
  .print-order__qr code { display: block; margin-top: 4px; font: 8pt/1.3 monospace; word-break: break-all; }
  .print-order__totals { margin: 0 0 0 auto; width: 280px; }
  .print-order__totals div { display: flex; justify-content: space-between; padding: 3px 0; }
  .print-order__totals div:last-child { margin-top: 4px; padding-top: 6px; border-top: 2px solid #000; font-size: 14pt; }
  .print-order__note { margin-top: 18px; font-size: 9pt; color: #444; }
}
.opt__price { margin-top: 4px; font-style: normal; font-weight: 700; font-size: 14px; color: var(--opt-price); }
.opt__price:empty { display: none; }
/* Корзина: две колонки из настроек (--cart-cols), блоки внутри колонок; итог «липнет» в своей колонке */
.cart--cols { grid-template-columns: var(--cart-cols, minmax(0, 1fr) 360px); align-items: stretch; }
.cart__col { display: grid; gap: 24px; align-content: start; min-width: 0; }
.cart__col .summary { top: calc(var(--header-h) + 16px); }
@media (max-width: 960px) { .cart--cols { grid-template-columns: minmax(0, 1fr); } }
/* варианты и поля подстраиваются под ширину своей колонки (например, «Получение» в узкой правой колонке) */
.cart__col .opts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cart__col .checkout__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Итог и кнопка «Оформить» — отдельные блоки; стоят рядом — «липнут» вместе. На телефоне «Итого + кнопка» закреплены внизу экрана */
.cart__stick { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 16px; align-content: start; transition: top .28s ease; }
.cart__stick .summary { position: static; }
.cart-submit { display: grid; gap: 12px; padding: 20px 24px; border-radius: var(--cart-r); background: var(--cart-bg); box-shadow: var(--shadow); }
.cart-submit .small { margin: 0; }
.cart-submit .small a { text-decoration: underline; }
.cart-submit .summary__perks { margin: 0; }
.cart-submit__total { display: none; }
@media (max-width: 960px) {
  .cart__stick { position: static; }
  body:has(.has-cart-bar) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .cart-submit__bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, .08); }
  .cart-submit__total { display: grid; flex: none; line-height: 1.15; }
  .cart-submit__total span { font-size: 12px; color: var(--muted); }
  .cart-submit__total b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; color: var(--total-color); }
  .cart-submit__bar .btn { flex: 1 1 auto; width: auto; min-width: 0; }
  .cart-submit:not(:has(> p, > ul)) { padding: 0; background: none; box-shadow: none; }
  body:has(.has-cart-bar) .cookie { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* Точки на фото товара: слой по размеру фото, точки — в процентах от него */
.hotspots { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hotspots .hotspot { pointer-events: auto; }
/* Корзина: состав товара-комплекта */
.citem__set { font-size: var(--citem-opts-fs); line-height: 1.4; color: var(--ink-2); }
.citem__set b { color: var(--brand); font-weight: 700; }
/* Строка комплекта ↔ точка на фото: наведение на строку подсвечивает её точку другим цветом с подписью */
.set-box li.has-spot { cursor: default; margin: 0 -8px; padding: 2px 8px; border-radius: 8px; transition: background .15s; }
.set-box li.has-spot.is-linked { background: #dff1e4; }
.hotspot.is-linked { z-index: 4; }
.hotspot.is-linked .hotspot__dot { transform: scale(1.3); }
.hotspot.is-linked .hotspot__dot::before { background: var(--ok); }
.hotspot.is-linked .hotspot__dot::after { opacity: 1; border-color: var(--ok); }
.hotspot.is-linked .hotspot__tip::before { content: "В комплекте"; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ok); }
/* точка в верхней трети фото — подсказка под точкой, иначе обрезается краем фото */
.hotspot--below .hotspot__tip { bottom: auto; top: calc(100% + 6px); }

/* ---------- Раздел каталога ---------- */
.catalog__main { display: grid; gap: 16px; }
.toolbar__count { margin: 0 auto 0 0; }
.pager__gap { display: grid; place-items: center; min-width: 40px; height: 40px; color: var(--muted); }
.more .btn.is-loading { opacity: .6; pointer-events: none; }
.seo--top { margin: 0 0 24px; }
/* длинное описание — свернуть; кнопка «Читать полностью» появляется, только если текст не влез (app.js) */
.seo__text { color: var(--ink-2); line-height: 1.6; }
.seo__text img { max-width: 100%; height: auto; border-radius: calc(var(--radius-sm) + 2px); }
.seo__text.is-collapsible { max-height: 260px; overflow: hidden; position: relative; transition: max-height .35s ease; }
.seo__text.is-collapsible::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(transparent, var(--surface)); pointer-events: none; transition: opacity .2s; }
.seo__text.is-open::after, .seo__text.is-short::after { opacity: 0; }
.seo__more { margin-top: 12px; }
.seo__more.is-open .i { transform: rotate(180deg); }
/* Каталог: карточек в ряд по ширине экрана — из настроек (--cols-*), перебивает общие правила .grid макета */
.grid.grid--cat { grid-template-columns: repeat(var(--cols-md, 3), minmax(0, 1fr)); }
@media (min-width: 1600px) { .grid.grid--cat { grid-template-columns: repeat(var(--cols-lg, 4), minmax(0, 1fr)); } }
@media (min-width: 1920px) { .grid.grid--cat { grid-template-columns: repeat(var(--cols-xl, 5), minmax(0, 1fr)); } }
@media (max-width: 1180px) { .grid.grid--cat { grid-template-columns: repeat(var(--cols-sm, 2), minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid.grid--cat { grid-template-columns: repeat(var(--cols-xs, 2), minmax(0, 1fr)); } }
/* Выпадающий список одним блоком: прозрачный <select> на весь блок — клик в любом месте открывает его,
   видно иконку/подпись, выбранное значение и стрелку */
.select--pill { gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.select--pill:hover { border-color: var(--brand-2); background: #f7fbfe; }
.select--pill:focus-visible, .select--pill.is-open { outline: 0; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(38, 106, 159, .15); }
.select--pill .select__label { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.select--pill .select__value { font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; }
.select--pill .select__arrow { width: 16px; height: 16px; margin-left: 2px; color: var(--brand-2); transition: transform .2s; }
.select--pill.is-open .select__arrow { transform: rotate(180deg); }
.select--pill select { display: none; }  /* варианты — в меню .select__menu (app.js) */
.toolbar .select--pill + .select--pill { margin-left: 0; }
@media (max-width: 640px) { .select--pill { flex: 1 1 auto; justify-content: flex-start; } .select--pill .select__arrow { margin-left: auto; } }
/* надпись под ценой на странице товара («цена за погонный метр») */
.buy__note { margin: 2px 0 0; color: var(--muted); font-size: 14px; }

/* ---------- Блок темы: «Оформление и показ» (обёртка .tb — только если что-то задано) ---------- */
.tb--bg { background-position: center; background-size: cover; background-repeat: no-repeat; }
.tb--bg > section { background: transparent !important; }
.tb--pt > section { padding-top: var(--tb-pt) !important; margin-top: 0 !important; }
.tb--pb > section { padding-bottom: var(--tb-pb) !important; margin-bottom: 0 !important; }
.tb--title h2, .tb--title .section__head h2, .tb--title [class*="__title"] { color: var(--tb-title) !important; }
.tb--text, .tb--text p, .tb--text .muted, .tb--text [class*="__text"] { color: var(--tb-text) !important; }
.tb--center .section__head { justify-content: center; flex-direction: column; gap: 8px; text-align: center; }
.tb--center h2, .tb--center [class*="__title"], .tb--center .yrev__text { text-align: center; margin-left: auto; margin-right: auto; }
.tb--full .wrap { max-width: none; }
@media (max-width: 760px) {
  .tb--desktop { display: none !important; }
  .tb--pt > section { padding-top: calc(var(--tb-pt) * .75) !important; }
  .tb--pb > section { padding-bottom: calc(var(--tb-pb) * .75) !important; }
}
@media (min-width: 761px) {
  .tb--mobile { display: none !important; }
}

/* ---------- Отзывы с Яндекс Карт (Блок темы → «Отзывы с Яндекс Карт») ---------- */
.yrev__text { margin: -8px 0 20px; max-width: 720px; color: var(--ink-2); }
/* виджет отзывов Яндекса не шире ~760 px — колонка отзывов по нему, остальное место — карте */
.yrev__grid { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: 20px; }
.yrev--solo .yrev__grid { grid-template-columns: minmax(0, 760px); }
.yrev__grid > div:first-child { max-width: 760px; }
.yrev__frame { position: relative; height: var(--yrev-h, 600px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.yrev__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.yrev__links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 14px; }
@media (max-width: 1120px) {
  .yrev__grid { grid-template-columns: minmax(0, 1fr); }
  .yrev__frame--map { height: 360px; }
}

/* ---------- Карта сайта (information/sitemap) ---------- */
.smap { margin-bottom: 40px; }
.smap__h { margin: 0 0 16px; }
/* карточки разной высоты — колонками, без пустых промежутков */
.smap__cats, .smap__more { columns: 4 260px; column-gap: 16px; }
.smap__more { margin-top: 12px; }
.smap__cat { break-inside: avoid; margin-bottom: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.smap__cat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 18px; font-weight: 800; color: var(--ink); }
.smap__cat-head img { flex: none; width: 36px; height: 36px; object-fit: contain; }
a.smap__cat-head:hover, .smap__cat-head a:hover { color: var(--brand-2); }
.smap__cat-head a { color: inherit; }
.smap__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.smap__list a { color: var(--ink-2); }
.smap__list a:hover { color: var(--brand-2); text-decoration: underline; text-underline-offset: 3px; }
.smap__list ul { list-style: none; margin: 6px 0 2px; padding: 0 0 0 14px; display: grid; gap: 4px; border-left: 2px solid var(--line); font-size: 14px; }

/* ---------- «Не найдено» (товар, раздел, страница) — error/not_found ---------- */
.nf { margin: 8px 0 40px; }
.nf__card { display: flex; align-items: center; gap: 40px; padding: 40px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.nf__mark { position: relative; flex: none; display: grid; place-items: center; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #eaf2fb, #dbe9f5); color: var(--brand); }
.nf__mark span { font-size: 56px; font-weight: 800; letter-spacing: -.02em; }
.nf__mark .i { position: absolute; right: 18px; bottom: 22px; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(200, 0, 0, .25); }
.nf__body { flex: 1; min-width: 0; }
.nf__body h1 { margin: 0 0 10px; }
.nf__text { margin: 0 0 20px; max-width: 620px; color: var(--ink-2); }
.nf__search { display: flex; gap: 8px; max-width: 560px; margin-bottom: 16px; }
.nf__search input { flex: 1; min-width: 0; height: 52px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2, #f5f6f8); font: inherit; font-size: 16px; outline: none; }
.nf__search input:focus { border-color: var(--brand-2); background: #fff; }
.nf__search .btn { flex: none; height: 52px; }
.nf__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.nf__h { margin: 36px 0 16px; }
.nf__cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.nf__cat { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); font-weight: 700; transition: border-color .15s, box-shadow .15s, transform .15s; }
.nf__cat:hover { border-color: var(--brand-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.nf__cat > span:nth-child(2) { flex: 1; min-width: 0; }
.nf__cat > .i { width: 18px; height: 18px; color: var(--muted); transform: rotate(-90deg); }
.nf__cat-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; }
.nf__cat-icon img { width: 100%; height: 100%; object-fit: contain; }
.nf__cat-icon--photo { border-radius: 10px; overflow: hidden; }
.nf__cat-icon--photo img { object-fit: cover; }
.nf__cat-icon .i { width: 28px; height: 28px; color: var(--accent); }
.nf__cat--sale { color: var(--accent); }
@media (max-width: 760px) {
  .nf__card { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px 20px; }
  .nf__mark { width: 120px; height: 120px; }
  .nf__mark span { font-size: 38px; }
  .nf__mark .i { right: 6px; bottom: 10px; width: 36px; height: 36px; padding: 8px; }
  .nf__search { flex-direction: column; }
  .nf__search input { flex: none; }
  .nf__actions .btn { flex: 1 1 100%; }
}
/* краткое описание товара — под ценой: строки «Глубина — …», «Материал — …» */
.buy__short { display: grid; gap: 4px; margin: 4px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.buy__short p, .buy__short div, .buy__short ul { margin: 0; }
.buy__short ul { padding-left: 18px; }
.buy__short h3 { margin: 6px 0 0; font-size: 14px; font-weight: 700; }
.buy__short strong, .buy__short b { color: var(--ink); font-weight: 600; }
.buy__short img { max-width: 100%; height: auto; }
/* меню выпадающего списка */
.select--pill { user-select: none; }
.select__menu { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; min-width: 100%; max-height: 320px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(12, 35, 54, .16), 0 2px 6px rgba(12, 35, 54, .06);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; }
.select--pill.is-open .select__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.select__menu li { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 36px 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer; transition: background .12s, color .12s; }
.select__menu li.is-hover { background: #eef5fb; color: var(--ink); }
.select__menu li.is-selected { color: var(--brand); font-weight: 800; }
.select__menu li.is-selected::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 11px; margin-top: -7px; border: solid var(--brand-2); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@media (max-width: 640px) { .select__menu { left: 0; right: auto; } }
/* Поиск в шапке: текст тёмный (в шапке color: #fff, поле его наследовало — белое на белом) */
.search input { color: var(--ink); }
.search input::placeholder { color: var(--muted); opacity: 1; }
/* на больших экранах — не на всю ширину, по центру между «Каталогом» и телефоном */
/* Контакты без карты — карточки на всю ширину в две колонки */
.contacts--nomap { grid-template-columns: 1fr; }
.contacts--nomap .contacts__info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.contacts--nomap .contacts__actions { grid-column: 1 / -1; }
.feedback__form .field--wide.field__error:empty { display: none; }

/* Баннер раздела (Настройки шаблона → Баннеры) */
.promo-banner { display: block; margin: 0 0 24px; border-radius: 16px; overflow: hidden; background: var(--line); }
.promo-banner img { display: block; width: 100%; height: auto; }
a.promo-banner { transition: box-shadow .2s, transform .2s; }
a.promo-banner:hover { box-shadow: 0 10px 28px rgba(19, 53, 80, .18); transform: translateY(-1px); }
@media (max-width: 600px) { .promo-banner { border-radius: 12px; margin-bottom: 16px; } }
.promo-carousel { margin: 0 0 24px; }
.promo-carousel__frame { position: relative; overflow: hidden; border-radius: 16px; background: var(--line); }
.promo-carousel__track { display: flex; align-items: flex-start; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.promo-carousel__slide { flex: 0 0 100%; min-width: 0; }
.promo-carousel .promo-banner { margin: 0; border-radius: 0; }
.promo-carousel a.promo-banner:hover { box-shadow: none; transform: none; }
.promo-carousel__btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 4px 14px rgba(12, 35, 54, .18); opacity: 0; transition: opacity .2s, background .15s, color .15s; }
.promo-carousel__btn .i { width: 20px; height: 20px; }
.promo-carousel__btn:hover { background: var(--brand); color: #fff; }
.promo-carousel__btn:focus-visible, .promo-carousel:hover .promo-carousel__btn { opacity: 1; }
.promo-carousel__btn--prev { left: 12px; }
.promo-carousel__btn--next { right: 12px; }
.promo-carousel__dots { margin-top: 10px; }
@media (hover: none) { .promo-carousel__btn { display: none; } }
@media (max-width: 600px) { .promo-carousel { margin-bottom: 16px; } .promo-carousel__frame { border-radius: 12px; } }

/* Страница поиска (Настройки шаблона → Поиск) */
.search--page { flex: none; width: 100%; max-width: 640px; margin-top: 16px; }
.search-suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 8px; }

/* Опции в карточке и модулях (Настройки шаблона → Каталог → «Карточка»): цвета кружками, остальное — текстом */
.copts { display: grid; gap: 6px; margin: 0 0 8px; }
.copts__row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12px; line-height: 1.2; color: var(--ink-2); }
.copts__label { color: var(--muted); font-weight: 600; margin-right: 2px; }
.swatch { display: inline-block; width: 22px; height: 22px; border-radius: 50%; padding: 1px; border: 1px solid var(--line); background: var(--surface); }
.swatch img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.copt { padding: 3px 8px; border-radius: 999px; background: var(--surface-2); font-weight: 600; }
.copts__more { color: var(--muted); font-weight: 700; }

/* Подсказка при наведении ([data-tip], app.js): тёмная плашка со стрелкой; у цвета — крупный образец */
.copts__more[data-tip] { cursor: default; }
.swatch[data-tip] { cursor: pointer; transition: transform .15s, border-color .15s; }
.swatch[data-tip]:hover, .swatch[data-tip]:focus-visible { transform: scale(1.15); border-color: var(--brand-2); outline: 0; }
.copts__more[data-tip]:hover { color: var(--brand-2); }
.tip { position: absolute; z-index: 1000; left: 0; top: 0; display: flex; align-items: center; gap: 10px; max-width: 240px; padding: 8px 12px; border-radius: 12px;
  background: #0f2437; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; box-shadow: 0 12px 28px rgba(12, 35, 54, .28);
  pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.tip.is-on { opacity: 1; transform: translateY(0); }
.tip::after { content: ""; position: absolute; left: var(--arrow, 50%); top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #0f2437; }
.tip--below { transform: translateY(-4px); }
.tip--below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #0f2437; }
.tip small { display: block; margin-bottom: 2px; color: #9cc6e8; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tip--img { padding: 6px 14px 6px 6px; }
.tip img { flex: none; width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: #fff; }
.swatch--sm { width: 18px; height: 18px; vertical-align: -4px; }

/* Карточка товара: цена меняется при выборе опций (app.js) — плашки «что изменило цену» */
.price-mods { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.price-mod { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: #eef5fb; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.price-mod b { padding: 2px 8px; border-radius: 999px; background: var(--brand-2); color: #fff; font-size: 12px; font-weight: 800; }

/* Значение опции — другой товар (link): переход при выборе (app.js), пока грузится — пульсирует */
label.color.is-going { border-color: var(--brand-2); animation: color-going 1s ease infinite; }
@keyframes color-going { 50% { transform: scale(.92); } }
body.is-leaving { cursor: progress; }

/* Позиции схем (Дизайн → Схемы): колонки слева / справа от контента; блоки внутри — без своих отступов .wrap */
.cols { display: grid; gap: 28px; align-items: start; }
.cols--left { grid-template-columns: 280px minmax(0, 1fr); }
.cols--right { grid-template-columns: minmax(0, 1fr) 280px; }
.cols--left.cols--right { grid-template-columns: 260px minmax(0, 1fr) 260px; }
.cols__main, .cols__side { min-width: 0; }
.cols__side { display: grid; gap: 20px; position: sticky; top: calc(var(--header-h, 80px) + 16px); }
.cols .wrap, .wrap .wrap { max-width: none; padding: 0; }  /* модуль со своей обёрткой внутри страницы (товар, раздел, поиск) — по ширине страницы */
.cols .section { padding-block: 0 32px; }
.cols__side .section { padding: 0; }
.cols__side .section__head h2 { font-size: 18px; }
.cols__side .cats, .cols__side .why { grid-template-columns: 1fr; }
@media (max-width: 1180px) {
  .cols, .cols--left, .cols--right, .cols--left.cols--right { grid-template-columns: minmax(0, 1fr); }
  .cols__side { position: static; }
  .cols__side--left { order: 2; }  /* на телефоне и планшете колонки — после контента */
  .cols__side--right { order: 3; }
}

/* Стандартные модули OpenCart в стиле темы (Категории, Информация, HTML, Баннер, Слайдшоу, Карусель) */
.mbox { padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.cols__main > .mbox, main > .mbox { margin-bottom: 24px; }
.mbox__title { margin: 0 0 12px; font-size: 17px; }
.mlist, .mlist ul { list-style: none; margin: 0; padding: 0; }
.mlist > li + li { border-top: 1px solid var(--line); }
.mlist a { display: block; padding: 9px 0; color: var(--ink-2); font-weight: 600; }
.mlist a:hover, .mlist .is-active > a { color: var(--brand-2); }
.mlist ul { padding: 0 0 8px 12px; }
.mlist ul a { padding: 5px 0; font-weight: 500; font-size: 14px; }
.mbox__html > :first-child { margin-top: 0; }
.mbox__html > :last-child { margin-bottom: 0; }
.mbanners { display: grid; gap: 12px; }
.mbanners__item img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.mslides__item { flex: 0 0 100%; }
.mslides__item img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.mlogos__item { flex: 0 0 160px; display: grid; place-items: center; height: 100px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.mlogos__item img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* цена «докручивается» при выборе опций — цифры одинаковой ширины, чтобы строка не дёргалась */
[data-price-now], [data-sticky-price] { font-variant-numeric: tabular-nums; }

/* Подсказка в две части: значение (цвет) и под ним карточка связанного товара (data-tip-card) */
.tip { flex-direction: column; align-items: stretch; }
.tip__row { display: flex; align-items: center; gap: 10px; }
.tip__card { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.tip__card img { width: 96px; height: 69px; border-radius: 6px; object-fit: contain; background: #fff; }
.tip__card small { display: block; margin-bottom: 2px; color: #ffcf70; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tip__card b { display: block; font-weight: 700; }
.tip__card em { display: block; margin-top: 2px; font-style: normal; color: #9cc6e8; }
.tip:has(.tip__card) { max-width: 300px; }

/* Кнопки-ссылки (<button class="link-arrow">: «Читать полностью», «Все характеристики») — без стилей браузера, в цветах темы */
button.link-arrow { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--brand-2); cursor: pointer; }
button.link-arrow:hover { color: var(--brand); }
button.link-arrow .i { transition: transform .2s; }
button.link-arrow.seo__more { margin-top: 14px; padding: 10px 18px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .15s, background .15s, gap .15s; }
button.link-arrow.seo__more:hover { border-color: var(--brand-2); background: #f7fbfe; }
button.link-arrow.seo__more:focus-visible { outline: 0; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(38, 106, 159, .15); }
/* смена главного фото: старое уезжает копией поверх (app.js, setImg) */
.gallery__ghost { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1000/722; object-fit: cover; pointer-events: none; will-change: transform; }

/* «Наши работы»: плитки (главная, карточка товара, страница /nashi-raboty) и просмотр фото */
.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.works--row { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.works--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .works--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.work { margin: 0; min-width: 0; }
.work__photo { display: block; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); aspect-ratio: 4 / 3; }
.work__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.work__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 20, 31, .35), transparent 45%); opacity: 0; transition: opacity .2s; }
.work__photo:hover img { transform: scale(1.04); }
.work__photo:hover::after { opacity: 1; }
.work figcaption { margin-top: 8px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.work figcaption a { color: var(--ink-2); }
.work figcaption a:hover { color: var(--brand-2); }
.page-head__text { max-width: 760px; }
.pview { position: fixed; inset: 0; z-index: 95; display: grid; grid-template-rows: auto 1fr auto; background: rgba(8, 20, 31, .96); color: #fff; animation: fade .2s; }
.pview[hidden] { display: none; }
.pview__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; }
.pview__top .icon-btn { color: #fff; }
.pview__count { font-size: 14px; opacity: .75; font-variant-numeric: tabular-nums; }
.pview__stage { display: grid; place-items: center; min-height: 0; padding: 0 16px; }
.pview__stage img { max-width: min(100%, 1400px); max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); object-fit: contain; border-radius: 8px; user-select: none; }
.pview__nav { position: absolute; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; transition: background .15s; }
.pview__nav:hover { background: rgba(255, 255, 255, .25); }
.pview__nav .i { width: 26px; height: 26px; }
.pview__nav--prev { left: 20px; }
.pview__nav--next { right: 20px; }
.pview__caption { margin: 0; padding: 14px 16px 18px; text-align: center; font-weight: 600; }
.pview__caption a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .works--row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px; }
  .works--row .work { flex: 0 0 70%; scroll-snap-align: start; }
  .work figcaption { font-size: 13px; }
  .pview__nav { display: none; }
}
/* «Наши работы» под фото товара: заголовок и полоса миниатюр (листается пальцем / колесом) */
.gworks { margin-top: 4px; padding: 14px 16px 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.gworks__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gworks__head > .i { flex: none; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: #e7f4ec; color: var(--ok); }
.gworks__head b { font-size: 16px; }
.gworks__head .muted { font-size: 14px; }
.gworks__head .link-arrow { margin-left: auto; font-size: 14px; white-space: nowrap; }
.works--strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: 4px; }
.works--strip .work { flex: 0 0 calc((100% - 3 * 8px) / 4); scroll-snap-align: start; }
.works--strip .work__photo { border-radius: calc(var(--radius-sm) + 2px); }
.works--strip { cursor: grab; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.works--strip.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.works--strip.is-dragging .work__photo { pointer-events: none; }
.works--strip img { -webkit-user-drag: none; user-select: none; }
.pview__stage img { cursor: pointer; }
@media (max-width: 640px) {
  .gworks { padding: 12px; }
  .gworks__head .muted { display: block; font-size: 13px; }
  .works--strip .work { flex-basis: 40%; }
}

/* ===================== Шапка, главная, блоки темы ===================== */

body { background: var(--page-bg); }
.section--tint { background: var(--tint); }
.section__head h2 { font-size: var(--h-section); color: var(--section-color); font-family: var(--section-font); }

/* Шапка — той же ширины, что .wrap (содержимое страницы); поиск заполняет свободное место */

/* Шапка: тёмная строка */
.topbar { background: var(--topbar-bg); color: var(--topbar-text); font-family: var(--topbar-font); font-size: var(--topbar-fs); }
.topbar__in { display: flex; align-items: center; gap: 32px; height: 56px; }
.topbar__city { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 16px; }
.topbar__city .i { width: 16px; height: 16px; }
.topbar__notice { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 700; line-height: 1.35; }
.topbar__nav { display: flex; gap: 32px; flex: none; }
.topbar__nav a { color: var(--topbar-text); opacity: .92; }
.topbar__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* Шапка: белая строка (104 px): логотип, поиск 412×56, «Заказать звонок» 226×56, тонкие иконки 32 px */
.header { position: sticky; top: 0; z-index: 40; background: var(--header-bg); font-family: var(--header-font); transition: transform .28s ease, box-shadow .28s ease; }
/* при прокрутке вниз шапка уезжает, при прокрутке вверх — возвращается (app.js: is-hidden, is-stuck) */
.header.is-stuck { box-shadow: 0 8px 24px -12px rgba(12, 35, 54, .35); }
.header.is-hidden { transform: translateY(-100%); box-shadow: none; }
.catalog__side, .buy, .ptabs, .kit, .info__nav, .info__aside, .summary, .cols__side { transition: top .28s ease; }
.header__main { display: flex; align-items: center; height: 104px; }
.header__burger { display: none; }
.header__logo { flex: none; display: block; }
.header__logo img { display: block; height: 48px; width: auto; }
.header__search { position: relative; flex: 1 1 412px; min-width: 180px; display: flex; align-items: center; height: 56px; margin-left: clamp(24px, 4vw - 14px, 72px); border-radius: 999px; background: var(--search-bg); transition: box-shadow .15s, background .15s; }
.header__search input { flex: 1; min-width: 0; height: 100%; padding: 0 64px 0 32px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.header__search input::placeholder { color: rgba(29, 29, 27, .48); opacity: 1; }
.header__search input::-webkit-search-cancel-button { display: none; }
.header__search button { position: absolute; right: 32px; top: 50%; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -12px; padding: 0; border: 0; background: none; color: #1d1d1b; cursor: pointer; }
.header__search button .i { width: 24px; height: 24px; stroke-width: 1.4; }
/* номер рядом с поиском (без часов), значки мессенджеров */
.header__phone { flex: none; margin-left: clamp(20px, 3vw - 8px, 44px); font-size: 18px; font-weight: 800; color: var(--phone-color); white-space: nowrap; }
.header__phone:hover { color: var(--header-icons-hover); }
.header__tel { display: none; }
.drawer__msgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.drawer__msgs .i--color { width: 22px; height: 22px; border-radius: 6px; }
.drawer__msgs a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-weight: 600; font-size: 14px; }
.header__call { flex: 0 0 auto; height: 56px; margin-left: clamp(20px, 3vw - 8px, 44px); padding: 0 24px; white-space: nowrap; border: 0; border-radius: 32px; background: var(--header-call); color: var(--header-call-text); font: inherit; font-weight: 700; font-size: 16px; transition: background .15s; }
.header__call:hover { background: var(--header-call-hover); }
.header__icons { display: flex; align-items: center; gap: 24px; margin-left: auto; padding-left: clamp(24px, 4vw - 14px, 56px); flex: none; }
.header__msgs { display: flex; align-items: center; gap: 12px; }  /* мессенджеры в ряд — чуть меньше остальных значков */
.header .header__msgs .icon-btn { width: 30px; height: 30px; border-radius: 8px; transition: transform .15s, box-shadow .15s; }
.header .header__msgs .icon-btn .i { width: 30px; height: 30px; margin: 0; }
.header .header__msgs .icon-btn:hover { transform: translateY(-1px) scale(1.06); box-shadow: 0 6px 14px rgba(20, 24, 22, .18); }
.i--color { stroke: none; }  /* цветные значки мессенджеров (плитки в фирменных цветах) */
.header .icon-btn { width: 32px; height: 32px; padding: 0; border-radius: 0; background: none; color: var(--header-icons); }
.header .icon-btn { overflow: visible; }
.header .icon-btn .i { width: 42px; height: 42px; margin: -5px; stroke-width: .85; }
.header .icon-btn:hover { background: none; color: var(--header-icons-hover); }
.header .icon-btn .badge { top: -6px; right: -8px; }

/* Шапка: строка разделов (64 px, #f9f9f9): «Каталог мебели», разделы 16 px, кнопка с рамкой справа */
.catnav { position: relative; z-index: 39; background: var(--catnav-bg); font-family: var(--catnav-font); border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.catnav__in { display: flex; align-items: center; gap: 40px; height: 64px; }
.catnav__catalog { display: inline-flex; align-items: center; gap: 16px; flex: none; height: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: var(--menu-fs); font-weight: var(--menu-fw); color: var(--menu-text); }
.catnav__catalog:hover { color: var(--menu-hover); }
.catnav__burger { display: grid; gap: 5px; width: 24px; justify-items: start; }
.catnav__burger i { display: block; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s, width .2s; }
.catnav__burger i:nth-child(1) { width: 24px; }
.catnav__burger i:nth-child(2) { width: 16px; }
.catnav__burger i:nth-child(3) { width: 20px; }
.catnav:has(#mega:not([hidden])) .catnav__burger i:nth-child(1) { width: 22px; transform: translateY(6.5px) rotate(45deg); }
.catnav:has(#mega:not([hidden])) .catnav__burger i:nth-child(2) { opacity: 0; }
.catnav:has(#mega:not([hidden])) .catnav__burger i:nth-child(3) { width: 22px; transform: translateY(-6.5px) rotate(-45deg); }
.catnav__links { display: flex; gap: 40px; min-width: 0; overflow: hidden; white-space: nowrap; }
.catnav__links a { font-size: var(--menu-fs); font-weight: var(--menu-fw); color: var(--menu-text); }
.catnav__links a:hover { color: var(--menu-hover); }
.catnav__works { margin-left: auto; flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--accent); border-radius: 8px; font-weight: 700; font-size: var(--menu-fs); color: var(--menu-text); white-space: nowrap; transition: background .15s, color .15s; }
.catnav__works:hover { background: var(--accent); color: #fff; }

/* «Каталог мебели»: во всю ширину и до низа экрана; слева серая колонка разделов от края экрана,
   пункт 64 px, открытый — подсвечен и скруглён справа; справа заголовок 24 px и колонки подразделов (наведение — app.js) */
.mega { position: absolute; left: 0; right: 0; top: 100%; overflow: hidden auto; height: calc(100vh - var(--header-h, 224px)); max-height: 680px; background: linear-gradient(to right, #f5f5f5 calc(max(50% - var(--wrap) / 2, 0px) + var(--wrap-pad, 24px) + 268px), #fff 0); border-top: 1px solid #eee; box-shadow: 0 24px 40px rgba(12, 35, 54, .12); animation: fade .15s ease; }
.mega__in { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100%; }
.mega__list { display: grid; align-content: start; padding: 16px 0; background: #f5f5f5; }
.mega__tab { position: relative; display: flex; align-items: center; gap: 16px; height: 64px; padding-right: 20px; font-size: 16px; font-weight: 400; color: #1d1d1b; }
.mega__tab::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: -100vw; z-index: 0; border-radius: 0 8px 8px 0; background: transparent; transition: background .12s; }
.mega__tab > * { position: relative; z-index: 1; }
.mega__tab:hover::before { background: #ececec; }
.mega__tab.is-active::before { background: #dde9f4; }
.mega__tab.is-active { font-weight: 700; }
.mega__tab .i.right { margin-left: auto; width: 18px; height: 18px; stroke-width: 1.5; color: #8a8a8a; }
.mega__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; overflow: hidden; background: #fff; }
.mega__icon img { width: 100%; height: 100%; object-fit: cover; }
.mega__icon .i { width: 20px; height: 20px; stroke-width: 1.5; }
.mega__icon--pic { width: 32px; height: 32px; border-radius: 0; background: none; }
.mega__icon--pic img { object-fit: contain; }
.mega__tab--sale { color: var(--accent); }
.mega__panels { padding: 29px 0 32px 70px; }
.mega__panel { animation: fade .15s; }
.mega__title { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 32px; font-size: 24px; line-height: 32px; font-weight: 700; color: #1d1d1b; }
.mega__title .i { width: 22px; height: 22px; stroke-width: 1.5; }
.mega__title:hover { color: var(--brand-2); }
.mega__subs { list-style: none; margin: 0; padding: 0; columns: 3 240px; column-gap: 24px; }
.mega__subs li { break-inside: avoid; margin-bottom: 13px; line-height: 19px; }
.mega__subs a { font-size: 14px; color: #1d1d1b; }
.mega__subs a:hover { color: var(--brand-2); text-decoration: underline; text-underline-offset: 3px; }
.drawer .header__search--drawer { flex: none; width: 100%; min-width: 0; max-width: none; margin: 0 0 12px; }  /* сильнее правил поиска в шапке (отступы, медиа-запросы) */
.drawer .header__search--drawer button { right: 16px; }

/* Слайдер главной */
.hero-slider { padding: 24px 0 8px; }
.hero-slider__frame { position: relative; overflow: hidden; border-radius: 28px; background: linear-gradient(120deg, #f3eee7 0%, #eef2f5 100%); }
.hero-slider__track { display: flex; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.hero-slide { flex: 0 0 100%; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; min-height: 440px; }
.hero-slide__text { padding: 48px 32px 48px 72px; }
.hero-slide__date { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.hero-slide__title { margin: 0 0 18px; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
.hero-slide__lead { margin: 0 0 28px; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.hero-slide__promo { display: inline-block; margin-left: 4px; padding: 2px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; white-space: nowrap; }
.hero-slide__media { position: relative; align-self: stretch; overflow: hidden; border-radius: 48% 0 0 48% / 70% 0 0 70%; }
.hero-slide__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide-btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 34px; border-radius: 14px; background: var(--brand); color: #fff; font-weight: 700; transition: background .15s, color .15s; }
.slide-btn:hover { background: var(--brand-2); }
.slide-btn--ghost { border: 1.5px solid rgba(255, 255, 255, .8); background: transparent; }
.slide-btn--ghost:hover { background: #fff; color: var(--ink); }
.hero-slider__btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 6px 20px rgba(12, 35, 54, .16); transition: background .15s, color .15s; }
.hero-slider__btn:hover { background: var(--brand); color: #fff; }
.hero-slider__btn .i { width: 22px; height: 22px; }
.hero-slider__btn--prev { left: 16px; }
.hero-slider__btn--next { right: 16px; }
.hero-slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.hero-slider__dots button { width: 10px; height: 10px; padding: 0; border: 1.5px solid var(--brand-2); border-radius: 50%; background: transparent; transition: background .2s, transform .2s; }
.hero-slider__dots .is-active { background: var(--brand-2); transform: scale(1.15); }

/* Слайдер «только фото»: картинка во всю рамку (1800×400, обрезана по центру); на телефоне — не ниже 180 px */
.hero-slide--photo { display: block; position: relative; min-height: 180px; aspect-ratio: 1800 / 400; }
.hero-slide--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slider--photo .hero-slider__frame { background: var(--surface-2); }
@media (max-width: 960px) { .hero-slider--photo .hero-slider__btn { top: 50%; } }
/* своя картинка для телефона (<picture>, до 767 px): у «только фото» — 800×400 (2:1); слайд без неё — обычный баннер целиком, без обрезки */
@media (max-width: 767px) {
  .hero-slider--mobile .hero-slide--photo { aspect-ratio: 2 / 1; min-height: 0; }
  .hero-slider--mobile .hero-slide--photo:not(.has-mobile) img { object-fit: contain; }
  .hero-slider--mobile .hero-slider__btn { width: 40px; height: 40px; margin-top: -20px; }
}


/* «Наши работы» коллажем на тёмном фоне */
.works-band { margin: 32px 0; padding: 56px 0; background: #2b2f33; color: #fff; }
.works-band__title { margin: 0 0 28px; font-size: 28px; color: #fff; }
.works-band__in { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(260px, 1fr); gap: 36px; align-items: center; }
.works-band__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 190px); gap: 12px; }
.works-band__photo { display: block; overflow: hidden; border-radius: 18px; background: #3a3f44; }
.works-band__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.works-band__photo:hover img { transform: scale(1.05); }
.works-band__photo--4 { grid-column: 4; grid-row: 1 / span 2; }
.works-band__lead { margin: 0 0 14px; font-size: 24px; line-height: 1.25; font-weight: 800; }
.works-band__text p { color: rgba(255, 255, 255, .82); }
.works-band__text .slide-btn { margin-top: 12px; }

@media (max-width: 1180px) {
  .header__search { margin-left: 32px; }
  .header__phone { font-size: 16px; margin-left: 20px; }
  .header__call { width: auto; margin-left: 20px; padding: 0 22px; }
  .header__icons { gap: 20px; padding-left: 24px; }
  .catnav__in, .catnav__links { gap: 24px; }
  .hero-slide__text { padding-left: 48px; }
}
@media (max-width: 1240px) {
  .header__msg { display: none; }  /* мессенджеры — в выдвижном меню */
}
@media (max-width: 960px) {
  .topbar__notice, .topbar__nav { display: none; }
  .topbar__in { height: 40px; }
  .header__main { gap: 8px; height: 64px; }
  .header__logo { margin-left: 4px; }
  .header__icons { gap: 8px; }
  .header .icon-btn { width: 40px; height: 40px; }
  .header .icon-btn .i { width: 30px; height: 30px; margin: 0; stroke-width: 1.2; }
  .header__burger { display: inline-grid; }
  .header__msg { display: none; }
  .header__call { width: auto; height: 44px; margin-left: auto; padding: 0 18px; font-size: 14px; }  /* «Заказать звонок» и номер — пока помещаются */
  .header__phone { margin-left: 16px; font-size: 16px; }
  .header__logo img { height: 40px; }
  .header__main > .header__search, .catnav { display: none; }
  .header__icons { margin-left: 0; padding-left: 12px; }
  .hero-slide { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-slide__media { order: -1; height: 240px; border-radius: 0 0 50% 50% / 0 0 40px 40px; }
  .hero-slide__text { padding: 24px 24px 32px; }
  .hero-slide__lead { font-size: 16px; margin-bottom: 20px; }
  .hero-slider__btn { top: 120px; }
  .works-band__in { grid-template-columns: minmax(0, 1fr); }
  .works-band__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 120px; }
  .works-band__photo--4 { grid-column: auto; grid-row: auto; }
}
@media (max-width: 640px) {
  .cookie { bottom: 64px; }
  .hero-slider { padding-top: 12px; }
  .hero-slider__frame { border-radius: 20px; }
  .hero-slide__media { height: 200px; }
  .works-band { padding: 40px 0; }
  .works-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works-band__photo:nth-child(n+7) { display: none; }
}
@media (max-width: 719px) {
  .header__call { display: none; }
  .header__phone { margin-left: auto; }
}
@media (max-width: 479px) {
  /* номер и «Заказать звонок» не помещаются — логотип по центру: меню слева, значки справа */
  .header__main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .header__burger { justify-self: start; }
  .header__logo { justify-self: center; margin-left: 0; }
  .header__icons { justify-self: end; margin-left: 0; padding-left: 0; }
  .header__phone { display: none; }
  .header__tel { display: inline-grid; }
}


/* Поиск: запрос исправлен (раскладка, транслит, своя замена) */
.search-fixed { margin: -8px 0 20px; color: var(--ink-2); font-size: 15px; }
.search-fixed b { color: var(--ink); }
.search-fixed a { color: var(--brand-2); text-decoration: underline; text-underline-offset: 3px; }
.search-conds { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 16px; }
.search-cond { display: inline-flex; align-items: center; gap: 6px; background: #eef4fa; border-color: #d6e4f2; color: var(--ink); }
.search-cond .i { width: 14px; height: 14px; color: var(--muted); }
.search-cond:hover .i { color: var(--accent); }

/* Блок вкладок под карточкой товара (Настройки шаблона → Карточка товара → «Блок вкладок»): кнопка меняет содержимое на месте */
.ptabset { margin-top: 48px; }
.ptabs { margin: 0 0 20px; overflow-x: auto; scrollbar-width: none; }
/* закрепление меню вкладок (Настройки шаблона → Карточка товара → «Меню вкладок») */
.ptabs--sticky-off { position: static; }
@media (max-width: 960px) { .ptabs--sticky-desktop { position: static; } }
.ptabs::-webkit-scrollbar { display: none; }
.ptab { flex: none; padding: 10px 16px; border: 0; border-radius: 10px; background: none; font: inherit; font-weight: 700; color: var(--ink-2); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.ptab:hover { background: var(--surface-2); }
.ptab.is-active { background: var(--ink); color: #fff; }
.ptab em { font-style: normal; opacity: .6; font-size: 12px; margin-left: 2px; }
.ptab-panel[hidden] { display: none; }
.ptab-panel { animation: ptab-in .2s ease; }
@keyframes ptab-in { from { opacity: 0; transform: translateY(4px); } }
.ptab-panel__sub { margin: 0 0 16px; }
.ptab-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.ptab-panel__head p { margin: 0; }
.ptab-panel--text { max-width: 860px; padding: 28px 32px; border-radius: 24px; background: var(--surface); }
.ptab-panel__more { display: inline-flex; margin-top: 16px; }
.mods-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.mods-search { position: relative; display: flex; align-items: center; height: 40px; padding: 0 14px 0 38px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.mods-search:focus-within { border-color: var(--brand-2); }
.mods-search .i { position: absolute; left: 13px; width: 17px; height: 17px; color: var(--muted); }
.mods-search input { width: 190px; border: 0; outline: 0; background: none; font-size: 14px; }
@media (max-width: 640px) {
  .ptabset { margin-top: 32px; }
  .ptab-panel--text { padding: 20px; }
  .mods-tools, .mods-search { width: 100%; }
  .mods-search input { width: 100%; }
}

/* «Акции» (product/special): плашка «до −62%» в шапке страницы */
.special-head p { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; max-width: none; color: var(--ink-2); }
.special-head__badge { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--sale); color: #fff; font-size: 14px; font-weight: 800; }

/* «Производители»: плитки брендов, буквы; шапка страницы бренда; строка «Производитель» в карточке товара */
.brand-letters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.brand-letters button { min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.brand-letters button:hover { border-color: var(--brand-2); }
.brand-letters button.is-active { border-color: var(--brand); background: var(--brand); color: #fff; }
.brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.brand { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.brand:hover { border-color: var(--brand-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.brand[hidden] { display: none; }
.brand__mark { display: grid; flex: none; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #e3eef8; color: var(--brand); font-size: 22px; font-weight: 800; }
.brand__logo { display: grid; flex: none; place-items: center; width: 96px; height: 52px; }
.brand__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand__logo--lg { width: 160px; height: 80px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.brand__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.brand__text b { overflow: hidden; font-size: 16px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.brand__text small { color: var(--muted); font-size: 13px; }
.brand__arrow { flex: none; width: 18px; height: 18px; color: var(--muted); transition: color .15s, transform .15s; }
.brand:hover .brand__arrow { color: var(--brand-2); transform: translateX(3px); }
.brand-head { display: flex; align-items: center; gap: 20px; }
.brand-head p { margin-top: 6px; }
.brand-head a { color: var(--brand-2); }
.buy__brand { align-self: flex-start; margin-top: -8px; color: var(--muted); font-size: 14px; text-decoration: none; }
.buy__brand b { color: var(--brand-2); font-weight: 700; }
.buy__brand:hover b { text-decoration: underline; }
@media (max-width: 640px) {
  .brands { grid-template-columns: 1fr; gap: 10px; }
  .brand-head { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* Акции, производитель: под разделом — «Отдельно» (стулья, зеркала, столешницы…) */
.subcats:has(+ .subcats--items) { margin-bottom: 12px; }
.subcats--items { align-items: center; margin-top: -2px; }
.subcats__label { margin-right: 4px; color: var(--muted); font-size: 14px; font-weight: 600; }
.pill--sm { height: 36px; padding: 0 14px; font-size: 13px; }

/* «Оформление» → вкладки «Акции» и «Производители»: таблетки разделов, шапка акций, плитки производителей */
.subcats .pill { height: var(--pill-h, 42px); border-color: var(--pill-line, var(--line)); border-radius: var(--pill-r, 999px); background: var(--pill-bg, var(--surface)); color: var(--pill-text, inherit); font-size: var(--pill-fs, 14px); }
.subcats .pill--sm { height: calc(var(--pill-h, 42px) - 6px); font-size: calc(var(--pill-fs, 14px) - 1px); }
.subcats .pill em { color: var(--pill-count, var(--muted)); }
.subcats .pill.is-active { border-color: var(--pill-active-bg, var(--ink)); background: var(--pill-active-bg, var(--ink)); color: var(--pill-active-text, #fff); }
.subcats .pill.is-active em { color: var(--pill-active-text, rgba(255, 255, 255, .6)); }
.subcats__label { color: var(--pill-label, var(--muted)); }
.special-head p { color: var(--special-note, var(--ink-2)); }
.special-head__badge { background: var(--special-badge, var(--sale)); color: var(--special-badge-text, #fff); font-size: var(--special-badge-fs, 14px); }
.toolbar__count { color: var(--toolbar-count, var(--muted)); }
.brand { border-color: var(--bt-line, var(--line)); border-radius: var(--bt-r, var(--radius)); background: var(--bt-bg, var(--surface)); }
.brand:hover { border-color: var(--bt-hover, var(--brand-2)); }
.brand__text b { color: var(--bt-name, inherit); font-size: var(--bt-name-fs, 16px); font-weight: var(--bt-name-fw, 800); }
.brand__text small { color: var(--bt-count, var(--muted)); }
.brand__mark { background: var(--bt-mark-bg, #e3eef8); color: var(--bt-mark-text, var(--brand)); }
.brand-letters button.is-active { border-color: var(--bt-letter-bg, var(--brand)); background: var(--bt-letter-bg, var(--brand)); color: var(--bt-letter-text, #fff); }
.brand-desc { margin: 0 0 24px; }

/* ---------- Фильтр каталога (product/category_filter.tpl): значения — ссылками, выбор по AJAX ---------- */
.mpf-catalog { margin-top: 8px; }
.mpf-catalog .catalog__body { min-width: 0; transition: opacity .15s; }
.mpf-catalog.is-loading .catalog__body { opacity: .45; pointer-events: none; }
.mpf-catalog.is-loading .mpf { cursor: progress; }
.mpf fieldset { padding: 14px 0; }
.mpf fieldset:last-of-type { border-bottom: 0; }
.mpf legend { margin-bottom: 0; }
.mpf-legend { display: flex; align-items: center; gap: 6px; width: 100%; padding: 2px 0 8px; border: 0; background: none; font: inherit; font-weight: 800; font-size: 14px; color: inherit; text-align: left; cursor: pointer; }
.mpf-legend small { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 11px; }
.mpf-legend .i { margin-left: auto; width: 16px; height: 16px; transform: rotate(180deg); transition: transform .15s; color: var(--muted); }
.mpf-group.is-collapsed .mpf-legend { padding-bottom: 0; }
.mpf-group.is-collapsed .mpf-legend .i { transform: none; }
.mpf-group.is-collapsed .mpf-values, .mpf-group.is-collapsed .mpf-price { display: none; }
.mpf-check { color: inherit; text-decoration: none; line-height: 1.3; }
.mpf-check > span { min-width: 0; overflow-wrap: anywhere; }
.mpf-box { flex: none; width: 20px; height: 20px; border: 1.5px solid #b9c5d1; border-radius: 6px; background: #fff no-repeat center / 0 0; transition: background-color .15s, border-color .15s, background-size .15s; }
.mpf-check:hover .mpf-box { border-color: var(--brand-2); }
.mpf-check.is-on .mpf-box { border-color: var(--brand); background-color: var(--brand); background-size: 14px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.mpf-check.is-on > span { font-weight: 600; }
.mpf-check.is-off { opacity: .45; cursor: default; }
.mpf [data-mpf-extra], .mpf [data-mpf-hidden] { display: none !important; }
.mpf .is-all [data-mpf-extra]:not([data-mpf-hidden]) { display: flex !important; }
.mpf .is-all .mpf-swatch[data-mpf-extra]:not([data-mpf-hidden]) { display: inline-grid !important; }
.mpf-more { display: block; }
.mpf-search { width: 100%; height: 34px; margin: 0 0 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; }
.mpf-swatches { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 2px; }
.mpf-swatch { position: relative; display: inline-grid; width: 32px; height: 32px; text-decoration: none; }
.mpf-swatch i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c, var(--surface-2, #eef2f6)) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); font-style: normal; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; transition: box-shadow .15s, transform .15s; }
.mpf-swatch > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mpf-swatch:hover i { transform: scale(1.08); }
.mpf-swatch.is-on i { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
.mpf-swatch.is-off { opacity: .3; cursor: default; }
.mpf-swatch.is-off:hover i { transform: none; }
.mpf-buttons { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 2px; }
.mpf-btn { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: inherit; text-decoration: none; font-size: 13px; line-height: 1.2; transition: border-color .15s, background .15s; }
.mpf-btn em { font-style: normal; color: var(--muted); font-size: 11px; }
.mpf-btn:hover { border-color: var(--brand-2); }
.mpf-btn.is-on { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 600; }
.mpf-btn.is-off { opacity: .4; cursor: default; }
.mpf-btn.is-off:hover { border-color: var(--line); }
.mpf .is-all .mpf-btn[data-mpf-extra]:not([data-mpf-hidden]) { display: inline-flex !important; }
.mpf-price .range input { font: inherit; font-size: 14px; }
.mpf-slider { position: relative; height: 28px; margin-top: 8px; }
.mpf-slider::before { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: linear-gradient(to right, var(--line) var(--a, 0%), var(--brand) var(--a, 0%), var(--brand) var(--b, 100%), var(--line) var(--b, 100%)); }
.mpf-slider input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.mpf-slider input::-webkit-slider-runnable-track { background: none; }
.mpf-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); cursor: pointer; pointer-events: auto; }
.mpf-slider input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); cursor: pointer; pointer-events: auto; }
.mpf-slider input::-moz-range-track { background: none; }
.mpf-applied { align-items: center; margin: -6px 0 16px; }
.mpf-applied .pill--sm { gap: 6px; padding: 0 10px 0 12px; color: inherit; text-decoration: none; }
.mpf-applied .mpf-chip { gap: 4px; padding: 0 6px 0 12px; }
.mpf-applied .mpf-chip a { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 6px 0 8px; border-radius: 999px; color: inherit; font-weight: 600; text-decoration: none; transition: background .15s; }
.mpf-applied .mpf-chip a:hover { background: var(--surface); }
.mpf-applied .mpf-chip a i { font-style: normal; color: var(--muted); font-size: 16px; line-height: 1; }
.mpf-applied .mpf-chip a:hover i { color: var(--danger, #c0392b); }
.mpf-reset { margin-left: 4px; }
.mpf-empty { padding-top: 24px; }
.mpf-empty .toolbar__filters { margin: 0 auto 16px; }
@media (min-width: 961px) {
  .mpf-catalog .catalog__side { overflow-x: hidden; }
}
@media (max-width: 960px) {
  .mpf-catalog { margin-top: 0; }
  .mpf { display: flex; flex-direction: column; }
  .mpf .filters__top { position: sticky; top: 0; z-index: 2; background: var(--surface); }
  .mpf .filters__foot { margin-top: auto; }
  .mpf-catalog.is-loading .filters__foot .btn--accent { opacity: .6; }
}
.mpf-applied .mpf-chip-label { font-style: normal; font-weight: 400; color: var(--muted); }

/* Стикеры товара (Настройки шаблона → Стикеры): плашки рядком в углу фото — скидка первой, затем стикеры по порядку */
.card__chips { position: absolute; top: 12px; left: 12px; right: 56px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.card__chips .chip, .card__media .card__chips .chip--hit { position: static; left: auto; }
.chip--sticker { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery__chips { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }

/* Файлы для скачивания — вкладка «Инструкции и файлы» на странице товара (Настройки шаблона → Файлы) */
.pfiles { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pfile { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg, #fff); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.pfile:hover { border-color: var(--brand-3); box-shadow: 0 6px 18px rgba(19, 53, 80, .08); }
.pfile__ext { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 54px; border-radius: 8px 16px 8px 8px; background: var(--brand); color: #fff; font: 800 11px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.pfile__ext--pdf { background: #c0392b; }
.pfile__thumb { flex: none; width: 54px; height: 54px; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.pfile__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pfile__body b { font-weight: 700; overflow-wrap: anywhere; }
.pfile__body small { color: var(--muted, #6b7785); font-size: 13px; }
.pfile__get { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--brand-2); font-weight: 700; font-size: 14px; }
.pfile__get svg { width: 20px; height: 20px; }
.pfile:hover .pfile__get { color: var(--accent); }
@media (max-width: 560px) { .pfile__get { font-size: 0; gap: 0; } .pfile { padding: 10px 12px; gap: 12px; } }

/* Декларации и сертификаты о соответствии (546-ФЗ) — перед характеристиками и/или в конце описания (Настройки шаблона → Декларации и сертификаты) */
.pcert { margin-top: 18px; }
.pcert h3 { margin: 0 0 8px; font-size: 16px; }
.pspecs > .pcert { margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.pspecs > .pcert:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.pspecs > .pcert h3 { font-size: 22px; margin-bottom: 10px; }
.buy > .pcert { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.buy > .pcert h3 { font-size: 15px; }
.buy > .pcert .pcert__item { font-size: 13px; }
.pcert__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pcert__item { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.pcert__item svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--brand-2); }
.pcert__item b { font-weight: 700; overflow-wrap: anywhere; }
.pcert__meta { color: var(--muted, #6b7785); }
.pcert__item a { font-weight: 700; white-space: nowrap; }
.pcert__exempt { margin: 0; color: var(--muted, #6b7785); font-size: 14px; }

/* Плашка наличия с оформлением статуса (Склад → Статусы наличия → «Оформление на сайте»): цвета — переменные из product.tpl */
.stock-badge[style*="--sb-bg"] { background: var(--sb-bg); color: var(--sb-color); border-color: color-mix(in srgb, var(--sb-accent) 35%, transparent); }
.stock-badge[style*="--sb-bg"] .stock-badge__icon { background: var(--sb-accent); }
.stock-badge[style*="--sb-bg"] .stock-badge__icon::after { border-color: var(--sb-accent); }
.stock-badge--still .stock-badge__icon::after { display: none; }

/* Личный кабинет: вход, регистрация, страницы кабинета (account/*.tpl) */
.acc-alert { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.45; }
.acc-alert .i { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.acc-alert--ok { background: #e3f3e9; color: #1e6b3f; }
.acc-alert--err { background: #fdeceb; color: #a1261d; }
.auth { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; max-width: 1040px; margin: 8px auto 40px; }
.auth--wide { max-width: 1180px; }
.auth--single { grid-template-columns: minmax(0, 480px); justify-content: center; }
.auth__card, .auth__side { padding: 32px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.auth__card h1 { margin: 0 0 6px; font-size: 28px; }
.auth__card > .muted { margin: 0 0 20px; }
.auth__side { background: var(--surface-2); box-shadow: none; }
.auth__side h2 { margin: 0 0 16px; font-size: 20px; }
.auth__side .muted { margin: 20px 0 8px; }
.auth__form { display: grid; gap: 16px; }
.auth__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.auth__label-row { display: flex; justify-content: space-between; gap: 12px; }
.auth__label-row a { font-weight: 500; color: var(--brand-2); }
.auth__pass { position: relative; display: block; }
.auth__pass input { padding-right: 96px; }
.auth__eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--surface-2); font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.auth__perks { display: grid; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; font-size: 15px; }
.auth__perks li { display: flex; gap: 10px; align-items: flex-start; }
.auth__perks .i { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--surface); color: var(--ok); }
.auth__foot { margin: 20px 0 0; font-size: 14px; }
.acc-form .check { font-weight: 400; font-size: 14px; color: var(--ink); }
.acc-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.acc-choices > div { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.acc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 40px; }
.acc--guest { grid-template-columns: minmax(0, 1fr); }
.acc__nav { position: sticky; top: calc(var(--header-h, 0px) + 16px); padding: 12px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.acc__user { display: flex; align-items: center; gap: 12px; padding: 8px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); min-width: 0; }
.acc__user > span:last-child { display: grid; min-width: 0; }
.acc__user b, .acc__user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc__user small { color: var(--muted); font-size: 12px; }
.acc__avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: 18px; }
.acc__menu { display: grid; gap: 2px; }
.acc__menu a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-sm); color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.acc__menu a .i { width: 18px; height: 18px; color: var(--muted); }
.acc__menu a:hover { background: var(--surface-2); color: var(--ink); }
.acc__menu a.is-active { background: var(--surface-2); color: var(--ink); font-weight: 700; }
.acc__menu a.is-active .i { color: var(--brand); }
.acc__logout { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important; }
.acc__head { margin-bottom: 18px; }
.acc__head h1 { margin: 0; }
.acc-card { padding: 20px 24px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.acc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; max-width: 760px; }
.acc-form--one { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.acc-form__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.acc-switch { display: flex; align-items: center; gap: 12px; font-size: 15px; cursor: pointer; }
.acc-switch input { position: absolute; opacity: 0; }
.acc-switch span { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--line); transition: background .2s; }
.acc-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.acc-switch input:checked + span { background: var(--brand); }
.acc-switch input:checked + span::after { transform: translateX(18px); }
.acc-switch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(38, 106, 159, .25); }
.acc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.acc-tile { display: grid; gap: 6px; padding: 20px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: transform .15s; }
.acc-tile:hover { transform: translateY(-2px); }
.acc-tile .muted { font-size: 13px; }
.acc-tile__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: var(--surface-2); color: var(--brand); }
.acc-tile__icon .i { width: 22px; height: 22px; }
.acc-addresses { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.acc-address { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.acc-address__icon { width: 22px; height: 22px; color: var(--brand); }
.acc-address__text { font-size: 14px; line-height: 1.5; }
.acc-address__actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.acc-orders { display: grid; gap: 10px; }
.acc-order { display: grid; grid-template-columns: 1.4fr 1fr .8fr .8fr auto; gap: 16px; align-items: center; color: inherit; text-decoration: none; }
.acc-order:hover { box-shadow: 0 0 0 1.5px var(--brand-2), var(--shadow); }
.acc-order__id { display: grid; }
.acc-order__total { text-align: right; }
.acc-order__go { width: 18px; height: 18px; color: var(--muted); transform: rotate(-90deg); }
.acc-order__pay { display: flex; gap: 8px; margin: -4px 0 6px 24px; }
.acc-status { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 600; }
.acc-status--lg { font-size: 15px; padding: 6px 14px; }
.acc-pager { margin-top: 20px; }
.acc-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
.acc-info__item { display: grid; gap: 4px; padding: 16px 18px; font-size: 14px; }
.acc-info__item--wide { grid-column: span 2; }
.acc-h2 { margin: 24px 0 12px; font-size: 20px; }
.acc-lines { padding: 8px 24px; }
.acc-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.acc-line__name { display: grid; gap: 2px; }
.acc-line__act { display: flex; gap: 6px; }
.acc-totals { display: grid; justify-content: end; gap: 6px; padding: 14px 0 8px; }
.acc-totals__row { display: flex; justify-content: space-between; gap: 40px; font-size: 14px; }
.acc-totals__row--final { font-size: 18px; }
.acc-history { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.acc-history li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 16px; border-left: 3px solid var(--line); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.acc-history li:first-child { border-left-color: var(--brand); }
.acc-history p { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; }
@media (max-width: 960px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .acc { grid-template-columns: minmax(0, 1fr); }
  .acc__nav { position: static; padding: 8px; }
  .acc__menu { display: flex; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .acc__menu a { flex: none; white-space: nowrap; padding: 8px 12px; }
  .acc__logout { margin-top: 0; border-top: 0; }
  .acc__user { display: none; }
}
@media (max-width: 640px) {
  .auth__card, .auth__side { padding: 22px 18px; }
  .auth__card h1 { font-size: 24px; }
  .auth__grid, .acc-form { grid-template-columns: minmax(0, 1fr); }
  .acc-order { grid-template-columns: 1fr auto; }
  .acc-order__count, .acc-order__go { display: none; }
  .acc-info__item--wide { grid-column: auto; }
  .acc-line { grid-template-columns: minmax(0, 1fr) auto; }
  .acc-line__qty { grid-column: 1; }
  .acc-line__act { grid-column: 1 / -1; }
  .acc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .acc-tile { padding: 14px; }
  .acc-tile .muted { display: none; }
}
.done-page { margin: 8px 0 40px; }
.done-page h1 { margin: 0; font-size: 28px; }
.done-page__text { max-width: 560px; color: var(--ink-2); line-height: 1.55; }
.done-page__text p { margin: 0 0 8px; }
.done-page__text br:first-child { display: none; }
.qty--area { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.buy__area { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.buy__area b { color: var(--ink); }
.buy__notice { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: #fff4e5; color: #8a4b00; font-size: 14px; line-height: 1.45; border-left: 3px solid #f0a020; }
.is-required > span:first-child, .is-required .buy__label { color: var(--accent); }
.is-required .colors, .is-required select, .is-required input[type=text] { box-shadow: 0 0 0 2px rgba(220, 40, 40, .25); border-radius: 10px; }
.is-check .colors, .is-check select, .is-check input[type=text] { box-shadow: 0 0 0 2px #f0a020; border-radius: 10px; transition: box-shadow .4s; }

/* Модуль «по размеру» (module_item.tpl): «Указать размер» → ширина × глубина, расчёт, «Добавить в корзину»; строки в корзине */
.mod-area { display: grid; gap: 8px; margin-top: 10px; }
.mod-area__form { display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: var(--surface-2); }
.mod-area, .mod-area__form { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.mod-area .btn { white-space: normal; height: auto; min-height: var(--b-h, 40px); padding-top: 6px; padding-bottom: 6px; line-height: 1.2; }
.mod-area__size { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: end; }
.mod-area__size i { font-style: normal; color: var(--muted); padding-bottom: 9px; }
.mod-area label { display: grid; gap: 3px; min-width: 0; font-size: 11px; font-weight: 600; color: var(--muted); }
.mod-area input { width: 100%; min-width: 0; height: 36px; padding: 0 8px; border: 1.5px solid var(--field-line, var(--line)); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14px; color: var(--ink); }
.mod-area input:focus { outline: none; border-color: var(--brand-2); }
.mod-area__calc { margin: 0; font-size: 13px; color: var(--ink-2); }
[data-area-open].is-open { background: var(--surface-2); }
.mod-area__in { display: grid; gap: 6px; }
.mod-area__in b { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ok); white-space: nowrap; }
.mod-area__in b .i { width: 16px; height: 16px; stroke-width: 2.4; }
.mod-area__in ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mod-area__in li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 4px 4px 4px 10px; border-radius: 8px; background: var(--surface-2); font-size: 12px; color: var(--ink-2); }
.mod-area__in li button { display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.mod-area__in li button .i { width: 14px; height: 14px; stroke-width: 2.2; }
.mod-area__in li button:hover { background: #fdeceb; color: var(--accent); }