/* Окна Хаус — внутренние страницы нового дизайна (общие стили).
   Цвета, шрифты, шапка и подвал — как у новой главной (glavnaya/template.html). */

@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/onest-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/onest-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/unbounded-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/unbounded-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#15161A;--ink-2:#2C2E35;--text:#4A4E57;--muted:#5E626C;--muted-2:#6A6E78;
  --line:#ECEDF1;--line-2:#DADDE3;--bg-soft:#F3F4F7;--bg-img:#E9ECF0;
  --red:#D70024;--red-dark:#B5001E;--red-soft:#FCE8EC;--yellow:#FFC700;--star:#FFB800;
  --head:'Unbounded','Segoe UI',system-ui,sans-serif;
  --body:'Onest','Segoe UI',system-ui,-apple-system,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
  --gutter:clamp(16px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:#FFFFFF;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--red)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-family:var(--head);font-weight:600;letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:1376px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:200;padding:10px 16px;border-radius:10px;background:var(--ink);color:#FFFFFF}
.skip:focus{top:12px;color:#FFFFFF}
.red{color:var(--red)}
section[id],footer[id]{scroll-margin-top:84px}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 24px;border-radius:14px;border:0;font-family:var(--body);font-size:16px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;text-align:center}
.btn svg{flex:none}
.btn-red{background:var(--red);color:#FFFFFF;transition:background-color .2s ease}
.btn-red:hover{background:var(--red-dark);color:#FFFFFF}
.btn-ink{background:var(--ink);color:#FFFFFF;transition:background-color .2s ease}
.btn-ink:hover{background:var(--ink-2);color:#FFFFFF}
.btn-ghost{border:1.5px solid #D5D8DF;background:transparent;color:var(--ink);transition:border-color .2s ease}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-sm{height:48px;padding:0 20px;border-radius:12px;font-size:15px}
.btn .free{padding:4px 8px;border-radius:6px;background:var(--yellow);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.btn:active{transform:scale(.98)}
@media (max-width:360px){.btn{padding:0 14px;gap:8px;font-size:15px}}
@media (prefers-reduced-motion: reduce){.btn:active{transform:none}}

/* ---------- верхняя полоса и шапка ---------- */
.topbar{background:var(--ink);color:#D9DBE1;font-size:14px}
.topbar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;padding-top:11px;padding-bottom:11px}
.topbar-info{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
.topbar-info span{display:inline-flex;align-items:center;gap:8px}
.topbar nav{display:flex;align-items:center;gap:28px}
.topbar a{color:#D9DBE1}.topbar a:hover{color:#FFFFFF}
.topbar .mail{display:inline-flex;align-items:center;gap:8px;color:#FFFFFF}
.hdr{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px}
.hdr-logo{flex:none;display:block}.hdr-logo img{width:124px;height:auto}
.hdr-nav{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:500}
.hdr-nav a[aria-current="page"]{color:var(--red)}
.hdr-right{display:flex;align-items:center;gap:20px}
.hdr-phone{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.hdr-phone b{font-size:17px;white-space:nowrap}
.hdr-phone span{font-size:13px;color:var(--muted-2)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;border:1.5px solid var(--line-2);background:#FFFFFF;color:var(--ink);cursor:pointer}
.hdr-call{display:none;border:0;background:var(--red);color:#FFFFFF}
.hdr-call:hover{color:#FFFFFF;background:var(--red-dark)}
.hdr-burger{display:none}
/* меню разделов в строку рядом с телефоном и кнопкой не помещается уже ниже ~1300 px (на 1280 шапка вылезала) — там «бургер»;
   1300–1399 px — плотнее */
@media (max-width:1299px){.hdr-nav{display:none}.hdr-burger{display:inline-flex}}
@media (min-width:1300px) and (max-width:1399px){.hdr .wrap{gap:14px}.hdr-nav{gap:14px;font-size:14.5px}.hdr-right{gap:12px}}
@media (max-width:960px){.topbar nav{display:none}}
@media (max-width:640px){.topbar .hide-sm,.hdr-phone,.hdr-cta{display:none}.hdr-call{display:inline-flex}.hdr-right{gap:10px}}

/* ---------- мобильное меню (<dialog>): панель справа ---------- */
.mm{position:fixed;inset:0 0 0 auto;width:min(420px,100%);max-width:100%;height:100%;max-height:100%;margin:0;padding:0;border:0;background:#FFFFFF;color:var(--ink);overscroll-behavior:contain}
.mm::backdrop{background:rgba(21,22,26,.5)}
.mm[open]{animation:mm-in .32s var(--ease-drawer)}
.mm[open]::backdrop{animation:fade-in .2s var(--ease-out)}
@keyframes mm-in{from{transform:translateX(100%)}}
@keyframes fade-in{from{opacity:0}}
@media (prefers-reduced-motion: reduce){.mm[open]{animation:fade-in .2s ease}}
.mm-in{display:flex;flex-direction:column;gap:22px;min-height:100%;padding:14px clamp(16px,4vw,28px) 28px}
.mm-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mm-head span{font-family:var(--head);font-weight:600;font-size:18px;letter-spacing:-.02em}
.mm-links{display:flex;flex-direction:column}
.mm-links > a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 4px;border-bottom:1px solid var(--line);font-size:18px;font-weight:600;transition:color .2s ease}
.mm-links > a svg{color:var(--red)}
.mm-links > a[aria-current="page"],.mm-card[aria-current="page"]{color:var(--red)}
.mm-contact{display:flex;flex-direction:column;gap:12px}
.mm-contact .tel{display:flex;flex-direction:column;gap:2px}
.mm-contact .tel b{font-family:var(--head);font-weight:600;font-size:22px;letter-spacing:-.02em}
.mm-contact .tel span{font-size:13px;color:var(--muted-2)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);font-size:14px;font-weight:600}

/* ---------- общие заголовки разделов ---------- */
/* отступы секций уменьшены 16.10 (просьба «очень большие»): было 64–112 px сверху и снизу, под заголовком 28–48 */
.sec{padding:clamp(36px,4vw,56px) 0}
.sec-soft{background:var(--bg-soft)}
/* две секции одного фона подряд — один отступ между ними, а не два (иначе на сером/белом пустые полосы) */
.sec-soft + .sec-soft,:is(.sec,.sec-tight):not(.sec-soft) + :is(.sec,.sec-tight):not(.sec-soft){padding-top:0}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(20px,2.4vw,32px)}
.sec-head > div{display:flex;flex-direction:column;gap:12px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--red)}
.h2{font-size:clamp(28px,3.2vw,44px);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.sec-head p{max-width:500px;font-size:17px;line-height:1.6;color:var(--text)}

/* ---------- первый экран ---------- */
.np-hero{padding:clamp(20px,3vw,40px) 0 clamp(28px,3.4vw,48px)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--muted-2)}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--red)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}
.np-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,4vw,56px);align-items:stretch;margin-top:clamp(18px,2.5vw,28px)}
.np-hero-text{display:flex;flex-direction:column;justify-content:center;gap:26px;container-type:inline-size}
.rating-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border-radius:999px;background:var(--bg-soft);font-size:min(14px,calc((100cqw - 52px) / 27));font-weight:500;white-space:nowrap;color:#3A3D45}
.rating-chip b{color:var(--red)}
.np-hero h1{font-size:clamp(32px,3.9vw,56px);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.lead{max-width:560px;font-size:18px;line-height:1.6;color:var(--text)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:6px;padding-top:24px;border-top:1px solid #E6E8EC}
.facts b{display:block;font-family:var(--head);font-weight:600;font-size:24px;letter-spacing:-.02em;white-space:nowrap}
.facts span{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:var(--muted)}
.np-hero-media{position:relative;min-height:clamp(420px,42vw,640px);border-radius:28px;overflow:hidden;background:var(--bg-img)}
.np-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero-promo{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:16px;padding:18px 18px 18px 20px;border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 20px 50px -20px rgba(21,22,26,.45)}
.hero-promo .tag{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:64px;padding:0 10px;border-radius:16px;background:var(--red);color:#FFFFFF;font-family:var(--head);font-weight:600;font-size:20px;letter-spacing:-.02em}
.hero-promo div{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.hero-promo b{font-size:16px;line-height:1.3}
.hero-promo a{font-size:14px;font-weight:600;color:var(--red)}
.hero-promo a:hover{color:var(--red-dark);text-decoration:underline}
@media (max-width:960px){
  .np-hero-grid{grid-template-columns:minmax(0,1fr)}
  .np-hero-media{min-height:0;aspect-ratio:4 / 3.4}
  .np-hero-media img{object-position:50% 18%}
}
@media (max-width:640px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
  .np-hero-media{aspect-ratio:4 / 4.4;border-radius:22px}
  .hero-promo{left:10px;right:10px;bottom:10px;padding:12px;gap:12px;border-radius:16px}
  .hero-promo .tag{min-width:52px;height:52px;font-size:16px;border-radius:12px}
  .hero-promo b{font-size:14px}
  .btn-row .btn{flex:1 1 100%}
}

/* ---------- каталог: вкладки и плитки ---------- */
.tabs{display:flex;gap:8px;margin-bottom:24px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);padding-right:24px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line-2);background:#FFFFFF;font-size:15px;font-weight:600;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.tab small{font-size:13px;font-weight:600;color:var(--muted-2);transition:color .2s ease}
/* выбранная вкладка (aria-selected) и выбранная кнопка фильтра (aria-pressed — акции, примеры работ) */
.tab[aria-selected="true"],.tab[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.tab[aria-selected="true"] small,.tab[aria-pressed="true"] small{color:#A9ADB6}
.panel + .panel{margin-top:40px}
.js .panel + .panel{margin-top:0}
.panel-title{margin-bottom:16px;font-size:20px}
.js .panel-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* плитки разделов: колонок столько, чтобы ряды были ровными (шаблон ставит --cd на ПК (до 5), --ct на планшете (до 4), --cm на узком планшете (до 3): 7 → 4+3, 6 → 3+3),
   неполный ряд — по центру */
.tiles{--c:var(--cd,4);--g:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g);margin:0;padding:0;list-style:none}
.tiles > li{flex:0 0 calc((100% - (var(--c) - 1) * var(--g)) / var(--c));min-width:0}
@media (max-width:1100px){.tiles{--c:var(--ct,4)}}
@media (max-width:900px){.tiles{--c:var(--cm,3)}}
.tile{display:flex;flex-direction:column;height:100%;padding:8px;border-radius:22px;background:#FFFFFF;transition:box-shadow .2s ease,transform .2s var(--ease-out)}
.tile-img{position:relative;aspect-ratio:36 / 25;border-radius:16px;overflow:hidden;background:var(--bg-img)}
.tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.tile-body{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 10px 8px}
.tile-body b{display:block;font-size:17px;line-height:1.3}
.tile-body > span > span{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:var(--muted)}
.tile-arrow{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--bg-soft);color:var(--ink);transition:background-color .2s ease,color .2s ease}
@media (hover: hover) and (pointer: fine){
  .tile:hover{color:var(--ink);box-shadow:0 18px 40px -24px rgba(21,22,26,.4);transform:translateY(-3px)}
  .tile:hover .tile-img img{transform:scale(1.05)}
  .tile:hover .tile-arrow{background:var(--red);color:#FFFFFF}
  .tab:hover{border-color:var(--ink)}
}
@media (max-width:640px){
  .tiles{--c:2;--g:10px}
  .tile{padding:6px;border-radius:18px}
  .tile-img{border-radius:13px}
  .tile-body{padding:10px 6px 6px}
  .tile-body b{font-size:15px}
  .tile-body > span > span{font-size:13px}
  .tile-arrow{display:none}
}

/* ---------- сравнение полотен ---------- */
.cmp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cmp-card{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2vw,28px);border-radius:24px;background:var(--bg-soft)}
.cmp-card h3{font-size:22px}
.gloss{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--muted-2)}
.gloss i{display:flex;gap:4px}
.gloss i::before,.gloss i::after,.gloss i span{content:"";display:block;width:22px;height:6px;border-radius:3px;background:var(--line-2)}
.gloss[data-v="1"] i::before,.gloss[data-v="2"] i::before,.gloss[data-v="2"] i span,.gloss[data-v="3"] i::before,.gloss[data-v="3"] i span,.gloss[data-v="3"] i::after{background:var(--red)}
.cmp-card p{font-size:15px;line-height:1.55;color:var(--text)}
.cmp-where{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.cmp-where span{padding:5px 10px;border-radius:8px;background:#FFFFFF;font-size:13px;font-weight:600;color:#3A3D45}
.cmp-card a{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--red)}
.cmp-card a:hover{color:var(--red-dark)}
@media (max-width:1100px){.cmp{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cmp{grid-template-columns:minmax(0,1fr)}}

/* ---------- цены на готовые работы ---------- */
/* все вкладки видны сразу — переносятся на новую строку, а не уезжают за край */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filter[hidden]{display:none}
@media (max-width:640px){
  .filter{gap:6px}
  .filter .tab{height:40px;padding:0 13px;font-size:14px;gap:6px}
  .filter .tab small{font-size:12px}
}
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;margin:0;padding:0;list-style:none}
.works li[hidden]{display:none}
.work{display:flex;flex-direction:column;height:100%;border-radius:24px;overflow:hidden;background:#FFFFFF;transition:box-shadow .2s ease,transform .2s var(--ease-out)}
.work-img{position:relative;aspect-ratio:4 / 3;background:var(--bg-img);overflow:hidden}
.work-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.work-term{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.94);font-size:13px;font-weight:700}
.work-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.work-body h3{font-family:var(--body);font-size:17px;font-weight:600;letter-spacing:0;line-height:1.35}
.work-meta{font-size:14px;color:var(--muted-2)}
.work-price{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.work-price b{font-family:var(--head);font-weight:600;font-size:22px;letter-spacing:-.02em}
.work-price span{font-size:14px;font-weight:600;color:var(--red)}
@media (hover: hover) and (pointer: fine){
  .work:hover{color:var(--ink);box-shadow:0 18px 40px -24px rgba(21,22,26,.4);transform:translateY(-3px)}
  .work:hover .work-img img{transform:scale(1.04)}
}
.works-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:24px;padding:22px 24px;border-radius:22px;background:#FFFFFF}
.works-note p{flex:1 1 420px;font-size:15px;line-height:1.55;color:var(--text)}
.works-note b{color:var(--ink)}

/* ---------- акции ---------- */
.promos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.promo{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:24px;border:1.5px solid var(--line);background:#FFFFFF}
.promo-big{font-family:var(--head);font-weight:600;font-size:34px;line-height:1;letter-spacing:-.03em;color:var(--red)}
.promo b{font-size:16px;line-height:1.35}
.promo p{font-size:14px;line-height:1.5;color:var(--muted)}
@media (max-width:1100px){.promos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.promos{grid-template-columns:minmax(0,1fr)}.promo{flex-direction:row;align-items:center;padding:18px}.promo-big{flex:none;width:84px;font-size:28px}}

/* ---------- было — стало ---------- */
.ba-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,56px);align-items:center}
.ba-text{display:flex;flex-direction:column;gap:20px}
.ba-text > p{font-size:17px;line-height:1.6;color:var(--text)}
.checks{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.checks li{display:flex;gap:12px;font-size:16px;line-height:1.5}
.checks svg{flex:none;margin-top:2px;color:var(--red)}
.ba{position:relative;aspect-ratio:4 / 3;border-radius:28px;overflow:hidden;background:var(--bg-img);touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:ew-resize;--pos:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;pointer-events:none;-webkit-user-drag:none}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#FFFFFF;box-shadow:0 0 12px rgba(0,0,0,.25);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:var(--pos);display:flex;align-items:center;justify-content:center;gap:2px;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#FFFFFF;color:var(--ink);box-shadow:0 8px 24px -6px rgba(0,0,0,.4);pointer-events:none}
.ba-label{position:absolute;top:16px;padding:6px 12px;border-radius:9px;background:rgba(21,22,26,.72);color:#FFFFFF;font-size:13px;font-weight:600;pointer-events:none}
.ba-label.l{left:16px}.ba-label.r{right:16px;background:var(--red)}
.ba input{position:absolute;inset:auto 0 0 0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;pointer-events:none}
.ba:has(input:focus-visible){outline:3px solid var(--yellow);outline-offset:3px}
/* подсказка: при первом показе линия сама качается влево-вправо */
.ba.hint{animation:ba-nudge 1.8s cubic-bezier(.77,0,.175,1) .3s 1}
@property --pos{syntax:'<percentage>';inherits:true;initial-value:50%}
@keyframes ba-nudge{0%,100%{--pos:50%}30%{--pos:36%}68%{--pos:64%}}
@media (prefers-reduced-motion: reduce){.ba.hint{animation:none}}
@media (max-width:960px){.ba-grid{grid-template-columns:minmax(0,1fr)}.ba{border-radius:22px}}

/* ---------- этапы монтажа ---------- */
.steps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.phase{padding:clamp(20px,2.4vw,32px);border-radius:28px;background:#FFFFFF}
.phase-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.phase-head h3{font-size:22px}
.phase-head span{font-size:14px;font-weight:600;color:var(--muted-2)}
.steps{margin:0;padding:0;list-style:none}
.step{display:grid;grid-template-columns:44px minmax(0,1fr) 84px;gap:16px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--red-soft);color:var(--red);font-family:var(--head);font-weight:600;font-size:16px}
.step b{display:block;font-size:17px;line-height:1.35}
.step p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--text)}
.step img{width:84px;height:84px;border-radius:14px;object-fit:cover;background:var(--bg-img)}
@media (max-width:1100px){.steps-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.step{grid-template-columns:40px minmax(0,1fr);gap:14px}.step img{display:none}.step-n{width:40px;height:40px}}

/* ---------- отзывы с Яндекс Карт (_yandex.tpl) — как на главной: панель рейтинга + две ленты, едут влево с разной скоростью ----------
   В ленте набор ×3, сдвиг на треть длины — без шва (отступ между карточками — margin-right, чтобы треть была ровно одним набором).
   Под курсором и при фокусе лента стоит; reduce-motion — не едет, листается пальцем. Клик по отзыву — окно с полным текстом (site.js). */
.rv-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:20px;align-items:stretch}
.rv-panel{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:clamp(24px,3vw,36px);border-radius:28px;background:var(--red);color:#FFFFFF}
.rv-src{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#FFE3E8}
.rv-score{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 18px}
.rv-panel .num{font-family:var(--head);font-weight:600;font-size:clamp(84px,9vw,132px);line-height:.88;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.rv-panel .stars{display:inline-flex;gap:4px;padding-bottom:6px;color:#FFC700}
.rv-panel p{position:relative;max-width:300px;font-size:15px;line-height:1.5;color:#FFE3E8}
.rv-panel .btn{position:relative;margin-top:auto;align-self:flex-start;background:#FFFFFF;color:var(--ink);height:50px;border-radius:14px;font-size:15px}
.rv-panel .btn .i{color:var(--red)}
.rv-panel .btn:hover{background:var(--ink);color:#FFFFFF}
.rv-bgstar{position:absolute;right:-100px;bottom:-120px;width:380px;height:380px;color:rgba(255,255,255,.16);pointer-events:none;animation:rv-spin 60s linear infinite}
@keyframes rv-spin{to{transform:rotate(360deg)}}
.rv-panel .stars .i{transition:opacity .3s var(--ease-out),transform .45s cubic-bezier(.34,1.56,.64,1)}
.rv-panel[data-yr="wait"] .stars .i{opacity:0;transform:scale(.4)}
.rv-panel[data-yr="in"] .stars .i:nth-child(1){transition-delay:150ms}
.rv-panel[data-yr="in"] .stars .i:nth-child(2){transition-delay:240ms}
.rv-panel[data-yr="in"] .stars .i:nth-child(3){transition-delay:330ms}
.rv-panel[data-yr="in"] .stars .i:nth-child(4){transition-delay:420ms}
.rv-panel[data-yr="in"] .stars .i:nth-child(5){transition-delay:510ms}
.rv-side{display:flex;flex-direction:column;gap:20px;min-width:0}
.rv-rows{display:flex;flex-direction:column;gap:12px}
.rv-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
.rv-belt{display:flex;width:max-content;animation:rv-marquee 60s linear infinite}
.rv-belt--fast{animation-duration:40s}
@keyframes rv-marquee{to{transform:translateX(-33.3333%)}}
.rv-row:focus-within .rv-belt{animation-play-state:paused}
.rv{flex:none;display:flex;flex-direction:column;gap:10px;width:340px;margin:0 12px 0 0;padding:16px 18px;border-radius:18px;background:var(--bg-soft);cursor:pointer;transition:box-shadow .2s ease,background-color .2s ease}
.sec-soft .rv{background:#FFFFFF}
.rv:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.rv-who{display:flex;align-items:center;gap:10px}
.rv-ava{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--red-soft);color:var(--red);font-family:var(--head);font-weight:600;font-size:15px}
.rv-nm{display:flex;flex-direction:column;gap:1px;min-width:0}
.rv-nm b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-nm span{font-size:12px;color:var(--muted)}
.rv .stars{margin-left:auto;display:inline-flex;gap:1px;color:#FFB800}
.stars .i.off{color:var(--line-2)}
.rv-text{margin:0;font-size:14px;line-height:1.5;color:var(--text);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
@media (hover: hover) and (pointer: fine){
  .rv-row:hover .rv-belt{animation-play-state:paused}
  .rv:hover{background:#FFFFFF;box-shadow:0 12px 28px -18px rgba(21,22,26,.35)}
}
@media (max-width:1100px){.rv-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.rv{width:280px}}
@media (prefers-reduced-motion: reduce){
  .rv-bgstar,.rv-belt{animation:none}
  .rv-row{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .rv[aria-hidden="true"]{display:none}
  .rv-panel[data-yr="wait"] .stars .i{transform:none}
}
/* окно с полным отзывом */
.rvm{width:min(560px,calc(100% - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:24px;background:#FFFFFF;color:var(--ink)}
.rvm::backdrop{background:rgba(10,11,14,.6)}
.rvm[open]{animation:rvm-in .25s var(--ease-out)}
@keyframes rvm-in{from{opacity:0;transform:scale(.96)}}
.rvm figure{display:flex;flex-direction:column;gap:16px;margin:0;padding:24px 26px 26px}
.rvm .rv-who{gap:12px}
.rvm .rv-ava{width:44px;height:44px;font-size:17px}
.rvm .rv-nm b{font-size:17px;white-space:normal}
.rvm .rv-nm span{display:inline-flex;align-items:center;gap:8px;font-size:13px}
.rvm .stars{display:inline-flex;gap:1px;color:#FFB800}
.rvm blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--text);white-space:pre-line}
.rvm-close{margin-left:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:12px;background:var(--bg-soft);color:var(--ink);cursor:pointer}
.rvm-src{font-size:13px;color:var(--muted)}
.rvm-src a{color:var(--red);font-weight:600}
@media (prefers-reduced-motion: reduce){.rvm[open]{animation:none}}

/* ---------- вопросы ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,4vw,64px);align-items:start}
.faq-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:18px}
.faq-side p{font-size:17px;line-height:1.6;color:var(--text)}
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{border-radius:20px;background:var(--bg-soft);transition:background-color .2s ease}
.faq details[open]{background:#FFFFFF;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font-size:17px;font-weight:600;line-height:1.4;cursor:pointer;list-style:none;border-radius:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;position:relative;width:32px;height:32px;border-radius:10px;background:#FFFFFF;transition:background-color .2s ease}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:1px;background:var(--ink);transition:transform .2s var(--ease-out)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i{background:var(--red)}
.faq details[open] summary i::before,.faq details[open] summary i::after{background:#FFFFFF}
.faq details[open] summary i::after{transform:rotate(0deg)}
.faq details > div{padding:0 22px 22px;font-size:16px;line-height:1.6;color:var(--text)}
.faq details > div p + p{margin-top:10px}
@media (hover: hover) and (pointer: fine){.faq details:not([open]):hover{background:#ECEEF2}}
@media (max-width:960px){.faq-grid{grid-template-columns:minmax(0,1fr)}.faq-side{position:static}}

/* ---------- заявка ---------- */
.cta{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;gap:40px;padding:clamp(24px,5vw,64px);border-radius:32px;background:var(--red);color:#FFFFFF}
.cta-deco{position:absolute;right:-120px;top:-140px;pointer-events:none}
.cta-text{position:relative;flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:22px}
.cta-text .badge{align-self:flex-start;padding:6px 12px;border-radius:8px;background:var(--yellow);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cta-text h2{font-size:clamp(30px,3.6vw,50px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.cta-text > p{max-width:500px;font-size:18px;line-height:1.6}
.cta-contacts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:6px}
.cta-contacts .tel{display:flex;flex-direction:column;gap:2px;color:#FFFFFF}
.cta-contacts .tel b{font-family:var(--head);font-weight:600;font-size:24px;letter-spacing:-.02em}
.cta-contacts .tel span{font-size:14px;color:#FFE3E8}
.pill-white{display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.6);color:#FFFFFF;font-size:14px;font-weight:600;transition:background-color .2s ease,color .2s ease}
.pill-white:hover{background:#FFFFFF;color:var(--red)}
.form{position:relative;flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:16px;padding:clamp(22px,3vw,36px);border-radius:24px;background:#FFFFFF;color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.form-title{font-family:var(--head);font-weight:600;font-size:20px;letter-spacing:-.02em}
.field{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600;color:#3A3D45}
.field input{width:100%;height:52px;padding:0 16px;border-radius:12px;border:1.5px solid var(--line-2);background:#FFFFFF;color:var(--ink);font-family:inherit;font-size:16px;font-weight:400}
.field input:focus{outline:none;border-color:var(--ink)}
.field input[aria-invalid="true"]{border-color:var(--red)}
.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.field-err{font-size:13px;font-weight:500;color:var(--red)}
.field-err:empty{display:none}
.form fieldset{margin:0;padding:0;border:0;min-width:0}
.form legend{padding:0;margin-bottom:10px;font-size:14px;font-weight:600;color:#3A3D45}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;height:42px;padding:0 15px;border-radius:999px;border:1.5px solid var(--line-2);background:#FFFFFF;font-size:14px;font-weight:600;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.chip input:focus-visible + span{outline:3px solid var(--yellow);outline-offset:2px}
@media (hover: hover) and (pointer: fine){.chip:hover span{border-color:var(--ink)}}
.form .btn{width:100%;margin-top:4px}
.form .btn[aria-busy="true"]{opacity:.7;cursor:progress}
.form-note{font-size:13px;line-height:1.5;color:var(--muted-2)}
.form-note a{color:#3A3D45;text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-done{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:12px 0}
.form-done .ok{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:#E7F6EC;color:#1C8C47}
.form-done b{font-family:var(--head);font-weight:600;font-size:22px;letter-spacing:-.02em}
.form-done p{font-size:16px;line-height:1.55;color:var(--text)}
.form-fail{padding:12px 14px;border-radius:12px;background:var(--red-soft);color:#8F0019;font-size:14px;line-height:1.5}
.form-fail a{color:#8F0019;font-weight:700;text-decoration:underline}
@media (max-width:480px){.field-row{grid-template-columns:minmax(0,1fr)}.cta{border-radius:24px}}

/* ---------- подвал ---------- */
.foot{background:var(--ink);color:#C9CCD3}
.foot a{color:#C9CCD3}.foot a:hover{color:#FFFFFF}
.foot .wrap{padding-top:72px;padding-bottom:32px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:40px}
.foot-col{display:flex;flex-direction:column;gap:12px;font-size:15px}
.foot-col > span{margin-bottom:4px;font-weight:600;color:#FFFFFF}
.foot-about{gap:18px}
.foot-about img{width:132px;height:auto}
.foot-about p{font-size:15px;line-height:1.6;color:#A9ADB6}
.foot-pill{padding:8px 14px;border-radius:999px;border:1px solid #34363D;font-size:14px;font-weight:500}
.foot-tel{font-family:var(--head);font-weight:600;font-size:19px;letter-spacing:-.02em;color:#FFFFFF !important}
.foot-hours{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px;line-height:1.45}
.foot-hours dt{color:#8E929C}.foot-hours dd{margin:0}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;margin-top:56px;padding-top:24px;border-top:1px solid #2A2C33;font-size:14px;color:#8E929C}
.foot-bottom a{color:#A9ADB6}

/* ---------- нижняя панель на телефоне ---------- */
/* появляется, когда первый экран ушёл вверх; прячется у формы заявки (site.js) */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);visibility:hidden;transition:transform .25s var(--ease-out),visibility 0s linear .25s}
.dock .btn{flex:1;height:50px;padding:0 12px;font-size:15px;border-radius:12px}
.dock.show{transform:none;visibility:visible;transition:transform .25s var(--ease-out)}
@media (max-width:760px){.dock{display:flex}.foot .wrap{padding-bottom:96px}}
@media (prefers-reduced-motion: reduce){.dock,.dock.show{transition:none}}

/* ===================================================================================================
   Страницы движка (Smarty, tpl-nd/design/*.tpl): меню, окна заявок, тексты из админки, цены, калькулятор,
   квиз, галерея, команда, контакты. Склеивается после site.css (build.py), иконки дописывает build.py.
   =================================================================================================== */

/* ---------- иконки: маска по SVG, цвет — currentColor ---------- */
.i{display:inline-block;flex:none;width:18px;height:18px;background-color:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;vertical-align:-3px}
/* соцсети в кнопках: значок в цвете бренда (на красном фоне — белый, как текст) */
.soc{margin-right:8px}
.soc-vk{color:#0077FF}
.soc-tg{color:#229ED9}
.soc-max{color:#7B5CFA}
.pill-white .soc{color:currentColor}
.pill,.foot-pill{transition:border-color .2s ease,background-color .2s ease}
.foot-pill{display:inline-flex;align-items:center}
@media (hover: hover) and (pointer: fine){.pill:hover{border-color:var(--ink)}.foot-pill:hover{border-color:#5A5D66;background:#1F2126}}
.i-14{width:14px;height:14px}.i-16{width:16px;height:16px}.i-22{width:22px;height:22px}.i-26{width:26px;height:26px}
.icon-btn .i{width:22px;height:22px}
.hdr-call .i{width:20px;height:20px}
.topbar-info .i{color:#FF4D6A}
.red-soft{color:#FF4D6A}

/* ---------- шапка: пункты с выпадающим меню разделов ---------- */
.hdr .wrap{position:relative}
.hdr-nav{gap:2px}
.nav-link{display:inline-flex;align-items:center;height:44px;padding:0 12px;border-radius:10px;font-weight:500;white-space:nowrap;transition:color .15s ease}
.nav-link[aria-current="page"],.nav-item.current > .nav-link{color:var(--red)}
.nav-item{display:flex;align-items:center}
.nav-item > .nav-link{padding-right:0}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:44px;border:0;border-radius:10px;background:none;color:var(--muted);cursor:pointer}
.nav-toggle .i{width:16px;height:16px;transition:transform .2s var(--ease-out)}
.nav-item.open .nav-toggle .i{transform:rotate(180deg)}
.mega{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% - 12px);padding-top:12px;z-index:50;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s var(--ease-out),transform .16s var(--ease-out),visibility 0s linear .16s}
.nav-item.open .mega{opacity:1;visibility:visible;transform:none;transition:opacity .16s var(--ease-out),transform .16s var(--ease-out)}
/* мега-меню: слева группы (вкладки), в центре карточки подразделов с фото, справа — фото раздела и замер.
   Панели групп лежат в одной ячейке — высота меню не прыгает при переключении; фото грузятся при первом открытии (site.js). */
.mega-in{display:grid;grid-template-columns:220px minmax(0,1fr) 260px;gap:24px;padding:20px;border-radius:24px;background:#FFFFFF;box-shadow:0 30px 70px -30px rgba(21,22,26,.4),0 0 0 1px var(--line)}
.mega-in.no-promo{grid-template-columns:220px minmax(0,1fr)}
.mega-side{display:flex;flex-direction:column;gap:4px;min-width:0;padding:4px 0}
.mega-head{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:4px 12px;font-family:var(--head);font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.mega-head .i{color:var(--red);transition:transform .2s var(--ease-out)}
.mega-tabs{display:flex;flex-direction:column;gap:2px}
.mega-tab{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:none;font:inherit;font-size:15px;font-weight:600;line-height:1.25;color:#2A2C33;text-align:left;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.mega-tab small{flex:none;min-width:26px;padding:3px 8px;border-radius:999px;background:var(--bg-soft);font-size:12px;font-weight:600;color:var(--muted);text-align:center;transition:background-color .15s ease,color .15s ease}
.mega-tab[aria-selected="true"]{background:var(--red-soft);color:var(--red)}
.mega-tab[aria-selected="true"] small{background:#FFFFFF;color:var(--red)}
.mega-tab:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.mega-all{margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding:14px 12px 4px;border-top:1px solid var(--line);font-size:15px;font-weight:600;color:var(--red)}
.mega-all:hover{color:var(--red-dark)}
.mega-panels{display:grid;min-width:0}
.mega-panel{grid-area:1 / 1;min-width:0}
.mega-panel[hidden]{display:block;visibility:hidden}
.mega-cards{display:grid;grid-template-columns:repeat(var(--mc,4),minmax(0,1fr));gap:8px;align-content:start;margin:0;padding:0;list-style:none}
.mega-card{display:flex;flex-direction:column;gap:10px;height:100%;padding:8px;border-radius:16px;color:var(--ink);transition:background-color .15s ease}
.mega-card:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.mega-img{display:block;height:116px;border-radius:12px;overflow:hidden;background:var(--bg-img)}
.mega-img img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease,transform .4s var(--ease-out)}
.mega-img img.is-loaded{opacity:1}
.mega-t{display:flex;flex-direction:column;gap:3px;padding:0 4px 4px}
.mega-t b{font-size:15px;font-weight:600;line-height:1.3}
.mega-t span{font-size:13px;line-height:1.4;color:var(--muted)}
.mega-promo{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:8px;min-height:300px;padding:20px;border-radius:18px;overflow:hidden;background:var(--ink);color:#FFFFFF}
.mega-promo img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease}
.mega-promo img.is-loaded{opacity:1}
.mega-promo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,22,26,0) 25%,rgba(21,22,26,.88) 100%)}
.mega-badge{padding:5px 10px;border-radius:999px;background:var(--yellow);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.02em}
.mega-promo b{font-family:var(--head);font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-.02em}
.mega-promo p{margin:0 0 6px;font-size:14px;line-height:1.45;color:#E4E6EB}
@media (hover: hover) and (pointer: fine){
  .mega-tab:hover{background:var(--bg-soft)}
  .mega-tab[aria-selected="true"]:hover{background:var(--red-soft)}
  .mega-card:hover{background:var(--bg-soft)}
  .mega-card:hover .mega-img img{transform:scale(1.05)}
  .mega-head:hover .i{transform:translateX(3px)}
}
@media (max-width:1399px){.mega-in{grid-template-columns:200px minmax(0,1fr) 220px;gap:18px}.mega-img{height:100px}}
@media (prefers-reduced-motion: reduce){.mega-img img,.mega-card:hover .mega-img img{transform:none}
.mega,.nav-item.open .mega{transform:none}}

/* ---------- мобильное меню: разделы раскрываются ---------- */
.mm-links > a,.mm-group > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 4px;border-bottom:1px solid var(--line);font-size:18px;font-weight:600}
.mm-links > a .i{color:var(--red)}
.mm-group > summary,.mm-g > summary{display:block;list-style:none;cursor:pointer}
/* раскладка пункта — во внутреннем span: старые Safari не делают flex у самого summary */
.mm-sum{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mm-group > summary::-webkit-details-marker,.mm-g > summary::-webkit-details-marker{display:none}
.mm-group > summary .i,.mm-g > summary .i{color:var(--red);transition:transform .2s var(--ease-out)}
.mm-group[open] > summary .i-chevron,.mm-g[open] > summary .i-chevron{transform:rotate(180deg)}
/* шапка меню: логотип (ссылка на главную) и крестик; пункты: иконка в квадрате, название, стрелка */
.mm-logo{display:block}
.mm-logo img{display:block;width:auto;height:46px}
.mm-links > a,.mm-group > summary{padding:10px 2px}
.mm-links > a,.mm-group > summary .mm-sum{justify-content:flex-start;gap:14px}
.mm-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--red-soft);color:var(--red)}
.mm-ico .i{width:20px;height:20px}
.mm-l{flex:1;min-width:0}
.mm-group > summary .mm-sum{display:flex;align-items:center}
/* группы внутри раздела: заголовок-кнопка, карточки под ним */
.mm-g + .mm-g{border-top:1px solid var(--line)}
.mm-g > summary.mm-sub-title{margin:0;padding:14px 0}
.mm-g > summary .i{width:14px;height:14px}
.mm-g[open] > .mm-cards{margin-bottom:14px}
/* подразделы в мобильном меню: «весь раздел», подзаголовки групп и карточки с фото в 2 колонки */
.mm-sub{display:flex;flex-direction:column;padding:4px 0 18px;border-bottom:1px solid var(--line)}
.mm-sub .mm-all{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:12px;background:var(--red-soft);font-size:15px;font-weight:600;color:var(--red)}
.mm-sub-title{margin:16px 0 8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.mm-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mm-card{display:flex;flex-direction:column;gap:6px;min-width:0;color:var(--ink)}
.mm-card-img{display:block;aspect-ratio:16 / 10;border-radius:12px;overflow:hidden;background:var(--bg-img)}
.mm-card-img img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease}
.mm-card-img img.is-loaded{opacity:1}
.mm-card-t{font-size:14px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.mm-card:active .mm-card-img{opacity:.85}

/* ---------- окна: заявка (подгружается), видео, фото ---------- */
.modal{width:min(520px,calc(100% - 24px));max-width:none;max-height:calc(100% - 24px);margin:auto;padding:0;border:0;border-radius:26px;background:#FFFFFF;color:var(--ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.5);overflow:auto;overscroll-behavior:contain}
.modal::backdrop{background:rgba(21,22,26,.55)}
.modal[open]{animation:modal-in .25s var(--ease-out)}
.modal[open]::backdrop{animation:fade-in .2s var(--ease-out)}
@keyframes modal-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
@media (prefers-reduced-motion: reduce){.modal[open]{animation:fade-in .2s ease}}
.modal-box{position:relative;padding:clamp(22px,4vw,34px)}
.modal-close{position:absolute;right:14px;top:14px;z-index:2}
.modal-body .form{padding:0;box-shadow:none;border-radius:0}
.modal-body .form-title{padding-right:48px;font-size:22px}
.modal-lead{margin-top:-6px;font-size:15px;line-height:1.55;color:var(--muted)}
.modal-loading{display:flex;align-items:center;justify-content:center;min-height:220px;color:var(--muted-2)}
.modal-product{display:flex;gap:14px;align-items:center;padding:12px;border-radius:16px;background:var(--bg-soft)}
.modal-product img{width:72px;height:72px;object-fit:contain;border-radius:10px;background:#FFFFFF}
.modal-product b{display:block;font-size:16px}
.modal-product span{font-size:14px;color:var(--muted)}
.vm{width:min(1100px,calc(100% - 24px));max-width:none;padding:0;border:0;border-radius:20px;background:#000;overflow:hidden}
.vm::backdrop{background:rgba(10,10,12,.85)}
.vm[open]{animation:modal-in .25s var(--ease-out)}
.vm-frame{position:relative;aspect-ratio:16 / 9;background:#000}
.vm-frame iframe,.vm-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}
.vm-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px 12px 20px;background:#15161A;color:#FFFFFF;font-size:15px;font-weight:600}
.vm-bar .icon-btn{width:42px;height:42px;border:0;background:rgba(255,255,255,.12);color:#FFFFFF}
.lb{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:rgba(10,10,12,.94);color:#FFFFFF}
.lb[open]{display:flex;flex-direction:column;animation:fade-in .2s var(--ease-out)}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;font-size:15px}
.lb-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 64px 24px;touch-action:pan-y}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;-webkit-user-select:none;user-select:none}
.lb .icon-btn{border:0;background:rgba(255,255,255,.12);color:#FFFFFF}
.lb .icon-btn:hover{background:rgba(255,255,255,.22)}
.lb-prev,.lb-next{position:absolute;top:50%;margin-top:-24px}
.lb-prev{left:10px}.lb-next{right:10px}
@media (max-width:640px){.lb-stage{padding:0 8px 16px}.lb-prev,.lb-next{top:auto;bottom:24px;margin:0}}

/* ---------- шапка страницы (хлебные крошки, заголовок, фото) ---------- */
.ph{padding:clamp(20px,3vw,36px) 0 clamp(28px,3.4vw,48px)}
.ph-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:clamp(18px,2.5vw,28px)}
.ph-grid.solo{grid-template-columns:minmax(0,1fr)}
.ph-text{display:flex;flex-direction:column;gap:22px;min-width:0}
.ph h1{font-size:clamp(30px,3.6vw,52px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.ph .lead{max-width:620px}
.ph .lead p + p{margin-top:.6em}
.ph-media{position:relative;aspect-ratio:4 / 3;border-radius:28px;overflow:hidden;background:var(--bg-img)}
.ph-media img{width:100%;height:100%;object-fit:cover}
.ph-media .badge-photo{position:absolute;left:14px;bottom:14px;padding:7px 12px;border-radius:10px;background:rgba(255,255,255,.94);font-size:13px;font-weight:600}
/* шапка «Обшивки балконов» и «Дверей»: фото вровень с текстом */
.ph-top{aspect-ratio:6 / 5}
.ph-top img{object-position:50% 35%}
/* вертикальные фото подразделов ($sImg): почти целиком, как шапка /plastikovye-okna/ */
.ph-tall{aspect-ratio:4 / 4.4}
.ph-tall img{object-position:50% 40%}
@media (max-width:960px){.ph-tall{aspect-ratio:1 / 1}}
/* телефон и планшет: фото раздела сразу под заголовком (чип рейтинга и h1 — первыми, затем фото, затем текст, кнопки, цифры).
   Колонка текста «растворяется» (display:contents), её отступ 22px переходит на общую колонку; ширину для cqw у чипа даёт она же. */
@media (max-width:960px){
  .ph-mtop{display:flex;flex-direction:column;align-items:stretch;gap:22px;container-type:inline-size}
  .ph-mtop > .ph-text,.ph-mtop > .np-hero-text{display:contents}
  .ph-mtop > .ph-text > *,.ph-mtop > .np-hero-text > *{order:2}
  .ph-mtop > .ph-text > :is(h1,.rating-chip),.ph-mtop > .np-hero-text > :is(h1,.rating-chip){order:0}
  .ph-mtop > :not(.ph-text):not(.np-hero-text){order:1}
}
/* двери: фото по цвету профиля — стопка, видно одно (как на главной) */
.ph-media[data-colors] img{position:absolute;inset:0;opacity:0;transition:opacity .35s var(--ease-out)}
.ph-media[data-colors] img.on{opacity:1}
.ph-sw{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;gap:9px;max-width:calc(100% - 28px);padding:11px 14px 13px;border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 10px 26px -14px rgba(17,19,26,.35)}
.ph-sw[hidden]{display:none}
.ph-sw-l{font-size:13px;font-weight:600;color:var(--muted)}
.ph-sw-l b{color:var(--ink)}
.ph-sw-row{display:flex;flex-wrap:wrap;gap:10px}
.sw{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(17,19,26,.14);cursor:pointer;transition:box-shadow .15s ease,transform .12s var(--ease-out)}
.sw[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(17,19,26,.14),0 0 0 2px #FFFFFF,0 0 0 4px var(--ink)}
.sw:active{transform:scale(.92)}
.sw:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
@media (hover: hover) and (pointer: fine){.sw:hover{transform:scale(1.1)}}
@media (prefers-reduced-motion: reduce){.sw,.sw:hover,.sw:active{transform:none}}
.plus-list ul,.plus-list{margin:0;padding:0;list-style:none}
.plus-list ul{display:grid;gap:10px}
.plus-list li{position:relative;padding-left:32px;font-size:16px;line-height:1.5}
.plus-list li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:7px;background:var(--red-soft)}
.plus-list li::after{content:"";position:absolute;left:5px;top:6px;width:12px;height:12px;background:var(--red);-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
@media (max-width:960px){.ph-grid{grid-template-columns:minmax(0,1fr)}.ph-media{border-radius:22px}}

.ph-mosaic{position:relative;display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:8px;aspect-ratio:4 / 3}
.ph-mosaic img{width:100%;height:100%;object-fit:cover;border-radius:16px;background:var(--bg-img)}
.ph-mosaic img:first-child{grid-row:1 / 3;border-radius:24px}
.ph-mosaic .badge-photo{position:absolute;left:14px;bottom:14px;padding:7px 12px;border-radius:10px;background:rgba(255,255,255,.94);font-size:13px;font-weight:600}
.ph .plus-list ul{gap:8px}
.ph .plus-list li{font-size:15px}

/* разделы одного уровня — быстрый переход */
.sibs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 24px 2px 0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.sibs::-webkit-scrollbar{display:none}
.sib{flex:none;display:inline-flex;align-items:center;height:42px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line-2);background:#FFFFFF;font-size:14px;font-weight:600;white-space:nowrap;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.sib:hover{border-color:var(--ink);color:var(--ink)}
.sib[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.sibs-bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;background:#FFFFFF}

/* ---------- текст из админки ---------- */
.prose{max-width:860px;font-size:17px;line-height:1.7;color:var(--text)}
.prose > * + *{margin-top:1em}
.prose h2,.prose h3,.prose h4{margin-top:1.6em;font-family:var(--head);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.prose h2{font-size:clamp(24px,2.4vw,32px)}.prose h3{font-size:22px}.prose h4{font-size:18px}
.prose > :first-child{margin-top:0}
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.prose strong,.prose b{color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--red)}
.prose img{height:auto;border-radius:16px}
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:15px;line-height:1.45;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line)}
.prose tbody,.prose thead{display:table;width:100%;border-collapse:collapse}
.prose th,.prose td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose tr:last-child th,.prose tr:last-child td{border-bottom:0}
.prose th{font-weight:600;color:var(--ink);background:var(--bg-soft)}
.prose td:last-child{white-space:nowrap;font-weight:600;color:var(--ink)}
.prose-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(28px,4vw,64px);align-items:start}
.prose-aside{position:sticky;top:110px;display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:24px;background:var(--bg-soft)}
.prose-aside b{font-family:var(--head);font-weight:600;font-size:20px;letter-spacing:-.02em}
.prose-aside p{font-size:15px;line-height:1.55;color:var(--text)}
@media (max-width:960px){.prose-cols{grid-template-columns:minmax(0,1fr)}.prose-aside{position:static}}

/* ---------- преимущества с иконками ---------- */
.bens{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:12px}
.ben{display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:20px;background:var(--bg-soft)}
.sec-soft .ben{background:#FFFFFF}
.ben-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:15px;background:#FFFFFF;color:var(--red)}
.sec-soft .ben-ico{background:var(--red-soft)}
.ben-ico .i{width:26px;height:26px}
.ben-ico .ico{display:block;width:26px;height:26px}
.ben b{display:block;font-size:16px;line-height:1.3}
.ben div > span{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:var(--muted)}
/* преимущества — анимация как на главной (.oh-adv): появление по очереди при прокрутке (site.js ставит data-reveal и --n),
   иконка прорисовывается линией (_ico.tpl: path с pathLength=1), при наведении карточка приподнимается, иконка краснеет и рисуется заново */
.ben{transition:transform .2s var(--ease-out),background-color .2s ease,box-shadow .2s ease}
.ben-ico{transition:transform .2s var(--ease-out),background-color .2s ease,color .2s ease}
.ben-ico .ico *{stroke-dasharray:1}
.bens[data-reveal="wait"] .ben{opacity:0;transform:translateY(16px)}
.bens[data-reveal="wait"] .ben-ico{transform:scale(.85)}
.bens[data-reveal="wait"] .ben-ico .ico *{stroke-dashoffset:1}
.bens[data-reveal="in"] .ben{transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);transition-delay:calc(var(--n,0) * 70ms)}
.bens[data-reveal="in"] .ben-ico{transition:transform .45s var(--ease-out);transition-delay:calc(var(--n,0) * 70ms + 120ms)}
.bens[data-reveal="in"] .ben-ico .ico *{transition:stroke-dashoffset .7s var(--ease-out);transition-delay:calc(var(--n,0) * 70ms + 200ms)}
@keyframes ben-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (hover: hover) and (pointer: fine){
.ben:hover{background:#FFFFFF;box-shadow:0 16px 36px -20px rgba(21,22,26,.35);transform:translateY(-3px)}
.ben:hover .ben-ico{background:var(--red);color:#FFFFFF;transform:scale(1.06)}
.ben:hover .ben-ico .ico *{animation:ben-draw .6s var(--ease-out)}
}
@media (prefers-reduced-motion: reduce){
.bens[data-reveal="wait"] .ben,.bens[data-reveal="wait"] .ben-ico{transform:none}
.ben-ico .ico *{stroke-dasharray:none;stroke-dashoffset:0;animation:none !important}
.bens[data-reveal="in"] .ben{transition:opacity .3s ease}
.ben:hover,.ben:hover .ben-ico{transform:none}
}

/* ---------- плитки с картинкой 596×400 (окна) ---------- */
.tile-img.wide{aspect-ratio:3 / 2}
.tile-pluses{margin:0;padding:0 10px 12px;list-style:none;font-size:13px;line-height:1.45;color:var(--muted)}
.tile-pluses ul{margin:0;padding:0;list-style:none;display:grid;gap:3px}
.tile-pluses li{position:relative;padding-left:14px}
.tile-pluses li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--red)}

/* ---------- цены (товары с вариантами: профиль, стеклопакет…) ---------- */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:16px}
.prod{display:flex;flex-direction:column;border-radius:24px;background:#FFFFFF;overflow:hidden}
.sec .prod{box-shadow:inset 0 0 0 1.5px var(--line)}
.sec-soft .prod{box-shadow:none}
.prod-img{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4 / 3;padding:18px;background:linear-gradient(180deg,#F7F8FA,#EEF0F3)}
.prod-img img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .2s ease}
.prod-size{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:9px;background:#FFFFFF;font-size:13px;font-weight:700}
.prod-body{flex:1;display:flex;flex-direction:column;gap:14px;padding:18px 20px 20px}
.prod-body h3{font-family:var(--body);font-size:19px;font-weight:700;letter-spacing:0;line-height:1.3}
.var{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;min-width:0}
.var legend{padding:0;margin-bottom:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.var-opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{position:relative;display:inline-flex}
.opt[hidden]{display:none}
.opt input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.opt span{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border-radius:10px;border:1.5px solid var(--line-2);background:#FFFFFF;font-size:13px;font-weight:600;line-height:1.25;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.opt input:checked + span{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.opt input:focus-visible + span{outline:3px solid var(--yellow);outline-offset:2px}
@media (hover: hover) and (pointer: fine){.opt:hover span{border-color:var(--ink)}}
/* подсказка к варианту (site.js: TIPS): белая карточка со стрелкой к варианту; появляется из-под стрелки */
.tip-pop{position:fixed;z-index:60;left:0;top:0;width:max-content;max-width:min(320px,calc(100vw - 32px));padding:14px 16px 15px;border:1px solid var(--line);border-radius:14px;background:#FFFFFF;box-shadow:0 14px 34px rgba(17,19,26,.16),0 2px 6px rgba(17,19,26,.08);font-size:14px;line-height:1.45;color:var(--text);text-align:left;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(4px) scale(.97);transform-origin:var(--ax,50%) 100%;transition:opacity .16s var(--ease-out),transform .16s var(--ease-out),visibility 0s linear .16s}
.tip-pop[data-side="below"]{transform:translateY(-4px) scale(.97);transform-origin:var(--ax,50%) 0}
.tip-pop.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.tip-pop.is-touch.is-on{pointer-events:auto}
.tip-pop::after{content:"";position:absolute;left:var(--ax,50%);bottom:-7px;width:12px;height:12px;margin-left:-6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#FFFFFF;transform:rotate(45deg)}
.tip-pop[data-side="below"]::after{top:-7px;bottom:auto;transform:rotate(225deg)}
.tip-pop b{display:block;margin-bottom:4px;font-size:15px;line-height:1.3;color:var(--ink)}
.tip-pop p{margin:0;color:var(--muted)}
.tip-pop .tip-l{display:block;margin:12px 0 7px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.tip-pop ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.tip-pop li{position:relative;padding-left:26px}
.tip-pop li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:6px;background:var(--red-soft)}
.tip-pop li::after{content:"";position:absolute;left:4px;top:5px;width:10px;height:10px;background:var(--red);-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.tip-pop .tip-n{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:13px}
@media (prefers-reduced-motion: reduce){.tip-pop,.tip-pop[data-side="below"]{transform:none}}
.prod-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.prod-price{display:flex;flex-direction:column}
.prod-price small{font-size:12px;font-weight:600;color:var(--muted-2)}
.prod-price b{font-family:var(--head);font-weight:600;font-size:24px;letter-spacing:-.02em;white-space:nowrap}
.prod-logos{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.prod-logos img{height:18px;width:auto;opacity:.55}
.prod-note{font-size:13px;line-height:1.5;color:var(--muted-2)}
.prices-note{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font-size:14px;color:var(--muted)}
.prices-note span{display:inline-flex;align-items:center;gap:8px}
.prices-note .i{color:#1C8C47}

/* ---------- советы ---------- */
.tips{--c:var(--cd,3);--g:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g);counter-reset:tip}
.tips > .tip{flex:0 0 calc((100% - (var(--c) - 1) * var(--g)) / var(--c));min-width:0}
@media (max-width:1100px){.tips{--c:var(--ct,2)}}
@media (max-width:640px){.tips{--c:1}}
.tip{padding:22px 24px 24px;border-radius:22px;background:#FFF8DD;font-size:15px;line-height:1.6;color:#4B4535;counter-increment:tip}
.tip::before{content:counter(tip);float:left;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 14px 0 0;border-radius:10px;background:var(--yellow);color:var(--ink);font-family:var(--head);font-weight:600;font-size:14px}
.tip-t{display:flex;align-items:center;min-height:32px;margin-bottom:10px;font-size:17px;font-weight:700;line-height:1.3;color:var(--ink)}
.tip p{margin:0}
.tip p + p{margin-top:.5em}

/* ---------- калькулятор потолка ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);padding:clamp(20px,3.5vw,44px);border-radius:32px;background:var(--ink);color:#FFFFFF}
.calc-promo{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center}   /* плашка «Посчитайте окна онлайн» на /plastikovye-okna/ */
.calc h2{color:#FFFFFF}
.calc-text{display:flex;flex-direction:column;gap:18px}
.calc-text > p{font-size:16px;line-height:1.6;color:#C9CCD3}
.calc-field{display:flex;flex-direction:column;gap:10px}
.calc-field label{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:600;color:#E3E5EA}
.calc-field output{font-family:var(--head);font-weight:600;color:#FFFFFF}
.range{width:100%;height:28px;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;--p:25%}
.range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--red) var(--p),#3A3D45 var(--p))}
.range::-moz-range-track{height:6px;border-radius:3px;background:#3A3D45}
.range::-moz-range-progress{height:6px;border-radius:3px;background:var(--red)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:#FFFFFF;border:6px solid var(--red);box-shadow:0 4px 12px rgba(0,0,0,.35)}
.range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#FFFFFF;border:6px solid var(--red)}
.range:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;border-radius:6px}
.calc-room{position:relative;min-height:300px;height:100%;border-radius:24px;background:#1F2026;overflow:hidden}
.calc-floor{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:80%;max-height:80%;border:3px solid var(--red);border-radius:6px;background-color:rgba(215,0,36,.08);background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:20px 20px;transition:width .2s var(--ease-out),height .2s var(--ease-out)}
.calc-floor span{position:absolute;font-size:12px;font-weight:600;color:#C9CCD3;white-space:nowrap}
.calc-floor .w{left:50%;top:-24px;transform:translateX(-50%)}
.calc-floor .l{top:50%;right:-12px;transform:translate(100%,-50%)}
.calc-floor b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:600;font-size:clamp(18px,2vw,26px);color:#FFFFFF}
.calc-result{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding:20px 22px;border-radius:22px;background:#FFFFFF;color:var(--ink)}
.calc-result small{display:block;font-size:13px;font-weight:600;color:var(--muted-2)}
.calc-result b{display:block;margin-top:4px;font-family:var(--head);font-weight:600;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em}
.calc-result p{flex-basis:100%;font-size:13px;line-height:1.5;color:var(--muted-2)}
@media (max-width:960px){.calc,.calc-promo{grid-template-columns:minmax(0,1fr)}.calc-room{height:260px;min-height:0}}

/* ---------- квиз (подбор и расчёт) ---------- */
.quiz{display:flex;flex-direction:column;gap:22px;padding:clamp(20px,3.5vw,44px);border-radius:32px;background:#FFFFFF}
.quiz-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.quiz-top .eyebrow{margin:0}
.quiz-progress{flex:1 1 220px;max-width:360px;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--muted-2)}
.quiz-bar{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.quiz-bar i{display:block;height:100%;border-radius:3px;background:var(--red);transition:width .3s var(--ease-out)}
.quiz-step{display:flex;flex-direction:column;gap:14px}
.js .quiz-step[hidden]{display:none}
.quiz-q{font-family:var(--head);font-weight:600;font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.02em}
.quiz-desc{max-width:760px;font-size:15px;line-height:1.6;color:var(--muted)}
.quiz-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px;margin:6px 0 0;padding:0;border:0}
.quiz-opts.pics{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.qopt{position:relative;display:flex}
.qopt input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.qopt > span{flex:1;display:flex;align-items:center;gap:12px;min-height:58px;padding:12px 16px;border-radius:16px;border:1.5px solid var(--line-2);background:#FFFFFF;font-size:15px;font-weight:600;line-height:1.35;transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.qopt > span::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);background:#FFFFFF;transition:border-color .15s ease,box-shadow .15s ease}
.qopt input[type="checkbox"] + span::before{border-radius:6px}
.qopt input:checked + span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.qopt input:checked + span::before{border-color:var(--red);box-shadow:inset 0 0 0 4px var(--red)}
.qopt input[type="checkbox"]:checked + span::before{background:var(--red) var(--i-check-w) center/14px no-repeat;box-shadow:none}
.qopt input:focus-visible + span{outline:3px solid var(--yellow);outline-offset:2px}
.qopt.pic > span{flex-direction:column;align-items:stretch;gap:10px;padding:8px 8px 12px}
.qopt.pic > span::before{position:absolute;right:16px;top:16px;z-index:1}
.qopt.pic img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:11px;background:var(--bg-img)}
.qopt.pic em{font-style:normal;padding:0 6px}
@media (hover: hover) and (pointer: fine){.qopt:hover > span{border-color:var(--ink)}}
.quiz textarea{width:100%;min-height:120px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line-2);font:inherit;font-size:16px;resize:vertical}
.quiz textarea:focus{outline:none;border-color:var(--ink)}
.quiz-contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;align-items:end}
.quiz-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.quiz-nav .btn{min-width:150px}
.quiz-nav [hidden]{display:none}
.quiz-done{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.no-js-hide{display:none}
.js .no-js-hide:not([hidden]){display:revert}

/* ---------- примеры работ: фильтр, «ещё», карточка без цены ---------- */
.work-price .muted{font-family:var(--body);font-size:15px;font-weight:600;color:var(--muted-2)}
.work-body p{font-size:14px;line-height:1.5;color:var(--muted)}
.work-tags{display:flex;flex-wrap:wrap;gap:6px}
.work-tags span{padding:4px 9px;border-radius:7px;background:var(--bg-soft);font-size:12px;font-weight:600;color:#3A3D45}
/* телефон: примеры работ в 2 колонки — карточка компактнее, описание прячем, название до 3 строк */
@media (max-width:640px){
  .works{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .work{border-radius:16px}
  .work-term{left:6px;top:6px;padding:4px 7px;border-radius:7px;font-size:11px;gap:4px}
  .work-term .i{width:11px;height:11px}
  .work-body{gap:6px;padding:10px 12px 12px}
  .work-body h3{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
  .work-body p,.work-tags{display:none}
  .work-meta{font-size:12px}
  .work-price{flex-wrap:wrap;gap:2px 8px;padding-top:8px}
  .work-price b{font-size:16px}
  .work-price .muted{font-size:13px}
  .work-price span{font-size:12px}
}
.more-row{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:28px}
.more-row small{font-size:14px;color:var(--muted-2)}
.chips-row{display:flex;flex-wrap:wrap;gap:8px}
.chips-row[hidden]{display:none}
.filter-sub{margin:-12px 0 24px}
.filter-sub .tab{height:40px;padding:0 14px;font-size:14px}
@media (max-width:640px){.filter-sub .chips-row{gap:6px}.filter-sub .tab{height:36px;padding:0 12px;font-size:13px}}
.empty{padding:40px 24px;border-radius:24px;background:var(--bg-soft);text-align:center;color:var(--muted)}

/* ---------- карточка работы ---------- */
.wk{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,3.5vw,48px);align-items:start;margin-top:clamp(18px,2.5vw,28px)}
.gal{display:flex;flex-direction:column;gap:10px;min-width:0}
.gal-main{position:relative;display:block;width:100%;padding:0;border:0;aspect-ratio:65 / 40;border-radius:26px;overflow:hidden;background:var(--bg-img);cursor:zoom-in}
.gal-main img{width:100%;height:100%;object-fit:cover}
.gal-count{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:10px;background:rgba(21,22,26,.72);color:#FFFFFF;font-size:13px;font-weight:600}
.gal-thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
.gal-thumb{flex:none;width:96px;height:64px;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:var(--bg-img);cursor:pointer;opacity:.75;transition:opacity .15s ease,border-color .15s ease}
.gal-thumb img{width:100%;height:100%;object-fit:cover}
.gal-thumb[aria-current="true"]{border-color:var(--red);opacity:1}
.gal-thumb:hover{opacity:1}
.gal-video{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:0;border-radius:12px;background:var(--red);color:#FFFFFF;font-size:14px;font-weight:600;cursor:pointer}
.wk-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:18px}
.wk-side h1{font-size:clamp(26px,2.6vw,38px);line-height:1.12;letter-spacing:-.03em}
.wk-price{display:flex;flex-direction:column;gap:2px;padding:18px 20px;border-radius:20px;background:var(--bg-soft)}
.wk-price small{font-size:13px;font-weight:600;color:var(--muted-2)}
.wk-price b{font-family:var(--head);font-weight:600;font-size:30px;letter-spacing:-.02em}
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.spec{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--line)}
.spec small{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.spec small .i{width:14px;height:14px;color:var(--red)}
.spec b{font-size:16px;line-height:1.35}
.spec.wide{grid-column:1 / -1}
.wk-cat{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--red)}
@media (max-width:1024px){.wk{grid-template-columns:minmax(0,1fr)}.wk-side{position:static}}
.wk-solo{grid-template-columns:minmax(0,1fr);max-width:820px}
.wk-solo .wk-side{position:static}

/* ---------- видеоотзывы ---------- */
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:16px;margin:0;padding:0;list-style:none}
.vid{position:relative;display:flex;flex-direction:column;width:100%;padding:0;border:0;border-radius:22px;background:#FFFFFF;text-align:left;overflow:hidden;cursor:pointer;transition:box-shadow .2s ease,transform .2s var(--ease-out)}
.sec .vid{box-shadow:inset 0 0 0 1.5px var(--line)}
.vid-img{position:relative;aspect-ratio:16 / 9;background:#1F2026 center/cover no-repeat}
.vid-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.45))}
.vid-play{position:absolute;left:50%;top:50%;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:var(--red);color:#FFFFFF;box-shadow:0 10px 30px -8px rgba(215,0,36,.7);transition:transform .2s var(--ease-out)}
.vid-play .i{width:22px;height:22px;margin-left:3px}
.vid b{display:block;padding:14px 18px 18px;font-size:16px;line-height:1.35}
@media (hover: hover) and (pointer: fine){.vid:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(21,22,26,.4)}.vid:hover .vid-play{transform:scale(1.07)}}

/* ---------- акции (страница) ---------- */
.akc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));gap:16px}
.akc{display:flex;flex-direction:column;border-radius:26px;background:#FFFFFF;overflow:hidden;box-shadow:inset 0 0 0 1.5px var(--line)}
.akc[hidden]{display:none}
.akc-img{aspect-ratio:2 / 1;background:var(--bg-img)}
.akc-img img{width:100%;height:100%;object-fit:cover}
.akc-body{flex:1;display:flex;flex-direction:column;gap:12px;padding:20px 22px 22px}
.akc-badge{align-self:flex-start;padding:6px 11px;border-radius:9px;background:var(--red);color:#FFFFFF;font-size:13px;font-weight:700}
.akc-body h3{font-family:var(--body);font-size:19px;font-weight:700;letter-spacing:0;line-height:1.3}
.akc-body .txt{font-size:15px;line-height:1.55;color:var(--text)}
.akc-tags{display:flex;flex-wrap:wrap;gap:6px}
.akc-tags span{padding:4px 9px;border-radius:7px;background:var(--bg-soft);font-size:12px;font-weight:600;color:#3A3D45}
.akc .btn{margin-top:auto;align-self:flex-start}

/* ---------- команда и история ---------- */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:16px;margin:0;padding:0;list-style:none}
.member{display:flex;flex-direction:column;gap:6px}
.member img{width:100%;height:auto;aspect-ratio:3 / 4;object-fit:cover;border-radius:22px;background:var(--bg-img);margin-bottom:8px}
.member b{font-size:17px}
.member span{font-size:14px;font-weight:600;color:var(--red)}
.member p{font-size:14px;line-height:1.5;color:var(--muted)}
@media (max-width:640px){.team{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.member img{border-radius:16px}}
.hist{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;margin:0;padding:0;list-style:none;counter-reset:h}
.hist li{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 22px 22px;border-radius:24px;background:#FFFFFF}
.hist b{font-family:var(--head);font-weight:600;font-size:34px;letter-spacing:-.03em;color:var(--red)}
.hist p{font-size:15px;line-height:1.6;color:var(--text)}

/* ---------- контакты ---------- */
.cts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px}
.ct{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:22px;background:var(--bg-soft)}
.ct small{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.ct small .i{color:var(--red)}
.ct b,.ct a.big{font-family:var(--head);font-weight:600;font-size:21px;letter-spacing:-.02em;line-height:1.25}
.ct p{font-size:15px;line-height:1.55;color:var(--text)}
.map{position:relative;aspect-ratio:16 / 7;border-radius:28px;overflow:hidden;background:var(--bg-img)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:760px){.map{aspect-ratio:4 / 3.4}}
.req{width:100%;border-collapse:collapse;font-size:15px}
.req th,.req td{padding:11px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.req th{width:42%;padding-right:16px;font-weight:500;color:var(--muted)}
.req td{font-weight:600;word-break:break-word}

/* ---------- 404 ---------- */
.nf{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:clamp(48px,8vw,120px) 0}
.nf .code{font-family:var(--head);font-weight:600;font-size:clamp(80px,14vw,180px);line-height:.9;letter-spacing:-.05em;color:var(--red)}

/* ---------- заголовок группы плиток, этапы карточками, профили окон ---------- */
.grp-title{margin:0 0 16px;font-size:20px}
.steps-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));gap:12px}
.steps-cards .step{padding:18px;border-top:0;border-radius:22px;background:#FFFFFF}
.sec:not(.sec-soft) .steps-cards .step{background:var(--bg-soft)}
/* профили: фото профиля слева небольшое, справа — логотип, название, главное одной строкой, цифры плитками, «подойдёт», полный текст под катом */
.prof-card{display:grid;grid-template-columns:340px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:stretch;padding:clamp(18px,2.6vw,28px);border-radius:28px;background:#FFFFFF}
.prof-media{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px;padding:16px;border-radius:20px;background:var(--bg-soft)}
.prof-media img{max-width:100%;max-height:310px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.prof-media .prof-logo{position:absolute;left:16px;top:16px;height:18px;max-height:none;opacity:.75}
.prof-body{min-width:0;padding-top:4px}
.prof-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.prof-name{font-family:var(--head);font-weight:600;font-size:clamp(24px,2.4vw,32px);line-height:1.1;letter-spacing:-.02em}
.prof-tag{margin-top:10px;font-size:17px;line-height:1.5;color:var(--muted)}
.prof-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:22px 0 0}
.prof-spec{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:16px;background:var(--bg-soft)}
.prof-spec dt{font-family:var(--head);font-weight:600;font-size:20px;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.prof-spec dd{margin:0;font-size:13px;line-height:1.4;color:var(--muted)}
.prof-fit{display:flex;align-items:flex-start;gap:10px;margin-top:18px;font-size:15px;line-height:1.5}
.prof-fit-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:var(--red-soft);color:var(--red)}
.prof-more{margin-top:18px;border-top:1px solid var(--line)}
.prof-more summary{display:inline-flex;align-items:center;gap:8px;padding:14px 0 4px;font-size:15px;font-weight:600;color:var(--red);cursor:pointer;list-style:none}
.prof-more summary::-webkit-details-marker{display:none}
.prof-more summary .i{transition:transform .2s var(--ease-out)}
.prof-more[open] summary .i{transform:rotate(180deg)}
.prof-more .prof-text{margin-top:10px;color:var(--text)}
.prof-text{font-size:15px;line-height:1.6}
.prof-text p{margin:0}
.prof-text p + p{margin-top:.5em}
@media (max-width:900px){.prof-card{grid-template-columns:minmax(0,1fr)}.prof-media{min-height:0;padding-top:40px}.prof-media img{max-height:240px}}

/* ---------- утилиты ---------- */
.sec-tight{padding:clamp(28px,3.4vw,48px) 0}
.mt-24{margin-top:24px}.mt-40{margin-top:clamp(28px,4vw,40px)}
.center-x{display:flex;justify-content:center}
.h3{font-size:clamp(22px,2.2vw,28px);line-height:1.15;letter-spacing:-.02em}

/* ---------- калькулятор-«корзина» (_wcalc.tpl, site.js [data-wcalc]) — по макету «Окна в квартиру — калькулятор» ---------- */
.wcalc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:24px;align-items:start}
.wcalc-steps{display:flex;flex-direction:column;gap:16px;min-width:0}
.wstep{min-width:0;padding:clamp(20px,2.4vw,28px);border-radius:24px;background:#FFFFFF}
.wstep-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.wstep-h h3{font-family:var(--head);font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-.02em}
.wstep-n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#FFFFFF;font-family:var(--head);font-weight:600;font-size:14px}
.wstep-sub{margin-left:auto;font-size:14px;color:var(--muted)}
.wstep-note{margin-top:16px;font-size:14px;line-height:1.5;color:var(--muted)}
.witems{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(176px,100%),1fr));gap:12px;margin:20px 0 0;padding:0;list-style:none}
.witem{display:flex;flex-direction:column;gap:12px;padding:12px;border:1.5px solid var(--line-2);border-radius:18px;background:#FFFFFF;transition:border-color .15s ease,background-color .15s ease}
.witem.is-on{border-color:var(--red);background:#FFF6F7}
/* клик по изделию добавляет его; крестик в углу — у выбранных, убирает из расчёта */
.witem{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.witem-x{position:absolute;top:8px;right:8px;z-index:1;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--line-2);border-radius:50%;background:#FFFFFF;color:var(--ink);cursor:pointer;box-shadow:0 2px 8px rgba(17,24,39,.12);
  opacity:0;transform:scale(.8);visibility:hidden;transition:opacity .15s ease,transform .18s var(--ease-out),visibility 0s .18s,background-color .15s ease,color .15s ease}
.witem-x .i{width:14px;height:14px}
.witem.is-on .witem-x{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.witem-x:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
@media (hover: hover) and (pointer: fine){.witem:hover{border-color:var(--ink)}.witem.is-on:hover{border-color:var(--red)}.witem-x:hover{background:var(--red);border-color:var(--red);color:#FFFFFF}}
@media (prefers-reduced-motion: reduce){.witem-x{transform:none}}
.witem-img{display:flex;align-items:center;justify-content:center;height:128px;padding:10px;border-radius:12px;background:var(--bg-soft)}
.witem-img img{max-width:100%;max-height:100%;object-fit:contain}
.witem-t{display:flex;flex-direction:column;gap:2px;padding:0 4px}
.witem-t > b:first-child{font-size:15px;line-height:1.3}
.witem-t > span{font-size:13px;color:var(--muted)}
.witem-p{margin-top:6px;font-size:17px;font-variant-numeric:tabular-nums}
.qty{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:4px;border-radius:14px;background:var(--bg-soft)}
.qty-b{display:inline-flex;align-items:center;justify-content:center;width:44px;height:40px;border:0;border-radius:10px;background:#FFFFFF;color:var(--ink);cursor:pointer;transition:transform .12s var(--ease-out),opacity .15s ease}
.qty-b .i{width:16px;height:16px}
.qty-plus{background:var(--ink);color:#FFFFFF}
.qty-b:disabled{opacity:.4;cursor:default}
.qty-b:active:not(:disabled){transform:scale(.94)}
.qty-b:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.qty output{min-width:2ch;font-size:17px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.copts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));grid-gap:12px;gap:12px;margin-top:20px}
@supports not (gap:12px){.copts{margin:14px -6px 0}.copt{margin:6px}}
.copts-sv{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.copts-sv{grid-template-columns:minmax(0,1fr)}}
.copt-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.copt-tx small{font-size:13px;line-height:1.35;color:var(--muted)}
.copt-d.is-off{color:var(--red)}
/* «Что входит в стоимость» над карточками цен (балконы, лоджии, французские окна) */
.svc{margin-bottom:20px;padding:22px 24px 24px;border:1px solid var(--line);border-radius:20px;background:#FFFFFF}
.svc-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.svc-h h3{font-family:var(--head);font-size:20px;font-weight:600;letter-spacing:-.01em}
.svc-h span{font-size:14px;color:var(--muted)}
.svc .copts{margin-top:16px}
@media (min-width:1200px){.svc .copts-sv{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.svc{padding:18px 16px 16px}}
.copt input:disabled{cursor:default}
.copt input:disabled + .copt-b{border-color:var(--line-2);background:var(--bg-soft)}
.copt-ch input:disabled + .copt-b .copt-dot{background-color:var(--muted-2);border-color:var(--muted-2)}
.wsum-adj li > b{color:var(--red)}
.copt{position:relative;display:flex;min-width:0}
.copt[hidden]{display:none}
.copt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.copt-b{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 16px;border:1.5px solid var(--line-2);border-radius:14px;background:#FFFFFF;transition:border-color .15s ease,background-color .15s ease}
.copt-b b{flex:1;min-width:0;font-size:15px;font-weight:600;line-height:1.3}
.copt-dot{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #C4C8D0;background:#FFFFFF;transition:border-color .15s ease,box-shadow .15s ease}
.copt-d{margin-left:auto;padding-left:6px;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.copt input:checked + .copt-b{border-color:var(--red);background:#FFF6F7}
.copt input:checked + .copt-b .copt-dot{border-color:var(--red);box-shadow:inset 0 0 0 3px #FFFFFF,inset 0 0 0 10px var(--red)}
.copt input:focus-visible + .copt-b{outline:3px solid var(--yellow);outline-offset:2px}
.copt-ch .copt-dot{border-radius:6px}
.copt-ch input:checked + .copt-b .copt-dot{box-shadow:none;background:var(--red) var(--i-check-w) center/12px no-repeat}
@media (hover: hover) and (pointer: fine){.copt:hover .copt-b{border-color:var(--ink)}.copt input:checked + .copt-b{border-color:var(--red)}}
.wsum{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px;padding:clamp(22px,2.4vw,28px);border-radius:24px;background:#FFFFFF;box-shadow:0 24px 48px -32px rgba(21,22,26,.35)}
.wsum-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.wsum-h h3{font-family:var(--head);font-weight:600;font-size:20px;letter-spacing:-.02em}
.wsum-h span{font-size:14px;font-weight:600;color:var(--muted)}
.wsum-lines{margin:0;padding:0;list-style:none}
.wsum-lines li{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.wsum-lines li span{display:flex;flex-direction:column;gap:2px;min-width:0}
.wsum-lines small{font-size:13px;color:var(--muted)}
.wsum-lines li > b{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.wsum-empty{padding:18px;border-radius:16px;background:var(--bg-soft);font-size:15px;line-height:1.5;color:var(--muted)}
.wsum-empty[hidden]{display:none}
.wsum-conf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0;font-size:14px;line-height:1.4}
.wsum-conf dt{color:var(--muted)}
.wsum-conf dd{margin:0;font-weight:600;text-align:right}
.wsum-total{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:18px;background:var(--ink);color:#FFFFFF}
.wsum-total span{font-size:14px;color:#C9CCD3}
.wsum-total b{font-family:var(--head);font-weight:600;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums}
.wsum-note{font-size:13px;line-height:1.5;color:var(--muted)}
.wsum-form{display:flex;flex-direction:column;gap:12px}
.wsum-form .btn{width:100%}
.wbar{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:10px 10px 10px 18px;border-radius:18px;background:var(--ink);color:#FFFFFF;box-shadow:0 18px 40px -16px rgba(21,22,26,.6)}
.wbar span{display:flex;flex-direction:column;gap:2px;min-width:0}
.wbar small{font-size:12px;color:#C9CCD3}
.wbar b{font-family:var(--head);font-weight:600;font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.wbar[hidden]{display:none}
@media (min-width:1101px){.wbar{display:none !important}}
@media (max-width:1100px){.wcalc{grid-template-columns:minmax(0,1fr)}.wsum{position:static}}
@media (min-width:761px) and (max-width:1100px){.wbar{bottom:16px}}
@media (max-width:560px){.witems{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.witem{padding:8px;gap:10px}.witem-img{height:96px}.qty-b{width:38px}.wstep-sub{margin-left:0;flex-basis:100%}}
@media (prefers-reduced-motion: reduce){.qty-b:active:not(:disabled){transform:none}}
html:not(.js) .wc-js{display:none !important}
/* «Краткое описание» подраздела без заголовка — плашка под советами (subcateg.tpl, $scNote) */
.tips-note{display:flex;align-items:flex-start;gap:16px;max-width:960px;margin:20px auto 0;padding:20px 24px;border-radius:20px;background:var(--bg-soft);font-size:16px;line-height:1.6;color:var(--text)}
.sec-soft .tips-note{background:#FFFFFF}
.tips-note p{margin:0}
.tips-note p + p{margin-top:.6em}
.tips-note-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:var(--red-soft);color:var(--red)}
.tips-note-ico .i{width:22px;height:22px}

/* ---------- дополнительные опции для окон (_opcii.tpl): вкладки-чипы, слева фото, справа варианты и описание ---------- */
.opx-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
/* вкладки заметны на белом фоне: светло-серая заливка и рамка темнее, выбранная — тёмная */
.opx-tabs [role="tab"]{height:46px;padding:0 18px;border-radius:999px;border:1.5px solid #D5D9E0;background:#EDEFF3;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.opx-tabs [aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.opx-tabs [role="tab"]:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.opx-panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,3vw,40px);align-items:start;padding:clamp(14px,2vw,22px);border-radius:28px;background:var(--bg-soft)}
.opx-panel[hidden]{display:none}
.opx-panel:not([hidden]){animation:opx-in .25s cubic-bezier(.23,1,.32,1)}
@keyframes opx-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.opx-media{position:relative;aspect-ratio:4 / 3;border-radius:20px;overflow:hidden;background:var(--bg-img)}
.opx-media img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .2s ease}
.opx-media img.is-swap{opacity:.35}
.opx-cap{position:absolute;left:14px;bottom:14px;padding:7px 12px;border-radius:10px;background:rgba(255,255,255,.94);font-size:14px;font-weight:600}
.opx-info{display:flex;flex-direction:column;gap:14px;min-width:0;padding:6px 4px 4px}
.opx-info h3{font-family:var(--head);font-size:24px;font-weight:600;letter-spacing:-.02em}
.opx-info > p{font-size:15px;line-height:1.6;color:var(--text)}
.opx-groups{display:flex;flex-direction:column;gap:14px}
.opx-gt{display:block;margin-bottom:8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.opx-sw{display:flex;flex-wrap:wrap;gap:12px}
.opx-c{width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);cursor:pointer;transition:transform .15s cubic-bezier(.23,1,.32,1),box-shadow .15s ease}
.opx-c.is-wood{background:repeating-linear-gradient(100deg,rgba(0,0,0,.12) 0 2px,rgba(255,255,255,.07) 2px 5px,transparent 5px 9px),var(--c)}
.opx-c.is-metal{background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,255,255,0) 45%,rgba(255,255,255,.3) 72%,rgba(255,255,255,0)),var(--c)}
.opx-c[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 0 0 3px #FFFFFF,0 0 0 5px var(--red)}
.opx-c:focus-visible{outline:3px solid var(--yellow);outline-offset:5px}
.opx-opts{display:flex;flex-wrap:wrap;gap:8px}
.opx-o{height:42px;padding:0 16px;border:1.5px solid var(--line-2);border-radius:12px;background:#FFFFFF;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.opx-o[aria-pressed="true"]{border-color:var(--red);background:#FFF6F7;color:var(--red)}
.opx-o:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.opx-desc{min-height:3.2em;padding:12px 14px;border-radius:14px;background:#FFFFFF;font-size:15px;line-height:1.55;color:var(--ink)}
.opx-note{font-size:13px;line-height:1.5;color:var(--muted-2)}
.opx-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.opx-list li{position:relative;padding-left:32px;font-size:15px;line-height:1.5}
.opx-list li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:7px;background:var(--red-soft)}
.opx-list li::after{content:"";position:absolute;left:5px;top:6px;width:12px;height:12px;background:var(--red);-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.opx-more{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--red)}
.opx-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:20px;padding:16px 20px;border:1px solid var(--line);border-radius:20px}
.opx-foot > span{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600}
.opx-foot > span .i{color:var(--red)}
@media (hover: hover) and (pointer: fine){
  .opx-tabs [role="tab"]:not([aria-selected="true"]):hover{border-color:var(--ink);background:#E4E7EC}
  .opx-o:not([aria-pressed="true"]):hover{border-color:var(--ink)}
  .opx-c:hover{transform:scale(1.08)}
}
@media (max-width:900px){.opx-panel{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .opx-tabs{gap:6px}
  .opx-tabs [role="tab"]{height:38px;padding:0 13px;font-size:14px}
  .opx-panel{padding:10px 10px 14px;border-radius:22px}
  .opx-media{border-radius:16px}
  .opx-info h3{font-size:20px}
  .opx-foot .btn{width:100%}
}
@media (prefers-reduced-motion: reduce){.opx-panel:not([hidden]){animation:none}.opx-c{transition:none}}
/* «в заказ»: кнопка под вариантом, галочка на выбранном варианте, точка на вкладке, строки «Опции к окнам» в расчёте */
.opx-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.opx-add{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 18px;border:1.5px solid var(--red);border-radius:12px;background:#FFFFFF;color:var(--red);font-size:15px;font-weight:600;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .12s cubic-bezier(.23,1,.32,1)}
.opx-add[aria-pressed="true"]{background:var(--red);color:#FFFFFF}
.opx-add:active{transform:scale(.97)}
.opx-add:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.opx-was{font-size:13px;color:var(--muted)}
.opx-c.is-in,.opx-o.is-in{position:relative}
.opx-c.is-in::after,.opx-o.is-in::after{content:"";position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--red) var(--i-check-w) center/10px no-repeat;box-shadow:0 0 0 2px #FFFFFF}
.opx-tabs [role="tab"].has-in::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;background:var(--red);vertical-align:2px}
.opx-foot-btns{display:flex;flex-wrap:wrap;gap:10px}
.opx-foot > span{flex:1 1 320px;line-height:1.45}
.wsum-opts::before{content:"Опции к окнам";display:block;margin:2px 0 4px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.wsum-ask{font-size:14px;font-weight:600;color:var(--muted-2);white-space:nowrap}
@media (hover: hover) and (pointer: fine){.opx-add:not([aria-pressed="true"]):hover{background:#FFF6F7}}
@media (max-width:640px){.opx-add{width:100%}.opx-foot-btns{width:100%}.opx-foot-btns .btn{flex:1 1 100%}}
@media (prefers-reduced-motion: reduce){.opx-add{transition:none}}
/* под итогом: опции в сумму не входят */
.wsum-optnote{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:12px;background:#FFF6E0;font-size:14px;line-height:1.45;color:#5A4410}
.wsum-optnote .i{flex:none;margin-top:1px;color:#B07A00}
.wsum-optnote[hidden]{display:none}

/* ---------- обшивка балконов (_otdelka.tpl): схема с номерами, карточки видов работ ---------- */
.shema{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(20px,3vw,40px);align-items:center}
.shema-media{position:relative;border-radius:28px;overflow:hidden;background:#E9EAEC}
.shema-media img{display:block;width:100%;height:auto}
.shema-dot{position:absolute;display:grid;place-items:center;width:30px;height:30px;padding:0;border:2px solid #FFFFFF;border-radius:50%;background:var(--red);color:#FFFFFF;font-size:13px;font-weight:700;line-height:1;cursor:pointer;transform:translate(-50%,-50%);box-shadow:0 4px 12px rgba(215,0,36,.35);transition:transform .15s cubic-bezier(.23,1,.32,1),background-color .15s ease}
.shema-dot::after{content:"";position:absolute;inset:-4px;border:2px solid var(--red);border-radius:50%;opacity:0;animation:shema-pulse 2.6s cubic-bezier(.23,1,.32,1) infinite;pointer-events:none}
.shema-dot:nth-of-type(2n)::after{animation-delay:.6s}.shema-dot:nth-of-type(3n)::after{animation-delay:1.2s}
@keyframes shema-pulse{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.7)}}
.shema-dot.is-hot{background:var(--ink);transform:translate(-50%,-50%) scale(1.18)}
.shema-dot.is-hot::after{animation:none}
.shema-dot:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.shema-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.shema-list li{display:flex;align-items:flex-start;gap:12px;padding:8px 10px;border-radius:12px;transition:background-color .15s ease}
.shema-list li.is-hot{background:var(--red-soft)}
.shema-n{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--red);color:#FFFFFF;font-size:12px;font-weight:700}
.shema-list b{display:block;font-size:15px;line-height:1.35}
.shema-list small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--muted)}
.rab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:16px;margin:0;padding:0;list-style:none}
.rab-card{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:var(--bg-soft)}
.rab-img{display:block;aspect-ratio:4 / 3;overflow:hidden;background:var(--bg-img)}
.rab-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.rab-body{display:flex;flex:1;flex-direction:column;gap:8px;padding:16px 18px 18px}
.rab-body h3{font-family:var(--body);font-size:17px;font-weight:600;letter-spacing:0;line-height:1.3}
.rab-body p{font-size:14px;line-height:1.5;color:var(--muted)}
.rab-body .btn{align-self:flex-start;margin-top:auto}
@media (hover: hover) and (pointer: fine){.rab-card:hover .rab-img img{transform:scale(1.04)}.shema-dot:hover{transform:translate(-50%,-50%) scale(1.12)}}
@media (max-width:1100px){.shema{grid-template-columns:minmax(0,1fr)}.shema-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .shema-media{border-radius:18px}
  .shema-dot{width:24px;height:24px;font-size:11px;border-width:1.5px}
  .shema-list{grid-template-columns:minmax(0,1fr)}
  .rab-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .rab-card{border-radius:16px}
  .rab-body{gap:6px;padding:10px 12px 12px}
  .rab-body h3{font-size:14px}
  .rab-body p{font-size:12.5px;line-height:1.45}
  .rab-body .btn{align-self:stretch}
}
@media (prefers-reduced-motion: reduce){.shema-dot::after{animation:none}.shema-dot,.rab-img img{transition:none}}
/* материалы обшивки: четыре карточки сразу (без вкладок) — 2×2, на телефоне друг под другом; фото сверху, цвета и описание под ним */
.opx-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.opx-cards .opx-panel{grid-template-columns:minmax(0,1fr);gap:14px;padding:14px 14px 18px;background:#FFFFFF;animation:none}
.opx-cards .opx-info{gap:12px;padding:0 4px}
.opx-cards .opx-info h3{font-size:22px}
@media (max-width:760px){.opx-cards{grid-template-columns:minmax(0,1fr);gap:12px}}
/* цены обшивки балконов: две широкие карточки, фото во всю ширину (меняется по размеру), ссылки на блоки ниже */
.prods-wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.prod-img.is-photo{padding:0;background:var(--bg-img)}
.prod-img.is-photo img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.prods-wide .prod-body{gap:16px;padding:20px 22px 22px}
.prods-wide .prod-body h3{font-size:22px}
.prod-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:-6px}
.prod-links a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--red)}
.prod-links .i{width:16px;height:16px}
@media (hover: hover) and (pointer: fine){.prod-links a:hover{text-decoration:underline;text-underline-offset:3px}}
@media (max-width:760px){.prods-wide{grid-template-columns:minmax(0,1fr)}.prods-wide .prod-body{padding:16px 16px 18px}.prods-wide .prod-body h3{font-size:19px}}

/* ---------- нестандартные окна (_nestandart.tpl): формы с фото, стеклопакеты со значками ---------- */
.shape-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.shape-card{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:var(--bg-soft)}
.shape-img{display:block;aspect-ratio:4 / 3;overflow:hidden;background:var(--bg-img)}
.shape-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.shape-body{display:flex;flex:1;flex-direction:column;gap:8px;padding:16px 18px 18px}
.shape-body h3{font-family:var(--body);font-size:19px;font-weight:700;letter-spacing:0}
.shape-body p{font-size:14px;line-height:1.5;color:var(--text)}
.shape-where{font-size:13px;line-height:1.45;color:var(--muted)}
.shape-where b{color:var(--ink);font-weight:600}
.shape-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:auto;padding-top:6px}
.shape-more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--red)}
.glass-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:0;padding:0;list-style:none}
.glass-card{flex:0 1 calc((100% - 32px) / 3);display:flex;flex-direction:column;gap:8px;padding:20px 22px;border-radius:20px;background:#FFFFFF}
.glass-ico{display:grid;place-items:center;width:46px;height:46px;margin-bottom:4px;border-radius:13px;background:var(--red-soft);color:var(--red)}
.glass-ico .i{width:22px;height:22px}
.glass-card h3{font-family:var(--body);font-size:17px;font-weight:700;letter-spacing:0}
.glass-card p{font-size:14px;line-height:1.5;color:var(--muted)}
@media (hover: hover) and (pointer: fine){.shape-card:hover .shape-img img{transform:scale(1.04)}}
@media (max-width:1024px){.shape-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.glass-card{flex-basis:calc((100% - 16px) / 2)}}
@media (max-width:640px){
  .shape-grid{gap:10px}
  .shape-card{border-radius:16px}
  .shape-body{gap:6px;padding:10px 12px 12px}
  .shape-body h3{font-size:15px}
  .shape-body p{font-size:12.5px;line-height:1.45}
  .shape-where{font-size:12px}
  .shape-act .btn{flex:1 1 100%}
  .glass-card{flex-basis:100%;padding:16px 18px}
}
@media (prefers-reduced-motion: reduce){.shape-img img{transition:none}}

/* режим работы «сейчас»: точка зелёная / жёлтая / красная (site.js ставит data-tone); без JS — только текст */
.open-st{display:inline-flex;align-items:center;gap:8px}
.open-st .dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.open-st:not([data-tone]) .dot{display:none}
.open-st[data-tone="live"] .dot{background:#22C55E}
.open-st[data-tone="warn"] .dot{background:#FFB800}
.open-st[data-tone="off"] .dot{background:#EF4444}
.open-st[data-tone="live"] .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #22C55E;opacity:0;animation:open-pulse 2.4s cubic-bezier(.23,1,.32,1) infinite}
@keyframes open-pulse{0%{opacity:.7;transform:scale(.6)}80%,100%{opacity:0;transform:scale(1.4)}}
.hdr-phone .open-st{gap:6px}
@media (prefers-reduced-motion: reduce){.open-st .dot::after{animation:none}}

/* ---------- калькулятор окон по размерам (/calc/, calc.tpl): типы, размеры со схемой, итог текущего окна ---------- */
.kc-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.kc-type{position:relative;display:flex;min-width:0}
.kc-type input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.kc-type-b{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px 12px;border:1.5px solid var(--line-2);border-radius:16px;background:#FFFFFF;text-align:center;transition:border-color .15s ease,background-color .15s ease}
.kc-type-b svg{width:52px;height:52px;fill:#E7F0F8;stroke:#5B6270;stroke-width:2;stroke-linejoin:round}
.kc-type-b b{font-size:14px;font-weight:600;line-height:1.25}
.kc-type input:checked + .kc-type-b{border-color:var(--red);background:#FFF6F7}
.kc-type input:checked + .kc-type-b svg{stroke:var(--red)}
.kc-type input:focus-visible + .kc-type-b{outline:3px solid var(--yellow);outline-offset:2px}
.kc-dim{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;align-items:center;margin-top:18px}
.kc-size{display:flex;flex-direction:column;gap:12px}
.kc-size input{font-variant-numeric:tabular-nums}
.kc-range{font-size:13px;line-height:1.45;color:var(--muted)}
.kc-range.is-bad{color:var(--red);font-weight:600}
.kc-draw{margin:0;display:flex;align-items:center;justify-content:center;min-height:240px;padding:12px;border-radius:18px;background:var(--bg-soft)}
.kc-draw svg{display:block;width:100%;max-width:340px;height:auto;max-height:320px;overflow:visible}
.kc-draw text{font-size:12px;font-weight:600;fill:var(--muted)}
.kc-sash{cursor:pointer}
.kc-sash:hover .kc-glass{filter:brightness(.94)}
.kc-sashes{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:16px}
.kc-sash-l{display:flex;flex-direction:column;gap:4px;min-width:170px;font-size:13px;font-weight:600;color:var(--muted)}
.kc-sash-l select{height:42px;padding:0 10px;border:1.5px solid var(--line-2);border-radius:10px;background:#FFFFFF;font:inherit;font-size:15px;color:var(--ink)}
.kc-load{font-size:14px;color:var(--muted)}
.kc-load[hidden]{display:none}
@media (max-width:1100px){.kc-types{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.kc-dim{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.kc-sash-l{flex:1 1 140px;min-width:0}}
/* калькулятор: подоконник и отлив — два списка в ряд */
.kc-sill{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.kc-sill select{width:100%;height:48px;padding:0 12px;border:1.5px solid var(--line-2);border-radius:12px;background:#FFFFFF;font:inherit;font-size:15px;color:var(--ink)}
.kc-sill select:disabled{background:var(--bg-soft);color:var(--muted)}
.kc-sill-note{margin-top:10px;font-size:13px;line-height:1.45;color:var(--muted)}
@media (max-width:640px){.kc-sill{grid-template-columns:minmax(0,1fr)}}
/* шапка с «Калькулятором» (16.10): 6 пунктов меню + телефон + кнопка. Шапка шире колонки страницы (до 1520), пункты плотнее
   до 1599 px, на 1300–1439 вместо номера — значок трубки (номер есть в мобильном меню и в подвале) */
@media (min-width:1300px){.hdr .wrap{max-width:1520px}}
@media (min-width:1300px) and (max-width:1599px){.hdr .wrap{gap:14px}.hdr-nav{font-size:14.5px}.nav-link{padding:0 8px}.nav-item > .nav-link{padding-right:0}.nav-toggle{width:22px}.hdr-right{gap:12px}.hdr-cta{padding-left:14px;padding-right:14px}}
@media (min-width:1300px) and (max-width:1439px){.hdr-phone{display:none}.hdr-call{display:inline-flex}}
/* «Откуда берётся цена» — последней карточкой левой колонки калькулятора */
.kc-how-grid{margin-top:16px;gap:12px}
.kc-how .glass-card{flex:1 1 200px;padding:16px;background:var(--bg-soft)}
.kc-how .glass-card h3{font-size:15px}
.kc-how .glass-card p{font-size:13px}
/* правая колонка калькулятора (16.10): сверху один итог (чёрный блок), ниже — окна в расчёте карточками со всеми параметрами
   и своим счётчиком (если не влезают по высоте — прокручиваются только они), внизу — телефон и кнопка. Ничего не уходит вбок */
.kc .wsum{gap:14px;overflow-x:hidden}
.kc .wsum > *{flex-shrink:0;min-width:0}
.kc-total{display:flex;flex-direction:column;gap:0;padding:14px 18px 14px;border-radius:18px;background:var(--ink);color:#FFFFFF}
.kc-total > span{font-size:14px;color:#C9CCD3}
.kc-total > b{font-family:var(--head);font-weight:600;font-size:clamp(28px,2.6vw,34px);letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums}
.kc-credit{margin:6px 0 0;padding-top:8px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;line-height:1.45;color:#A9ADB6}
.kc-credit b{font-weight:600;color:#FFFFFF}
.kc-credit[hidden]{display:none}
.kc-body{display:flex;flex-direction:column;gap:10px;min-width:0}
.kc-lines{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.kc-line{display:flex;flex-direction:column;gap:6px;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:16px;background:#FFFFFF}
.kc-line.is-live{border-color:#F4C7CD;background:#FFF6F7}
.kc-line-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.kc-line-h b{min-width:0;font-size:15px;font-weight:700;line-height:1.3}
.kc-line-d{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.kc-line-d span{white-space:nowrap}
.kc-line-d span:last-child{white-space:normal}
.kc-line-f{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.kc-line-p{margin-left:auto;font-size:16px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.kc-q{flex:none;margin:0;padding:3px;border-radius:12px}
.kc-q .qty-b{width:32px;height:30px;border-radius:9px}
.kc-q .qty-b .i{width:14px;height:14px}
.kc-q output{min-width:2.4ch;font-size:15px}
.kc-line.is-live .kc-q{background:#FFFFFF}
.kc-line-f small{font-size:13px;color:var(--muted)}
.kc-tag{flex:none;padding:3px 9px;border-radius:999px;background:var(--red);font-size:12px;font-weight:600;color:#FFFFFF}
.kc-del{flex:none;display:grid;place-items:center;width:28px;height:28px;margin:-4px -6px 0 0;padding:0;border:0;border-radius:50%;background:var(--bg-soft);color:var(--muted);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.kc-del .i{width:10px;height:10px}
.kc-del:hover{background:var(--red-soft);color:var(--red)}
.kc-more{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 14px;border:1.5px dashed var(--line-2);border-radius:14px;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.kc-more small{font-size:13px;font-weight:400;color:var(--muted)}
.kc-more .i{flex:none;width:14px;height:14px}
.kc-more:hover:not(:disabled){border-color:var(--ink);background:var(--bg-soft)}
.kc-more:disabled{opacity:.45;cursor:default}
.kc-more.is-done{border-style:solid;border-color:#16A34A;background:#ECFDF3;color:#166534}
.kc-more:focus-visible,.kc-del:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.kc-disc{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border-radius:12px;background:#ECFDF3;font-size:13px;font-weight:600;line-height:1.4;color:#166534}
.kc-disc .i{flex:none}
.kc-disc[hidden]{display:none}
.kc-form{gap:10px}
.kc-form .form-note{font-size:12px;line-height:1.45}
@media (min-width:1101px){
  .kc .wsum{top:88px;padding:20px;max-height:calc(100vh - 104px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .kc .wsum > .kc-body{flex:0 1 auto;min-height:150px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}
/* шапка калькулятора (16.10, просьба «максимально сузить»): заголовок + строка описания слева, справа узкая полоса фото —
   только подоконник с рулеткой (кадр по высоте ~68 %); сразу под шапкой калькулятор, без заголовка секции */
.kc-ph{padding:clamp(14px,2vw,24px) 0 clamp(18px,2.2vw,26px)}
.kc-ph-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:end;margin-top:clamp(10px,1.4vw,16px)}
.kc-ph-text{display:flex;flex-direction:column;gap:10px;min-width:0}
.kc-ph .lead{max-width:540px;font-size:17px;line-height:1.5}
.kc-ph-strip{height:clamp(92px,8.6vw,124px);border-radius:20px;overflow:hidden;background:var(--bg-img)}
.kc-ph-strip img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 76%}
.kc-sec{padding-top:clamp(20px,2.4vw,32px)}
@media (max-width:760px){.kc-ph-grid{grid-template-columns:minmax(0,1fr);gap:14px}.kc-ph-strip{height:88px;border-radius:16px}.kc-ph .lead{font-size:16px}}
/* опции окон шагом калькулятора: блок плотнее, заголовок варианта не повторяем (он на вкладке) */
.kc-opx .opx-tabs{gap:6px;margin:16px 0 14px}
.kc-opx .opx-tabs [role="tab"]{height:40px;padding:0 14px;font-size:14px}
.kc-opx .opx-panel{gap:18px;padding:12px;border-radius:20px}
.kc-opx .opx-info{gap:12px;padding:2px 2px 4px}
.kc-opx .opx-info h3{display:none}
.kc-opx .opx-info > p{font-size:14px;line-height:1.55}
.kc-opx .opx-desc{font-size:14px}
.kc-opx .opx-c{width:34px;height:34px}
.kc-opx .opx-sw{gap:10px}
@media (max-width:1300px){.kc-opx .opx-panel{grid-template-columns:minmax(0,1fr)}.kc-opx .opx-media{aspect-ratio:16 / 9}}
/* цвета рам: «Однотонные» — своей строкой, «Под дерево» и «Металлик» — рядом в одной строке, если вмещаются (иначе переносятся) */
.opx-groups{flex-direction:row;flex-wrap:wrap;column-gap:32px}
.opx-groups > .opx-group:first-child{flex-basis:100%}
/* полоса прокрутки списка в правой колонке — в поле колонки, с зазором 12 px от текста («1 окно», «на замере» не прилипают) */
@media (min-width:1101px){.kc .wsum > .kc-body{margin-right:-14px;padding-right:14px}}
/* бейдж «Подарок» у акций — жёлтый, чтобы подарки отличались от скидок (красные) */
.akc-badge.is-gift{background:var(--yellow);color:var(--ink)}
/* фото акций как баннер (16.10): затемнение с одной стороны (ban-r — справа, если главный предмет фото слева), плашка с условием,
   крупно выгода (цифра; у подарков — что дарим, мельче) и подпись. Текст вёрсткой, а не в картинке — без опечаток, правится в $akBan */
.akc-img{position:relative;overflow:hidden;container-type:inline-size}
.akc-img.has-ban::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(17,18,22,.86) 0%,rgba(17,18,22,.68) 36%,rgba(17,18,22,.18) 70%,rgba(17,18,22,0) 100%)}
.akc-img.ban-r::after{background:linear-gradient(270deg,rgba(17,18,22,.86) 0%,rgba(17,18,22,.68) 36%,rgba(17,18,22,.18) 70%,rgba(17,18,22,0) 100%)}
.akc-ban{position:absolute;z-index:1;top:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;width:60%;padding:14px 0 14px clamp(16px,6cqi,26px);color:#FFFFFF}
.ban-r .akc-ban{left:auto;right:0;align-items:flex-end;padding:14px clamp(16px,6cqi,26px) 14px 0;text-align:right}
.akc-ban-k{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 9px;border-radius:8px;background:var(--red);font-size:12px;font-weight:700;line-height:1.2;letter-spacing:.05em;text-transform:uppercase}
.akc-ban-k .i{flex:none;width:13px;height:13px}
.akc-ban.is-gift .akc-ban-k{background:var(--yellow);color:var(--ink)}
.akc-ban-b{font-family:var(--head);font-size:48px;font-size:clamp(36px,14cqi,60px);font-weight:700;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;text-shadow:0 2px 14px rgba(0,0,0,.28)}
.akc-ban.is-gift .akc-ban-b{font-size:24px;font-size:clamp(20px,6.4cqi,28px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.akc-ban-s{max-width:100%;font-size:14px;font-weight:600;line-height:1.35;color:#E9EAEE;text-wrap:balance}
/* узкая шапка страницы (акции): заголовок и описание одной полосой, сразу под ней содержимое */
.ph-slim{padding:clamp(12px,1.8vw,20px) 0 clamp(14px,1.8vw,22px)}
.ph-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 40px;margin-top:clamp(8px,1.2vw,14px)}
.ph-slim h1{font-size:clamp(28px,3vw,42px)}
.ph-slim .lead{max-width:620px;font-size:16px;line-height:1.5}
/* окно заявки: что выбрал клиент (акция, карточка) или с какой страницы заявка */
.modal-ctx{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:14px;background:var(--red-soft);font-size:15px;line-height:1.45;color:var(--ink)}
.modal-ctx .i{flex:none;width:18px;height:18px;margin-top:1px;color:var(--red)}
.modal-ctx b{font-weight:700}
/* «Оплата и доставка» (16.10, _oplata.tpl): шапка с фото фургона, 4 способа доставки карточками с фото, 5 шагов заказа,
   оплата для частных лиц и организаций, баннер рассрочки (те же .akc-ban, что у акций) */
.od-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
.od-media{aspect-ratio:3 / 2}
.od-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.od-card{display:flex;flex-direction:column;min-width:0;border-radius:24px;background:#FFFFFF;overflow:hidden;box-shadow:inset 0 0 0 1.5px var(--line);transition:transform .2s cubic-bezier(.23,1,.32,1),box-shadow .2s ease}
.od-img{position:relative;display:block;aspect-ratio:3 / 2;background:var(--bg-img);overflow:hidden}
.od-img img{display:block;width:100%;height:100%;object-fit:cover}
.od-tag{position:absolute;left:12px;top:12px;padding:6px 11px;border-radius:9px;background:rgba(255,255,255,.95);font-size:13px;font-weight:700;color:var(--ink);box-shadow:0 6px 16px -8px rgba(17,19,26,.4)}
.od-tag.is-free{background:var(--yellow)}
.od-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px}
.od-body h3{font-size:18px;font-weight:700;line-height:1.3}
.od-body p{font-size:15px;line-height:1.55;color:var(--text)}
@media (hover: hover) and (pointer: fine){.od-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px var(--line),0 18px 36px -24px rgba(17,19,26,.35)}}
.od-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.od-step{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:20px 18px 22px;border-radius:22px;background:var(--bg-soft)}
.od-step:not(:last-child)::after{content:"";position:absolute;top:42px;right:-11px;z-index:1;width:10px;height:10px;border-top:2px solid var(--red);border-right:2px solid var(--red);transform:rotate(45deg)}
.od-step-top{display:flex;align-items:center;justify-content:space-between}
.od-step-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#FFFFFF;color:var(--red)}
.od-step-ico .i{width:22px;height:22px}
.od-step-n{font-family:var(--head);font-size:22px;font-weight:600;letter-spacing:-.02em;color:#D5D8DF}
.od-step h3{font-size:16px;font-weight:700;line-height:1.3}
.od-step p{font-size:14px;line-height:1.5;color:var(--text)}
.od-steps-act{margin-top:22px}
.od-pay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.od-pay-card{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);min-width:0;border-radius:26px;background:#FFFFFF;overflow:hidden}
.od-pay-img{display:block;min-height:100%;background:var(--bg-img)}
.od-pay-img img{display:block;width:100%;height:100%;object-fit:cover}
.od-pay-body{display:flex;flex-direction:column;gap:14px;padding:24px 24px 26px}
.od-pay-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--red-soft);color:var(--red)}
.od-pay-ico .i{width:22px;height:22px}
.od-pay-body h3{font-family:var(--head);font-size:22px;font-weight:600;letter-spacing:-.02em}
.od-ban{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);margin-top:16px;border-radius:26px;background:var(--ink);color:#FFFFFF;overflow:hidden}
.od-ban-img{aspect-ratio:auto;min-height:260px}
.od-ban-img > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.od-ban-body{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(22px,3vw,36px)}
.od-ban-body h3{font-family:var(--head);font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.02em}
.od-ban-body p{font-size:16px;line-height:1.55;color:#C9CCD3}
.od-ban .btn-ghost{border-color:rgba(255,255,255,.3);color:#FFFFFF}
.od-ban .btn-ghost:hover{border-color:#FFFFFF;color:#FFFFFF}
@media (max-width:1200px){.od-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.od-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.od-step:nth-child(3)::after{display:none}}
@media (max-width:960px){.od-pay{grid-template-columns:minmax(0,1fr)}.od-ban{grid-template-columns:minmax(0,1fr)}.od-ban-img{min-height:0;aspect-ratio:2 / 1}}
@media (max-width:640px){.od-facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:12px}.od-facts b{font-size:19px;white-space:normal}.od-grid{grid-template-columns:minmax(0,1fr)}
  .od-steps{grid-template-columns:minmax(0,1fr);gap:10px}.od-step{padding:16px}.od-step::after{display:none}.od-pay-card{grid-template-columns:minmax(0,1fr)}.od-pay-img{aspect-ratio:3 / 2}}
@media (prefers-reduced-motion: reduce){.od-card{transition:none}.od-card:hover{transform:none}}
/* размеры окна в калькуляторе (17.10, «не только руками»): поле с кнопками −/+ и ползунок с пределами типа окна; на телефоне
   кнопки и бегунок крупные (44 и 28 px), долгое нажатие на −/+ не вызывает меню и выделение */
.kc-size{gap:16px}
.kc-dimf{display:flex;flex-direction:column;gap:8px;min-width:0}
.kc-dimf-l{font-size:14px;font-weight:600;color:#3A3D45}
.kc-num{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px}
.kc-num input{width:100%;height:48px;padding:0 8px;border:1.5px solid var(--line-2);border-radius:12px;background:#FFFFFF;font:inherit;font-size:18px;font-weight:600;color:var(--ink);text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.kc-num input::-webkit-outer-spin-button,.kc-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kc-num input:focus{outline:none;border-color:var(--ink)}
.kc-step{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1.5px solid var(--line-2);border-radius:12px;background:#FFFFFF;color:var(--ink);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:border-color .15s ease,background-color .15s ease,transform .12s cubic-bezier(.23,1,.32,1)}
.kc-step .i{width:16px;height:16px}
.kc-step:active{transform:scale(.94);background:var(--bg-soft)}
.kc-step:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
@media (hover: hover) and (pointer: fine){.kc-step:hover{border-color:var(--ink)}}
.kc-sl{height:32px;touch-action:pan-y}
.kc .range::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--red) var(--p),#DFE2E8 var(--p))}
.kc .range::-moz-range-track{background:#DFE2E8}
.kc .range::-webkit-slider-thumb{box-shadow:0 3px 10px rgba(17,19,26,.25)}
.kc-sl-lim{display:flex;justify-content:space-between;margin-top:-4px;font-size:12px;font-weight:600;color:var(--muted-2);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){.kc-step{transition:none}.kc-step:active{transform:none}}
/* балконный блок: пояснение, что вводить, и подписи частей на схеме */
.kc-dim-note{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:14px;background:#FFF6E0;font-size:14px;line-height:1.5;color:#5A4410}
.kc-dim-note .i{flex:none;width:18px;height:18px;margin-top:1px;color:#B07A00}
.kc-dim-note[hidden]{display:none}
.kc-draw text.kc-part{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;fill:#5B6270}
/* «Откуда берётся цена» стоит в разметке после колонки расчёта: на телефоне — в самом низу (17.10), на ПК — слева под шагами,
   а колонка расчёта тянется на обе строки сетки и остаётся закреплённой до конца */
@media (min-width:1101px){.kc > .wcalc-steps{grid-column:1;grid-row:1}.kc > .wsum{grid-column:2;grid-row:1 / span 2}.kc > .kc-how{grid-column:1;grid-row:2}}
/* карточки с иконкой (.glass-card: «Откуда берётся цена» в калькуляторе, стеклопакеты) на телефоне — иконка слева от текста,
   компактно (17.10, «иконка сверху много места занимает») */
@media (max-width:760px){
  .glass-card{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:start;padding:12px 14px}
  .glass-card > :not(.glass-ico){grid-column:2}
  .glass-ico{grid-row:1 / span 2;width:36px;height:36px;margin:0;border-radius:10px}
  .glass-ico .i{width:18px;height:18px}
  .glass-card h3{font-size:15px;line-height:1.3}
  .glass-card p{font-size:13px;line-height:1.45}
  .glass-grid{gap:8px}
  .kc-how-grid{margin-top:12px}
}
@media (max-width:760px){.kc-how .glass-card{padding:12px 14px}}
/* калькулятор /calc/ на телефоне: вместо панели «Позвонить / Замер» — плашка итога (.wbar) у самого низа экрана */
.no-dock .dock{display:none !important}
.kc-bar{bottom:calc(10px + env(safe-area-inset-bottom))}
.kc-bar b{font-variant-numeric:tabular-nums}
@media (min-width:761px) and (max-width:1100px){.kc-bar{bottom:16px}}
/* верхняя чёрная полоса не уезжает при прокрутке (19.10): полоса закреплена сверху, шапка — сразу под ней (--tb-h — высота полосы,
   site.js меряет её: на телефоне бывает в 2 строки); всё закреплённое ниже шапки и якоря разделов сдвинуты на её высоту */
:root{--tb-h:44px}
.topbar{position:sticky;top:0;z-index:31}
.hdr{top:var(--tb-h)}
section[id],footer[id]{scroll-margin-top:calc(84px + var(--tb-h))}
.faq-side,.prose-aside,.wk-side{top:calc(110px + var(--tb-h))}
.wsum{top:calc(96px + var(--tb-h))}
@media (min-width:1101px){.kc .wsum{top:calc(88px + var(--tb-h));max-height:calc(100vh - 104px - var(--tb-h))}}
@media (max-width:1100px){.wsum{position:static}}
/* значок reCAPTCHA в углу не показываем — вместо него строка о защите в каждой форме (site.js rcNote), так разрешает Google */
.grecaptcha-badge{visibility:hidden !important}
.rc-note{display:block;font-size:11.5px;line-height:1.45;color:var(--muted-2)}
.rc-note a{color:inherit;text-decoration:underline}
/* квиз (19.10): варианты и контакты на всю ширину (auto-fit), картинки вариантов не выше 220 px — при 3 вариантах в ряд они
   не становятся огромными; у e-mail пометка «— если удобнее» в той же строке, что подпись, поля выровнены по низу */
.qopt.pic img{max-height:220px}
.field-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field-l small{font-size:inherit;font-weight:400;color:var(--muted-2)}
/* футер на телефоне (19.10): «Пластиковые окна» и «Натяжные потолки» — рядом, ссылки «Компании» — в 2 колонки;
   описание с соцсетями и «Контакты» (длинный адрес, крупный телефон) — на всю ширину */
@media (max-width:640px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .foot-about,.foot-grid > .foot-col:last-child,.foot-grid > nav[aria-label="Компания"]{grid-column:1 / -1}
  .foot-grid > nav[aria-label="Компания"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .foot-grid > nav[aria-label="Компания"] > span{grid-column:1 / -1}
  .foot-col{font-size:14px}
  .foot-col a{overflow-wrap:anywhere}
}
/* схема балкона: выбранный пункт заметно (19.10, «не реагирует на мобиле»): номер крупнее, тёмный, с красным ореолом,
   остальные приглушены; пункт списка — розовый фон и красная полоса; над номером подпись (.shema-tip) */
.shema-dot{transition:transform .18s cubic-bezier(.23,1,.32,1),opacity .18s ease,background-color .18s ease,box-shadow .18s ease}
.shema.has-active .shema-dot{opacity:.55}
.shema .shema-dot.is-hot{z-index:2;opacity:1;background:var(--ink);transform:translate(-50%,-50%) scale(1.3);box-shadow:0 0 0 4px rgba(215,0,36,.45),0 6px 16px rgba(17,19,26,.35)}
.shema-list li{position:relative;cursor:pointer}
.shema-list li.is-hot{background:var(--red-soft);box-shadow:inset 3px 0 0 var(--red)}
.shema-list li.is-hot .shema-n{background:var(--ink)}
.shema-list li:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
@media (hover: hover) and (pointer: fine){.shema-list li:hover{background:var(--bg-soft)}.shema-list li.is-hot:hover{background:var(--red-soft)}}
.shema-tip{position:absolute;z-index:3;display:flex;flex-direction:column;gap:2px;max-width:min(280px,calc(100% - 16px));padding:10px 12px;border-radius:12px;background:var(--ink);color:#FFFFFF;font-size:13px;line-height:1.4;box-shadow:0 12px 28px -10px rgba(17,19,26,.55);pointer-events:none;opacity:0;transition:opacity .15s ease}
.shema-tip b{font-size:14px;font-weight:700}
.shema-tip span{color:#C9CCD3}
.shema-tip.is-on{opacity:1}
@media (max-width:640px){.shema-tip{max-width:calc(100% - 16px);padding:8px 10px;font-size:12px}.shema-tip b{font-size:13px}}
@media (prefers-reduced-motion: reduce){.shema-dot,.shema-tip{transition:none}}

/* ---------- иконки (build.py, ICONS) ---------- */
.i-arrow{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.i-chevron{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.i-chevron-r{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E")}
.i-chevron-l{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E")}
.i-phone{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")}
.i-pin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}
.i-clock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.i-mail{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
.i-burger{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")}
.i-close{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}
.i-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.i-star{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.5L12 17.3l-5.9 3.2 1.3-6.5-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E")}
.i-play{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 4.5v15l12-7.5z'/%3E%3C/svg%3E")}
.i-calc{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8 11h.01M12 11h.01M16 11h.01M8 15h.01M12 15h.01M16 15h.01M8 18h.01M12 18h4'/%3E%3C/svg%3E")}
.i-area{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E")}
.i-calendar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E")}
.i-shield{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
.i-home{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E")}
.i-doc{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E")}
.i-truck{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 9h4l3 3v4h-7z'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E")}
.i-sun{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}
.i-mute{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='m22 9-6 6M16 9l6 6'/%3E%3C/svg%3E")}
.i-thermo{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 14.8V4.5a2.5 2.5 0 0 0-5 0v10.3a4.5 4.5 0 1 0 5 0z'/%3E%3C/svg%3E")}
.i-drop{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.4 6 11a6 6 0 0 1-12 0c0-4.6 6-11 6-11z'/%3E%3C/svg%3E")}
.i-layers{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E")}
.i-award{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='m8.5 14 -1.5 8 5-3 5 3-1.5-8'/%3E%3C/svg%3E")}
.i-timer{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2 2M10 2h4'/%3E%3C/svg%3E")}
.i-chat{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L3 21l1.9-6.4A8 8 0 1 1 21 12z'/%3E%3C/svg%3E")}
.i-vk{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M15.684 0H8.316C1.592 0 0 1.592 0 8.316v7.368C0 22.408 1.592 24 8.316 24h7.368C22.408 24 24 22.408 24 15.684V8.316C24 1.592 22.391 0 15.684 0zm3.692 17.123h-1.744c-.66 0-.864-.525-2.05-1.727-1.033-1-1.49-1.135-1.744-1.135-.356 0-.458.102-.458.593v1.575c0 .424-.135.678-1.253.678-1.846 0-3.896-1.118-5.335-3.202C4.624 10.857 4.03 8.57 4.03 8.096c0-.254.102-.491.593-.491h1.744c.44 0 .61.203.78.677.863 2.49 2.303 4.675 2.896 4.675.22 0 .322-.102.322-.66V9.721c-.068-1.186-.695-1.287-.695-1.71 0-.204.17-.407.44-.407h2.744c.373 0 .508.203.508.643v3.473c0 .372.17.508.271.508.22 0 .407-.136.813-.542 1.254-1.406 2.151-3.574 2.151-3.574.119-.254.322-.491.763-.491h1.744c.525 0 .644.27.525.643-.22 1.017-2.354 4.031-2.354 4.031-.186.305-.254.44 0 .78.186.254.796.779 1.203 1.253.745.847 1.32 1.558 1.473 2.05.17.49-.085.744-.576.744z'/%3E%3C/svg%3E")}
.i-tg{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E")}
.i-image{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E")}
.i-video{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='13' height='14' rx='2'/%3E%3Cpath d='m16 10 5-3v10l-5-3z'/%3E%3C/svg%3E")}
.i-external{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4 10 14M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E")}
.i-gift{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v9H5v-9M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E")}
.i-percent{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19'/%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3C/svg%3E")}
.i-card{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E")}
.i-tool{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.4-.6-.6-2.4z'/%3E%3C/svg%3E")}
.i-door{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v17M4 21h16M14 12h.01'/%3E%3C/svg%3E")}
.i-window{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M12 3v18M4 12h16'/%3E%3C/svg%3E")}
.i-users{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M21.5 20a6.5 6.5 0 0 0-4-6'/%3E%3C/svg%3E")}
.i-ruler{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 17 14-14 4 4L7 21z'/%3E%3Cpath d='m7 13 2 2M10 10l2 2M13 7l2 2'/%3E%3C/svg%3E")}
.i-lamp{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
.i-plus{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.i-minus{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.i-grid{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
:root{--i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");--i-check-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}