/* ============================================================
   Visual system — corporate B2B
   Cool-white canvas · deep navy structure · single emerald signal accent
   ============================================================ */
:root{
  --bg:        oklch(98.2% 0.004 247);
  --bg-2:      oklch(96.2% 0.006 247);
  --surface:   oklch(100% 0 0);
  --surface-2: oklch(97.4% 0.006 247);
  --fg:        oklch(26% 0.035 255);
  --muted:     #5d6773;
  --faint:     #66707c;
  --border:    oklch(90.5% 0.011 250);
  --border-2:  oklch(83% 0.016 250);

  --navy:      oklch(34% 0.072 256);
  --navy-2:    oklch(26% 0.06 258);
  --navy-3:    oklch(20% 0.05 260);
  --navy-soft: oklch(95.5% 0.018 256);
  --navy-ink:  oklch(40% 0.07 256);

  --accent:      #008050;
  --accent-2:    oklch(62% 0.13 160);
  --accent-soft: oklch(95% 0.04 160);
  --accent-ink:  oklch(34% 0.09 160);

  --maxw: 1200px;
  --rad: 7px;
  --font: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--bg);
  color:var(--fg);
  font:400 17px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* overflow-x:clip (not hidden): iOS Safari ignores body-only overflow-x:hidden,
     and clip — unlike hidden — does not create a scroll container, so the sticky
     header keeps working. Paired with the same rule on <html> above. */
  overflow-x:clip;
  overscroll-behavior-x:none;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.07;letter-spacing:-0.02em;font-weight:800}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font:600 12px/1 var(--mono);
  letter-spacing:0.26em;text-transform:uppercase;
  color:var(--accent-ink);
}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums;font-family:var(--mono)}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font:700 15px/1 var(--font);letter-spacing:0.01em;
  padding:16px 26px;border-radius:var(--rad);
  border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s, box-shadow .15s, color .15s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px oklch(56% 0.132 158 / .26)}
.btn-primary:hover{background:var(--accent-2);box-shadow:0 10px 26px oklch(56% 0.132 158 / .32)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-ghost{background:var(--surface);color:var(--navy-ink);border-color:var(--border-2)}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy);background:var(--navy-soft)}
.btn-on-dark{background:transparent;color:#fff;border-color:oklch(100% 0 0 / .35)}
.btn-on-dark:hover{border-color:#fff;background:oklch(100% 0 0 / .08)}


/* brand logo + messengers */
.msgr a.msgr-mail{border-radius:50%;background:linear-gradient(150deg, oklch(66% 0.14 245), oklch(52% 0.17 257));display:inline-grid;place-items:center;box-shadow:inset 0 1px 0 oklch(100% 0 0 / .35), 0 2px 7px oklch(45% 0.12 257 / .4)}
.msgr a.msgr-mail svg{width:52%;height:52%;display:block;grid-area:1/1}
.msgr a.msgr-mail:hover{transform:translateY(-2px) scale(1.07)}
.brand-logo{height:56px;width:auto;display:block}
.foot-logo{height:60px;margin-bottom:4px}
.msgr{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.msgr a{display:inline-flex;width:36px;height:36px;flex:none;transition:transform .15s cubic-bezier(0.23,1,0.32,1),filter .15s}
.msgr a img{width:100%;height:100%;object-fit:contain;display:block}
.msgr a:hover{transform:translateY(-2px) scale(1.07)}
.nav-cta .msgr{gap:8px}
.nav-cta .msgr a{width:32px;height:32px}
.msgr-lg a{width:40px;height:40px}
.msgr-foot{margin-top:14px}
@media (max-width:1100px){.nav-cta .msgr{display:none}}


/* top utility bar */
.topbar{background:var(--surface-2);border-bottom:1px solid var(--border)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:42px;padding-top:6px;padding-bottom:6px}
.topbar-note{font:500 12.5px/1.3 var(--font);color:var(--muted)}
.topbar-right{display:flex;align-items:center;gap:16px;flex:none}
.topbar-phone{display:inline-flex;align-items:center;gap:8px;font:700 14.5px/1 var(--font);color:var(--fg);white-space:nowrap}
.topbar-phone svg{color:var(--accent-ink)}
.topbar-sep{width:1px;height:18px;background:var(--border-2)}
.msgr-top{gap:9px;flex-wrap:nowrap}
.msgr-top a{width:26px;height:26px}
@media (max-width:840px){.topbar-note{display:none}}
@media (max-width:560px){.topbar-sep{display:none}.topbar-phone span{display:none}}
@media (max-width:430px){.msgr-top{display:none}}

/* ============================================================ HEADER */
header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-0.01em;color:var(--fg)}
.brand .mark{
  width:36px;height:36px;border-radius:8px;display:grid;place-items:center;
  background:var(--navy);color:#fff;font:900 18px/1 var(--font);
}
.brand small{display:block;font:500 10.5px/1.1 var(--mono);letter-spacing:0.13em;color:var(--faint);text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:14.5px;color:var(--muted);transition:color .15s}
.nav-links a:hover{color:var(--navy)}
.nav-cta{display:flex;align-items:center;gap:18px}
.nav-phone{font:700 16px/1 var(--font);letter-spacing:0.01em;color:var(--fg)}
.nav-phone span{display:block;font:500 10px/1.2 var(--mono);color:var(--accent-ink);letter-spacing:0.1em;text-transform:uppercase;margin-top:3px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--border-2);border-radius:var(--rad);background:var(--surface);cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{width:20px;height:2px;background:var(--fg);transition:.2s}

/* ============================================================ HERO (navy panel) */
.hero{position:relative;overflow:hidden;background:var(--navy-2);color:#fff}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;z-index:0}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(95deg, oklch(18% 0.035 260 / .90) 0%, oklch(20% 0.04 260 / .78) 42%, oklch(24% 0.05 260 / .52) 62%, oklch(26% 0.05 260 / .12) 100%),
    linear-gradient(0deg, oklch(15% 0.03 260 / .45), transparent 60%);
}
.hero-grid::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(oklch(100% 0 0 / .06) 1px,transparent 1px),linear-gradient(90deg,oklch(100% 0 0 / .06) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(740px 460px at 80% 16%, #000 0%, transparent 72%);
  mask-image:radial-gradient(740px 460px at 80% 16%, #000 0%, transparent 72%);
}
.hero-inner{position:relative;z-index:2;padding-top:108px;padding-bottom:116px}
.hero-copy{max-width:680px}
.hero .eyebrow{color:var(--accent-2)}
.hero h1{font-size:clamp(38px,5.2vw,62px);color:#fff;margin-top:18px}
.hero h1 b{color:var(--accent-2);font-weight:800}
.hero p.lead{margin-top:22px;font-size:clamp(17px,1.5vw,20px);color:oklch(90% 0.015 250);max-width:54ch}
.hero-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.hero-meta .pill{display:inline-flex;align-items:center;gap:9px;background:oklch(100% 0 0 / .07);border:1px solid oklch(100% 0 0 / .14);border-radius:999px;padding:9px 15px;font-size:13.5px;color:oklch(92% 0.01 250)}
.hero-meta .pill b{color:#fff;font-weight:700}
.hero-meta .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-2)}

/* hero visual */
.ph{
  position:relative;border-radius:var(--rad);
  display:grid;place-items:center;overflow:hidden;
}
.ph.dark{border:1px solid oklch(100% 0 0 / .16);color:oklch(78% 0.02 250);
  background:repeating-linear-gradient(135deg, oklch(30% 0.05 258) 0 12px, oklch(27% 0.045 258) 12px 24px);}
.ph.light{border:1px solid var(--border-2);color:var(--navy-ink);
  background:repeating-linear-gradient(135deg, oklch(97% 0.008 250) 0 12px, oklch(94.5% 0.012 250) 12px 24px);}
.ph .ph-tag{position:absolute;left:14px;top:14px;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:6px 9px;border-radius:4px;}
.ph.dark .ph-tag{color:oklch(82% 0.015 250);background:oklch(20% 0.04 260 / .7);border:1px solid oklch(100% 0 0 / .12)}
.ph.light .ph-tag{color:var(--faint);background:color-mix(in oklab,var(--surface) 82%,transparent);border:1px solid var(--border)}
.ph svg{width:46%;height:46%;opacity:.6}
.hero-visual{position:relative}
.hero-visual .ph{aspect-ratio:4/5;box-shadow:0 30px 70px oklch(12% 0.04 260 / .5)}
.hero-badge{
  position:absolute;left:-20px;bottom:30px;z-index:2;
  background:var(--surface);border:1px solid var(--border-2);border-left:3px solid var(--accent);
  border-radius:var(--rad);padding:14px 18px;box-shadow:0 18px 44px oklch(12% 0.04 260 / .45);
}
.hero-badge .n{font:800 26px/1 var(--font);color:var(--navy)}
.hero-badge .l{font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:5px}

/* ============================================================ CLIENTS / TRUST STRIP */
.clients{background:var(--surface);border-bottom:1px solid var(--border)}
.clients-inner{display:flex;align-items:center;gap:30px;padding:24px;flex-wrap:wrap;justify-content:space-between}
.clients .lbl{font:600 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);flex:none;max-width:170px}
.client-logos{display:flex;gap:14px;flex-wrap:wrap;flex:1}
.logo-ph{height:42px;flex:1;min-width:120px;border:1px dashed var(--border-2);border-radius:var(--rad);display:grid;place-items:center;color:var(--faint);font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--surface-2)}


/* ============================================================ SECTIONS */
section.block{padding:88px 0;border-bottom:1px solid var(--border)}
.shead{max-width:780px;margin-bottom:48px}
.shead h2{font-size:clamp(28px,3.4vw,42px);margin-top:14px;color:var(--fg)}
.shead p{margin-top:16px;color:var(--muted);font-size:18px}

/* audience cards */
.aud{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.acard{background:var(--surface);border:1px solid var(--border);border-radius:var(--rad);padding:30px 26px;transition:border-color .18s,transform .18s,box-shadow .18s}
.acard:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:0 16px 36px oklch(40% 0.04 258 / .12)}
.acard .ic{width:46px;height:46px;border-radius:10px;background:var(--navy-soft);border:1px solid color-mix(in oklab,var(--navy) 22%,var(--border));display:grid;place-items:center;color:var(--navy);margin-bottom:18px}
.acard h3{font-size:20px;letter-spacing:-0.01em}
.acard p{margin-top:10px;color:var(--muted);font-size:15px}
.acard ul{margin-top:14px;list-style:none;display:flex;flex-direction:column;gap:7px}
.acard li{font-size:14px;color:var(--faint);padding-left:18px;position:relative}
.acard li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--accent);border-radius:2px}

