/* Castrol — промышленный портал поставки. Палитра: зелёный #007A3D/#00A650, красный #E4002B, графит #16191c */
:root{
  --g:#007A3D; --g2:#00A650; --g3:#e6f2eb; --gd:#005c2e;
  --r:#E4002B; --rd:#b80022;
  --k:#16191c; --k2:#2b3036; --k3:#5a636b;
  --line:#cfd5d9; --soft:#f3f5f4; --w:#fff;
  --cond:"Fira Sans Extra Condensed","Barlow Condensed","Arial Narrow",sans-serif;
  --sans:"IBM Plex Sans","Segoe UI",sans-serif;
  --wrap:1320px; --pad:clamp(16px,3.2vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.6 var(--sans);color:var(--k);background:var(--w);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--g)}
a:hover{color:var(--gd)}
:focus-visible{outline:3px solid var(--r);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--cond);font-weight:700;line-height:1.02;margin:0 0 .4em;text-wrap:balance;letter-spacing:.005em}
h1{font-size:clamp(40px,6.4vw,92px);text-transform:uppercase}
h2{font-size:clamp(30px,3.8vw,54px)}
h3{font-size:clamp(22px,2vw,28px)}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:10}
.lbl{font:700 13px/1.2 var(--cond);letter-spacing:.14em;text-transform:uppercase}
.muted{color:var(--k3)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- верхняя полоса --- */
.util{background:var(--k);color:#e8ecef;font-size:14px}
.util .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;min-height:40px;flex-wrap:wrap}
.util a{color:#fff;text-decoration:none}.util a:hover{color:var(--g2)}
.seg{display:flex;align-self:stretch}
.seg a,.seg span{display:flex;align-items:center;padding:0 16px;font:700 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase}
.seg .on{background:var(--g);color:#fff}
.seg a{color:#cfd6db}.seg a:hover{background:var(--k2);color:#fff}
.util .ct{display:flex;gap:18px;flex-wrap:wrap}

/* --- шапка --- */
.hdr{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:5}
.hdr .wrap{display:flex;align-items:center;gap:28px;min-height:76px}
.logo{display:flex;flex-direction:column;text-decoration:none;color:var(--k);line-height:1}
.logo b{font:700 34px/0.9 var(--cond);letter-spacing:.02em;text-transform:uppercase;color:var(--g)}
.logo small{font:600 11px/1.2 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--k3);margin-top:4px}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{padding:10px 12px;color:var(--k);text-decoration:none;font:600 17px/1 var(--cond);letter-spacing:.04em;text-transform:uppercase;border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--g2);color:var(--g)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border:2px solid var(--r);background:var(--r);color:#fff;text-decoration:none;font:700 17px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.btn:hover{background:var(--rd);border-color:var(--rd);color:#fff;transform:translateY(-1px)}
.btn.g{background:var(--g);border-color:var(--g)}.btn.g:hover{background:var(--gd);border-color:var(--gd)}
.btn.o{background:transparent;color:var(--k);border-color:var(--k)}.btn.o:hover{background:var(--k);color:#fff}
.btn.w{background:#fff;color:var(--g);border-color:#fff}.btn.w:hover{background:var(--k);border-color:var(--k);color:#fff}
.btn.sm{min-height:38px;padding:8px 14px;font-size:15px}
.btn::after{content:"";width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:2px}
.btn.nx::after{display:none}
.mnav{display:none;margin-left:auto}
.mnav summary{list-style:none;cursor:pointer;font:700 16px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:12px 14px;border:2px solid var(--k)}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary{background:var(--k);color:#fff}
.mnav nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:4px solid var(--g);display:grid;padding:8px var(--pad) 18px}
.mnav nav a{padding:13px 0;border-bottom:1px solid var(--line);color:var(--k);text-decoration:none;font:600 20px/1.1 var(--cond);text-transform:uppercase;letter-spacing:.04em}
.mnav nav .btn{margin-top:14px;color:#fff}
@media (max-width:1100px){.nav,.hdr .hcta{display:none}.mnav{display:block}}

/* --- крошки --- */
.crumbs{font-size:14px;padding:16px 0 0;color:var(--k3)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.crumbs a{color:var(--k3)}

/* --- герой главной: зелёное поле с диагональю --- */
.hero{background:var(--g);color:#fff;position:relative;clip-path:polygon(0 0,100% 0,100% calc(100% - 56px),0 100%);padding-bottom:56px}
.hero .in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:620px}
.hero .tx{padding:clamp(40px,6vw,88px) var(--pad) 48px max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));position:relative;z-index:2}
.hero .tx .lbl{color:#c9f0d8;display:inline-block;border:1px solid rgba(255,255,255,.5);padding:8px 12px;margin-bottom:22px}
.hero h1{max-width:13ch}
.hero h1 em{font-style:normal;color:var(--k);background:var(--g2);padding:0 .12em}
.hero p.lead{font-size:clamp(17px,1.4vw,20px);max-width:52ch;color:#effaf3}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero .ph{position:relative;clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);background:var(--gd)}
.hero .ph img{width:100%;height:100%;object-fit:cover}
.hero .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,122,61,.35),rgba(0,0,0,0) 40%)}
.stats{background:var(--k);color:#fff;margin-top:-56px;padding-top:56px}
.stats .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stats div{padding:26px 22px 30px;border-left:1px solid #343a40}
.stats div:last-child{border-right:1px solid #343a40}
.stats b{display:block;font:700 clamp(38px,4.4vw,64px)/1 var(--cond);color:var(--g2)}
.stats span{font-size:14px;color:#c7ced4}

/* --- заголовки разделов с крупными номерами --- */
.sec{padding:clamp(56px,7vw,104px) 0}
.sec.soft{background:var(--soft)}
.sec.dark{background:var(--k);color:#fff}
.sec.green{background:var(--g2);color:var(--k)}
.sh{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr) auto;gap:0 28px;align-items:end;margin-bottom:40px;border-bottom:2px solid var(--k);padding-bottom:20px}
.dark .sh{border-color:#3b4249}
.sh .n{font:700 clamp(64px,9vw,148px)/.78 var(--cond);color:var(--g2);letter-spacing:-.02em}
.green .sh .n{color:var(--k)}
.sh h2{margin:0}
.sh .lbl{display:block;margin-bottom:10px;color:var(--g)}
.dark .sh .lbl{color:var(--g2)}.green .sh .lbl{color:var(--k)}
.sh .more{white-space:nowrap}

/* --- модульная сетка с линиями --- */
.mg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.mg>*{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.mg.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mg.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dark .mg,.dark .mg>*{border-color:#3b4249}
.tile{display:flex;flex-direction:column;padding:24px 24px 26px;color:var(--k);text-decoration:none;background:#fff;min-height:250px;transition:background .15s}
.tile:hover{background:var(--g3);color:var(--k)}
.tile .ix{font:700 14px/1 var(--cond);letter-spacing:.14em;color:var(--k3)}
.tile h3{margin:14px 0 10px}
.tile .cnt{margin-top:auto;display:flex;align-items:baseline;gap:8px;padding-top:18px}
.tile .cnt b{font:700 44px/1 var(--cond);color:var(--g)}
.tile .cnt span{font-size:14px;color:var(--k3)}
.tile .sr{font-size:14px;color:var(--k3);margin:0}
.tile .go{width:36px;height:36px;border:2px solid var(--k);margin-left:auto;position:relative;flex:none;transition:background .15s,border-color .15s}
.tile .go::after{content:"";position:absolute;left:9px;top:12px;width:9px;height:9px;border-top:2px solid var(--k);border-right:2px solid var(--k);transform:rotate(45deg)}
.tile:hover .go{background:var(--r);border-color:var(--r)}.tile:hover .go::after{border-color:#fff}
.tile.im{padding:0}.tile.im .ti{aspect-ratio:16/9;overflow:hidden;background:var(--k2)}
.tile.im .ti img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.tile.im:hover .ti img{transform:scale(1.03)}
.tile.im .tb{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1}
.tile.feat{grid-column:span 2}

/* линейки — горизонтальные полосы */
.lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--k)}
.line{padding:26px 26px 30px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--k);display:block}
.line+.line{padding-left:26px;border-left:1px solid var(--line)}
.line .nm{font:700 clamp(40px,4.2vw,64px)/.9 var(--cond);text-transform:uppercase;color:var(--k);transition:color .15s}
.line:hover .nm{color:var(--g)}
.line .meta{display:flex;gap:16px;margin:14px 0 10px;font:700 14px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--r)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chips li,.chip{font:600 13px/1 var(--sans);padding:6px 9px;border:1px solid var(--line);background:#fff;color:var(--k)}
.chips a{color:var(--k);text-decoration:none}
.chips a:hover{color:var(--g)}
.serieslist{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.serieslist a{padding:14px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none;color:var(--k);font:700 20px/1.05 var(--cond);text-transform:uppercase}
.serieslist a span{display:block;font:400 13px/1.3 var(--sans);text-transform:none;color:var(--k3);margin-top:4px}
.serieslist a:hover{background:var(--g);color:#fff}.serieslist a:hover span{color:#dff5e7}

/* подбор-вход */
.finder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0;border:2px solid var(--k)}
.finder .fl{background:var(--k);color:#fff;padding:36px}
.finder .fl h3{font-size:clamp(28px,3vw,40px)}
.finder .fr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.finder .fr a{padding:28px 24px;border-left:1px solid var(--line);text-decoration:none;color:var(--k);display:flex;flex-direction:column;gap:10px}
.finder .fr a:hover{background:var(--g3)}
.finder .fr b{font:700 26px/1 var(--cond);text-transform:uppercase}
.finder .fr ul{margin:0;padding:0;list-style:none;font-size:15px;color:var(--k3)}
.finder .fr li{padding:5px 0;border-bottom:1px dashed var(--line)}
.pic{width:44px;height:44px;border:3px solid var(--g);position:relative}
.pic.p2{border-radius:50%}.pic.p2::after{content:"";position:absolute;inset:9px;border:3px solid var(--r);border-radius:50%}
.pic.p1::after{content:"";position:absolute;left:6px;right:6px;top:16px;height:6px;background:var(--r)}
.pic.p3{border-width:3px 3px 12px}.pic.p3::after{content:"";position:absolute;left:8px;bottom:4px;width:4px;height:22px;background:var(--r);box-shadow:10px -6px 0 var(--r),20px 4px 0 var(--r)}

/* шаги */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:s}
.step{padding:26px 24px 30px;border-top:6px solid var(--g2);background:#fff}
.step+.step{border-left:1px solid var(--line)}
.step b{display:block;font:700 64px/1 var(--cond);color:var(--k);margin-bottom:8px}
.step h3{font-size:24px}
.step p{margin:0;font-size:15px;color:var(--k2)}

/* блок «автомобилистам» */
.auto{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);background:var(--k);color:#fff}
.auto .ai{min-height:360px;clip-path:polygon(0 0,100% 0,86% 100%,0 100%);background:#23282d}
.auto .ai img{width:100%;height:100%;object-fit:cover}
.auto .at{padding:clamp(28px,4vw,56px)}
.auto .at .lbl{color:var(--g2)}
.auto ul{margin:18px 0 26px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.auto li{padding:10px 0;border-bottom:1px solid #3b4249}
.auto li a{color:#fff;text-decoration:none}.auto li a:hover{color:var(--g2)}
.auto li span{color:#9aa4ad;font-size:14px;margin-left:6px}

/* доставка коротко */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.facts>div{padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.facts b{display:block;font:700 40px/1 var(--cond);color:var(--g);margin:8px 0}
.facts p{margin:0;font-size:15px}

/* B2B */
.b2b{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
.b2b ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:2px solid var(--k)}
.b2b li{padding:18px 18px 18px 0;border-bottom:1px solid rgba(22,25,28,.25)}
.b2b li:nth-child(even){padding-left:18px;border-left:1px solid rgba(22,25,28,.25)}
.b2b li b{display:block;font:700 22px/1.1 var(--cond);text-transform:uppercase;margin-bottom:4px}

/* FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:2px solid var(--k)}
.faq summary{cursor:pointer;list-style:none;padding:20px 48px 20px 0;font:700 clamp(20px,1.8vw,24px)/1.2 var(--cond);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:24px;width:14px;height:14px;border-right:3px solid var(--g);border-bottom:3px solid var(--g);transform:rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(225deg);top:30px}
.faq summary:hover{color:var(--g)}
.faq .a{padding:0 0 22px;max-width:80ch}

/* форма */
.formbox{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--g);color:#fff;scroll-margin-top:20px}
.formbox .fi{padding:clamp(28px,4vw,56px)}
.formbox .fi .lbl{color:#c9f0d8}
.formbox .fi p{color:#e7f7ed}
.formbox .fi .ph{font:700 clamp(26px,2.6vw,36px)/1 var(--cond);color:#fff;text-decoration:none;display:block;margin-top:18px}
form.lead{background:#fff;color:var(--k);padding:clamp(24px,3.4vw,48px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;border-top:6px solid var(--r)}
form.lead .full{grid-column:1/-1}
label.f{display:flex;flex-direction:column;gap:6px;font:700 13px/1.2 var(--cond);letter-spacing:.12em;text-transform:uppercase}
input,select,textarea{font:400 16px/1.4 var(--sans);color:var(--k);border:1px solid #8e979e;background:#fff;padding:12px 12px;border-radius:0;width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid var(--g2);outline-offset:0;border-color:var(--g)}
textarea{min-height:120px;resize:vertical}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45}
.agree input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--g)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* страница: шапка раздела */
.phead{background:var(--g);color:#fff;clip-path:polygon(0 0,100% 0,100% calc(100% - 36px),0 100%);padding:0 0 64px}
.phead .crumbs,.phead .crumbs a{color:#d7f1e1}.phead .crumbs li+li::before{color:#7fc8a0}
.phead .wrap>.lbl{display:block;margin:34px 0 12px;color:#c9f0d8}
.phead h1{font-size:clamp(36px,5.2vw,76px);max-width:22ch}
.phead p{max-width:70ch;font-size:clamp(16px,1.3vw,19px);color:#effaf3;margin:0}
.phead .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.phead.dk{background:var(--k)}
.phead.dk .crumbs,.phead.dk .crumbs a{color:#b9c2c9}
.phead.dk .wrap>.lbl{color:var(--g2)}
.kpis{display:flex;flex-wrap:wrap;gap:0;margin-top:26px;border-top:1px solid rgba(255,255,255,.35)}
.kpis div{padding:14px 26px 0 0;margin-right:26px}
.kpis b{display:block;font:700 40px/1 var(--cond)}
.kpis span{font-size:14px;color:#d7f1e1}

/* двухколоночный контент */
.cols{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:48px;align-items:start}
.aside{border-top:6px solid var(--r);background:var(--soft);padding:24px;position:sticky;top:16px}
.aside h3{font-size:24px}
.prose{max-width:76ch;font-size:17px}
.prose h2{font-size:clamp(28px,3vw,40px);margin-top:1.4em}
.prose h3{margin-top:1.2em}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin:.3em 0}
.prose table{border-collapse:collapse;width:100%;font-size:15px;margin:1em 0}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.prose th{background:var(--soft);font-family:var(--cond);letter-spacing:.06em;text-transform:uppercase;font-size:14px}
.note{border:2px solid var(--k);padding:18px 20px;background:#fff;font-size:15px}
.note b{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em}

/* таблица товаров */
.tw{overflow-x:auto;border:1px solid var(--line);background:#fff}
table.pt{width:100%;border-collapse:collapse;font-size:15px;min-width:760px}
table.pt th{background:var(--k);color:#fff;text-align:left;font:700 13px/1.2 var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:12px 14px;white-space:nowrap}
table.pt td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:middle}
table.pt tbody tr:hover td{background:var(--g3)}
table.pt .pn{font-weight:600}
table.pt .pn a{color:var(--k)}
table.pt .pn small{display:block;font-weight:400;color:var(--k3);font-size:13px}
table.pt .gr{font:700 16px/1.2 var(--cond);letter-spacing:.03em;white-space:nowrap}
table.pt td:last-child{text-align:right;white-space:nowrap}
.pk{display:flex;flex-wrap:wrap;gap:4px}
.pk span{font-size:12px;line-height:1;padding:5px 6px;border:1px solid var(--line);white-space:nowrap}
.base{font-size:13px;white-space:nowrap}
.base::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;background:var(--g2)}
.base.s::before{background:var(--g)}.base.p::before{background:var(--k3)}
.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:18px;font-size:14px}
.pager span,.pager a{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--k);text-decoration:none;padding:0 10px}
.pager .on{background:var(--k);color:#fff;border-color:var(--k)}
.pager em{font-style:normal;color:var(--k3);margin-left:10px}

/* фильтр-макет */
.filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:14px;align-items:end;padding:22px;background:var(--soft);border-top:4px solid var(--g);margin-bottom:24px}
.filters .btn{min-height:50px}

/* карточка товара */
.pcard{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;align-items:start}
.gal .main{background:linear-gradient(180deg,#eef2f0,#dfe6e2);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.gal .main img{width:100%;height:100%;object-fit:cover}
.gal .main .tag{position:absolute;left:0;top:0;background:var(--k);color:#fff;padding:8px 12px}
.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.thumbs div{aspect-ratio:1;background:var(--soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--k3);text-align:center;padding:6px}
.thumbs div.on{border:2px solid var(--g)}
.can{width:46%;aspect-ratio:3/4;background:linear-gradient(90deg,#0b5d31,#00833f 45%,#0a6a37);position:relative;border-radius:10px 10px 6px 6px}
.can::before{content:"";position:absolute;right:14%;top:-9%;width:26%;height:12%;background:#1d2226;border-radius:4px 4px 0 0}
.can::after{content:"";position:absolute;left:10%;top:6%;width:30%;height:9%;border:5px solid #0b5d31;border-bottom:0;border-radius:18px 18px 0 0}
.pinfo h1{font-size:clamp(34px,4vw,58px);text-transform:none}
.pinfo .tp{color:var(--g);margin-bottom:10px}
dl.spec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);margin:22px 0;border-top:2px solid var(--k)}
dl.spec dt,dl.spec dd{margin:0;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
dl.spec dt{font:700 13px/1.6 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--k3)}
.packsel{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 22px;border:0;padding:0}
.packsel legend{font:700 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;padding:0}
.packsel label{cursor:pointer}
.packsel input{position:absolute;opacity:0;width:1px;height:1px}
.packsel span{display:inline-flex;min-width:72px;justify-content:center;padding:12px 14px;border:2px solid var(--line);font:700 18px/1 var(--cond)}
.packsel label:hover span{border-color:var(--k)}
.packsel input:checked+span{border-color:var(--g);background:var(--g);color:#fff}
.packsel input:focus-visible+span{outline:3px solid var(--r);outline-offset:2px}
.price{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 0;border-top:1px solid var(--line)}
.price b{font:700 30px/1 var(--cond);text-transform:uppercase}
.price small{display:block;color:var(--k3);font-size:14px}

/* вкладки на радиокнопках */
.tabs{margin-top:56px}
.tabs>input{position:absolute;opacity:0;width:1px;height:1px}
.tabs .tl{display:flex;flex-wrap:wrap;border-bottom:2px solid var(--k)}
.tabs .tl label{cursor:pointer;padding:14px 22px;font:700 17px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;border:2px solid transparent;border-bottom:0;margin-bottom:-2px}
.tabs .tl label:hover{color:var(--g)}
.tabs .tp{display:none;padding:28px 0}
#t1:checked~.tl label[for=t1],#t2:checked~.tl label[for=t2],#t3:checked~.tl label[for=t3],#t4:checked~.tl label[for=t4]{background:var(--k);color:#fff}
#t1:checked~.tp1,#t2:checked~.tp2,#t3:checked~.tp3,#t4:checked~.tp4{display:block}
#t1:focus-visible~.tl label[for=t1],#t2:focus-visible~.tl label[for=t2],#t3:focus-visible~.tl label[for=t3],#t4:focus-visible~.tl label[for=t4]{outline:3px solid var(--r)}

/* подбор */
.wiz{border:2px solid var(--k)}
.wiz>input{position:absolute;opacity:0;width:1px;height:1px}
.wiz .wt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.wiz .wt label{cursor:pointer;padding:20px 22px;border-right:1px solid var(--line);border-bottom:2px solid var(--k);display:flex;gap:14px;align-items:center;font:700 clamp(18px,1.6vw,22px)/1.1 var(--cond);text-transform:uppercase}
.wiz .wt label:last-child{border-right:0}
.wiz .wt label i{font-style:normal;font:700 34px/1 var(--cond);color:var(--g2)}
#w1:checked~.wt label[for=w1],#w2:checked~.wt label[for=w2],#w3:checked~.wt label[for=w3]{background:var(--g);color:#fff}
#w1:checked~.wt label[for=w1] i,#w2:checked~.wt label[for=w2] i,#w3:checked~.wt label[for=w3] i{color:#fff}
#w1:focus-visible~.wt label[for=w1],#w2:focus-visible~.wt label[for=w2],#w3:focus-visible~.wt label[for=w3]{outline:3px solid var(--r);outline-offset:-3px}
.wiz .wp{display:none;padding:28px}
#w1:checked~.wp1,#w2:checked~.wp2,#w3:checked~.wp3{display:block}
.opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 24px}
.opts span{padding:14px 12px;border:1px solid var(--line);font-size:15px;background:#fff}
.opts span.on{border:2px solid var(--g);background:var(--g3);font-weight:600}
.result{background:var(--soft);padding:22px;border-top:4px solid var(--g2)}
.result h3{font-size:22px}

/* отрасли */
.ind{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ind a,.ind div{padding:22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none;color:var(--k);min-height:190px;display:flex;flex-direction:column;background:#fff}
.ind a:hover{background:var(--k);color:#fff}.ind a:hover .ic{color:var(--g2)}
.ind .ic{font:700 14px/1 var(--cond);letter-spacing:.14em;color:var(--g)}
.ind h3{font-size:26px;margin:12px 0 8px}
.ind p{font-size:14px;margin:0;color:inherit;opacity:.85}
.ind .nb{margin-top:auto;font:700 30px/1 var(--cond);padding-top:14px}
.ind .nb small{font:400 13px var(--sans);margin-left:6px;opacity:.8}

/* статьи */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--k)}
.post{padding:24px 24px 28px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px;color:var(--k);text-decoration:none}
.post:not(:nth-child(3n+1)){padding-left:24px;border-left:1px solid var(--line)}
.post .lbl{color:var(--r)}
.post h3{margin:0}
.post p{margin:0;font-size:15px;color:var(--k2)}
a.post:hover h3{color:var(--g)}
.post .st{margin-top:auto;font-size:13px;color:var(--k3)}
.cover{aspect-ratio:21/8;overflow:hidden;margin:0 0 32px}
.cover img{width:100%;height:100%;object-fit:cover}

/* карта-заглушка */
.map{position:relative;aspect-ratio:16/9;background:
 repeating-linear-gradient(0deg,transparent 0 46px,#dde3e0 46px 48px),
 repeating-linear-gradient(90deg,transparent 0 62px,#dde3e0 62px 64px),#eef2f0;overflow:hidden;border:1px solid var(--line)}
.map::before{content:"";position:absolute;left:-10%;right:-10%;top:58%;height:22px;background:#cdd6d1;transform:rotate(-14deg)}
.map::after{content:"";position:absolute;left:38%;top:-10%;bottom:-10%;width:16px;background:#cdd6d1;transform:rotate(8deg)}
.map .pin{position:absolute;left:47%;top:40%;width:34px;height:34px;background:var(--r);border-radius:50% 50% 50% 0;transform:rotate(-45deg);z-index:2}
.map .pin::after{content:"";position:absolute;inset:10px;background:#fff;border-radius:50%}
.map .cap{position:absolute;left:16px;bottom:16px;background:var(--k);color:#fff;padding:12px 16px;z-index:2;font-size:14px;max-width:80%}

/* подвал */
.ftr{background:var(--k);color:#c7ced4;padding:64px 0 28px;font-size:15px}
.ftr .top{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr)) minmax(0,3fr);gap:28px;padding-bottom:36px;border-bottom:1px solid #343a40}
.ftr h4{color:#fff;font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin:7px 0}
.ftr a{color:#e3e8ec;text-decoration:none}.ftr a:hover{color:var(--g2)}
.ftr .logo b{color:#fff}.ftr .logo small{color:#9aa4ad}
.ftr .disc{padding-top:22px;font-size:13px;color:#9aa4ad;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px}
.ftr .big{font:700 26px/1.1 var(--cond);color:#fff}

/* разное */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
.klist{list-style:none;padding:0;margin:0;border-top:2px solid var(--k)}
.klist li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.klist li b{font:700 15px/1.4 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--k3)}
.sitemap{columns:3;column-gap:40px}
.sitemap section{break-inside:avoid;margin-bottom:28px}
.sitemap ul{padding-left:1.1em;margin:0}
.e404{min-height:60vh;display:grid;place-items:center;text-align:center}
.e404 b{display:block;font:700 clamp(120px,22vw,300px)/.8 var(--cond);color:var(--g2)}
.found{margin-bottom:14px;font-size:15px}
.empty{border:2px dashed var(--line);padding:28px;text-align:center;margin-top:36px}

/* адаптив */
@media (max-width:1100px){
  .hero .in{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero .tx{padding:44px var(--pad) 36px}
  .hero .ph{clip-path:polygon(0 14%,100% 0,100% 100%,0 100%);aspect-ratio:16/9}
  .mg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mg.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .serieslist{grid-template-columns:repeat(3,minmax(0,1fr))}
  .finder{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step:nth-child(3){border-left:0}
  .ind{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr .top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr .top>div:first-child{grid-column:1/-1}
  .cols,.pcard,.b2b,.formbox,.auto,.split{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
  .filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sitemap{columns:2}
  .auto .ai{clip-path:none;min-height:0;aspect-ratio:16/9}
}
@media (max-width:760px){
  .util .ct span.hide{display:none}
  .stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr));padding:0}
  .stats div{border-bottom:1px solid #343a40;padding:20px 18px}
  .sh{grid-template-columns:minmax(0,1fr);gap:8px}
  .sh .n{font-size:72px}
  .mg,.mg.c3,.mg.c2,.lines,.posts,.facts,.steps,.finder .fr,.ind,.b2b ul,.auto ul,.wiz .wt{grid-template-columns:minmax(0,1fr)}
  .tile.feat{grid-column:auto}
  .line+.line,.post:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .b2b li:nth-child(even){padding-left:0;border-left:0}
  .step+.step{border-left:0}
  .finder .fr a{border-left:0;border-top:1px solid var(--line)}
  .wiz .wt label{border-right:0;border-bottom:1px solid var(--line)}
  .serieslist{grid-template-columns:repeat(2,minmax(0,1fr))}
  form.lead{grid-template-columns:minmax(0,1fr)}
  .filters{grid-template-columns:minmax(0,1fr)}
  .opts{grid-template-columns:minmax(0,1fr)}
  .ftr .top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ftr .disc{grid-template-columns:minmax(0,1fr)}
  .sitemap{columns:1}
  .klist li{grid-template-columns:minmax(0,1fr);gap:2px}
  dl.spec{grid-template-columns:minmax(0,1fr)}
  dl.spec dt{border-bottom:0;padding-bottom:0}
  .tabs .tl label{padding:12px 12px;font-size:15px}
  /* таблица товаров — карточками */
  .tw{border:0;background:transparent;overflow:visible}
  table.pt{min-width:0}
  table.pt thead{display:none}
  table.pt,table.pt tbody,table.pt tr,table.pt td{display:block;width:100%}
  table.pt tr{border:1px solid var(--line);border-top:4px solid var(--g);background:#fff;margin-bottom:12px;padding:6px 0}
  table.pt td{border:0;padding:6px 14px;display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;text-align:left}
  table.pt td::before{content:attr(data-l);font:700 12px/1.6 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--k3)}
  table.pt td.pn{grid-template-columns:minmax(0,1fr)}
  table.pt td.pn::before{display:none}
  table.pt td:last-child{text-align:left;grid-template-columns:minmax(0,1fr)}
  table.pt td:last-child::before{display:none}
  table.pt tbody tr:hover td{background:transparent}
}
@media (max-width:760px){.tile{min-height:0}.tile .cnt{padding-top:12px}.ind a,.ind div{min-height:0}}
table.pt .rq:hover{background:var(--r);border-color:var(--r);color:#fff}
.sh.nn{grid-template-columns:minmax(0,1fr) auto}
.sh+.klist{border-top:0}
.mg.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.mg.c5{grid-template-columns:repeat(2,minmax(0,1fr))}.mg.c3>.tile.im:last-child{grid-column:1/-1}}
@media (max-width:760px){.mg.c5{grid-template-columns:minmax(0,1fr)}.mg.c3>.tile.im:last-child{grid-column:auto}}

/* brandsite (OpenCart): ссылки на товары в таблицах — в цвет текста дизайна; настоящие фото — целиком */
a.bs-pl{color:inherit;text-decoration:none}
a.bs-pl:hover{text-decoration:underline}
img.bs-photo{object-fit:contain!important;background:#fff}