/* Start:/local/templates/medcom/template_styles.css?178524809782627*/
/* MEDCOM · E-LAB GROUP — template styles
   Источник: прототип medcom-site (3).html, строки 17-467. Перенос 1:1. */
:root{
  --red:#E3002F; --red-deep:#B00025; --red-tint:#FBE0E6;
  --navy:#17305B; --navy-70:#4A5E84; --navy-30:#AEBBD1; --navy-08:#E9EDF4;
  --ink:#0B1424; --slate:#56607A; --steel:#97A1B5; --mist:#E4E8F0;
  --line:#D7DCE7; --paper:#F4F6FA; --white:#fff; --maxw:1280px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{ margin:0; font-family:'Onest',system-ui,sans-serif; color:var(--ink); background:var(--white); line-height:1.5; }
a{ color:inherit; text-decoration:none; cursor:pointer; }
button{ font-family:inherit; }
img{ display:block; max-width:100%; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 40px; }
.mono{ font-family:'JetBrains Mono',monospace; }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin:0; }
h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.05; color:var(--navy); }
.btn{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:15px; padding:14px 26px; border-radius:10px; border:2px solid transparent; cursor:pointer; transition:.18s; font-family:inherit; }
.btn-red{ background:var(--red); color:#fff; } .btn-red:hover{ background:var(--red-deep); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); } .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-navy{ background:var(--navy); color:#fff; } .btn-navy:hover{ background:#0f2342; transform:translateY(-1px); }
.btn-out{ background:transparent; color:var(--navy); border-color:var(--line); } .btn-out:hover{ border-color:var(--navy); }
.arrow{ width:18px; height:18px; }
section{ position:relative; }

/* logo lockup */
.logo-lockup{ display:inline-flex; flex-direction:column; gap:2px; line-height:1; }
.logo-lockup .wm{ font-family:'Onest',sans-serif; font-weight:900; font-size:29px; letter-spacing:-.02em; color:var(--red); }
.logo-lockup .wm sup{ font-size:.36em; font-weight:700; top:-1.25em; }
.logo-lockup .desc{ font-family:'Onest',sans-serif; font-weight:800; font-size:11px; letter-spacing:.17em; color:var(--navy); align-self:flex-end; }
.logo-lockup.white .wm{ color:#fff; } .logo-lockup.white .desc{ color:rgba(255,255,255,.85); }

/* utility bar */
.util{ background:var(--navy); color:rgba(255,255,255,.82); font-size:13px; }
.util .wrap{ display:flex; align-items:center; justify-content:space-between; height:42px; }
.util .grp{ display:flex; align-items:center; gap:9px; } .util .grp b{ color:#fff; font-weight:600; }
.util .right{ display:flex; align-items:center; gap:22px; }
.util a:hover{ color:#fff; }
.util .lang{ display:flex; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; }
.util .lang .on{ color:var(--red); font-weight:700; }
@media(max-width:760px){ .util .right .hidem{ display:none; } }

/* header */
header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.hdr{ display:flex; align-items:center; gap:26px; height:84px; }
nav.main{ display:flex; gap:26px; margin-left:6px; }
nav.main > a{ font-weight:600; font-size:15px; color:var(--navy); display:flex; align-items:center; gap:6px; padding:6px 0; position:relative; }
nav.main > a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--red); transition:.2s; }
nav.main > a:hover, nav.main > a.active{ color:var(--red); }
nav.main > a:hover::after, nav.main > a.active::after{ width:100%; }
.hdr .actions{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.searchbox{ display:flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:0 12px; height:44px; width:230px; transition:.15s; }
.searchbox:focus-within{ border-color:var(--navy-30); background:#fff; }
.searchbox input{ border:none; background:none; outline:none; font-family:inherit; font-size:14px; width:100%; color:var(--ink); }
.searchbox svg{ width:18px; height:18px; color:var(--steel); flex:none; }
.iconbtn{ width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--navy); position:relative; transition:.15s; background:none; border:none; cursor:pointer; }
.iconbtn:hover{ background:var(--paper); color:var(--red); }
.iconbtn svg{ width:21px; height:21px; }
.badge{ position:absolute; top:4px; right:4px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--red); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; }
.navtoggle{ display:none; }
@media(max-width:1080px){ nav.main, .searchbox{ display:none; } .navtoggle{ display:flex; } }

/* hero */
.hero{ background:var(--navy); color:#fff; overflow:hidden; }
.hero .dots{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.10) 1.5px,transparent 1.6px); background-size:30px 30px; opacity:.5; }
.hero .orbit{ position:absolute; right:-60px; top:-40px; width:560px; opacity:.9; }
.hero .wrap{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; padding:74px 40px 78px; }
.hero h1{ color:#fff; font-size:clamp(34px,4.6vw,56px); margin-top:18px; }
.hero h1 .r{ color:#fff; border-bottom:5px solid var(--red); padding-bottom:2px; }
.hero .sub{ color:var(--navy-30); font-size:18px; max-width:520px; margin:22px 0 30px; }
.hero .cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero .stats{ display:flex; gap:40px; margin-top:42px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); }
.hero .stat .n{ font-family:'JetBrains Mono',monospace; font-size:32px; font-weight:700; } .hero .stat .n .r{ color:var(--red); }
.hero .stat .l{ font-size:13px; color:var(--navy-30); margin-top:4px; max-width:150px; }
.hero-card{ background:#fff; border-radius:18px; padding:18px; color:var(--ink); box-shadow:0 30px 70px rgba(0,0,0,.35); }
.hero-card .imgslot{ width:100%; height:230px; border-radius:12px; overflow:hidden; }
.hero-card .tag{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin:16px 2px 0; }
.hero-card h3{ font-size:22px; margin:8px 2px 0; }
.hero-card p{ font-size:13.5px; color:var(--slate); margin:8px 2px 0; }
.hero-card .row{ display:flex; align-items:center; justify-content:space-between; margin:16px 2px 4px; }
.hero-card .price{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--navy); font-weight:700; }
/* home hero product slider (carousel) */
.hsl-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin:2px 2px 12px; }
.hsl{ position:relative; overflow:hidden; }
.hsl-track{ display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.hsl-slide{ min-width:100%; box-sizing:border-box; }
.hsl-pic{ position:relative; width:100%; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:var(--paper); border:1px solid var(--line); }
.hsl-pic .ph{ width:100%; height:100%; background:var(--paper); }
.hsl-pic .ph.prodpic{ background-size:cover; background-position:center; }
.hsl-pic .ph .phlab{ color:var(--slate); background:rgba(255,255,255,.82); padding:3px 8px; border-radius:6px; }
.hsl-cat{ position:absolute; top:11px; left:11px; z-index:3; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); background:rgba(255,255,255,.92); border:1px solid var(--line); padding:4px 9px; border-radius:20px; }
.hsl-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.96); color:var(--navy); font-size:20px; line-height:34px; text-align:center; cursor:pointer; box-shadow:0 6px 16px rgba(11,20,36,.14); transition:.15s; }
.hsl-arrow:hover{ border-color:var(--red); color:var(--red); }
.hsl-arrow.prev{ left:10px; } .hsl-arrow.next{ right:10px; }
.hsl-body{ min-height:150px; }
.hsl-dots{ display:flex; gap:7px; align-items:center; justify-content:center; margin-top:14px; }
.hsl-dot{ width:8px; height:8px; padding:0; border:0; border-radius:50%; background:var(--mist); cursor:pointer; transition:.15s; }
.hsl-dot.on{ background:var(--red); width:22px; border-radius:5px; }
/* ProductMaker slider picker */
.sl-list{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.sl-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; transition:.14s; }
.sl-item:hover{ border-color:var(--red); }
.sl-item input{ width:18px; height:18px; accent-color:var(--red); flex:none; cursor:pointer; }
.sl-th{ width:46px; height:46px; border-radius:9px; flex:none; background:var(--paper) center/cover no-repeat; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; color:var(--steel); text-transform:uppercase; }
.sl-th.noimg{ border:1px dashed var(--line); }
.sl-meta{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.sl-meta strong{ font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-flag{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); flex:none; }
@media(max-width:880px){ .hero .wrap{ grid-template-columns:1fr; } .hero-card{ max-width:440px; } }

/* branded placeholder */
.ph{ position:relative; overflow:hidden; background:linear-gradient(135deg,#1B3A6B,#0B1B3A); display:flex; align-items:center; justify-content:center; }
.ph .dots{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.10) 1.4px,transparent 1.5px); background-size:20px 20px; opacity:.55; }
.ph .orb{ position:absolute; width:82%; z-index:0; }
.ph .gly{ width:70px; height:70px; color:#fff; opacity:.95; position:relative; z-index:1; }
.ph .phlab{ position:absolute; bottom:12px; left:14px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); z-index:2; }
.ph .scene{ position:relative; z-index:1; width:52%; max-width:150px; height:auto; }
.nimg .ph, .gallery .ph{ height:100%; }
.ph.light{ background:var(--paper); } .ph.light .gly{ color:var(--navy); opacity:.5; }

/* group band */
.band{ background:var(--paper); border-bottom:1px solid var(--line); }
.band .wrap{ display:flex; align-items:center; gap:20px; padding:20px 40px; }
.band .ic{ width:44px; height:44px; flex:none; }
.band .t{ font-size:15px; color:var(--slate); } .band .t b{ color:var(--navy); }
.band .lk{ margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--red); font-weight:700; font-size:14px; white-space:nowrap; }
@media(max-width:760px){ .band .wrap{ flex-wrap:wrap; } .band .lk{ margin-left:0; } }