/* B2B terms */
.b2b{background:var(--navy-2);color:#fff;border-bottom:1px solid var(--border)}
.b2b .shead h2{color:#fff}
.b2b .eyebrow{color:var(--accent-2)}
.b2b .shead p{color:oklch(88% 0.015 250)}
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tcard{background:oklch(100% 0 0 / .05);border:1px solid oklch(100% 0 0 / .12);border-radius:var(--rad);padding:26px 24px}
.tcard .ic{width:42px;height:42px;border-radius:9px;background:oklch(100% 0 0 / .07);display:grid;place-items:center;color:var(--accent-2);margin-bottom:16px}
.tcard h3{font-size:18px;color:#fff}
.tcard p{margin-top:9px;color:oklch(85% 0.015 250);font-size:14.5px}

/* spec comparison table */
.spec-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--rad);background:var(--surface)}
table.spec{width:100%;border-collapse:collapse;min-width:680px}
table.spec th,table.spec td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--border);font-size:15px;vertical-align:middle}
table.spec thead th{background:var(--navy);color:#fff;font:700 15px/1.2 var(--font);letter-spacing:-0.01em;border-bottom:0}
table.spec thead th:first-child{font:600 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:oklch(80% 0.02 250)}
table.spec thead th.feat{position:relative}
table.spec thead th .tag{display:inline-block;margin-top:6px;font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--accent);color:#fff;padding:5px 8px;border-radius:4px}
table.spec tbody th{font-weight:600;color:var(--fg);background:var(--surface-2);width:240px}
table.spec td{color:var(--muted)}
table.spec td.feat{background:var(--accent-soft);color:var(--fg);font-weight:600}
table.spec .yes{color:var(--accent);font-weight:800}
table.spec .no{color:var(--faint)}
table.spec tbody tr:last-child th,table.spec tbody tr:last-child td{border-bottom:0}
table.spec .price{font:800 19px/1 var(--font);color:var(--navy)}
table.spec td.feat .price{color:var(--accent-ink)}
.spec-cta{margin-top:24px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.spec-cta p.spec-note{display:inline-flex;align-items:flex-start;gap:10px;margin:0;background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 32%,var(--border));border-radius:24px;padding:11px 18px;font-size:14.5px;font-weight:700;color:var(--accent-ink)}
.spec-cta p.spec-note b{font-weight:800}
/* (17.09.2026) Фраза обёрнута в <span>: без обёртки голые текстовые узлы и <b>
   становились отдельными flex-элементами и на телефоне переносились тремя колонками.
   Иконка выровнена по первой строке: margin-top = (23.2px строки − 17px иконки) / 2.
   Радиус 24px = половина высоты однострочной плашки (47px): в одну строку это та же таблетка,
   а при переносе на промежуточной ширине — скруглённый прямоугольник, не «сосиска». */
.spec-cta p.spec-note>span{min-width:0}
.spec-cta p.spec-note svg{color:var(--accent);flex:none;margin-top:3px}
@media (max-width:540px){
  /* На узком экране фраза уходит в две строки — таблетка с радиусом 999px
     превращается в «сосиску», поэтому обычная скруглённая плашка. */
  .spec-cta p.spec-note{border-radius:14px;padding:12px 16px;line-height:1.45}
  .spec-cta p.spec-note svg{margin-top:2px}
}

/* tech / why */
.tech{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}
.tech .ph{aspect-ratio:5/4}
.tlist{display:flex;flex-direction:column;gap:4px}
.titem{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--border)}
.titem:last-child{border-bottom:0}
.titem .k{font:800 22px/1 var(--mono);color:var(--accent);min-width:74px;letter-spacing:-0.02em}
.titem h3{font-size:18px}
.titem p{margin-top:7px;color:var(--muted);font-size:15px}

/* delivery */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--rad);padding:28px 24px;position:relative;overflow:hidden}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;right:18px;top:12px;font:800 38px/1 var(--mono);color:var(--navy-soft);letter-spacing:-0.04em}
.step h3{font-size:18px;margin-top:8px;position:relative}
.step p{margin-top:10px;color:var(--muted);font-size:14.5px}
.del-note{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:10px 16px;font-size:14px;color:var(--muted)}
.chip b{color:var(--fg);font-weight:700}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
/* (17.09.2026) Чипы доставки: текст с <b> обёрнут в <span> (та же беда, что у .spec-note).
   Точка — по первой строке, если фраза перенеслась: (22.4px строки − 8px) / 2. */
.del-note .chip{align-items:flex-start;border-radius:23px}
.del-note .chip .dot{margin-top:7px}
@media (max-width:540px){
  .del-note .chip{border-radius:14px;line-height:1.45}
  .del-note .chip .dot{margin-top:6px}
}

/* product catalog */
.catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--rad);overflow:hidden;transition:border-color .18s,transform .18s,box-shadow .18s}
.pcard:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:0 16px 36px oklch(40% 0.04 258 / .12)}
.pcard .ph{aspect-ratio:4/3;border-radius:0;border:0;border-bottom:1px solid var(--border)}
.pcard-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.pcard-cat{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.pcard h3{font-size:18px;margin-top:10px;letter-spacing:-0.01em}
.pcard p{margin-top:9px;color:var(--muted);font-size:14.5px;flex:1}
.pcard-dim{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:600 13px/1 var(--mono);color:var(--faint)}
.pcard-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.pcard-price{font:800 21px/1 var(--font);color:var(--navy)}
.pcard-price small{font:600 10px/1 var(--mono);color:var(--faint);display:block;margin-bottom:6px;letter-spacing:.12em;text-transform:uppercase}
.pcard .btn{padding:11px 16px;font-size:13.5px}
.catalog-note{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;background:var(--navy-soft);border:1px solid color-mix(in oklab,var(--navy) 18%,var(--border));border-radius:10px;padding:22px 28px}
.catalog-note p{margin:0;color:var(--fg);font-size:16px;max-width:62ch}
.catalog-note p b{color:var(--navy);font-weight:800}
.catalog-note .btn{flex:none}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal .ph{aspect-ratio:1}
.gal .ph.wide{grid-column:span 2;aspect-ratio:2/1}

/* real photos */
.pcard .pimg{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border-bottom:1px solid var(--border);padding:16px}
.hero-photo{aspect-ratio:4/5;background:#fff;border:1px solid oklch(100% 0 0 / .16);border-radius:var(--rad);overflow:hidden;box-shadow:0 30px 70px oklch(12% 0.04 260 / .5)}
.hero-photo img{width:100%;height:100%;object-fit:contain;padding:16px}
.imgfill{width:100%;height:100%;object-fit:cover;display:block}
.ph.has-img{padding:0}
.tech .ph.photo{background:#fff;border:1px solid var(--border-2)}
.tech .ph.photo img{object-fit:contain;padding:18px}

/* applications */
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.appcard{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rad);padding:20px 22px;transition:border-color .18s,transform .18s,box-shadow .18s}
.appcard:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:0 12px 28px oklch(40% 0.04 258 / .1)}
.appcard .ic{width:44px;height:44px;border-radius:10px;background:var(--navy-soft);border:1px solid color-mix(in oklab,var(--navy) 22%,var(--border));display:grid;place-items:center;color:var(--navy);flex:none}
.appcard h3{font-size:16px;letter-spacing:-0.01em;font-weight:700}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.rcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--rad);padding:28px 26px;position:relative;overflow:hidden}
.rcard .qmark{position:absolute;right:20px;top:8px;font:900 64px/1 var(--font);color:var(--accent-soft)}
.rcard .stars{color:var(--accent);font-size:15px;letter-spacing:3px;margin-bottom:13px}
.rcard p{color:var(--fg);font-size:15.5px;position:relative;z-index:1}
.rcard .who{margin-top:20px;padding-top:17px;border-top:1px solid var(--border);display:flex;align-items:center;gap:14px}
.rcard .who .ava{width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:800 16px/1 var(--font);flex:none}
.rcard .who b{display:block;font-size:15px;color:var(--fg)}
.rcard .who span{font-size:13px;color:var(--muted)}
.rcard .rreply{margin-top:16px;padding:13px 15px;background:var(--accent-soft);border-radius:10px;border-left:3px solid var(--accent)}
.rcard .rreply-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rcard .rreply-logo{flex:none;width:22px;height:22px;border-radius:5px;display:grid;place-items:center;overflow:hidden;background:#fff}
.rcard .rreply-logo img{width:18px;height:18px;object-fit:contain}
.rcard .rreply-head b{font-size:13.5px;color:var(--accent-2,var(--accent))}
.rcard .rreply-tag{font-size:12px;color:var(--muted)}
.rcard .rreply p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.5;z-index:auto}


/* image carousel */
.gal-c{position:relative;width:100%;background:#fff;overflow:hidden}
.pcard .gal-c{aspect-ratio:4/3;border-bottom:1px solid var(--border)}
.hero-photo .gal-c{height:100%}
.gal-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.gal-track::-webkit-scrollbar{display:none}
.gslide{flex:0 0 100%;width:100%;height:100%;object-fit:contain;scroll-snap-align:center;padding:16px}
.pcard .gal-c .gslide{aspect-ratio:auto}
.gnav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:#fff;box-shadow:0 6px 18px oklch(40% 0.05 258 / .18);display:grid;place-items:center;cursor:pointer;color:var(--navy);opacity:0;transition:opacity .18s ease,box-shadow .18s,border-color .18s,transform .18s cubic-bezier(0.23,1,0.32,1);z-index:3}
.gnav svg{width:17px;height:17px;display:block}
.gal-c:hover .gnav{opacity:1}
.gnav.prev{left:14px}.gnav.next{right:14px}
.gnav:hover{border-color:var(--navy);box-shadow:0 10px 24px oklch(40% 0.07 258 / .28)}
.gnav.prev:hover{transform:translateY(-50%) translateX(-2px)}
.gnav.next:hover{transform:translateY(-50%) translateX(2px)}
.gnav:active{transform:translateY(-50%) scale(.9)}
.gdots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:0 12px;z-index:2}
.gdots button{width:24px;height:24px;border-radius:50%;border:0;padding:0;background:transparent;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.gdots button::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:var(--border-2);transition:background .18s,width .18s}
.gdots button.active::before{background:var(--accent);width:18px;border-radius:4px}
@media (hover:none){.gnav{opacity:1}}



