/* Стиль «Три колонки» для всего сайта (03.10.2026, макеты — docs/site-redesign-2026-10-03).
 * Один приём на каждой странице: тёмная панель (графит + фото с затемнением), жирный заголовок,
 * красная кнопка звонка и зелёная WhatsApp. Слой только перекрашивает существующую SSR-вёрстку:
 * разметка, адреса и тексты (а значит, и казахский перевод) не меняются. Грузится последним. */
:root{--x-ink:#14181f;--x-on-dark:#d0d4da;--x-on-dark-2:#aeb4be;--x-wa:#127a3e;--x-wa-h:#0e6232;--x-glow:radial-gradient(circle,rgba(224,33,40,.38),rgba(224,33,40,0) 70%)}

/* ── Шапка ─────────────────────────────────────────────── */
.util{background:var(--x-ink);color:var(--x-on-dark-2);border-bottom:0}
.util .container>span,.util .r span{color:var(--x-on-dark-2)}
.util svg{color:var(--x-on-dark-2)}
.head .logo{font-weight:900;letter-spacing:-.03em}
.head .wa{background:var(--x-wa);color:#fff;border-radius:12px}
.head .wa:hover{background:var(--x-wa-h)}
.nav .cat-btn{background:var(--x-ink);color:#fff;border-radius:12px}

/* ── Подвал ────────────────────────────────────────────── */
.foot{background:var(--x-ink);color:var(--x-on-dark-2);border-top:0}
.foot .logo,.foot h2{color:#fff}
.foot a{color:var(--x-on-dark)}
.foot a:hover{color:#fff}
.foot p,.foot .fc-row{color:var(--x-on-dark-2)}
.foot .fc-row a{color:#fff;font-weight:800}
.foot svg{color:#ff9ea1}
.foot-bot{background:var(--x-ink);color:#8a919c;border-top:1px solid rgba(255,255,255,.1)}

/* ── Общие заголовки ───────────────────────────────────── */
.svc-hero-h1,.cat-head h1,.dx-head h1,.pdb-head h1{font-weight:900;letter-spacing:-.03em}

/* ── Страницы услуг: тёмная панель с фото ─────────────── */
.svc-hero.sc-service-hero{position:relative;display:flex;align-items:flex-end;min-height:460px;padding:32px;overflow:hidden;background:var(--x-ink);color:#fff;border:0;border-radius:20px;box-shadow:none}
.sc-service-hero>.sc-campaign-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;background:var(--x-ink);z-index:0}
.svc-hero.sc-service-hero:after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(15,18,23,.95) 0,rgba(15,18,23,.84) 48%,rgba(15,18,23,.4) 100%)}
.sc-service-hero .sc-service-copy{position:relative;z-index:1;max-width:700px}
.sc-service-hero .svc-badge{color:#ff9ea1;background:transparent;padding-left:0;border:0}
.sc-service-hero .svc-hero-h1{color:#fff;font-size:44px;line-height:1.05;font-weight:900;letter-spacing:-.03em}
.sc-service-hero p{color:var(--x-on-dark)}
.sc-service-hero .svc-hero-price{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.sc-service-hero .svc-hero-price b{color:#fff}
.sc-service-hero .svc-hero-price span,.sc-service-hero .svc-hero-price small{color:var(--x-on-dark-2)}
.sc-service-hero .svc-problems h2{color:#fff}
.sc-service-hero .svc-problem{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.sc-service-hero .svc-problem:hover{background:rgba(255,255,255,.16)}
.sc-service-hero .svc-problem svg{color:#ff9ea1}
.sc-service-hero .svc-hbtn{font-size:15px;min-height:48px;padding:10px 18px;border-radius:12px}
.sc-service-hero .svc-hbtn.primary{background:var(--red);color:#fff;border:0}
.sc-service-hero .svc-hbtn.primary:hover{background:var(--red-d);color:#fff}
.sc-service-hero .svc-hbtn.ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.35)}
.sc-service-hero .svc-hbtn.ghost:hover{background:rgba(255,255,255,.2);color:#fff}
.svc-kid{border-radius:14px}
/* Срок и гарантия: красный 13px на сером давал 4.43:1 — тёмно-красный проходит AA. */
.svc-prop b{color:var(--red-d)}
.svc-kid:hover{box-shadow:inset 0 0 0 1.5px var(--red)}

/* ── Заголовок раздела каталога, подбора по модели и контактов ── */
.cat-head,.dx-head{position:relative;overflow:hidden;background:var(--x-ink);color:#fff;border:0;border-radius:20px;padding:28px 30px}
.cat-head:before,.dx-head:before{content:"";position:absolute;right:-90px;top:-120px;width:340px;height:340px;border-radius:50%;background:var(--x-glow);pointer-events:none}
.cat-head>*,.dx-head>*{position:relative}
.cat-head h1,.dx-head h1{color:#fff}
.cat-head .cat-count,.cat-head span,.cat-head #catCount,.dx-head .dx-sub{color:var(--x-on-dark)}
.cat-head .cat-count{font-family:inherit;margin-bottom:0}
.cat-head a{color:#fff}
.cn-wrap .cat-head{border:0;border-radius:20px;padding:28px 30px;background:var(--x-ink);margin-bottom:14px}
.cn-wrap .cn-lead{border:0;padding:0;background:transparent;border-radius:0}

/* ── Карточки товаров ──────────────────────────────────── */
.pcard{border-radius:14px}
.pcta .add{border-radius:12px}

/* ── Карточка товара ───────────────────────────────────── */
.pdb-order .ord{border-radius:20px}
.pd-price b{font-size:34px;font-weight:900;letter-spacing:-.02em}
.pd-stock.pre{background:#fff7e0;border-radius:12px;padding:10px 12px}
.ord-buy .add{min-height:50px;border-radius:12px;font-weight:700}

/* ── Контакты: тёмные карточки филиалов ───────────────── */
.cn-wrap .cn-card{position:relative;overflow:hidden;background:var(--x-ink);color:#fff;border:0;border-radius:20px;padding:24px}
.cn-wrap .cn-card:before{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:var(--x-glow);pointer-events:none}
.cn-wrap .cn-card>*{position:relative}
.cn-card .cn-num{background:var(--red);color:#fff}
.cn-card .cn-addr{color:#fff;font-size:24px;font-weight:900;letter-spacing:-.02em}
.cn-card .cn-meta{color:var(--x-on-dark-2)}
.cn-card .cn-tel{color:#fff}
.cn-card .cn-map{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}
.cn-card .cn-more{color:#ff9ea1}

/* ── Промо-блоки страниц (о компании, вакансии, статьи): та же тёмная панель ── */
.sc-campaign{position:relative;background:var(--x-ink);color:#fff;border:0;border-radius:20px}
.sc-campaign:before{content:"";position:absolute;right:-80px;top:-100px;width:300px;height:300px;border-radius:50%;background:var(--x-glow);pointer-events:none}
.sc-campaign>*{position:relative}
.sc-campaign .sc-campaign-copy h2{color:#fff;font-weight:900;letter-spacing:-.02em}
.sc-campaign .sc-campaign-copy p{color:var(--x-on-dark)}
.sc-campaign .sc-campaign-cta{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:12px}
.sc-campaign .sc-campaign-cta:hover{background:#fff;color:var(--x-ink)}
.sc-campaign .sc-campaign-cta:focus-visible{outline:3px solid #fff}
.sc-campaign>.sc-campaign-image{background:rgba(255,255,255,.06)}
.sc-campaign-marker{background:rgba(255,255,255,.08);color:#ff9ea1}

/* ── Страница модели устройства ───────────────────────── */
.dv-head{position:relative;overflow:hidden;background:var(--x-ink);color:#fff;border-radius:20px;padding:26px 30px}
.dv-head:before{content:"";position:absolute;right:-90px;top:-120px;width:340px;height:340px;border-radius:50%;background:var(--x-glow);pointer-events:none}
.dv-head>*{position:relative}
.dv-head h1{color:#fff;font-weight:900;letter-spacing:-.03em}
.dv-head .dv-sub{color:var(--x-on-dark)}
.dv-head .dv-act{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.25)}
.dv-head .dv-act:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.5)}
.dv-head .dv-act .svg-ic{color:#ff9ea1}
.dv-head .dv-act i{color:var(--x-on-dark)}
/* Ссылка в примечании под прайсом была 15px в высоту — палец промахивается (WCAG: не меньше 24px). */
.dv-note a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600}

.art .art-cover.sc-generated-cover{border-left:0;border-radius:20px}
/* ── Простые страницы: заголовки в общем весе ─────────── */
.page-wrap>h1,.favwrap>h1,.blog-index>h1,.vac-wrap>h1,.art>h1,.nf h1{font-weight:900;letter-spacing:-.03em}

/* ── Главная ──────────────────────────────────────────── */
.fc-cats-h h2,.pr-h,#landing .sec h2,.rc-info h2{font-weight:900;letter-spacing:-.03em}
/* «Нужна деталь» — панель с фото; «Выберите филиал» — тёмная карточка */
.home-campaigns .hc-support article{border:0;border-radius:20px;min-height:240px;position:relative;overflow:hidden;background:var(--x-ink);color:#fff}
.home-campaigns .hc-parts{display:flex;align-items:flex-end}
.home-campaigns .hc-parts>img{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:0;object-fit:cover;background:var(--x-ink)}
.home-campaigns .hc-parts:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,18,23,.94) 0,rgba(15,18,23,.75) 50%,rgba(15,18,23,.25) 100%)}
.home-campaigns .hc-parts>div{position:relative;z-index:1;padding:28px}
.home-campaigns .hc-branches:before{content:"";position:absolute;right:-80px;top:-100px;width:300px;height:300px;border-radius:50%;background:var(--x-glow)}
.home-campaigns .hc-branches>*{position:relative}
.home-campaigns .hc-support h2{color:#fff;font-weight:900;letter-spacing:-.03em}
.home-campaigns .hc-support p{color:var(--x-on-dark)}
.home-campaigns .hc-support a{color:#ff9ea1}
.home-campaigns .hc-branches li{color:#fff;font-size:17px;font-weight:700;border-color:rgba(255,255,255,.14)}
.home-campaigns .hc-branches li:before{color:#ff9ea1}
/* «Ремонт и техника»: плитки — фото на всю карточку */
.fc-cats .fc-cat{border-radius:20px}
.fc-cats .fc-cat-visual{position:relative;display:flex;align-items:flex-end;min-height:170px;padding:20px;overflow:hidden;background:var(--x-ink);border:0}
.fc-cats .fc-cat-visual .fc-detail-art{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:cover;background:var(--x-ink)}
.fc-cats .fc-cat-visual:after{content:"";position:absolute;inset:0;background:var(--x-shade,linear-gradient(180deg,rgba(15,18,23,.1) 0,rgba(15,18,23,.55) 50%,rgba(15,18,23,.92) 100%))}
.fc-cats .fc-cat-visual .lbl{position:relative;z-index:1;color:#fff;font-weight:800;font-size:18px;padding:0}
.fc-cats .fc-cat.repair .rbtn{background:var(--red);color:#fff}
/* Баннеры из админки: заголовки были чёрными на тёмном */
.banner{border-radius:20px}
.banner h3{color:#fff;font-weight:900}
.banner .bbtn{border-radius:12px;min-height:44px;display:inline-flex;align-items:center}
/* Поиск модели теперь внутри панели «Нужна деталь?» */
.home-campaigns .hc-parts .hx-search{margin:4px 0 6px;max-width:420px}
.home-campaigns .hc-parts .hx-search label{color:var(--x-on-dark)}
.home-campaigns .hc-parts .hc-search-row{border:0;border-radius:12px;overflow:hidden}
.home-campaigns .hc-parts .hc-search button{background:var(--red);border-radius:0}
/* «О компании»: две плашки вместо четырёх */
#homeUsp.usp-2{grid-template-columns:repeat(2,1fr)}
/* Заявка: тёмный блок, форма — белая карточка */
.repair-cta{background:transparent}
.rc-grid{position:relative;overflow:hidden;background:var(--x-ink);color:#fff;border:0;border-radius:20px;box-shadow:none}
.rc-grid:before{content:"";position:absolute;left:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;background:var(--x-glow)}
.rc-grid>*{position:relative}
.rc-info h2{color:#fff}
.rc-info .rc-lead{color:var(--x-on-dark)}
.rc-tags a,.rc-tags span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.rc-tags a svg,.rc-tags span svg{color:#ff9ea1}
.rc-info .repair-links a{color:#ff9ea1}
.rc-info .rc-trust{color:#6fdc98}
.rc-info .rc-quiz{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.4)}
.rc-info .rc-quiz:hover{background:rgba(255,255,255,.2)}
.rc-form{background:#fff;color:var(--ink);border-radius:16px;padding:24px}
/* Как проходит ремонт */
.pr-step{border-radius:16px}
.pr-step::before{color:var(--red)}
/* Нижний призыв: тёмная панель, кнопки как во всём стиле */
.cta-band{position:relative;overflow:hidden;background:var(--x-ink);border-radius:20px}
.cta-band:before{content:"";position:absolute;right:-90px;top:-130px;width:360px;height:360px;border-radius:50%;background:var(--x-glow)}
.cta-band>*{position:relative}
.cta-band h2{color:#fff}
.cta-band p{color:var(--x-on-dark);opacity:1}
.cta-band .b a{background:var(--x-wa);color:#fff;border-radius:12px;min-height:48px;display:inline-flex;align-items:center;gap:8px}
.cta-band .b a:hover{background:var(--x-wa-h)}
.cta-band .b a.ghost{background:var(--red);color:#fff}
.cta-band .b a.ghost:hover{background:var(--red-d)}

/* ── Мелочи доступности (аудит главной 03.10.2026) ── */
/* Галочка согласия была 13×13 px — промах пальцем отправлял форму без согласия или не отправлял вовсе. */
.rc-consent input[type=checkbox],.consent input[type=checkbox]{width:20px;height:20px;flex:none;margin:0;accent-color:var(--red)}
.rc-consent,.consent{align-items:center}
/* Ссылка на политику и названия товаров были 18–20 px в высоту — ниже порога WCAG AA (24 px). */
.rc-consent a,.consent a{display:inline-flex;align-items:center;min-height:24px}
.pcard .pb-name{display:block;min-height:24px}
/* 11 px в карточке товара (артикул, бренд, наличие, характеристики) читается с трудом на телефоне. */
.pcard .pb-art,.pcard .pb-brand,.pcard .st--sm,.pcard .pb-spec span,.head .phone small{font-size:12px}

/* «Рекомендуем» на главной: метка на карточке — графит, чтобы не спорить с красной «Хит».
   Без звёздочки: звёзды на этом сайте читаются как рейтинг, а рейтингов нет (CLAUDE.md). */
.badge.rec{background:var(--x-ink);color:#fff}
/* Плашка наличия внутри общего столбика меток не должна позиционироваться сама: правило
   `.pimg .st{position:absolute}` клало «Уточняйте» поверх «Рекомендуем» в тот же угол. */
.pcard .pimg .pbadges .st{position:static;top:auto;left:auto}
/* Подпись заглушки «Фото готовим» была #8d95a1 на #f6f7f9 — 2.8:1; стала 5.7:1 (WCAG AA). */
.noimg .ni-s{color:#5b6573}

/* «Рекомендуем» — компактная строка: 6 маленьких карточек, остальное прокруткой вбок (просьба Сергея:
   «сейчас они очень большие»). В карточке — фото, название в две строки, цена и кнопка. */
.rec-row{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 5*12px)/6);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.rec-row .pcard{scroll-snap-align:start;border-radius:14px}
.rec-row .pimg{aspect-ratio:1/1;padding:10px}
.rec-row .pimg img{object-fit:contain}
.rec-row .pbody{padding:10px 10px 12px;gap:4px}
.rec-row .pb-brand,.rec-row .pb-art,.rec-row .pb-spec{display:none}
.rec-row .pb-name{font-size:13px;line-height:1.3;min-height:34px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rec-row .pb-price b{font-size:16px}
.rec-row .pcta a,.rec-row .pcta button{display:flex;align-items:center;justify-content:center;min-height:40px;font-size:13.5px;padding:0 10px;line-height:1.2}
.rec-row .pbadges{top:8px;left:8px;gap:4px}
.rec-row .badge,.rec-row .pbadges .st{font-size:11px;padding:3px 7px}
.rec-row:focus-visible{outline:3px solid var(--focus,#2563eb);outline-offset:4px}
@media(max-width:1024px){.rec-row{grid-auto-columns:calc((100% - 3*12px)/4)}}
/* «Хиты» и «Новинки» — компактнее (просьба Сергея 03.10): 6 в ряд вместо 4, текст мельче, без артикула. */
#homeHits,#homeNew{grid-template-columns:repeat(6,1fr);gap:12px}
#homeHits .pimg,#homeNew .pimg{aspect-ratio:1/1;padding:10px}
#homeHits .pimg img,#homeNew .pimg img{object-fit:contain}
#homeHits .pbody,#homeNew .pbody{padding:10px 10px 12px;gap:4px}
#homeHits .pb-art,#homeNew .pb-art{display:none}
#homeHits .pb-name,#homeNew .pb-name{font-size:13px;line-height:1.3;min-height:34px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#homeHits .pb-price b,#homeNew .pb-price b{font-size:16px}
#homeHits .pcta a,#homeHits .pcta button,#homeNew .pcta a,#homeNew .pcta button{display:flex;align-items:center;justify-content:center;min-height:40px;font-size:13.5px;padding:0 10px;line-height:1.2}
#homeHits .pbadges,#homeNew .pbadges{top:8px;left:8px;gap:4px}
@media(max-width:1099px){#homeHits,#homeNew{grid-template-columns:repeat(3,1fr)}}
/* «Популярные категории» — горизонтальные карточки: фото 72px слева, название и число справа. */
#homeCats{gap:12px}
#homeCats .pc-card{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:12px;row-gap:2px;align-items:center;padding:10px;border-radius:14px}
#homeCats .pc-art{grid-row:1/4;grid-column:1;width:72px;height:72px;aspect-ratio:auto;margin:0;border-radius:10px}
#homeCats .pc-fallback svg{width:60%;height:60%}
#homeCats .pc-card .nm{grid-column:2;overflow-wrap:normal;word-break:normal;font-size:14.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#homeCats .pc-hint{grid-column:2;font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#homeCats .pc-bottom{grid-column:2;padding-top:2px}
#homeCats .pc-arrow{width:26px;height:26px;font-size:16px}

@media(max-width:760px){.rec-row{grid-auto-columns:42%;margin-right:-16px;padding-right:16px}}

@media(max-width:760px){
 /* Шапка на телефоне: было пять рядов (183px до навигации), стало два.
    Ряд 1 — логотип, языки, номер; ряд 2 — поиск и значки. Звонок и корзина дублируются
    в нижней панели, но номер оставлен на виду: половина обращений — один тап по номеру. */
 .head .container{display:grid;grid-template-columns:auto auto 1fr auto;grid-template-areas:"logo lang . phone" "search search search icons";align-items:center;gap:8px 6px;padding:10px 16px;min-height:0}
 .head .logo{grid-area:logo;font-size:19px}
 .head .langsw{grid-area:lang;font-size:12px!important;margin:0!important}
 .head .phone{grid-area:phone;justify-self:end;font-size:14px;white-space:nowrap;margin:0}
 .head .phone small{display:none}
 .head .search{grid-area:search;display:flex;min-width:0;margin:0}
 .head .search input{flex:1 1 auto;min-width:0;width:auto}
 .head .search button{flex:none}
 .head .icons{grid-area:icons;display:flex;gap:4px;margin:0}
 .head .icons>a,.head .icons>button{width:40px;height:40px}
 /* «Сравнение» — ссылка в никуда (href="#"); на узком экране она отнимала место у поиска. */
 .head .icons>a[href="#"]{display:none}
 /* На главной значки стоят прямо в шапке, без обёртки .icons (public/index.html). */
 .head .container:not(:has(.icons)){grid-template-columns:auto auto 1fr auto auto;grid-template-areas:"logo lang . phone phone" "search search search fav acc"}
 .head .container>.acc.fav-link{grid-area:fav;justify-self:end}
 .head .container>.acc:not(.fav-link){grid-area:acc}
 .head .container>.acc{width:40px;height:40px;margin:0}
 .head .container>.cb-btn,.head .container>.wa{display:none}
 .svc-hero.sc-service-hero{min-height:0;padding:20px;border-radius:16px}
 .svc-hero.sc-service-hero:after{background:linear-gradient(180deg,rgba(15,18,23,.78) 0,rgba(15,18,23,.94) 100%)}
 .sc-service-hero .svc-hero-h1{font-size:30px}
 .cat-head,.dx-head,.cn-wrap .cat-head{padding:20px;border-radius:16px}
 .cn-card .cn-addr{font-size:21px}
 .dv-head{padding:20px;border-radius:16px}
 .sc-campaign{border-radius:16px}
 .home-campaigns .hc-support article{min-height:220px;border-radius:16px}
 .home-campaigns .hc-parts>div{padding:20px}
 .fc-cats .fc-cat-visual{min-height:140px;padding:14px}
 .fc-cats .fc-cat-visual .lbl{font-size:15px}
 .rc-form{padding:16px}
 #homeUsp.usp-2{grid-template-columns:1fr}
 #homeHits,#homeNew{grid-template-columns:1fr 1fr;gap:10px}
 #homeCats{grid-template-columns:1fr;gap:8px}
 #homeCats .pc-card{grid-template-columns:52px minmax(0,1fr);column-gap:12px;padding:8px 10px}
 #homeCats .pc-art{width:52px;height:52px}
 #homeCats .pc-card .nm{font-size:13.5px}
 #homeCats .pc-hint{display:none}
}