/* sections */
.sec{ padding:70px 0; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:34px; gap:20px; }
.sec-head h2{ font-size:clamp(26px,3.2vw,40px); margin-top:10px; }
.sec-head .more{ color:var(--red); font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.dir{ background:var(--paper); }

/* catalog cards */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cat-card{ border:1px solid var(--line); border-radius:16px; padding:24px; background:#fff; transition:.18s; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px; min-height:172px; cursor:pointer; }
.cat-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:.22s; }
.cat-card:hover{ border-color:var(--navy-30); box-shadow:0 14px 34px rgba(11,20,36,.08); transform:translateY(-3px); }
.cat-card:hover::before{ transform:scaleX(1); }
.cat-card .ci{ width:44px; height:44px; color:var(--navy); }
.cat-card h3{ font-size:17px; line-height:1.2; }
.cat-card .cnt{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--steel); }
.cat-card .go{ margin-top:auto; display:flex; align-items:center; gap:7px; color:var(--navy-70); font-size:13px; font-weight:600; font-family:'JetBrains Mono',monospace; letter-spacing:.03em; }
@media(max-width:980px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .cat-grid{ grid-template-columns:1fr; } }

/* feature tiles */
.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.tile{ position:relative; overflow:hidden; border-radius:18px; padding:34px; color:#fff; min-height:200px; display:flex; flex-direction:column; }
.tile.navy{ background:var(--navy); } .tile.ink{ background:var(--ink); }
.tile .dots{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.12) 1.4px,transparent 1.5px); background-size:22px 22px; opacity:.5; }
.tile .orbit{ position:absolute; right:-30px; bottom:-40px; width:240px; opacity:.85; }
.tile .eyebrow{ color:#fff; opacity:.85; position:relative; }
.tile h3{ color:#fff; font-size:22px; margin:12px 0 8px; position:relative; }
.tile p{ color:rgba(255,255,255,.75); font-size:14px; position:relative; max-width:360px; }
.tile .lk{ margin-top:auto; display:flex; align-items:center; gap:8px; color:#fff; font-weight:700; font-size:14px; position:relative; z-index:2; }
@media(max-width:760px){ .tiles{ grid-template-columns:1fr; } }

/* product cards grid */
.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media(max-width:1080px){ .prod-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:820px){ .prod-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .prod-grid{ grid-template-columns:1fr; } }
.pcard{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; transition:.18s; display:flex; flex-direction:column; }
.pcard:hover{ border-color:var(--navy-30); box-shadow:0 14px 34px rgba(11,20,36,.08); transform:translateY(-3px); }
.pcard .pimg{ height:160px; position:relative; cursor:pointer; }
.pcard .pbadge{ position:absolute; top:12px; left:12px; z-index:3; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--red); color:#fff; padding:4px 9px; border-radius:6px; }
.pcard .fav{ position:absolute; top:10px; right:10px; z-index:3; width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.9); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--navy); transition:.15s; }
.pcard .fav svg{ width:18px; height:18px; display:block; } .pcard .fav.on{ color:var(--red); }
/* Иконки Aspro залиты через currentColor, поэтому fill по классу больше не нужен —
   переключаем не заливку, а саму иконку: контурная / сплошная. Селектор по .fav,
   а не по .pcard .fav: та же кнопка есть в карточке товара (.iconbtn.fav). */
.fav .i-off{ display:flex; }
.fav .i-on { display:none; }
.fav.on .i-off{ display:none; }
.fav.on .i-on { display:flex; }
.pcard .pb{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.pcard .brand{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); }
.pcard h3{ font-size:16px; line-height:1.22; cursor:pointer; }
.pcard h3:hover{ color:var(--red); }
.pcard .short{ font-size:13px; color:var(--slate); flex:1; }
/* margin-top:auto, а не 6px: у части товаров описания нет вовсе, растягивать
   нечему (.short с flex:1 просто не выводится), и подвал с ценой и кнопкой
   уезжал вверх — в ряду карточки «скакали». Теперь подвал всегда прижат к низу,
   а сами карточки растягиваются на высоту строки сетки. */
.pcard{ height:100%; }
.pcard .pfoot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:6px; }
.pcard .price{ font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; color:var(--navy); }
.pcard .add{ background:var(--red); color:#fff; border:none; border-radius:9px; padding:9px 14px; font-weight:700; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:6px; transition:.15s; }
.pcard .add:hover{ background:var(--red-deep); }
/* Подвал карточки — одна строка. Во flex-контейнере кнопка сжималась соседом и
   ломала текст: «По / запросу» и «В / корзину» уезжали на две строки (видно было
   в каталоге на всех карточках). Запрещаем перенос и сжатие, чуть ужимаем отступы. */
.pcard .price{ white-space:nowrap; }
.pcard .add{ white-space:nowrap; flex:none; padding:9px 13px; gap:5px; }
.pcard .pfoot{ gap:10px; }
.pcard .add svg{ width:15px; height:15px; }

/* directions cards */
.dir-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media(max-width:980px){ .dir-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .dir-grid{ grid-template-columns:1fr; } }
.dir-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:12px; transition:.16s; min-height:158px; text-align:left; width:100%; cursor:pointer; }
.dir-card:hover{ border-color:var(--red); transform:translateY(-2px); box-shadow:0 12px 30px rgba(11,20,36,.08); }
.dir-card .top{ display:flex; align-items:center; justify-content:space-between; }
.dir-card .n{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--steel); }
.dir-card .ic{ width:32px; height:32px; color:var(--navy); }
.dir-card h3{ font-size:17px; line-height:1.18; margin-top:auto; }
.dir-card .sub{ font-size:12px; color:var(--slate); }
.dir-card .bm{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.03em; color:var(--steel); }
.dir-card.allcard{ background:var(--navy); border-color:var(--navy); }
.dir-card.allcard h3{ color:#fff; } .dir-card.allcard .sub{ color:var(--navy-30); }
/* segmented toggle */
.segmented{ display:inline-flex; gap:6px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:5px; margin-bottom:26px; }
.segbtn{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; border:none; background:none; cursor:pointer; padding:8px 18px; border-radius:9px; font-family:inherit; font-weight:700; font-size:15px; color:var(--navy); transition:.15s; line-height:1.1; }
.segbtn span{ font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); }
.segbtn.on{ background:var(--navy); color:#fff; } .segbtn.on span{ color:var(--navy-30); }
.segbtn:hover:not(.on){ background:#fff; }
/* direction hero brand chip + prevalence */
.dbrand{ position:relative; display:inline-flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--red); padding:6px 12px; border-radius:8px; margin-bottom:16px; }
.dchip{ position:relative; display:inline-block; margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--navy-30); border:1px solid rgba(255,255,255,.18); padding:6px 12px; border-radius:8px; }
/* competence-center tiles */
.labtile{ min-height:288px; justify-content:flex-start; }
.labtile .labgfx{ position:absolute; right:16px; top:46px; width:240px; height:180px; opacity:.95; z-index:0; pointer-events:none; }
.labtile .eyebrow{ font-size:13px; }
.labtile h3{ font-size:25px; margin:12px 0 10px; max-width:62%; }
.labtile p{ max-width:60%; }
.labtile .lk{ margin-top:20px; }
@media(max-width:760px){ .labtile{ min-height:330px; } .labtile .labgfx{ opacity:.22; right:50%; transform:translateX(50%); top:auto; bottom:14px; } .labtile h3, .labtile p{ max-width:100%; } }
/* embedded lab site */
.labwrap{ width:100%; max-width:var(--maxw); margin:0 auto 46px; padding:0 40px; }
.labframe{ width:100%; border:1px solid var(--line); border-radius:16px; display:block; min-height:640px; background:#fff; overflow:hidden; }
@media(max-width:760px){ .labwrap{ padding:0 16px; } }

/* partners */
.plogos{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.plogo{ border:1px solid var(--line); border-radius:12px; height:92px; display:flex; align-items:center; justify-content:center; color:var(--steel); font-weight:700; font-size:15px; transition:.16s; text-align:center; padding:10px; }
.plogo:hover{ color:var(--navy); border-color:var(--navy-30); background:var(--paper); }
.plogo.clk{ cursor:pointer; position:relative; }
.plogo.clk:hover{ color:var(--navy); border-color:var(--red); box-shadow:0 8px 22px rgba(11,20,36,.08); }
.plogo.clk::after{ content:'ⓘ'; position:absolute; top:7px; right:9px; font-size:11px; color:var(--navy-30); }
.plogo.clk:hover::after{ color:var(--red); }
@media(max-width:860px){ .plogos{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:520px){ .plogos{ grid-template-columns:repeat(2,1fr); } }

/* Плитка партнёра — кнопка (открывает модалку, как openPartner в прототипе),
   поэтому гасим браузерные стили button. В прототипе плитка текстовая; у нас у
   всех активных партнёров есть логотип, и он вписывается в плитку целиком —
   без object-fit картинки разного формата растягивало. */
button.plogo{ background:none; font-family:inherit; width:100%; }
.plogo img{ object-fit:contain; filter:grayscale(1); opacity:.8; transition:.16s; width:auto; height:auto; }
.plogo:hover img{ filter:none; opacity:1; }
.plogo picture{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }

/* Оптическая нормализация логотипов.

   Пропорции в инфоблоке разбросаны от 5.17 (ONCOBOX 150x29) до 1.0 (ESCO 80x80).
   При общем ограничении широкий логотип упирается в ширину плитки и занимает
   впятеро большую площадь, чем квадратный, — ряд выглядит рваным. Поэтому шаблон
   размечает плитку по пропорции, а высота подбирается так, чтобы площади пятен
   были сопоставимы. */
.plogo.is-wide img  { max-width:76%; max-height:30px; }  /* 150x29 и площе */
.plogo.is-mid img   { max-width:64%; max-height:42px; }  /* 149x80, 142x80 */
.plogo.is-square img{ max-width:52%; max-height:54px; }  /* 80x80, 93x80 */

/* Модалка партнёра */
.partner-card{ max-width:560px; }
.partner-logo{ height:64px; display:flex; align-items:center; justify-content:flex-start; margin-bottom:12px; }
.partner-logo img{ max-height:56px; max-width:200px; object-fit:contain; }
.partner-text{ color:var(--slate); font-size:14px; line-height:1.6; max-height:52vh; overflow:auto; }
.partner-text p{ margin:0 0 10px; }
.partner-text img{ max-width:100%; height:auto; }

/* news */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:860px){ .news-grid{ grid-template-columns:1fr; } }
.ncard{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; transition:.18s; display:flex; flex-direction:column; cursor:pointer; }
.ncard:hover{ border-color:var(--navy-30); box-shadow:0 14px 34px rgba(11,20,36,.08); transform:translateY(-3px); }
.ncard .nimg{ width:100%; height:168px; }
.ncard .nb{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:9px; flex:1; }
.ncard .date{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); }
.ncard h3{ font-size:17px; line-height:1.25; }
.ncard .go{ margin-top:auto; color:var(--navy-70); font-size:13px; font-weight:600; font-family:'JetBrains Mono',monospace; }

/* cta band */
.cta-band{ background:var(--navy); color:#fff; overflow:hidden; }
.cta-band .dots{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.10) 1.4px,transparent 1.5px); background-size:26px 26px; opacity:.5; }
.cta-band .wrap{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:54px 40px; }
.cta-band h2{ color:#fff; font-size:30px; } .cta-band p{ color:var(--navy-30); margin:10px 0 0; max-width:520px; }
.cta-band .right{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.cta-band .phone{ font-family:'JetBrains Mono',monospace; font-size:28px; font-weight:700; color:#fff; }
@media(max-width:760px){ .cta-band .wrap{ flex-direction:column; align-items:flex-start; } .cta-band .right{ align-items:flex-start; } }

/* breadcrumbs + page */
.crumbs{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--steel); padding:22px 0 0; flex-wrap:wrap; }
.crumbs a:hover{ color:var(--red); } .crumbs .sep{ color:var(--navy-30); }
.page-head{ padding:18px 0 10px; }
.page-head h1{ font-size:clamp(28px,3.4vw,42px); }
/* Ширина лида. В прототипе стояло max-width:720px — типографский приём против
   длинных строк, но рядом с карточками во всю ширину абзац выглядел обрезанным.
   По решению заказчика тянем на всю колонку; ch вместо px, чтобы предел
   считался по символам, а не по пикселям, и держал строку читаемой на очень
   широких мониторах. */
.page-head .lead{ color:var(--slate); font-size:17px; margin-top:12px; max-width:none; }
@media(min-width:1600px){ .page-head .lead{ max-width:110ch; } }

/* catalog layout */
.cat-layout{ display:grid; grid-template-columns:250px 1fr; gap:34px; align-items:start; }
@media(max-width:920px){ .cat-layout{ grid-template-columns:1fr; } }
.filters{ border:1px solid var(--line); border-radius:16px; padding:20px; position:sticky; top:140px; }
.filters h4{ font-size:13px; font-family:'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); margin:0 0 12px; }
.filters .fgrp{ margin-bottom:20px; }
.filters label{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--slate); padding:5px 0; cursor:pointer; }
.filters input[type=checkbox]{ accent-color:var(--red); width:16px; height:16px; }
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.toolbar .cnt{ font-size:14px; color:var(--slate); } .toolbar .cnt b{ color:var(--navy); }
.sel{ border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-family:inherit; font-size:14px; color:var(--ink); background:#fff; cursor:pointer; }

/* product detail */
.pd{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; margin-top:14px; }
@media(max-width:860px){ .pd{ grid-template-columns:1fr; } }
.pd .gallery{ border:1px solid var(--line); border-radius:18px; overflow:hidden; height:380px; }
.pd .brand{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.pd h1{ font-size:30px; margin:10px 0 14px; }
.pd .desc{ color:var(--slate); font-size:15.5px; margin-bottom:20px; }
.pd .buy{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:22px; }
.pd .price{ font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:700; color:var(--navy); margin-right:auto; }
.spec{ width:100%; border-collapse:collapse; font-size:14.5px; }
.spec th, .spec td{ text-align:left; padding:11px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.spec th{ color:var(--steel); font-weight:600; width:42%; }
.spec td{ color:var(--ink); }
.tabsec h2{ font-size:22px; margin-bottom:14px; }

/* direction page */
.dhero{ background:var(--navy); color:#fff; border-radius:20px; overflow:hidden; position:relative; padding:40px; margin-top:14px; }
.dhero .dots{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.10) 1.4px,transparent 1.5px); background-size:22px 22px; opacity:.5; }
.dhero .eyebrow{ color:#fff; opacity:.7; position:relative; }
/* h2 здесь — не опечатка: на биобанкинге h1 отдаёт page-head, а заголовок внутри
   dhero опущен до h2. В прототипе на этой странице два h1, повторять не стали. */
.dhero h1, .dhero h2{ color:#fff; font-size:34px; margin:10px 0 10px; position:relative; }
.dhero .bm{ font-family:'JetBrains Mono',monospace; color:#9DB0CE; font-size:13px; position:relative; }
.dsec{ margin-top:34px; }
.dsec h2{ font-size:13px; font-family:'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin-bottom:12px; }
.dsec p, .dsec li{ color:var(--slate); font-size:15.5px; }
.dsec.lead p{ color:var(--ink); font-size:17px; }
.dsec ul{ margin:0; padding-left:20px; } .dsec li{ margin-bottom:7px; }

/* cart */
.cart-row{ display:grid; grid-template-columns:90px 1fr auto auto; gap:18px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }
.cart-row .ci{ width:90px; height:70px; border-radius:10px; overflow:hidden; }
.cart-row .name{ font-weight:700; color:var(--navy); } .cart-row .br{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--red); text-transform:uppercase; }
.qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.qty button{ width:34px; height:36px; border:none; background:#fff; cursor:pointer; font-size:16px; color:var(--navy); } .qty button:hover{ background:var(--paper); }
.qty span{ width:38px; text-align:center; font-weight:700; font-family:'JetBrains Mono',monospace; }
.rm{ background:none; border:none; cursor:pointer; color:var(--steel); padding:8px; } .rm:hover{ color:var(--red); }
.cart-summary{ border:1px solid var(--line); border-radius:16px; padding:24px; background:var(--paper); margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.empty{ text-align:center; padding:70px 20px; color:var(--slate); }
.empty svg{ width:60px; height:60px; color:var(--navy-30); margin-bottom:16px; }

/* forms */
.field{ margin-bottom:14px; } .field label{ display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:6px; }

/* ===== marketing personal account (client-side CMS) ===== */
.util .acc-link{ color:#fff; font-weight:600; } .util .acc-link:hover{ color:var(--red); }
.acc-tabs{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0 4px; }
.acc-spacer{ flex:1; }
.acc-tab{ font-family:inherit; font-size:15px; font-weight:700; color:var(--slate); background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:11px 18px; cursor:pointer; transition:.15s; }
.acc-tab:hover{ border-color:var(--navy-30); } .acc-tab.on{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn.sm{ padding:8px 14px; font-size:13px; border-radius:8px; }
.acc-bar{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:20px 0 16px; flex-wrap:wrap; }
.acc-bar h2{ font-size:22px; } .acc-note{ color:var(--slate); font-size:13px; margin:6px 0 0; max-width:640px; }
.acc-count{ font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--red); margin-left:6px; }
.acc-tbl td{ vertical-align:middle; } .acc-tbl .acc-sub{ font-size:12.5px; color:var(--slate); margin-top:3px; }
.acc-act{ white-space:nowrap; text-align:right; } .acc-act .btn{ margin-left:6px; }
.acc-badge{ font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.acc-badge.pub{ background:var(--navy-08); color:var(--navy); } .acc-badge.draft{ background:var(--red-tint); color:var(--red-deep); }
.acc-src{ font-size:11px; color:var(--steel); margin-left:6px; } .acc-src.add{ color:var(--red); }
.acc-login{ max-width:420px; margin:0 auto; border:1px solid var(--line); border-radius:18px; padding:30px; box-shadow:0 12px 40px rgba(11,20,36,.10); }
.acc-login input{ width:100%; font-family:inherit; font-size:14.5px; border:1px solid var(--line); border-radius:10px; padding:11px 13px; }
.acc-hint{ font-size:12.5px; color:var(--slate); margin:14px 0 0; }
.acc-form{ border:1px solid var(--line); border-radius:18px; padding:26px; max-width:840px; }
.acc-form .formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.acc-form input, .acc-form textarea, .acc-form select{ width:100%; font-family:inherit; font-size:14.5px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 13px; }
.acc-form input:focus, .acc-form textarea:focus, .acc-form select:focus{ outline:none; border-color:var(--navy); }
.acc-form textarea{ resize:vertical; line-height:1.6; }
.acc-actions{ display:flex; gap:12px; margin-top:10px; }
.acc-role{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); background:var(--navy-08); border:1px solid var(--line); padding:6px 12px; border-radius:999px; }
.p-img-row{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.p-img-prev{ width:200px; height:150px; flex:none; border:1px dashed var(--line); border-radius:12px; background:var(--paper) center/cover no-repeat; }
.p-img-prev.has{ border-style:solid; border-color:var(--line); }
.p-img-ctl{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.p-img-ctl input[type=file]{ font-size:13px; color:var(--slate); max-width:100%; }
.ph.prodpic{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.ph.prodpic .phlab{ background:rgba(11,20,36,.6); padding:3px 8px; border-radius:6px; color:#fff; }
.pimg .ph, .gallery .ph{ height:100%; }
@media(max-width:640px){ .acc-act{ text-align:left; } .acc-act .btn{ margin:4px 6px 0 0; } .acc-form .formgrid{ grid-template-columns:1fr; } }
.field input, .field textarea, .field select{ width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-family:inherit; font-size:14.5px; color:var(--ink); outline:none; transition:.15s; }
.field input:focus, .field textarea:focus{ border-color:var(--navy); }
.formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media(max-width:560px){ .formgrid{ grid-template-columns:1fr; } }

/* modal */
.mbg{ position:fixed; inset:0; background:rgba(11,20,36,.62); backdrop-filter:blur(3px); z-index:200; display:none; align-items:center; justify-content:center; padding:24px; }
.mbg.open{ display:flex; }
.mw{ background:#fff; border-radius:18px; max-width:600px; width:100%; max-height:88vh; overflow:auto; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.mh{ background:var(--navy); color:#fff; padding:24px 26px; position:relative; overflow:hidden; }
.mh .dots{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.10) 1.4px,transparent 1.5px); background-size:20px 20px; opacity:.5; }
.mh .eyebrow{ color:#fff; opacity:.7; position:relative; } .mh h3{ color:#fff; font-size:23px; margin:9px 0 6px; position:relative; }
.mh .bm{ font-family:'JetBrains Mono',monospace; font-size:12px; color:#9DB0CE; position:relative; }
.mclose{ position:absolute; top:16px; right:16px; width:36px; height:36px; border:none; border-radius:9px; background:rgba(255,255,255,.14); color:#fff; font-size:18px; cursor:pointer; z-index:2; transition:.15s; } .mclose:hover{ background:var(--red); }
.mb{ padding:22px 26px 28px; } .mb h4{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin:18px 0 8px; } .mb h4:first-child{ margin-top:0; }
/* partner popup — styled like the lab "Карта направлений" modal (white header + tag chip) */
.pmh{ padding:24px 26px 18px; border-bottom:1px solid var(--line); position:relative; background:#fff; }
.pmh .tagp{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:var(--red-tint); color:var(--red-deep); margin-bottom:12px; }
.pmh h3{ font-size:22px; color:var(--navy); margin:0 0 6px; }
.pmh .srcp{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--red-deep); }
.pmclose{ position:absolute; right:18px; top:16px; width:34px; height:34px; border:none; border-radius:9px; background:var(--paper); color:var(--slate); font-size:18px; cursor:pointer; transition:.15s; } .pmclose:hover{ background:var(--mist); }
.pmb{ padding:20px 26px 28px; } .pmb p{ font-size:15px; color:var(--slate); line-height:1.7; margin:0; }
/* catalog legal disclaimer (before footer on catalog pages) */
.catalog-disc{ background:var(--paper); border-top:1px solid var(--line); }
.catalog-disc .wrap{ padding:20px 40px; }
.catalog-disc p{ font-size:12.5px; color:var(--steel); line-height:1.7; margin:0; }
@media(max-width:760px){ .catalog-disc .wrap{ padding:18px 20px; } }
.mb p{ margin:0 0 7px; font-size:14.5px; color:var(--slate); } .mb p.lead{ color:var(--ink); }

/* toast */
.toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--navy); color:#fff; padding:14px 22px; border-radius:12px; font-weight:600; font-size:14px; box-shadow:0 18px 50px rgba(0,0,0,.35); z-index:300; opacity:0; pointer-events:none; transition:.3s; display:flex; align-items:center; gap:10px; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast svg{ width:18px; height:18px; color:#5FE0CE; }

/* footer */
footer{ background:var(--ink); color:#9FB2C2; padding:50px 0 26px; }
footer .top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:30px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1); }
footer .about{ font-size:13.5px; max-width:360px; margin:16px 0 18px; line-height:1.6; }
footer .disc{ font-size:11.5px; color:#73879A; line-height:1.7; padding:18px 0 0; }
footer h4{ color:#fff; font-size:13px; font-family:'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
footer ul{ list-style:none; padding:0; margin:0; } footer li{ margin-bottom:9px; } footer a:hover{ color:#fff; }
footer .social{ display:flex; gap:10px; } footer .social a{ width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; } footer .social a:hover{ background:var(--red); border-color:var(--red); }
footer .social svg{ width:18px; height:18px; fill:#fff; }
footer .contacts a{ color:#fff; font-weight:600; font-family:'JetBrains Mono',monospace; }
footer .bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:22px; font-size:12px; color:#73879A; gap:16px; flex-wrap:wrap; }
footer .bottom .links{ display:flex; gap:18px; flex-wrap:wrap; }
@media(max-width:860px){ footer .top{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ footer .top{ grid-template-columns:1fr; } }

/* mobile menu */
.mmenu{ position:fixed; inset:0; background:#fff; z-index:120; transform:translateX(100%); transition:.25s; display:flex; flex-direction:column; padding:20px; overflow:auto; }
.mmenu.open{ transform:none; }
.mmenu a{ padding:14px 4px; border-bottom:1px solid var(--line); font-size:17px; font-weight:600; color:var(--navy); }
.mmenu .x{ align-self:flex-end; background:var(--paper); border:none; width:42px; height:42px; border-radius:10px; font-size:20px; cursor:pointer; margin-bottom:10px; }

/* ===== EN About additions ===== */
/* ---- About-page additions (same idiom/tokens) ---- */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
@media(max-width:880px){ .split{ grid-template-columns:1fr; gap:26px; } }
.split .ph{ height:330px; border-radius:18px; }
.prose p{ color:var(--slate); font-size:16px; line-height:1.7; margin:0 0 14px; }
.prose p.lead{ color:var(--ink); font-size:18px; }
.prose b{ color:var(--navy); }

/* Сетка карточек подстраивается под их количество, чтобы в последнем ряду не
   оставалась одинокая карточка: при четырёх это 2×2, а не 3+1. Считаем через
   :has() — «четвёртый ребёнок является последним» значит «карточек ровно 4».
   Браузеры без :has() получают базовые три колонки, то есть прежний вид. */
.vcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
/* одна карточка не растягивается на всю ширину — читать неудобно */
.vcards:has(> :first-child:last-child){ grid-template-columns:minmax(0,560px); }
/* 2 и 4 — по две в ряд */
.vcards:has(> :nth-child(2):last-child),
.vcards:has(> :nth-child(4):last-child){ grid-template-columns:repeat(2,1fr); }
/* 7 и 8 — по четыре, иначе снова остаётся хвост */
.vcards:has(> :nth-child(7):last-child),
.vcards:has(> :nth-child(8):last-child){ grid-template-columns:repeat(4,1fr); }
/* Узкие экраны. Обычные селекторы держим ОТДЕЛЬНО от :has(): если в списке
   через запятую хоть один селектор непонятен браузеру, спецификация велит
   отбросить всё правило. Смешав их, мы бы лишили старые браузеры не только
   плавающей сетки, но и обычных переносов — и на телефоне остались бы три
   колонки, то есть хуже, чем было. */
@media(max-width:1100px){
	.vcards:has(> :nth-child(7):last-child),
	.vcards:has(> :nth-child(8):last-child){ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:880px){
	.vcards{ grid-template-columns:repeat(2,1fr); }
	.vcards:has(> :nth-child(7):last-child),
	.vcards:has(> :nth-child(8):last-child){ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:560px){
	.vcards{ grid-template-columns:1fr; }
	.vcards:has(> :first-child:last-child),
	.vcards:has(> :nth-child(2):last-child),
	.vcards:has(> :nth-child(4):last-child),
	.vcards:has(> :nth-child(7):last-child),
	.vcards:has(> :nth-child(8):last-child){ grid-template-columns:1fr; }
}
.vcard{ border:1px solid var(--line); border-radius:16px; padding:24px; background:#fff; transition:.18s; }
.vcard:hover{ border-color:var(--navy-30); box-shadow:0 14px 34px rgba(11,20,36,.08); transform:translateY(-3px); }
.vcard .ci{ width:40px; height:40px; color:var(--red); margin-bottom:14px; }
.vcard .num{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--steel); letter-spacing:.06em; }
.vcard h3{ font-size:18px; margin:6px 0 9px; }
.vcard p{ color:var(--slate); font-size:14.5px; line-height:1.6; margin:0; }

/* mission / vision navy band */
.mv{ background:var(--navy); color:#fff; border-radius:20px; overflow:hidden; position:relative; padding:46px 44px; }
.mv .dots{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.10) 1.4px,transparent 1.5px); background-size:24px 24px; opacity:.5; }
.mv .grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media(max-width:760px){ .mv{ padding:34px 26px; } .mv .grid{ grid-template-columns:1fr; gap:26px; } }
.mv .eyebrow{ color:#fff; opacity:.72; }
.mv h3{ color:#fff; font-size:24px; margin:10px 0 12px; }
.mv p{ color:var(--navy-30); font-size:16px; line-height:1.7; margin:0; }

/* leadership */
.leaders{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media(max-width:760px){ .leaders{ grid-template-columns:1fr; } }
.leader{ display:grid; grid-template-columns:108px 1fr; gap:20px; border:1px solid var(--line); border-radius:16px; padding:22px; align-items:start; }
.leader .av{ width:108px; height:108px; border-radius:14px; }
.leader .role{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); }
.leader h3{ font-size:19px; margin:6px 0 8px; }
.leader p{ color:var(--slate); font-size:14px; line-height:1.6; margin:0; }
@media(max-width:420px){ .leader{ grid-template-columns:1fr; } .leader .av{ width:84px; height:84px; } }

/* ===== vacancies ===== */
/* Список открытых позиций: карточка-строка, справа кнопки. Своего юнита в
   прототипе нет — взяты его же приёмы: рамка .vcard, чипы как у тегов фильтра. */
.vaclist{ display:grid; gap:14px; }
.vac{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
	border:1px solid var(--line); border-radius:16px; padding:24px 26px; background:#fff; transition:.18s; }
.vac:hover{ border-color:var(--navy-30); box-shadow:0 14px 34px rgba(11,20,36,.08); }
.vac h3{ font-size:19px; margin:0; }
.vac h3 a{ color:var(--navy); }
.vac h3 a:hover{ color:var(--red); }
.vac p{ color:var(--slate); font-size:14.5px; line-height:1.6; margin:12px 0 0; }
.vac-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.vac-meta span{ font-size:12.5px; color:var(--slate); background:var(--paper);
	border:1px solid var(--line); border-radius:999px; padding:5px 12px; white-space:nowrap; }
.vac-act{ display:flex; gap:10px; flex-wrap:wrap; }
.vac-act .btn{ white-space:nowrap; }
@media(max-width:760px){
	.vac{ grid-template-columns:1fr; gap:18px; padding:22px; }
	.vac-act .btn{ flex:1 1 auto; justify-content:center; }
}

/* ===== cookie bar ===== */
/* Плашка снизу. z-index выше мобильной панели действий (.mbar), иначе на
   телефоне они наезжают друг на друга; на узких экранах отступ снизу как раз
   на её высоту. Появляется через .on — JS снимает hidden и добавляет класс. */
.cookiebar{ position:fixed; left:0; right:0; bottom:0; z-index:60; padding:0 16px 16px;
	transform:translateY(120%); transition:transform .32s ease; pointer-events:none; }
.cookiebar.on{ transform:none; pointer-events:auto; }
.cookiebar-in{ max-width:var(--maxw); margin:0 auto; background:var(--navy); color:#fff;
	border-radius:16px; padding:18px 22px; display:flex; align-items:center; gap:22px;
	box-shadow:0 18px 44px rgba(11,20,36,.28); }
.cookiebar p{ margin:0; font-size:14px; line-height:1.6; color:var(--navy-30); }
.cookiebar a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.cookiebar a:hover{ color:var(--red); }
.cookiebar-act{ flex:none; }
.cookiebar .btn{ white-space:nowrap; }
@media(max-width:760px){
	.cookiebar{ padding:0 12px 12px; bottom:64px; }
	.cookiebar-in{ flex-direction:column; align-items:stretch; gap:14px; padding:16px 18px; }
	.cookiebar p{ font-size:13.5px; }
	.cookiebar .btn{ width:100%; justify-content:center; }
}

/* ===== requisites modal ===== */
/* Таблица реквизитов из включаемой области include/medcom/requisites.php.
   Стили держим здесь, а не инлайном в области: её правит контент-менеджер
   из публички, и визуальный редактор инлайновое оформление легко теряет. */
.req-table{ width:100%; border-collapse:collapse; font-size:14px; }
.req-table th{ text-align:left; padding:8px 14px 8px 0; color:var(--steel); font-weight:500;
	vertical-align:top; white-space:nowrap; width:1%; }
.req-table td{ padding:8px 0; color:var(--ink); vertical-align:top; line-height:1.55; }
.req-table tr + tr th, .req-table tr + tr td{ border-top:1px solid var(--line); }
.req-table td.mono{ font-family:'JetBrains Mono',monospace; font-size:13.5px; letter-spacing:.01em; }
.req-table a{ color:var(--navy); font-weight:600; }
.req-table a:hover{ color:var(--red); }
@media(max-width:560px){
	.req-table, .req-table tbody, .req-table tr, .req-table th, .req-table td{ display:block; width:auto; }
	.req-table th{ white-space:normal; padding:12px 0 2px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
	.req-table td{ padding:0 0 8px; }
	.req-table tr + tr th{ border-top:1px solid var(--line); }
	.req-table tr + tr td{ border-top:0; }
}

/* small responsibility note */
.note{ display:flex; gap:18px; align-items:flex-start; border-left:3px solid var(--red); background:var(--paper); border-radius:0 14px 14px 0; padding:22px 24px; }
.note .ci{ width:30px; height:30px; color:var(--red); flex:none; margin-top:2px; }
.note p{ margin:0; color:var(--slate); font-size:15px; line-height:1.7; } .note p b{ color:var(--navy); }


/* ===== legal doc pages ===== */
.docpage{ max-width:820px; }
.docpage h3{ font-size:18px; color:var(--navy); margin:26px 0 10px; }
.docpage h3:first-child{ margin-top:0; }
.docpage p{ color:var(--slate); font-size:15px; line-height:1.75; margin:0 0 12px; }
.docpage ul{ margin:0 0 14px; padding-left:20px; }
.docpage li{ color:var(--slate); font-size:15px; line-height:1.7; margin-bottom:7px; }
.docmore{ max-width:820px; margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.docmore .btn{ text-decoration:none; }
.docmore-note{ color:var(--steel); font-size:12.5px; font-family:'JetBrains Mono',monospace; margin:10px 0 0; }
/* ============================================================
   Служебные классы шаблона (нет в прототипе — добавлены при интеграции).
   Причина: в прототипе действия висели на <a onclick>, в шаблоне это
   <button> ради доступности с клавиатуры и корректной семантики.
   ============================================================ */

/* Кнопка, визуально неотличимая от ссылки */
.as-link{
  background:none; border:none; padding:0; margin:0;
  font:inherit; color:inherit; cursor:pointer; text-align:inherit;
}
.as-link:hover{ color:#fff; }

/* Доступно скринридеру, скрыто визуально */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* Уважение к системной настройке «меньше движения» */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============ Модалки и веб-формы (form.result.new/medcom) ============ */
.modal-card{ padding:28px 30px 26px; }
.modal-x{ position:absolute; top:14px; right:16px; width:34px; height:34px; border:none; background:transparent; font-size:26px; line-height:1; color:var(--steel); cursor:pointer; border-radius:8px; transition:.15s; }
.modal-x:hover{ background:var(--paper); color:var(--ink); }
.mw{ position:relative; }
.modal-title{ font-size:21px; margin:0 0 16px; padding-right:30px; }
.modal-subject{ margin:0 0 12px; }

.medcom-form .form-row{ display:block; margin-bottom:14px; }
.medcom-form .form-cap{ display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.medcom-form .form-row .req{ color:var(--red); margin-left:2px; }
.medcom-form input[type=text], .medcom-form input[type=email], .medcom-form input[type=tel],
.medcom-form input:not([type]), .medcom-form textarea, .medcom-form select{
	width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px;
	font-family:inherit; font-size:14.5px; color:var(--ink); outline:none; transition:.15s; box-sizing:border-box;
}
.medcom-form textarea{ min-height:92px; resize:vertical; }
.medcom-form input:focus, .medcom-form textarea:focus, .medcom-form select:focus{ border-color:var(--navy); }
.medcom-form .form-row.has-error input, .medcom-form .form-row.has-error textarea{ border-color:var(--red); }
.medcom-form .form-err{ display:block; color:var(--red); font-size:12px; margin-top:4px; }
.medcom-form .form-actions{ margin-top:18px; }
.medcom-form .form-actions .btn{ width:100%; justify-content:center; }
.medcom-form .form-required{ margin:12px 0 0; font-size:12px; color:var(--steel); }
.medcom-form .form-required .req{ color:var(--red); }
/* Согласие на обработку ПДн (sections/_consent.php). Класс не привязан к
   .medcom-form: тот же чекбокс стоит и в форме запроса КП по корзине, которая
   рисуется своей разметкой в modals.php. */
.consents{ margin:16px 0 0; display:flex; flex-direction:column; gap:9px; }
.consent{ display:flex; align-items:flex-start; gap:9px; margin:0; font-size:12.5px; line-height:1.45; color:var(--steel); cursor:pointer; }
.consent input{ flex:0 0 auto; width:16px; height:16px; margin:1px 0 0; accent-color:var(--red); cursor:pointer; }
.consent a{ color:var(--navy); text-decoration:underline; }
.consent a:hover{ color:var(--red); }
/* Подсветка невыполненного согласия — только после попытки отправки или ухода
   с поля (:user-invalid), и рамкой самого чекбокса, а не вторым контуром
   поверх штатного: outline рисовал вокруг серой рамки красную, и получалась
   двойная. Браузерам без :user-invalid просто достаётся обычный вид. */
.consent input:user-invalid{ accent-color:var(--red); outline:1.5px solid var(--red); outline-offset:0; border-radius:3px; }

.medcom-form .form-note{ padding:16px 18px; background:var(--red-tint); border-radius:12px; color:var(--red-deep); font-weight:600; }
.medcom-form .form-errors{ padding:12px 16px; background:var(--red-tint); border-radius:10px; color:var(--red-deep); margin-bottom:14px; font-size:14px; }

/* ============================================================
   Сетка Bootstrap внутри контента из базы

   DETAIL_TEXT направлений и части новостей вёрстан в админке на сетке Aspro
   (row / col-sm-12 / col-md-8 / col-4). В нашем шаблоне этих классов нет, поэтому
   колонки шли сплошным потоком и текст «разъезжался». Чистить контент нельзя —
   он общий с боевым сайтом, поэтому поддерживаем сетку у себя, но только внутри
   .article-body: наружу правила не текут.
   ============================================================ */
.article-body .row{ display:flex; flex-wrap:wrap; gap:20px; margin:0 0 18px; }
.article-body [class*="col-"]{ flex:1 1 100%; min-width:0; }
.article-body img{ max-width:100%; height:auto; }
.article-body table{ width:100%; border-collapse:collapse; display:block; overflow-x:auto; }

@media(min-width:860px){
	/* 12 колонок; вычитаем долю gap, чтобы строка не переносилась */
	.article-body .col-md-3,  .article-body .col-3 { flex-basis:calc(25% - 15px); }
	.article-body .col-md-4,  .article-body .col-4 { flex-basis:calc(33.333% - 14px); }
	.article-body .col-md-6,  .article-body .col-6 { flex-basis:calc(50% - 10px); }
	.article-body .col-md-8,  .article-body .col-8 { flex-basis:calc(66.666% - 7px); }
	.article-body .col-md-9,  .article-body .col-9 { flex-basis:calc(75% - 5px); }
	.article-body .col-md-12, .article-body .col-12{ flex-basis:100%; }
}

/* ============================================================
   Единая стрелка

   Раньше в кнопках был свой инлайн-svg, а в ссылках — символ →, который рисовался
   шрифтом блока: в .more это Onest, в .go — JetBrains Mono, и стрелки выглядели
   по-разному. Теперь везде одна иконка из sections/_icons.php.
   ============================================================ */
.mi-arrow, .mi-arrow-left{ width:18px; height:18px; flex:none; vertical-align:middle; }

/* В ссылках стрелка мельче текста и отбита от него */
.more, .lk, .go, .cat-card .go, .ncard .go{ display:inline-flex; align-items:center; gap:7px; }
.more .mi-arrow, .lk .mi-arrow, .go .mi-arrow,
.more .mi-arrow-left, .lk .mi-arrow-left, .go .mi-arrow-left{ width:15px; height:15px; }

/* В плитке категории счётчик прижат влево, стрелка — вправо, как в прототипе */
.cat-card .go{ justify-content:space-between; width:100%; }

/* Кардио-тайл хаба — кнопка (открывает форму, раздела в базе ещё нет),
   поэтому гасим браузерные стили button и выравниваем текст как у ссылки-тайла. */
button.tile{ font-family:inherit; font-size:inherit; text-align:left; border:none; cursor:pointer; width:100%; }
.labtile .lk{ margin-top:auto; position:relative; z-index:1; }

/* Ссылка «Кабинет» в верхней полосе — как в прототипе, но иконкой вместо эмодзи */
.util .acc-link{ display:inline-flex; align-items:center; gap:7px; }
.util .acc-link .mi-user{ width:14px; height:17px; flex:none; }

/* ============================================================
   Картинки инфоблоков — sections/_img.php

   scale-down, а не contain: contain растягивает маленькую картинку до размеров
   блока (логотип 120x40 размазывался на всю плитку), а scale-down вписывает
   только то, что больше слота, и оставляет мелкое в натуральную величину.
   ============================================================ */
picture{ display:block; width:100%; height:100%; }
.img-fit{ display:block; width:100%; height:100%; object-fit:scale-down; object-position:center; }
/* Фото товара и новости заполняют слот, но не искажаются */
.img-cover{ object-fit:cover; }

/* Стрелки слайдера: иконка Aspro вместо типографских ‹ ›; top задаёт JS по центру
   картинки, поэтому убираем вертикальный сдвиг из готового правила. */
.hsl-arrow{ display:flex; align-items:center; justify-content:center; padding:0; }
.hsl-arrow .mi{ width:9px; height:15px; }  /* пропорция аспровского шеврона 7x12 */
.hsl-arrow.prev .mi{ margin-right:1px; } .hsl-arrow.next .mi{ margin-left:1px; }

/* Полное описание товара — отдельный блок под карточкой, во всю ширину.
   Раньше детальный текст выводился в правую колонку рядом с ценой: колонка
   узкая, и описание растягивало страницу на два экрана, оставляя картинку
   в одиночестве. Справа теперь короткий анонс. */
.prod-desc{ margin-top:40px; padding-top:30px; border-top:1px solid var(--line); }
.pd .desc{ font-size:14.5px; color:var(--slate); line-height:1.65; }

/* ============================================================
   Мобильные доводки

   Медиа-запросы в шаблоне меняли в основном число колонок в сетках, а несколько
   правил «для десктопа» продолжали действовать на узких экранах и ломали вид.
   ============================================================ */

/* Фильтр каталога. position:sticky оставался включённым и на мобильном, где
   фильтр — уже не боковая колонка, а широкий блок над списком: он ехал за
   прокруткой и наползал на карточки товаров. */
@media(max-width:920px){
	.filters{ position:static; top:auto; margin-bottom:22px; }
	.cat-layout{ gap:20px; }
}

/* Первый экран. Орбита шириной 560px с отрицательным right вылезала за вьюпорт,
   боковые поля 40px съедали ширину, а три счётчика стояли в ряд и не помещались. */
@media(max-width:760px){
	.wrap{ padding:0 18px; }
	.hero .wrap{ padding:40px 18px 44px; gap:28px; }
	.hero .orbit{ width:300px; right:-80px; top:-20px; opacity:.5; }
	.hero .sub{ font-size:16px; margin:16px 0 22px; }
	.hero .stats{ flex-wrap:wrap; gap:18px 26px; margin-top:28px; padding-top:20px; }
	.hero .stat .n{ font-size:26px; }
	.hero .stat .l{ max-width:none; }
	.hero .cta .btn{ width:100%; justify-content:center; }
}

/* Совсем узкие экраны: орбиту убираем совсем — она чисто декоративная. */
@media(max-width:480px){
	.hero .orbit{ display:none; }
	.hero .stats{ gap:14px 20px; }
}

/* Подвал карточки товара на мобильном: в одну колонку кнопка читается лучше,
   чем ужатая в строку рядом с ценой. */
@media(max-width:380px){
	.pcard .pfoot{ flex-direction:column; align-items:stretch; gap:8px; }
	.pcard .add{ justify-content:center; }
}

/* Тулбар каталога (счётчик + сортировка) — в столбик, иначе select выдавливает
   счётчик за край. */
@media(max-width:560px){
	.toolbar{ flex-direction:column; align-items:flex-start; gap:10px; }
	.toolbar select{ width:100%; }
}

/* ============================================================
   Пагинация

   Разметка .pager существовала с самого переноса, а правил под неё в стилях не
   было ни одного — номера выводились голым текстом вплотную друг к другу.
   ============================================================ */
.pager{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:38px; }
.pager-item{
	min-width:40px; height:40px; padding:0 12px;
	display:inline-flex; align-items:center; justify-content:center;
	border:1px solid var(--line); border-radius:10px;
	font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:600;
	color:var(--navy); background:#fff; transition:.15s;
}
a.pager-item:hover{ border-color:var(--navy-30); background:var(--paper); }
.pager-item.on{ background:var(--navy); border-color:var(--navy); color:#fff; cursor:default; }
.pager-nav{ padding:0; min-width:40px; color:var(--navy); }
.pager-nav .mi{ width:9px; height:15px; }
a.pager-nav:hover{ border-color:var(--red); color:var(--red); }
.pager-gap{ color:var(--steel); padding:0 2px; user-select:none; }

@media(max-width:520px){
	.pager{ gap:6px; margin-top:28px; }
	.pager-item{ min-width:36px; height:36px; padding:0 9px; font-size:13px; }
}

/* ============================================================
   Верхняя полоса на мобильном

   .util .wrap — флекс с фиксированной высотой 42px и без переноса. На телефоне
   в него не помещались слоган, «Заказать звонок», телефон, e-mail, «Войти» и
   переключатель языка: строка распирала страницу шире вьюпорта, появлялась
   горизонтальная прокрутка, и следом «уезжали» заголовок первого экрана и кнопки.
   Виноват был не hero — он лишь наследовал общую ширину документа.
   ============================================================ */
@media(max-width:760px){
	.util .wrap{ height:auto; min-height:42px; flex-wrap:wrap; gap:6px 14px; padding-top:8px; padding-bottom:8px; }
	.util .right{ gap:14px; }
	/* Плашка «MEDCOM теперь часть E-LAB Group» остаётся: она несёт смысл, а не
	   украшает. Место ей даёт перенос строки, а не скрытие. */
	.util .grp{ flex:1 1 100%; }
	.util .acc-link span{ display:none; }     /* от «Войти» оставляем иконку */
	.util{ font-size:12.5px; }
}

/* Совсем узкие: плашка на своей строке, ниже — телефон, вход и язык. */
@media(max-width:480px){
	.util{ font-size:12px; }
	.util .grp{ line-height:1.25; }
	.util .right{ flex:1 1 100%; justify-content:space-between; gap:10px; }
	.util .right .hidem{ display:none; }
}

/* От горизонтальной прокрутки: длинные слова переносим, ширину ограничиваем.
   overflow-x:hidden здесь намеренно НЕ ставим — он отключает position:sticky,
   а на нём держится липкая шапка. */
html, body{ max-width:100%; }
.hero h1, .hero .sub{ overflow-wrap:break-word; }

/* Главная причина, по которой первый экран уезжал вправо на телефоне.

   .hero .wrap — это grid, а у его детей min-width по умолчанию равен auto: блок
   отказывается сжиматься меньше своего содержимого. Внутри правой колонки лежит
   слайдер, чья дорожка шире экрана (три слайда по 100%), — колонка распирала
   сетку, сетка распирала документ, и вместе с ней уезжали заголовок, подзаголовок
   и кнопки. Видно это было именно на hero, хотя причина не в его собственных
   размерах.

   min-width:0 снимает запрет на сжатие. То же самое нужно карточке и слайдеру. */
.hero .wrap > *{ min-width:0; }
.hero-card, .hsl, .hsl-track{ min-width:0; max-width:100%; }

@media(max-width:760px){
	.hero .cta{ width:100%; }
	.hero .eyebrow{ letter-spacing:.12em; }
}

/* ============================================================
   Мобильная панель действий (sections/_mobile_bar.php)

   Телефон, кнопка заявки и соцсети внизу экрана. На десктопе скрыта — там эти
   элементы живут в верхней полосе.
   ============================================================ */
.mbar{ display:none; }

@media(max-width:760px){
	.mbar{
		display:flex; align-items:center; gap:10px;
		position:fixed; left:0; right:0; bottom:0; z-index:60;
		padding:10px 14px calc(10px + env(safe-area-inset-bottom));
		background:rgba(255,255,255,.97); backdrop-filter:blur(8px);
		border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(11,20,36,.07);
	}
	.mbar-item{
		display:inline-flex; align-items:center; justify-content:center; gap:7px;
		height:44px; border-radius:10px; font-family:inherit; font-size:14px;
		font-weight:700; cursor:pointer; transition:.15s; white-space:nowrap;
	}
	.mbar-item .mi{ width:17px; height:17px; flex:none; }
	.mbar > a.mbar-item{ flex:0 0 auto; padding:0 14px; border:1px solid var(--line); color:var(--navy); background:#fff; }
	.mbar > a.mbar-item:hover{ border-color:var(--navy-30); }
	.mbar-cta{ flex:1 1 auto; border:none; background:var(--red); color:#fff; }
	.mbar-cta:hover{ background:var(--red-deep); }
	.mbar-social{ display:flex; gap:6px; flex:none; }
	.mbar-social a{
		width:40px; height:40px; border-radius:10px; display:flex; align-items:center;
		justify-content:center; border:1px solid var(--line); color:var(--navy-70); transition:.15s;
	}
	.mbar-social a:hover{ color:var(--red); border-color:var(--red); }
	.mbar-social .mi{ width:18px; height:18px; }

	/* Панель перекрывает низ страницы — освобождаем место под ней. */
	body{ padding-bottom:76px; }

	/* Телефон и почта уехали вниз, верхняя полоса разгружается. */
	.util .right .mono, .util .right .hidem{ display:none; }
}

/* Совсем узкие: у кнопки «Позвонить» остаётся иконка. */
@media(max-width:420px){
	.mbar > a.mbar-item span{ display:none; }
	.mbar > a.mbar-item{ padding:0 12px; }
}

/* ============================================================
   Шапка на телефоне

   В синей полосе остаются только плашка E-LAB и переключатель языка — всё
   остальное (телефон, почта, «Заказать звонок») переехало в нижнюю панель,
   а вход — в белую шапку к избранному и корзине.
   ============================================================ */

/* На десктопе кнопки-дубли из шапки не нужны: там есть строка поиска и «Войти»
   в верхней полосе. */
.search-toggle, .acc-mobile{ display:none; }

@media(max-width:760px){
	/* Синяя полоса: плашка слева, язык справа. */
	.util .acc-link{ display:none; }
	.util .right{ flex:0 0 auto; gap:0; }
	.util .right .mono, .util .right .hidem{ display:none; }
	.util .grp{ flex:1 1 auto; }
	.util .wrap{ flex-wrap:nowrap; gap:12px; align-items:center; }

	/* Белая шапка: отступы поджаты, кнопки чуть меньше. */
	.hdr{ height:62px; gap:10px; }
	.hdr .actions{ gap:2px; }
	.iconbtn{ width:38px; height:38px; border-radius:9px; }
	.iconbtn svg{ width:19px; height:19px; }
	.logo-lockup .wm{ font-size:24px; }
	.logo-lockup .desc{ font-size:9.5px; letter-spacing:.14em; }

	.search-toggle, .acc-mobile{ display:flex; }
	.acc-mobile .mi-user{ width:15px; height:18px; }

	/* Строка поиска выезжает под шапкой на всю ширину. */
	header .searchbox{
		display:none; position:absolute; left:0; right:0; top:100%;
		width:auto; height:56px; margin:0; border-radius:0;
		border-left:0; border-right:0; border-top:1px solid var(--line);
		padding:0 18px; background:#fff; z-index:40;
	}
	header .searchbox.open{ display:flex; }
	/* header уже position:sticky — этого достаточно, чтобы строка позиционировалась
	   относительно него, а не всей страницы. */
}

@media(max-width:420px){
	.hdr{ gap:6px; }
	.iconbtn{ width:34px; height:34px; }
	.logo-lockup .wm{ font-size:21px; }
}

/* Форма входа /auth/ — своего юнита в прототипе нет, собрана из блоков шаблона */
.auth-box{ max-width:420px; border:1px solid var(--line); border-radius:18px; padding:28px; }
.auth-box .fi{ margin-bottom:14px; }
.auth-box .fi label{ display:block; font-size:13px; color:var(--slate); margin-bottom:6px; }
.auth-box .fi input{
	width:100%; height:46px; padding:0 14px; font-family:inherit; font-size:15px;
	border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); outline:none;
}
.auth-box .fi input:focus{ border-color:var(--navy-30); }
.auth-remember{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--slate); margin:4px 0 18px; cursor:pointer; }
.auth-error{ border:1px solid var(--red); background:var(--red-tint); border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:14px; }
.auth-error p{ margin:0; }
.auth-links{ display:flex; flex-direction:column; gap:8px; margin-top:18px; font-size:14px; }
.auth-links a{ color:var(--red); font-weight:600; }
@media(max-width:520px){ .auth-box{ padding:20px; } }

/* Зона перетаскивания файлов в форме запроса КП */
.dropzone{
	display:block; border:1.5px dashed var(--line); border-radius:12px;
	padding:18px 16px; text-align:center; cursor:pointer; transition:.15s;
	background:var(--paper);
}
.dropzone:hover{ border-color:var(--navy-30); }
.dropzone.dragover{ border-color:var(--red); background:var(--red-tint); }
.dropzone-hint{ font-size:13.5px; color:var(--slate); line-height:1.5; }
.dropzone-hint b{ color:var(--red); }
.dropzone-hint small{ font-size:12px; color:var(--steel); }
.dropzone.has-files .dropzone-hint{ font-size:12.5px; opacity:.8; }
.dropzone-list{ list-style:none; margin:12px 0 0; padding:0; text-align:left; }
.dropzone-list li{
	font-size:13px; color:var(--navy); background:#fff; border:1px solid var(--line);
	border-radius:8px; padding:7px 10px; margin-bottom:6px; word-break:break-word;
}
.dropzone-list li.too-big{ border-color:var(--red); color:var(--red); }

/* ============================================================
   Модалка на телефоне и защита от бокового скролла

   Симптом: на правовых страницах появлялась горизонтальная прокрутка, и окно
   формы уезжало за левый край. Правим обе стороны — и саму модалку, и причину
   прокрутки в тексте документов.
   ============================================================ */
@media(max-width:560px){
	.mbg{ padding:12px; align-items:flex-start; }
	.mw{ max-width:100%; max-height:92vh; margin-top:8px; }
	.mh{ padding:18px 18px 16px; }
	.mh h3{ font-size:19px; }
	.mclose{ top:12px; right:12px; width:32px; height:32px; }
	.mb{ padding:16px 18px 22px; }
	/* Поля формы в модалке — в одну колонку, иначе пара «Имя + Телефон» жмётся */
	.mb .formgrid{ grid-template-columns:1fr; }
}

/* Длинные ссылки и слова в правовых документах и статьях не должны растягивать
   страницу: именно они давали боковую прокрутку на /company/docs/*. */
.article-body{ overflow-wrap:anywhere; word-break:normal; }
.article-body a{ overflow-wrap:anywhere; }
.article-body pre, .article-body code{ white-space:pre-wrap; overflow-wrap:anywhere; }

/* Поле-файл в веб-формах: системный input прячем, кликом управляет обёртка */
.form-row.is-file .dropzone{ display:block; position:relative; }
.form-row.is-file .dropzone input[type="file"]{
	position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
}
.form-row.is-file .dropzone-hint{ display:block; pointer-events:none; }
.form-row.is-file .dropzone-list{ position:relative; z-index:1; }

/* Источники под статьёй. Юнит article-detail: отбивка сверху, надзаголовок,
   нумерованный список ссылок. */
.sources{ margin-top:34px; padding-top:22px; border-top:1px solid var(--line); }
.sources .eyebrow{ color:var(--steel); margin-bottom:12px; }
.sources ol{ margin:0; padding-left:20px; color:var(--slate); font-size:14px; line-height:1.7; }
.sources li{ margin-bottom:7px; }
.sources a{ color:var(--red); word-break:break-word; }
.sources a:hover{ color:var(--red-deep); text-decoration:underline; }

/* Кнопка отправки в строке поиска.
   На десктопе строка всегда открыта и отправляется по Enter — кнопка не нужна,
   но остаётся для скринридеров. На телефоне строка выезжает по лупе, клавиатура
   перекрывает пол-экрана, и Enter неочевиден — там кнопка видимая. */
.searchbox-go{
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
@media(max-width:760px){
	.searchbox-go{
		position:static; width:auto; height:34px; padding:0 14px; margin:0;
		overflow:visible; clip:auto; flex:none;
		border-radius:8px; border:none; background:var(--red); color:#fff;
		font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
	}
	.searchbox-go:hover{ background:var(--red-deep); }
	header .searchbox{ gap:10px; }
	header .searchbox input{ flex:1 1 auto; min-width:0; }
}

/* Карта офиса на контактах — на месте плитки-заглушки из прототипа */
.contacts-map{
	margin-top:8px; border:1px solid var(--line); border-radius:16px;
	overflow:hidden; line-height:0; background:var(--paper);
}
.contacts-map iframe{ display:block; width:100%; height:260px; border:0; }
@media(max-width:760px){ .contacts-map iframe{ height:220px; } }

/* Ядро печатает название файлового поля ещё раз внутри зоны перетаскивания —
   получается дубль подписи («Файлы» сверху и «Файлы» внутри). Прячем внутренний,
   оставляя тот, что выводит наш шаблон в .form-cap. */
.form-row.is-file .dropzone{ font-size:0; }
.form-row.is-file .dropzone .dropzone-hint,
.form-row.is-file .dropzone .dropzone-list{ font-size:13.5px; }
.form-row.is-file .dropzone .bx-input-file-desc{ display:none; }

/* Правовые страницы: заголовок теперь выводит шапка page-head, а тот, что лежит
   внутри самого правового текста, прячем — текст не редактируем, он общий с
   боевым сайтом. Заодно даём документам те же переносы, что и статьям: длинные
   реквизиты и ссылки не должны растягивать страницу. */
.docpage > h1:first-child{ display:none; }
.docpage{ overflow-wrap:anywhere; }
.docpage table{ width:100%; display:block; overflow-x:auto; border-collapse:collapse; }

/* Страница партнёра /company/brands/<code>/ — прямые ссылки на неё живут на
   боевом сайте, хотя в новом дизайне партнёр открывается модалкой. */
.partner-page{ display:grid; grid-template-columns:260px 1fr; gap:34px; align-items:start; }
.partner-page-logo{
	border:1px solid var(--line); border-radius:16px; padding:22px;
	display:flex; align-items:center; justify-content:center; min-height:120px; background:#fff;
}
.partner-page-logo img{ max-width:100%; max-height:90px; object-fit:contain; }
@media(max-width:760px){ .partner-page{ grid-template-columns:1fr; gap:20px; } }

/* Аватар в карточке сотрудника: раньше внутри лежал фон, теперь <picture> с
   реальным фото. Без overflow и жёстких размеров у внутреннего изображения
   крупный портрет распирал карточку. */
.leader .av{ overflow:hidden; flex:none; }
.leader .av picture, .leader .av img{ width:100%; height:100%; display:block; }
.leader .av img{ object-fit:cover; object-position:center top; }

/* Статические карточки руководителей на /company/staff/ — наследие старого сайта
   на bootstrap-сетке Aspro. Контент ценный (реальные люди с описаниями), поэтому
   не выбрасываем, а приводим к виду шаблона: фото в рамку, текст в общий стиль. */
.staff-legacy .row{ align-items:start; padding:22px 0; border-top:1px solid var(--line); }
.staff-legacy .row:first-child{ border-top:0; }
.staff-legacy img{ border-radius:14px; max-width:100%; height:auto; }
.staff-legacy .link-linkedin{ display:inline-block; margin-top:10px; }
.staff-legacy .link-linkedin img{ width:26px; border-radius:6px; }
.staff-legacy h3{ font-size:19px; color:var(--navy); margin:0 0 10px; }
.staff-legacy div{ color:var(--slate); font-size:15px; line-height:1.7; }
.staff-legacy span[style]{ display:block; }

/* End */
/* /local/templates/medcom/template_styles.css?178524809782627 */