.gcount{display:none;position:absolute;bottom:10px;right:12px;z-index:2;align-items:center;font:600 11px/1 var(--mono);letter-spacing:.06em;color:#fff;background:oklch(20% 0.04 260 / .62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:6px 9px;border-radius:999px}
.gal-c.many .gdots{display:none}
.gal-c.many .gcount{display:flex}


/* object gallery strip (horizontal carousel) */
.gstrip-wrap{position:relative;margin-top:8px}
.gstrip{display:grid;grid-auto-flow:column;grid-auto-columns:min(300px,74vw);grid-template-rows:repeat(3,auto);gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:6px 2px 14px;scrollbar-width:none;-ms-overflow-style:none}
.gstrip::-webkit-scrollbar{display:none}
.gph{aspect-ratio:4/3;border-radius:10px;overflow:hidden;scroll-snap-align:start;cursor:zoom-in;border:1px solid var(--border);background:#fff;box-shadow:0 6px 18px oklch(40% 0.04 258 / .08)}
@media (max-width:680px){.gstrip{grid-template-rows:repeat(2,auto)}}
.gph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s cubic-bezier(0.23,1,0.32,1)}
.gph:hover img{transform:scale(1.05)}
.gstrip-nav{position:absolute;top:calc(50% - 7px);transform:translateY(-50%);z-index:3;width:48px;height:48px;border-radius:50%;border:1px solid var(--border-2);background:#fff;box-shadow:0 8px 22px oklch(40% 0.06 258 / .2);display:grid;place-items:center;cursor:pointer;color:var(--navy);transition:background .15s,border-color .15s,transform .2s cubic-bezier(0.23,1,0.32,1)}
.gstrip-nav svg{width:18px;height:18px}
.gstrip-nav.prev{left:-10px}.gstrip-nav.next{right:-10px}
.gstrip-nav:hover{border-color:var(--navy);background:var(--navy-soft)}
.gstrip-nav.prev:hover{transform:translateY(-50%) translateX(-2px)}
.gstrip-nav.next:hover{transform:translateY(-50%) translateX(2px)}
.gstrip-nav[disabled]{opacity:.35;cursor:default;box-shadow:none}
@media (hover:none){.gstrip-nav{display:none}}

/* gallery lightbox */
.gal .ph.has-img{cursor:zoom-in}
.lb-overlay{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:54px 18px;background:oklch(14% 0.02 260 / .86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .2s cubic-bezier(0.23,1,0.32,1)}
.lb-overlay.open{opacity:1}
.lb-overlay[hidden]{display:none}
.lb{position:relative;width:min(1120px,100%)}
.lb .gal-c{background:transparent;overflow:visible}
.lb .gal-track{height:82vh;border-radius:8px;overflow-x:auto}
.lb .gslide{height:82vh;object-fit:contain;padding:0}
.lb .gnav{opacity:1;width:48px;height:48px;background:#fff}
.lb .gnav.prev{left:-6px}.lb .gnav.next{right:-6px}
.lb .gdots{bottom:-28px}
.lb .gdots button::before{background:oklch(100% 0 0 / .45)}
.lb .gdots button.active::before{background:#fff}
.lb-close{position:absolute;right:0;top:-48px;width:42px;height:42px;border-radius:50%;border:1px solid oklch(100% 0 0 / .3);background:oklch(100% 0 0 / .12);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .18s,transform .2s cubic-bezier(0.23,1,0.32,1)}
.lb-close svg{width:18px;height:18px}
.lb-close:hover{background:oklch(100% 0 0 / .22);transform:rotate(90deg)}
@media (max-width:760px){.lb .gal-track,.lb .gslide{height:68vh}.lb .gnav{width:40px;height:40px}}

/* product modal */
.pcard-clickable{cursor:pointer}
.pm-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:oklch(20% 0.04 260 / .55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;transition:opacity .2s cubic-bezier(0.23,1,0.32,1)}
.pm-overlay.open{opacity:1}
.pm-overlay[hidden]{display:none}
.pm{position:relative;width:min(980px,100%);max-height:90vh;overflow:auto;background:var(--bg);border:1px solid var(--border-2);border-radius:12px;box-shadow:0 40px 100px oklch(12% 0.04 260 / .5);display:grid;grid-template-columns:1fr 1fr;transform:translateY(14px) scale(.985);opacity:0;transition:transform .2s cubic-bezier(0.23,1,0.32,1),opacity .2s}
.pm-overlay.open .pm{transform:none;opacity:1}
.pm-close{position:absolute;right:16px;top:16px;z-index:4;width:40px;height:40px;border-radius:50%;border:1px solid var(--border-2);background:color-mix(in oklab,var(--surface) 88%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--navy-ink);cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 10px oklch(40% 0.04 258 / .14);transition:background .18s,border-color .18s,color .18s,transform .2s cubic-bezier(0.23,1,0.32,1)}
.pm-close svg{width:16px;height:16px;display:block}
.pm-close:hover{background:var(--navy);border-color:var(--navy);color:#fff;transform:rotate(90deg)}
.pm-close:active{transform:rotate(90deg) scale(.92)}
.pm-media{background:#fff;border-right:1px solid var(--border)}
.pm-media .gal-c{aspect-ratio:1;height:auto;background:#fff}
.pm-media .gslide{aspect-ratio:1;padding:24px}
.pm-info{padding:36px 32px 30px;display:flex;flex-direction:column}
.pm-cat{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.pm-info h3{font-size:24px;margin-top:10px;letter-spacing:-0.01em;color:var(--fg)}
.pm-dims{margin-top:9px;font:600 13px/1.5 var(--mono);color:var(--faint)}
.pm-sec-title{margin-top:22px;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
ul.pm-base{margin-top:12px;list-style:none;display:grid;gap:8px}
ul.pm-base li{padding-left:30px;position:relative;font-size:14px;color:var(--muted);min-height:20px;display:flex;align-items:center}
ul.pm-base li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:linear-gradient(145deg,var(--accent-2),var(--accent));box-shadow:0 2px 5px oklch(56% 0.132 158 / .35),inset 0 1px 0 oklch(100% 0 0 / .25)}
ul.pm-base li::after{content:"";position:absolute;left:7px;top:50%;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-60%) rotate(45deg)}
.pm-note{margin-top:10px;font-size:12.5px;color:var(--faint)}
.pm-colors-row{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.pm-color{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--border-2);border-radius:999px;cursor:pointer;font-size:14px;color:var(--fg);transition:border-color .15s,background .15s}
.pm-color input{accent-color:var(--accent);margin:0}
.pm-color.sel{border-color:var(--navy);background:var(--navy-soft)}
.pm-opt-group{margin-top:6px}
.pm-opt{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer}
.pm-opt:last-child{border-bottom:0}
.pm-opt input{width:18px;height:18px;accent-color:var(--accent);flex:none;cursor:pointer;margin:0}
.pm-opt .l{flex:1;font-size:14px;color:var(--fg)}
.pm-opt .p{font:700 14px/1 var(--font);color:var(--navy);white-space:nowrap}
.pm-noopt{margin-top:12px;font-size:14px;color:var(--muted)}
.pm-foot{margin-top:26px;padding-top:20px;border-top:1px solid var(--border-2)}
.pm-total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.pm-total span{font-size:14px;color:var(--muted)}
.pm-total b{font:800 30px/1 var(--font);color:var(--navy);letter-spacing:-0.02em}
.pm-foot .btn{width:100%;justify-content:center}
@media (max-width:760px){
  .pm{grid-template-columns:1fr}
  .pm-media{border-right:0;border-bottom:1px solid var(--border)}
  .pm-media .gal-c{aspect-ratio:4/3}
  .pm-info{padding:26px 20px 24px}
}

/* guarantee */
.guar{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.guar .seal{width:128px;height:128px;border-radius:50%;border:2px solid var(--accent);background:radial-gradient(circle at 50% 32%, #fff, var(--accent-soft));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin-bottom:14px;box-shadow:0 14px 34px oklch(56% 0.132 158 / .25),inset 0 2px 0 #fff}
.guar .seal .num{font:800 52px/1 var(--font);color:var(--accent-ink);letter-spacing:-0.03em}
.guar .seal .unit{font:700 13px/1 var(--mono);letter-spacing:.1em;color:var(--accent-ink)}
.guar .seal-cap{margin:0 0 22px;font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.guar ul{list-style:none;display:grid;gap:16px}
.guar li{padding-left:34px;position:relative;color:var(--muted);min-height:22px}
.guar li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:linear-gradient(145deg,var(--accent-2),var(--accent));box-shadow:0 2px 6px oklch(56% 0.132 158 / .35),inset 0 1px 0 oklch(100% 0 0 / .25)}
.guar li::after{content:"";position:absolute;left:8px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.guar li b{color:var(--fg)}

/* ============================================================ CTA / FORM */
#zayavka{background:var(--bg-2)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.form-grid h2{font-size:clamp(28px,3.4vw,40px)}
.form-grid .lead{margin-top:16px;color:var(--muted);font-size:18px;max-width:46ch}
.contacts{margin-top:34px;display:flex;flex-direction:column;gap:18px}
.crow{display:flex;gap:14px;align-items:flex-start}
.crow .ic{width:42px;height:42px;border-radius:9px;background:var(--surface);border:1px solid var(--border-2);display:grid;place-items:center;color:var(--navy);flex:none}
.crow .t span{display:block;font:500 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.crow .t a,.crow .t b{font-size:17px;font-weight:700;color:var(--fg)}
form.lead-form{background:var(--surface);border:1px solid var(--border-2);border-radius:10px;padding:32px;box-shadow:0 24px 60px oklch(40% 0.04 258 / .1)}
.field{margin-bottom:18px}
.field label{display:block;font:600 13px/1 var(--font);margin-bottom:9px;color:var(--fg)}
.field label .req{color:var(--accent)}
.field input,.field select,.field textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--rad);
  color:var(--fg);font:400 16px/1.4 var(--font);padding:14px 15px;transition:border-color .15s,box-shadow .15s,background .15s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px oklch(56% 0.132 158 / .16)}
.field textarea{resize:vertical;min-height:84px}
.field.err input,.field.err select{border-color:oklch(60% 0.2 25)}
.field .msg{display:none;color:oklch(55% 0.2 25);font-size:12.5px;margin-top:7px}
.field.err .msg{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* «Добавить подробности» — свёрнутый блок формы заявки (03.10.2026).
   Сверху формы только имя и телефон; компания, email и комментарий — под
   нативным <details>, по умолчанию закрыт. Строка-раскрывашка — псевдоссылка
   с пунктиром (принятый в рунете знак «раскроет на месте, никуда не уведёт»),
   высота не ниже 44 px. Плюс в кружке меняется на минус, без анимации: действие
   мгновенное. Пометка .lf-more-note — расчёт комплектации уже лёг в комментарий. */
.lf-more{margin:-6px 0 4px}
.lf-more-sum{list-style:none;cursor:pointer;border-radius:var(--rad)}
.lf-more-sum::-webkit-details-marker{display:none}
.lf-more-sum::marker{content:''}
.lf-more-in{display:flex;align-items:center;flex-wrap:wrap;column-gap:10px;row-gap:2px;min-height:44px;padding:6px 0;
  font:600 15px/1.3 var(--font);color:var(--navy-ink)}
.lf-more-ic{width:20px;height:20px;flex:none;padding:2px;border:1.5px solid currentColor;border-radius:50%}
.lf-more-in .t{text-decoration:underline dashed;text-decoration-thickness:1px;text-underline-offset:4px}
.lf-more-in .o{font:400 13px/1.3 var(--font);color:var(--faint)}
.lf-more-sum:hover .lf-more-in{color:var(--navy)}
.lf-more[open] .lf-more-ic .v{display:none}
.lf-more-note{display:block;margin:-4px 0 6px 30px;font-size:13px;line-height:1.4;color:var(--accent-ink)}
.lf-more-note[hidden]{display:none}
.lf-more-body{padding-top:12px}
/* Галочка согласия на обработку ПД (152-ФЗ в ред. 156-ФЗ) — перед кнопкой.
   Кликабельна вся подпись; строка не ниже 44 px (тач-таргет). Квадрат на тех же
   токенах, что поля формы: фон --surface-2, рамка --border-2, отмечено — --accent. */
.consent{margin:2px 0 14px}
.consent-label{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;cursor:pointer;font:400 14px/1.45 var(--font);color:var(--muted)}
.consent-label a{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
.consent-label input{
  appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:0;
  background:var(--surface-2);border:1.5px solid var(--border-2);border-radius:5px;cursor:pointer;
  background-position:center;background-repeat:no-repeat;background-size:14px 14px;
}
.consent-label input:checked{
  background-color:var(--accent);border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.consent-label input:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.consent.err .consent-label input{border-color:oklch(60% 0.2 25);box-shadow:0 0 0 3px oklch(60% 0.2 25 / .14)}
.consent .msg{color:oklch(55% 0.2 25);font-size:12.5px;line-height:1.4;margin:0 0 0 32px}
@media (forced-colors:active){.consent-label input{appearance:auto;-webkit-appearance:auto}}
.lead-form .btn{width:100%;justify-content:center;margin-top:6px}
.fineprint{margin-top:14px;font-size:12.5px;color:var(--faint);text-align:center}
.fineprint a{color:var(--muted);text-decoration:underline}
.form-ok{display:none;text-align:center;padding:40px 10px}
.form-ok.show{display:block}
.form-ok .seal{width:72px;height:72px;border-radius:50%;background:var(--accent-soft);border:2px solid var(--accent);color:var(--accent-ink);display:grid;place-items:center;margin:0 auto 20px;font-size:34px}
.form-ok h3{font-size:24px}
.form-ok p{margin-top:12px;color:var(--muted)}

/* ============================================================ FOOTER */
footer{background:var(--navy-3);color:oklch(82% 0.015 250);padding:54px 0 34px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid oklch(100% 0 0 / .1)}
.foot .brand{color:#fff}
.foot .brand .mark{background:#fff;color:var(--navy)}
.foot .brand small{color:oklch(70% 0.02 250)}
.foot p{color:oklch(72% 0.02 250);font-size:14.5px;margin-top:14px;max-width:40ch}
.foot h4{font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:oklch(66% 0.02 250);margin-bottom:16px}
.foot a{display:block;color:oklch(82% 0.015 250);font-size:14.5px;margin-bottom:10px}
.foot a:hover{color:var(--accent-2)}
.copy{padding-top:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:oklch(64% 0.02 250);font-size:13px}

/* floating mobile call */
.fab{display:none;position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;place-items:center;box-shadow:0 12px 30px oklch(40% 0.08 160 / .5)}

/* ============================================================ RESPONSIVE */
@media (max-width:980px){
  .hero-inner{padding-top:72px;padding-bottom:80px}
  .aud,.terms,.steps,.catalog,.apps{grid-template-columns:1fr 1fr}
  .tech{grid-template-columns:1fr;gap:30px}
  .guar{grid-template-columns:1fr;gap:28px}
  .form-grid{grid-template-columns:1fr;gap:38px}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .nav-links{display:none}
  .nav-phone{display:none}
  .burger{display:flex}
  .nav-links.open{
    display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--surface);border-bottom:1px solid var(--border);padding:8px 0;
  }
  .nav-links.open a{padding:14px 24px;width:100%}
  .hero-bg{object-position:68% center}
  .aud,.terms,.steps,.gal,.catalog,.apps,.reviews{grid-template-columns:1fr}
  .gal .ph.wide{grid-column:span 1;aspect-ratio:1}
  .two{grid-template-columns:1fr}
  form.lead-form{padding:24px 20px}
  .foot{grid-template-columns:1fr}
  section.block{padding:60px 0}
  .clients-inner{flex-direction:column;align-items:flex-start;gap:16px}
  .fab{display:grid}
  .hero h1{font-size:34px}
}

/* ---- Доп. опция в карточке каталога ---- */
.pcard-opt{display:inline-flex;align-items:flex-start;gap:5px;font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.4}
/* (17.09.2026) Текст опции обёрнут в <span>, иконка — по первой строке: (16.8px − 13px) / 2. */
.pcard-opt svg{flex:none;color:var(--accent);margin-top:2px}
.pcard-opt b{color:var(--fg);font-weight:600}

/* ---- Yandex rating badge (reviews) — повторяет реальный бейдж Яндекс.Бизнеса ---- */
.yarev-wrap{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 34px}
.yarev{display:inline-flex;align-items:center;gap:11px;background:#f6f6f6;border-radius:10px;padding:10px 16px;font-family:"YS Text","Helvetica Neue",Helvetica,Arial,sans-serif}
.yarev-pin{flex:none;display:flex}
.yarev-info{display:flex;flex-direction:column;gap:3px}
.yarev-top{display:flex;align-items:center;gap:9px}
.yarev-num{font-size:17px;font-weight:600;color:#1a1a1a;line-height:1}
.yarev-stars{display:block}
.yarev-cap{font-size:12px;color:#7d7d7d;line-height:1.2}
.yarev-cap b{color:#1a1a1a;font-weight:600}

/* ---- Avito rating badge (reviews) ---- */
.avrev{display:inline-flex;align-items:center;gap:11px;background:#f6f6f6;border-radius:10px;padding:10px 16px;text-decoration:none;font-family:"YS Text","Helvetica Neue",Helvetica,Arial,sans-serif;transition:background .14s}
.avrev:hover{background:#ededed}
.avrev-mark{flex:none;display:flex;align-items:center;justify-content:center}
.avrev-mark svg{display:block;width:31px;height:auto}
.avrev-stars{color:#ff9500;font-size:14px;letter-spacing:2px;line-height:1}

/* ---- Страница «О компании / Реквизиты» (подстраница o-nas.html) ---- */
.about-lead{max-width:780px;font-size:19px;line-height:1.6;color:var(--muted);margin-bottom:20px}
.about-lead b{color:var(--fg);font-weight:700}
.about-cols{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:start;margin-top:34px}
.about-cols h3{font-size:19px;margin-bottom:14px}
.about-cols p{color:var(--muted);font-size:15.5px;margin-bottom:12px}
.about-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.about-list li{position:relative;padding-left:24px;color:var(--fg);font-size:15.5px;line-height:1.5}
.about-list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:2px;background:var(--accent)}
.about-list li b{font-weight:700}

.rekv{background:var(--surface);border:1px solid var(--border);border-radius:var(--rad);overflow:hidden;max-width:780px}
.rekv dl{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);margin:0}
.rekv dt{padding:14px 20px;font:600 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);background:var(--surface-2);border-top:1px solid var(--border);border-right:1px solid var(--border);display:flex;align-items:center}
.rekv dd{padding:14px 20px;margin:0;font-size:15.5px;color:var(--fg);border-top:1px solid var(--border);display:flex;align-items:center;word-break:break-word}
.rekv dl>dt:first-of-type,.rekv dl>dd:nth-of-type(1){border-top:0}
.rekv .tbd{color:var(--faint);font-style:italic}
.rekv-note{max-width:780px;margin-top:16px;font-size:14px;color:var(--muted)}
@media (max-width:680px){
  .about-cols{grid-template-columns:1fr;gap:28px;margin-top:26px}
  .rekv dl{grid-template-columns:1fr}
  .rekv dt{border-right:0;padding-bottom:3px;background:transparent}
  .rekv dd{padding-top:2px;border-top:0}
  .rekv dl>dd:nth-of-type(1){border-top:0}
  .rekv dt{border-top:1px solid var(--border)}
  .rekv dl>dt:first-of-type{border-top:0}
}

/* ссылки в тексте статей — видимые (добавлено 2026-07-27) */
.art-body a:not(.btn),.art-lead a:not(.btn),.tldr a:not(.btn){color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:color-mix(in oklab,var(--accent) 55%,transparent);transition:color .15s,text-decoration-color .15s}
.art-body a:not(.btn):hover,.art-lead a:not(.btn):hover,.tldr a:not(.btn):hover{color:var(--navy);text-decoration-color:currentColor}

/* ==== стили страниц статей и хаба (вынесены из локальных <style> 2026-07-27) ==== */
.artwrap{max-width:840px}
.art-hero{padding:64px 0 88px}
.art-hero .eyebrow{color:var(--accent-ink)}
.art-hero h1{font-size:clamp(28px,4vw,44px);line-height:1.12;margin-top:14px;color:var(--fg);letter-spacing:-0.02em}
.art-lead{margin-top:22px;font-size:19px;line-height:1.65;color:var(--fg)}
.art-body{padding:8px 0 0}
.art-body h2{font-size:clamp(23px,2.7vw,32px);margin:46px 0 14px;color:var(--fg);letter-spacing:-0.01em}
.art-body h3{font-size:20px;margin:30px 0 10px;color:var(--fg)}
.art-body p{margin:14px 0;font-size:17.5px;line-height:1.72}
.art-body ul{margin:14px 0;list-style:none}
.art-body ul li{position:relative;padding-left:26px;margin:10px 0;font-size:17px;line-height:1.6}
.art-body ul li::before{content:"";position:absolute;left:2px;top:10px;width:7px;height:7px;background:var(--accent);border-radius:2px}
.art-body strong,.art-body b{color:var(--fg)}
.tldr{background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 26%,var(--border));border-radius:12px;padding:22px 26px;margin:26px 0}
.tldr .lbl{font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:12px}
.tldr ul{margin:0}
.tldr ul li{margin:8px 0}
.table-scroll{overflow-x:auto;margin:26px 0}
.art-fig{margin:30px 0}
.art-fig img{width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:12px;background:#fff}
.art-fig figcaption{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.faq h3{font-size:18px;margin:22px 0 4px;color:var(--fg)}
.faq p{margin:4px 0 0;color:var(--muted)}
.author-box{border-top:1px solid var(--border);margin-top:44px;padding-top:22px;color:var(--muted);font-size:15px;line-height:1.6}
.author-box b{color:var(--fg)}
.art-cta{background:var(--navy);border-radius:14px;padding:30px 32px;margin:34px 0 0;color:#fff;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.art-cta p{margin:0;font-size:18px;font-weight:600;max-width:52ch}
.art-cta .sub{font-weight:400;font-size:15px;color:oklch(88% 0.015 250);margin-top:6px}
.updated{font:600 12px/1 var(--mono);letter-spacing:.06em;color:var(--faint);margin-top:16px}
/* хаб «Статьи» */
.stlist{margin:34px 0 0}
.stlist~.art-cta{margin-top:40px}
.stcard{display:block;border:1px solid var(--border);border-radius:14px;padding:24px 26px;margin:16px 0;text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.stcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.stcard .st-date{font:600 12px/1 var(--mono);letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
.stcard h2{font-size:22px;margin:9px 0 8px;color:var(--fg);letter-spacing:-0.01em}
.stcard p{margin:0;color:var(--muted);font-size:16px;line-height:1.6}
.stcard .st-more{display:inline-block;margin-top:12px;font-weight:600;color:var(--accent-ink)}

/* ==== разделы статей: крошки, «Ещё по теме», хаб по разделам, пагинация (22.09.2026) ====
   Новых цветов и шрифтов нет: --border / --accent / --navy / --faint и mono для служебных
   подписей, как у .eyebrow и .st-date. Анимаций не добавляем — только те же .15s ховеры. */

/* Хлебные крошки: колонка та же, что у .artwrap (840), чтобы начало крошек совпадало с H1.
   Ссылки высотой 44px ради тач-таргета, но визуально строка тихая: 14px, --muted. */
.crumbs .wrap{max-width:840px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;padding-top:14px;font-size:14px;line-height:1.35;color:var(--faint)}
.crumbs li{display:flex;align-items:center;min-width:0}
.crumbs li+li::before{content:"";flex:none;width:6px;height:6px;margin:0 12px 0 8px;border-top:1.5px solid var(--border-2);border-right:1.5px solid var(--border-2);transform:rotate(45deg)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}
.crumbs a:hover{color:var(--navy);text-decoration-color:currentColor}
/* Последний пункт — название статьи, оно же повторено в H1: на десктопе одной строкой
   с многоточием, полный текст остаётся в DOM для скринридера. */
.crumbs li:last-child{flex:1 1 0;min-width:8ch}
.crumbs [aria-current]{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--faint)}
/* Под крошками полный верхний отступ героя (64px) уже не нужен */
.crumbs+script+.art-hero,.crumbs+.art-hero{padding-top:30px}
@media (max-width:560px){
  .crumbs ol{font-size:13.5px;padding-top:6px}
  .crumbs li+li::before{margin:0 9px 0 6px}
  /* на телефоне название статьи уходит на свою строку и переносится,
     а не сжимается до «Хоз…» рядом с разделом */
  .crumbs li:last-child{flex-basis:100%;padding-bottom:2px}
  .crumbs li:last-child::before{display:none}
  .crumbs [aria-current]{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
  .crumbs+script+.art-hero,.crumbs+.art-hero{padding-top:22px}
}

/* Карточки с h3 (хаб и «Ещё по теме») — тот же вид, что у h2, чуть мельче для сетки */
.stcard h3{font-size:19px;line-height:1.25;margin:9px 0 8px;color:var(--fg);letter-spacing:-0.01em}
/* Превью 2×2: четыре карточки столбиком растягивали каждый раздел хаба на экран */
.sec-block .stlist,.related .stlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.sec-block .stcard,.related .stcard{margin:0;display:flex;flex-direction:column;align-items:flex-start;padding:22px 22px 20px;background:var(--surface)}
.sec-block .stcard p,.related .stcard p{font-size:15.5px;flex:1 1 auto}
@media (max-width:680px){
  .sec-block .stlist,.related .stlist{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* «Ещё по теме» — отдельная светлая полоса после статьи, в той же колонке 840 */
section.block.related{background:var(--surface-2);border-top:1px solid var(--border);padding:64px 0 72px}
.related .wrap{max-width:840px}
.related h2{font-size:clamp(23px,2.7vw,30px);color:var(--fg);letter-spacing:-0.01em;line-height:1.15}
.related-all,.sec-all{margin-top:14px}
.related-all a,.sec-all a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--accent-ink);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--accent) 45%,transparent);text-underline-offset:4px;transition:color .15s,text-decoration-color .15s}
.related-all a:hover,.sec-all a:hover{color:var(--navy);text-decoration-color:currentColor}
@media (max-width:560px){section.block.related{padding:44px 0 52px}}

/* Навигация по разделам — чипы. На хабе это якоря, на странице раздела — «Другие разделы» */
.sec-nav{margin-top:30px}
.sec-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.sec-nav a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border:1px solid var(--border-2);border-radius:999px;background:var(--surface);font-size:15px;line-height:1.3;color:var(--fg);transition:border-color .15s,background .15s,color .15s}
.sec-nav a:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.sec-count{font:600 12px/1 var(--mono);color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px 7px;font-variant-numeric:tabular-nums}
.sec-nav a:hover .sec-count{color:var(--accent-ink);border-color:color-mix(in oklab,var(--accent) 30%,var(--border))}
.sec-nav--others{margin-top:56px;padding-top:28px;border-top:1px solid var(--border)}
.sec-nav-title{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.sec-nav--others~.art-cta{margin-top:40px}

/* Раздел на хабе: заголовок-ссылка + описание, отбивка линией между разделами.
   scroll-margin — чтобы якорь из чипов не уезжал под липкую шапку (70px). */
.sec-block{margin-top:56px;padding-top:34px;border-top:1px solid var(--border);scroll-margin-top:86px}
.sec-nav+.sec-block{margin-top:44px}
.sec-head h2{font-size:clamp(23px,2.7vw,30px);line-height:1.15;letter-spacing:-0.01em}
.sec-head h2 a{color:var(--fg);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:2px;transition:color .15s,text-decoration-color .15s}
.sec-head h2 a:hover{color:var(--navy);text-decoration-color:var(--accent)}
.sec-head p{margin-top:10px;color:var(--muted);font-size:16.5px;line-height:1.6;max-width:68ch}
.sec-block~.art-cta{margin-top:64px}
@media (max-width:560px){
  .sec-nav a{font-size:14.5px;padding:8px 12px}
  .sec-block{margin-top:44px;padding-top:26px}
}

/* Пагинация раздела */
.pager{margin-top:36px}
.pager ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border-radius:var(--rad);font:600 15px/1 var(--mono);font-variant-numeric:tabular-nums}
.pager a{border:1px solid var(--border-2);background:var(--surface);color:var(--fg);transition:border-color .15s,background .15s,color .15s}
.pager a:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.pager [aria-current]{background:var(--navy);color:#fff;border:1px solid var(--navy)}
/* кольцо фокуса повторяет форму элемента, а не общий радиус 3px */
.sec-nav a:focus-visible{border-radius:999px}
.stcard:focus-visible{border-radius:14px}
.pager a:focus-visible{border-radius:var(--rad)}

/* документы в карточке товара (добавлено 2026-07-27) */
.pm-docs{list-style:none;margin:10px 0 0;display:grid;gap:8px;min-width:0}
.pm-docs a{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:start;column-gap:10px;row-gap:2px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;color:var(--fg);text-decoration:none;transition:border-color .15s,background .15s}
.pm-docs a:hover{border-color:var(--accent);background:var(--accent-soft)}
.pm-docs svg{width:18px;height:18px;flex:none;color:var(--accent-ink);margin-top:2px}
.pm-docs .l{grid-column:2;min-width:0;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.pm-docs .s{grid-column:2;min-width:0;font:600 11.5px/1.3 var(--mono);letter-spacing:.04em;color:var(--faint);overflow-wrap:anywhere}


/* --- карточка товара на узком экране (правка 14.08.2026) ---------------------
   Фотографии в галерее — гибкие элементы, а у таких минимальная ширина по
   умолчанию равна их собственному размеру (573-860 px). Из-за этого колонка
   карточки не могла сжаться до ширины экрана: на телефоне фото, заголовок и
   строка характеристик уезжали за правый край.
   Разрешаем колонке и фотографиям сжиматься. Галерею на самой странице
   правка не затрагивает - всё ограничено карточкой товара. */
.pm{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pm-media,.pm-info{min-width:0}
.pm-media .gal-c,.pm-media .gal-track{min-width:0}
.pm-media .gslide{min-width:0;max-width:100%}
@media (max-width:760px){.pm{grid-template-columns:minmax(0,1fr)}}


/* --- таблицы в статьях (правка 02.09.2026) ----------------------------------
   Было: .table-scroll задавал только горизонтальную прокрутку, а сами <table>
   рисовались браузерным дефолтом — без фона шапки, без разделителей строк, с
   произвольными отступами и «расползающимися» колонками. Старые статьи брали
   table.spec с главной, где первая ячейка шапки — мелкий серый моношрифт.
   Стало: единая «шкура» для всех таблиц внутри .art-body — тёмно-синяя шапка
   (та же, что в блоке сравнения на главной), зебра, разделители строк,
   табличные цифры и скруглённый контейнер с тенью обреза при прокрутке.

   Область действия — только .art-body. Блок сравнения моделей на главной
   живёт в .spec-wrap и этими правилами НЕ затрагивается.
   Новых цветов не вводим: всё из существующих переменных (--navy, --border,
   --surface, --accent, --fg). Тёмной темы на сайте нет, медиазапрос не нужен.
--------------------------------------------------------------------------- */

/* контейнер: рамка, скругление, прокрутка и признак прокрутки */
.art-body .table-scroll,
.art-body > table{
  --tbl-radius:12px;
  --tbl-fade:oklch(40% 0.05 258 / .22);
  margin:28px 0;
  border:1px solid var(--border);
  border-radius:var(--tbl-radius);
  background:var(--surface);
}
.art-body .table-scroll{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  /* «Тень обреза». Слои local — белые заглушки, они едут вместе с содержимым;
     слои scroll прибиты к краям контейнера. Пока таблица помещается целиком,
     заглушки закрывают тени и ничего лишнего не видно. Появилась прокрутка —
     у соответствующего края проступает затемнение, и человек понимает, что
     таблицу можно листать. Чистый CSS, без JS и без правки разметки. */
  background:
    linear-gradient(to right,var(--surface),var(--surface)) left center/26px 100% no-repeat local,
    linear-gradient(to left,var(--surface),var(--surface)) right center/26px 100% no-repeat local,
    linear-gradient(to right,var(--tbl-fade),transparent) left center/22px 100% no-repeat scroll,
    linear-gradient(to left,var(--tbl-fade),transparent) right center/22px 100% no-repeat scroll,
    var(--surface);
  scrollbar-width:thin;
  scrollbar-color:var(--border-2) transparent;
}
.art-body .table-scroll::-webkit-scrollbar{height:10px}
.art-body .table-scroll::-webkit-scrollbar-track{background:transparent}
.art-body .table-scroll::-webkit-scrollbar-thumb{
  background:var(--border-2);border-radius:999px;border:3px solid var(--surface);
}
/* Chrome сам делает прокручиваемую область фокусируемой с клавиатуры —
   показываем это явным кольцом фокуса. */
.art-body .table-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* сама таблица */
.art-body table{
  width:100%;
  min-width:0;              /* гасит min-width:680px, унаследованный от table.spec */
  border-collapse:separate;
  border-spacing:0;
  background:transparent;
  font-variant-numeric:tabular-nums;   /* цифры и цены выстраиваются в колонку */
  color:var(--fg);
}

/* ячейки: отступы, выравнивание, минимальная ширина колонки */
.art-body table th,
.art-body table td{
  padding:13px 18px;
  border:0;
  text-align:left;
  vertical-align:top;
  font-size:16px;
  line-height:1.5;
  /* нижний порог ширины колонки: короткие значения («да», «1», «12 мес»)
     не схлопываются в узкий столбик, длинные фразы не ограничены сверху.
     Порог задан в em, поэтому 2 колонки помещаются на телефоне, а 5 —
     честно уезжают в прокрутку. */
  min-width:4.5em;
}

/* Плотные таблицы (5 и больше колонок) — гутеры уже, иначе на 840 px ширины
   статьи горизонтальные отступы съедают текстовые колонки и фразы ломаются
   в три строки. Количество колонок читаем через :has() — разметку не трогаем. */
.art-body table:has(thead th:nth-child(5)) th,
.art-body table:has(thead th:nth-child(5)) td{padding:13px 14px}
.art-body table:has(thead th:nth-child(6)) th,
.art-body table:has(thead th:nth-child(6)) td{padding:12px 11px}
.art-body table:has(thead th:nth-child(6)) tbody td{font-size:15.5px}

/* шапка */
.art-body table thead th,
.art-body table thead th:first-child{   /* перебиваем table.spec thead th:first-child */
  background:var(--navy);
  color:#fff;
  font:700 14.5px/1.3 var(--font);
  letter-spacing:0;
  text-transform:none;
  padding:14px 18px;
  vertical-align:bottom;
  border:0;
}

/* тело: разделители строк + зебра.
   Подложки строк намеренно полупрозрачные — сквозь них видно тень обреза
   у края контейнера. */
.art-body table tbody td{color:var(--fg)}
.art-body table tbody tr + tr td{
  border-top:1px solid color-mix(in oklab,var(--border) 85%,transparent);
}
.art-body table tbody tr:nth-child(even) td{
  background:color-mix(in oklab,var(--navy) 5.5%,transparent);
}
/* первая колонка — якорь строки: по ней взгляд возвращается к началу */
.art-body table tbody td:first-child{font-weight:600;color:var(--fg)}

/* подсветка строки под курсором. Без перехода: наведение на строку —
   частое действие, анимация тут только мешает. */
@media (hover:hover){
  .art-body table tbody tr:hover td{
    background:color-mix(in oklab,var(--accent) 8%,transparent);
  }
}

/* таблица без обёртки .table-scroll (такая есть в статье про биотуалет зимой):
   скругляем угловые ячейки, иначе шапка вылезает за рамку */
.art-body > table thead tr th:first-child{border-top-left-radius:11px}
.art-body > table thead tr th:last-child{border-top-right-radius:11px}
.art-body > table tbody tr:last-child td:first-child{border-bottom-left-radius:11px}
.art-body > table tbody tr:last-child td:last-child{border-bottom-right-radius:11px}

/* Планшет и узкое окно ноутбука (701-900 px). Колонка статьи здесь уже
   сузилась с 840 px, а мобильные правила ещё не включились — и плотные
   таблицы проседают: на 768 px «раз в несколько дней» рвётся на три строки,
   высота таблицы растёт с 363 до 435 px. Виноваты не пропорции колонок (они
   как раз ровные), а неразрывные пробелы внутри фраз: «в&nbsp;несколько» —
   один неделимый токен ~95 px, и «раз в несколько» просто перестаёт
   помещаться. Поджимаем гутеры и кегль у таблиц с 4+ колонками — этого
   хватает, чтобы вернуть фразы в две строки, не заводя прокрутку. */
@media (max-width:900px) and (min-width:701px){
  .art-body table:has(thead th:nth-child(4)) th,
  .art-body table:has(thead th:nth-child(4)) td{padding-left:11px;padding-right:11px}
  .art-body table:has(thead th:nth-child(4)) tbody td{font-size:15px}
}

@media (max-width:700px){
  .art-body .table-scroll,
  .art-body > table{margin:22px 0;--tbl-radius:10px}
  .art-body table th,
  .art-body table td{padding:11px 13px;min-width:4.5em}
  .art-body table:has(thead th:nth-child(5)) th,
  .art-body table:has(thead th:nth-child(5)) td{padding:11px 11px}
  .art-body table thead th,
  .art-body table thead th:first-child{font-size:13.5px;padding:12px 13px}
  .art-body > table thead tr th:first-child{border-top-left-radius:9px}
  .art-body > table thead tr th:last-child{border-top-right-radius:9px}
  .art-body > table tbody tr:last-child td:first-child{border-bottom-left-radius:9px}
  .art-body > table tbody tr:last-child td:last-child{border-bottom-right-radius:9px}
}

/* ==== товарные посадочные страницы (.pl-*) — вынесено из инлайна 07.09.2026 ----
   Блок жил в <style> внутри vip-tualetnaya-kabina.html. При правке той страницы
   01.09.2026 инлайн-стили потерялись: разметка .pl-* осталась, оформление
   исчезло, и первый экран карточки товара развалился в простой поток блоков
   (сравните vip-tualetnaya-kabina.html.bak-2026-09-01 и текущий файл в снимке
   J:/backups/biolife/2026-09-03). Здесь тот же CSS восстановлен и стал общим
   для всех посадочных каталога: vip-tualetnaya-kabina.html, budka-ohrany.html.

   Правила, которые раньше действовали глобально (table.spec на узком экране),
   ограничены классом .pl-page на <article> посадочной — чтобы не задеть
   таблицы сравнения в статьях и на главной.
   Новых цветов и шрифтов не вводим: всё из существующих переменных.
--------------------------------------------------------------------------- */

/* первый экран: галерея слева, оффер справа */
.pl-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:54px;align-items:start;margin:0 0 12px}
.pl-hero > *{min-width:0}

/* .pl-hero-keys — вариант первого экрана, где характеристики стоят третьим
   блоком: слева галерея и под ней характеристики, справа оффер с
   конфигуратором во всю высоту (budka-ohrany.html, правка 07.09.2026 по
   замечанию клиента). Было: характеристики внутри .pl-buy, под кнопками, а
   левая колонка заканчивалась подписью к галерее и дальше пустовала ~340 px.
   Опции конфигуратора раскрыли по умолчанию, правая колонка выросла ещё на
   ~450 px — держать характеристики там значило растянуть первый экран вдвое.

   Отдельный класс, а не правка самой .pl-hero: ту же сетку использует
   vip-tualetnaya-kabina.html, где детей всего два и трогать раскладку нечем.

   Раскладка задана координатами, а не порядком в потоке, потому что порядок в
   потоке нужен другой: в разметке характеристики идут ПОСЛЕ .pl-buy, и на
   телефоне (одна колонка, см. медиазапрос 900px) они честно встают под
   конфигуратор, не отодвигая вниз H1, цену и кнопку. Порядок чтения и порядок
   табуляции при этом не расходятся: внутри характеристик нет ни одного
   фокусируемого элемента.

   Второй ряд — 1fr, и это не косметика. Правая колонка выше левой и растянута
   на оба ряда; будь оба ряда content-sized, грид раскидал бы её лишнюю высоту
   между ними поровну и характеристики оторвались бы от галереи на ~120 px.
   Гибкий ряд из этого расчёта исключается: первый ряд меряется по галерее,
   весь запас достаётся второму, а align-items:start держит список прижатым
   к подписи под фото — ровно на row-gap. */
.pl-hero-keys{grid-template-rows:auto 1fr;column-gap:54px;row-gap:26px}
.pl-hero-keys .pl-hero-media{grid-column:1;grid-row:1}
.pl-hero-keys .pl-buy{grid-column:2;grid-row:1/span 2}
.pl-hero-keys .pl-keys{grid-column:1;grid-row:2}
/* отступ от галереи держит row-gap сетки, свой margin у списка лишний */
.pl-hero-keys .pl-keys .pl-key{margin:0}

/* Раскладка посадочной шире статьи (.wrap 1200 px), поэтому длину строки
   ограничиваем не контейнеру, а самому тексту: проза и FAQ — 840 px,
   таблицы и сетки остаются во всю ширину. */
.pl-page .art-body > p,
.pl-page .art-body > h2,
.pl-page .art-body > h3,
.pl-page .art-body > ul,
.pl-page .art-body > ol,
.pl-page .faq{max-width:840px}

.pl-gal{border:1px solid var(--border);border-radius:var(--rad);overflow:hidden;background:#fff}
.pl-gal .gal-c{aspect-ratio:4/5}
.pl-galnote{margin:12px 0 0;font:600 12.5px/1.4 var(--mono);letter-spacing:.02em;color:var(--faint);text-align:center}

/* оффер */
.pl-buy{display:flex;flex-direction:column}
.pl-buy h1{margin:10px 0 14px}
.pl-lead{font-size:17px;line-height:1.6;color:var(--muted);margin:0 0 22px}
.pl-vars{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}
.pl-var{border:1px solid var(--border);border-radius:var(--rad);padding:18px;background:var(--surface-2);display:flex;flex-direction:column;gap:6px}
.pl-var.is-lead{border-color:color-mix(in oklab,var(--accent) 45%,var(--border));background:var(--accent-soft)}
.pl-var .vname{font:700 15px/1.3 var(--font);color:var(--fg)}
.pl-var .vwhen{font-size:13.5px;line-height:1.45;color:var(--muted);flex:1}
.pl-var .vprice{font:800 22px/1 var(--font);color:var(--navy);margin-top:4px}
.pl-var .vprice small{font:600 10px/1 var(--mono);color:var(--faint);display:block;margin-bottom:5px;letter-spacing:.12em;text-transform:uppercase}
.pl-act{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 0}
.pl-act .btn{flex:1 1 190px;justify-content:center}
.pl-tel{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:1 1 190px;border:1px solid var(--border-2);border-radius:10px;padding:13px 18px;font-weight:700;color:var(--navy);text-decoration:none;transition:border-color .18s,background .18s}
.pl-tel:hover{border-color:var(--navy);background:var(--surface-2)}
.pl-key{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.pl-key li{display:flex;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--border);font-size:15.5px;color:var(--muted)}
.pl-key li:last-child{border-bottom:0}
.pl-key b{color:var(--fg);font-weight:600;min-width:132px;flex:none}

/* полоса фактов под первым экраном */
.pl-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:40px 0}
.pl-fact{border:1px solid var(--border);border-radius:var(--rad);padding:20px;background:var(--surface)}
.pl-fact .n{font:800 26px/1 var(--mono);color:var(--accent);letter-spacing:-0.02em}
.pl-fact p{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted)}

/* сетка «где ставят» */
.pl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0}
.pl-card{border:1px solid var(--border);border-radius:var(--rad);padding:22px;background:var(--surface)}
.pl-card h3{margin:0 0 8px;font-size:16.5px;color:var(--fg)}
.pl-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* базовое оснащение */
.pl-inc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0 18px;list-style:none;padding:0}
.pl-inc li{border:1px solid var(--border);border-radius:var(--rad);background:var(--surface);padding:18px;
  display:grid;grid-template-columns:26px minmax(0,1fr);grid-template-areas:"ic name" "ic desc";gap:5px 12px;align-content:start}
.pl-inc .ic{grid-area:ic;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font:800 13px/1 var(--font)}
.pl-inc b{grid-area:name}
.pl-inc li > span:not(.ic){grid-area:desc}
.pl-inc b{font-size:15px;font-weight:600;color:var(--fg);line-height:1.3}
.pl-inc span{font-size:13.5px;line-height:1.45;color:var(--muted)}
/* .pl-inc — ul внутри .art-body, поэтому на него падает общий маркер статей
   (зелёный квадратик через ::before). В карточке с зелёной галочкой это второй
   маркер на том же месте — гасим, заодно возвращаем карточке свои отступы. */
.art-body ul.pl-inc li::before{content:none}
.art-body ul.pl-inc li{padding:18px;margin:0;font-size:inherit;line-height:inherit}

/* Модификаторы под конкретную посадочную.
   .pl-inc-3 — когда пунктов оснащения девять: 3×3 закрывают сетку ровно,
   а базовые 4 колонки оставляют девятую карточку одну в третьем ряду.
   .pl-gal-wide — вторая, «поясняющая» галерея внутри .pl-two: рядом с ней
   стоит короткий текст, и вертикальный кадр 4/5 оставлял под ним пустоту. */
.pl-inc.pl-inc-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pl-gal.pl-gal-wide .gal-c{aspect-ratio:4/3}
@media (max-width:900px){
  .pl-inc.pl-inc-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .pl-inc.pl-inc-3{grid-template-columns:minmax(0,1fr)}
}

/* zimnij-uteplennyj-tualet.html (15.09.2026).
   .pl-vars-3 — три варианта в первом экране. Базовые две колонки оставляли
   третью карточку одну во втором ряду. На телефоне — одна колонка, как у .pl-vars.
   .pl-key-val — в характеристиках слева стоит само значение («1300×1300×2300 мм»,
   «около 10 рабочих дней»), а не короткая подпись: базовые 132 px его не вмещали,
   и подписи справа начинались каждая со своего места. На узком экране значение
   и подпись встают друг под другом. */
.pl-vars.pl-vars-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pl-key.pl-key-val b{min-width:11.5em}
/* .tbl-wide — таблица .art-body с ценой в последней колонке и длинным
   пояснением в середине. На телефоне колонки сжимались до 8–10 строк на ячейку,
   а неразрывная цена всё равно не влезала и обрезалась краем прокрутки. Даём
   таблице ширину, при которой пояснение читается, — остальное листается вбок
   (тень обреза у .table-scroll это показывает). */
@media (max-width:700px){
  .art-body table.tbl-wide{min-width:560px}
}
@media (max-width:560px){
  .pl-vars.pl-vars-3{grid-template-columns:minmax(0,1fr)}
  .pl-key.pl-key-val li{flex-direction:column;align-items:flex-start;gap:2px}
  .pl-key.pl-key-val b{min-width:0}
}

/* цвета корпуса */
.pl-colors{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--border);border-radius:var(--rad);background:var(--surface-2);padding:16px 20px;margin:0 0 8px;font-size:15px;color:var(--muted)}
.pl-colors b{color:var(--fg);font-weight:600}
.pl-sw{display:inline-flex;align-items:center;gap:8px}
.pl-sw i{width:18px;height:18px;border-radius:50%;border:1px solid var(--border-2);display:inline-block}

/* документы на изделие */
.pl-docs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}
.pl-doc{display:flex;flex-direction:column;gap:5px;border:1px solid var(--border);border-radius:var(--rad);padding:16px 18px;text-decoration:none;background:var(--surface);transition:border-color .18s,transform .18s}
.pl-doc:hover{border-color:var(--navy);transform:translateY(-2px)}
.pl-doc b{font-size:15px;color:var(--fg)}
.pl-doc span{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}

/* врезка «а если нужно больше» */
.pl-note{max-width:840px;border:1px solid color-mix(in oklab,var(--accent) 30%,var(--border));background:var(--accent-soft);border-radius:var(--rad);padding:26px 28px;margin:30px 0}
.pl-note h2{margin:0 0 10px;font-size:20px}
.pl-note p:last-child{margin-bottom:0}

/* две колонки: условия и доставка */
.pl-two{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin:26px 0;align-items:start}
.pl-two > div > h2:first-child{margin-top:0}

/* Узкий экран: у таблицы сравнения первая колонка остаётся на месте, пока
   остальные листаются вбок — иначе, докрутив до цены, человек уже не помнит,
   какая это строка. Работает только на посадочных: в статьях и на главной
   таблицы другие. */
@media (max-width:760px){
  .pl-page table.spec tbody th{position:sticky;left:0;z-index:1;background:var(--surface-2);width:auto;min-width:132px}
  /* Шапку первой колонки держим на месте вместе с телом — иначе при прокрутке
     заголовок «Что сравниваем» уезжает влево и выглядывает из-под липкой
     колонки обрезанным хвостом. Фон — тот же navy, что у остальной шапки. */
  .pl-page table.spec thead th:first-child{position:sticky;left:0;z-index:2;background:var(--navy)}
  .pl-page table.spec th,.pl-page table.spec td{padding:14px 16px;font-size:14px}
}
@media (max-width:900px){
  .pl-hero{grid-template-columns:1fr;gap:26px}
  /* Одна колонка: координаты сетки сбрасываем и раскладываем по order.
     Порядок совпадает с порядком в разметке — галерея, оффер с
     конфигуратором, характеристики; order здесь страхует от того, что кто-то
     поменяет разметку местами ради десктопа. */
  .pl-hero-keys{grid-template-rows:none;row-gap:26px}
  .pl-hero-keys .pl-hero-media,
  .pl-hero-keys .pl-buy,
  .pl-hero-keys .pl-keys{grid-column:auto;grid-row:auto}
  .pl-hero-keys .pl-hero-media{order:1}
  .pl-hero-keys .pl-buy{order:2}
  .pl-hero-keys .pl-keys{order:3}
  .pl-facts{grid-template-columns:repeat(2,1fr)}
  .pl-grid{grid-template-columns:1fr}
  .pl-inc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-docs{grid-template-columns:repeat(2,1fr)}
  .pl-two{grid-template-columns:1fr;gap:22px}
}
@media (max-width:560px){
  .pl-inc{grid-template-columns:minmax(0,1fr)}
  .pl-vars{grid-template-columns:minmax(0,1fr)}
}

/* ---- выделенная колонка table.spec внутри статей и посадочных (07.09.2026) ----
   «Шкура» таблиц .art-body (правка 02.09.2026) перебивает подсветку колонки
   table.spec: у `table.spec td.feat` специфичность (0,2,2), у зебры
   `.art-body table tbody tr:nth-child(even) td` — (0,2,4), и в чётных строках
   зелёная заливка пропадала. Колонка «мигала» через строку — видно в сравнении
   исполнений на vip-tualetnaya-kabina.html и в таблицах статей teplaya-…,
   tualet-iz-sendvich-paneley. Возвращаем сплошную заливку, в чётных строках
   чуть плотнее — чтобы зебра читалась и внутри выделенной колонки.
   Новых цветов не вводим: тот же --accent. */
.art-body table.spec td.feat{background:var(--accent-soft);color:var(--fg);font-weight:600}
.art-body table.spec tbody tr:nth-child(even) td.feat{background:color-mix(in oklab,var(--accent) 13%,transparent)}

/* ---- доступность: видимый фокус и уважение к prefers-reduced-motion --------
   Добавлено 07.09.2026 вместе с посадочной budka-ohrany.html.
   1. Фокус. Браузерное кольцо по умолчанию — тонкое и почти не читается на
      зелёной кнопке «Получить КП». Даём своё: тёмно-синее на светлом фоне,
      белое — на тёмных панелях (герой, блок для юрлиц, подвал, шапка модалок).
      :focus-visible, а не :focus, — мышью кольцо не появляется.
   2. Движение. На сайте есть transition на ховерах и transform-подъёмы карточек;
      тем, кто просил уменьшить анимацию в системе, всё это лишнее. Плавную
      прокрутку по якорям тоже гасим.
   Визуально для остальных не меняется ничего.
--------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--navy);
  outline-offset:3px;
  border-radius:3px;
}
.hero a:focus-visible,
.hero button:focus-visible,
.b2b a:focus-visible,
.b2b button:focus-visible,
footer a:focus-visible,
footer button:focus-visible,
.art-cta a:focus-visible,
.lb-close:focus-visible{outline-color:#fff}

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

/* ---- переключатель модели в первом экране посадочной (07.09.2026) ---------
   budka-ohrany.html: две карточки под лидом стали выбором модели — при выборе
   меняются галерея слева и характеристики справа.

   Механика намеренно без JS: нативная радиогруппа + :has(). Что это даёт:
   1. Обе модели лежат в SSR-HTML целиком — робот видит и будку, и пост,
      ничего не подставляется скриптом.
   2. Клавиатура и скринридер работают из коробки (стрелки, «выбрано, 1 из 2»),
      своей роли tab/tabpanel и рояля с tabindex не нужно.
   3. Если :has() не поддержан, правило скрытия отбрасывается целиком и на
      странице просто видны обе модели подряд — рабочий запасной вид.
   Новых цветов и шрифтов нет: те же --accent, --navy, --border.
--------------------------------------------------------------------------- */
.pl-vlegend{margin:0 0 10px;font:600 12px/1.4 var(--mono);letter-spacing:.02em;color:var(--faint)}

/* Карточка-вариант: та же плитка, что была, но теперь это <label> с радио.
   Всё под .pl-vsw — на vip-tualetnaya-kabina.html те же .pl-var стоят просто
   как две колонки описания, они не кликаются, и курсор-палец там был бы враньём. */
.pl-vsw .pl-var{cursor:pointer;transition:border-color .16s,background .16s}
.pl-vsw .pl-var:hover{border-color:var(--border-2)}
.pl-vsw .pl-var .vhead{display:flex;align-items:flex-start;gap:10px}
/* Кружок радио: --border-2 (как у рамок карточек) даёт вокруг него контраст
   1,6:1 — для органа управления WCAG 1.4.11 требует 3:1, и невыбранный вариант
   на светлой плитке буквально терялся. Берём --faint: 4,8:1 к белому. */
.pl-vradio{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:1px 0 0;
  border:2px solid var(--faint);border-radius:50%;background:#fff;cursor:pointer;
  transition:border-color .16s,box-shadow .16s}
.pl-vradio:checked{border-color:var(--accent);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 9px var(--accent)}
.pl-vsw .pl-var:has(.pl-vradio:checked){border-color:color-mix(in oklab,var(--accent) 45%,var(--border));background:var(--accent-soft)}

/* Фокус. Кольцо нужно вокруг всей карточки — кликают по ней, а не по кружку.
   Правило на самом input оставлено для браузеров без :has(): там ринг сядет
   на кружок, но фокус всё равно будет видно. */
.pl-vradio:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.pl-vsw .pl-var:has(.pl-vradio:focus-visible){outline:3px solid var(--navy);outline-offset:3px;border-radius:var(--rad)}
.pl-vsw .pl-var:has(.pl-vradio:focus-visible) .pl-vradio{outline:none}

/* собственно переключение панелей */
.pl-vsw:has(.pl-vradio[data-model="budka"]:checked) .pl-vpane[data-model="post"],
.pl-vsw:has(.pl-vradio[data-model="post"]:checked) .pl-vpane[data-model="budka"]{display:none}

/* Стрелки галереи проявляются по :hover, поэтому с клавиатуры на них наезжал
   фокус, которого не видно (общий компонент, все страницы с [data-gallery]).
   Показываем их, когда внутри галереи есть :focus-visible, — мышью поведение
   прежнее. Без поддержки :has() правило просто отбрасывается. */
.gal-c:has(:focus-visible) .gnav{opacity:1}

/* ---------------------------------------------------------------------------
   Врезки-призывы на посадочных под платный трафик (budka-ohrany.html)
   ---------------------------------------------------------------------------
   Человек пришёл по оплаченному клику: спросить его нужно после каждого блока
   убеждения, а не один раз в первом экране. Пять одинаковых зелёных кнопок
   подряд превращаются в шум, поэтому врезка есть в трёх весах:
     .pl-cta          — нейтральная плашка на белом (напоминание);
     .pl-cta-soft     — на мятном фоне, под ключевой аргумент;
     .pl-cta-quiet    — без рамки и фона, только линия сверху: телефон и текст,
                        когда кнопка в этом месте была бы навязчивой.
   Ширина совпадает с прозой (840 px) — врезка читается как часть текста,
   в отличие от полноширинной navy-полосы .art-cta в конце страницы.
   Новых цветов и шрифтов нет: только существующие переменные.
--------------------------------------------------------------------------- */
.pl-cta{max-width:840px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  margin:26px 0 34px;padding:20px 24px;border:1px solid var(--border);
  border-radius:var(--rad);background:var(--surface)}
.pl-cta > p{margin:0;flex:1 1 340px;font-size:16px;line-height:1.55;color:var(--fg)}
/* .sub внутри .art-cta — это <span> в абзаце, а не отдельный <p class="sub">,
   как на других страницах: без display:block пояснение прилипает к вопросу
   в одну строку, а margin-top у строчного элемента не работает. */
.art-cta p .sub{display:block}
.pl-cta .btn,.pl-cta .pl-tel{flex:0 0 auto}
.pl-cta-soft{background:var(--accent-soft);border-color:color-mix(in oklab,var(--accent) 30%,var(--border))}
.pl-cta-quiet{background:none;border:0;border-top:1px solid var(--border);border-radius:0;padding:22px 0 0}

/* Кнопка + телефон внутри тёмной полосы .art-cta */
.art-cta-act{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Продолжение посадочной после врезанного блока отзывов: у section.block свои
   88 px, здесь нужен только собственный отступ второго куска статьи. */
/* Первый кусок посадочной обрывается на врезанном блоке отзывов: своих 88 px
   снизу ему уже не нужно, у section.block они свои. */
.pl-part{padding-bottom:16px}
.pl-cont{padding:64px 0 80px}

@media(max-width:760px){
  .pl-cont{padding:48px 0 56px}
  .pl-cta{padding:18px}
  .pl-cta .btn,.pl-cta .pl-tel{width:100%;justify-content:center}
  .art-cta-act{width:100%}
  .art-cta-act .btn{flex:1 1 100%;justify-content:center}
}

/* ---------------------------------------------------------------------------
   Узел конфигурации в первом экране посадочной (07.09.2026, переработан)
   ---------------------------------------------------------------------------
   budka-ohrany.html. Было: модель выбиралась в первом экране, опции с ценами и
   итог стояли на 33% высоты страницы, между ними — полоса фактов, две сетки и
   таблица сравнения. Человек брал размер, не видя доплат, и наверх уже не
   возвращался. Стало: модель, опции, сумма и призыв — одна карточка под лидом.

   Список опций раскрыт по умолчанию (details open, правка 07.09.2026 по
   замечанию клиента). До этого он был свёрнут в строку «Опции сверх базы ·
   не выбраны»: компактно, но клиент на живой версии прочитал это как «опций
   нет». Раскрывашку оставили — она несёт живую строку состояния «выбрано 3 ·
   + 40 000 ₽», а на 390 px семь строк занимают пол-экрана, и человеку, который
   уже определился, полезно их убрать. Состояние по-прежнему одно на все
   ширины: открыто, и при ресайзе ничего не прыгает.

   Порядок внутри карточки: сумма и кнопка сверху, опции под ними. Так призыв
   остаётся выше списка на любой ширине: на 1440 «Итого» и кнопка стоят на 705 и
   779 px от верха документа — в первом экране 900 px целиком. На телефоне блок
   с суммой ещё и липнет под шапку, пока идёшь по опциям (--hdr меряет скрипт
   посадочной; 114px — запасное значение).

   Разметку опций и цены отдаёт js/main.js (BLCalc.optsMarkup из объекта P),
   поэтому здесь нет ни одной цифры. Пока скрипт не отработал, <details> скрыт,
   а цены опций человек видит в таблице ниже по странице.

   Новых цветов и шрифтов не вводим: те же --accent, --navy, --border, Inter.
--------------------------------------------------------------------------- */
.art-body .table-scroll[hidden]{display:none}
.plc{margin:4px 0 0;border:1px solid color-mix(in oklab,var(--accent) 34%,var(--border));
  border-radius:12px;background:var(--surface);
  /* clip, а не hidden: hidden делает карточку скролл-контейнером и убивает
     position:sticky у .plc-top на телефоне. Скругление углов clip режет так же. */
  overflow:clip}

/* Итог + призыв */
.plc-top{padding:16px 18px}
.plc .plc-total{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;margin:0;font-size:14px;color:var(--muted)}
.plc .plc-total b{font:800 30px/1 var(--font);color:var(--navy);letter-spacing:-.02em;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.plc .plc-break{margin:7px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.plc .pl-act{margin-top:14px}
.plc .plc-note{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--faint)}

/* Опции: строка-итог, которая раскрывается. Нативный <details> — клавиатура и
   скринридер работают из коробки, aria-expanded вести руками не нужно. */
.plc-d{border-top:1px solid var(--border)}
.plc-d[hidden]{display:none}
.plc-sumry{cursor:pointer;list-style:none;transition:background .16s}
.plc-sumry::-webkit-details-marker{display:none}
.plc-sumry::marker{content:''}
.plc-sumry:hover{background:var(--surface-2)}
.plc-sumry-in{display:flex;align-items:center;gap:12px;min-height:52px;
  padding:12px 18px;font:600 15px/1.3 var(--font);color:var(--fg)}
.plc-sumry .s{margin-left:auto;text-align:right;font:600 12px/1.2 var(--mono);
  letter-spacing:.02em;color:var(--accent-ink)}
.plc-sumry .x{width:18px;height:18px;flex:none;color:var(--faint)}
.plc-d[open] .plc-sumry{border-bottom:1px solid var(--border)}
.plc-d[open] .plc-sumry .x{transform:rotate(180deg)}
.plc-d-in{padding:14px 18px 18px}
.plc .plc-hint{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--muted)}

/* Опция — строка-чекбокс: подпись слева, цена справа, одна строка на опцию.
   В прежней раскладке цена стояла под подписью, и каждая опция занимала две
   строки. Колонка одна на всех ширинах: в две колонки по 264 px подписи вроде
   «Наполнение панелей — минеральная вата» ломались на три строки, ряды
   выравнивались по самой высокой, и выигрыш в высоте съедался переносами. */
.plc-opt-group{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.plc-opt{display:grid;grid-template-columns:20px minmax(0,1fr) auto;column-gap:10px;
  align-items:center;padding:9px 12px;min-height:48px;
  border:1px solid var(--border);border-radius:var(--rad);background:var(--surface);
  cursor:pointer;transition:border-color .16s,background .16s}
.plc-opt:hover{border-color:var(--border-2)}
/* Рамка отмеченного — 75% акцента, а не 45%, как у .pl-var в первом экране:
   у карточек-вариантов состояние дублируется большой ценой и картинкой, здесь
   же рамка и заливка — половина сигнала «выбрано». 45% дают к фону 2,2:1,
   75% — 3,05:1 к фону страницы и 3,02:1 к мятной заливке (WCAG 1.4.11). */
.plc-opt.is-on{border-color:color-mix(in oklab,var(--accent) 75%,var(--border));background:var(--accent-soft)}
.plc-opt input{width:20px;height:20px;margin:0;accent-color:var(--accent);cursor:pointer}
.plc-opt .l{font-size:14.5px;line-height:1.32;color:var(--fg)}
.plc-opt .p{font:700 13.5px/1.2 var(--font);color:var(--navy);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* Кольцо фокуса — как у переключателя модели: на всей карточке, потому что
   кликают по ней. Правило на самом input оставлено для браузеров без :has(). */
.plc-opt input:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.plc-opt:has(input:focus-visible){outline:3px solid var(--navy);outline-offset:2px}
.plc-opt:has(input:focus-visible) input{outline:none}
.plc-sumry:focus-visible{outline:3px solid var(--navy);outline-offset:-3px;border-radius:12px}

@media (max-width:900px){
  /* Колонка одна, и развёрнутый список из семи опций длиннее экрана. Сумма с
     кнопкой липнет под шапку, пока человек идёт по списку: итог — обратная
     связь на галочку, а не строка, до которой надо долистать. Липкость
     заканчивается вместе с карточкой, фиксированной панели поверх страницы
     не появляется. z-index ниже шапки (50). */
  .plc-top{position:sticky;top:var(--hdr,114px);z-index:6;background:var(--surface);
    border-bottom:1px solid var(--border)}
  /* линия уже есть снизу у липкого блока — вторая дала бы двойную */
  .plc-d{border-top:0}
  .plc .plc-total b{font-size:26px}
  /* Каждая лишняя строка в липком блоке съедает список под ним. Про доставку
     сказано в блоке доставки и в FAQ. */
  .plc .plc-note{display:none}
}

/* ---- уведомление о cookie (28.09.2026) -------------------------------------
   152-ФЗ: сайт ставит cookie Метрики и Callibri — сообщаем об этом и фиксируем
   согласие кнопкой. Скрипты аналитики НЕ блокируются (решение владельца).
   Разметка и скрипт — в Footer.astro; без JS плашка не показывается вовсе
   (закрыть её без скрипта было бы нечем).
   1. Позиция. Десктоп — плашка в левом нижнем углу, не шире 760px (две строки): центр
      экрана с контентом свободен. Мобильный (≤680, где появляется .fab) —
      полоса слева от кнопки звонка: правый край отступает на 18+56+10 px,
      кнопка звонка не перекрыта ни в одной точке.
   2. Не прячем контент навсегда. Пока плашка видна, скрипт пишет её высоту в
      --cookie-h: подвал получает такой же запас снизу (последняя строка
      докручивается над плашкой), а scroll-padding-bottom не даёт Tab-фокусу
      уйти под неё (WCAG 2.4.11).
   3. Пока человек заполняет форму (фокус внутри <form>), плашка уходит —
      на телефоне с открытой клавиатурой она иначе села бы на кнопку отправки.
   4. z-index 55: над контентом и липкой шапкой (50), под кнопкой звонка (60)
      и модалками (200/210). Тень — потому что плашка действительно висит над
      страницей. Появление и закрытие без анимации: это разовое действие.
   Цвета и шрифт — существующие токены, новых нет.
--------------------------------------------------------------------------- */
.cookie{
  position:fixed;z-index:55;left:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));
  width:min(760px,calc(100% - 48px));
  display:flex;align-items:center;gap:20px;
  padding:14px 14px 14px 20px;
  background:var(--surface);border:1px solid var(--border-2);
  border-radius:10px;box-shadow:0 14px 34px oklch(40% 0.05 258 / .18);
}
.cookie[hidden]{display:none}
.cookie-text{margin:0;flex:1;min-width:0;font:400 14px/1.5 var(--font);color:var(--fg)}
.cookie-text a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.cookie-text a:hover{color:var(--accent-ink)}
.cookie .cookie-ok{flex:none;min-height:44px;padding:12px 20px;font-size:14px}
html.cookie-on{scroll-padding-bottom:calc(var(--cookie-h,0px) + 36px)}
html.cookie-on footer{padding-bottom:calc(34px + var(--cookie-h,0px) + 24px)}
html.cookie-away .cookie{visibility:hidden}
#cookie{scroll-margin-top:90px}
@media (max-width:680px){
  .cookie{
    left:10px;right:84px;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:auto;
    flex-direction:column;align-items:stretch;gap:10px;padding:12px 12px 12px 14px;
  }
  .cookie-text{font-size:13.5px;line-height:1.45}
  .cookie .cookie-ok{justify-content:center;padding:12px 16px}
  html.cookie-on footer{padding-bottom:calc(34px + var(--cookie-h,0px) + 10px)}
}
@media (forced-colors:active){.cookie{border:2px solid CanvasText}}