/* ВРК · Architect — shared design system */
@font-face{
font-family:'Unbounded'; font-weight:100 900; font-style:normal; font-display:swap;
src:url('../fonts/unbounded-cyrillic.woff2') format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
font-family:'Unbounded'; font-weight:100 900; font-style:normal; font-display:swap;
src:url('../fonts/unbounded-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}
@font-face{
font-family:'Inter'; font-weight:100 900; font-style:normal; font-display:swap;
src:url('../fonts/inter-cyrillic.woff2') format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
font-family:'Inter'; font-weight:100 900; font-style:normal; font-display:swap;
src:url('../fonts/inter-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}
:root{
/* brandbook p.40: основной градиент — из чёрного #000000 в тёмно-серый #343434 */
--bg-0:#000; --bg-1:#1c1c1c; --bg-2:#343434;
--surface:#121212; --surface-2:#1a1a1a;
--grey-mid:#969696; /* brandbook p.42: серый подзаголовков */
--line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
--ink:#F4F3F1; --ink-dim:rgba(244,243,241,.64); --ink-faint:rgba(244,243,241,.38);
--accent:#FF9100; --accent-dim:rgba(255,145,0,.15); --accent-line:rgba(255,145,0,.5);
--good:#4ADE80;
--header-bg:rgba(10,10,10,.78);
--wave-line:255,255,255;
--radial-glow:#262626;
}
:root[data-theme="light"]{
--bg-0:#FDFCFA; --bg-1:#F5F3F0; --bg-2:#EDEAE5;
--surface:#FFFFFF; --surface-2:#F5F3F0;
--line:rgba(20,18,15,.10); --line-strong:rgba(20,18,15,.16);
/* brandbook grey #969696 is specified for the dark theme; on white it drops to ~2.8:1,
so the light theme takes a darker step to stay readable */
--grey-mid:#6B6B6B;
--ink:#18160F; --ink-dim:rgba(24,22,15,.66); --ink-faint:rgba(24,22,15,.42);
--accent:#FF9100; --accent-dim:rgba(255,145,0,.10); --accent-line:rgba(255,145,0,.6);
--good:#178A43;
--header-bg:rgba(253,252,250,.82);
--wave-line:20,18,15;
--radial-glow:#EDEAE5;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
background:radial-gradient(1000px 560px at 85% -6%, var(--radial-glow) 0%, transparent 55%),linear-gradient(180deg,var(--bg-0) 0%,var(--bg-1) 45%,var(--bg-2) 100%);
background-attachment:fixed;
color:var(--ink); font-family:'Inter','Segoe UI',sans-serif; -webkit-font-smoothing:antialiased;
position:relative;
/* Only background transitions: animating `color` through a var() swap leaves the
computed text color stuck on the previous theme's value. */
transition:background .3s ease;
}
#bgFlow{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:.5;}
header,.hero,section,footer{position:relative;z-index:1;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
@media (max-width:640px){.wrap{padding:0 18px;}}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}.reveal{opacity:1;transform:none;transition:none;}}
/* header */
header{position:sticky;top:0;z-index:40;background:var(--header-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:background .3s ease;}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:24px;}
.theme-toggle{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:3px;flex:none;}
.theme-toggle button{width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:var(--ink-faint);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s;}
.theme-toggle button svg{width:15px;height:15px;}
.theme-toggle button.on{background:var(--accent);color:#171100;}
.brand{display:flex;align-items:center;gap:10px;flex:none;}
.brand svg{width:22px;height:22px;}
.brand .word{font-family:'Unbounded';font-weight:700;font-size:15px;}
.brand .line{font-size:12.5px;color:var(--ink-faint);padding-left:10px;border-left:1px solid var(--line);}
.mainnav{display:flex;align-items:center;gap:26px;flex:1;justify-content:center;}
.mainnav a{font-size:13.5px;color:var(--ink-dim);transition:color .2s;cursor:pointer;}
.mainnav a:hover,.mainnav a.on{color:var(--accent);}
.phone{font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap;}
/* breadcrumbs */
.crumbs{padding:20px 0 0;font-size:12.5px;color:var(--ink-faint);display:flex;gap:8px;flex-wrap:wrap;}
.crumbs a{color:var(--ink-faint);}
.crumbs a:hover{color:var(--accent);}
.crumbs span.sep{opacity:.4;}
.crumbs span.cur{color:var(--ink-dim);}
/* headings / chrome */
.eyebrow{font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:9px;margin-bottom:14px;}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--accent);}
h1.page-title{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.6vw,40px);line-height:1.1;margin:14px 0 14px;text-wrap:balance;}
.lead{font-size:15px;line-height:1.65;color:var(--ink-dim);max-width:70ch;margin:0 0 8px;}
.divider{border:none;border-top:1px solid var(--line);margin:0;}
section.pad{padding:52px 0;}
.section-head{max-width:640px;margin:0 0 34px;}
/* brandbook p.42: заголовки — Unbounded Bold, только верхний регистр, интерлиньяж 120% */
.section-head h2{font-family:'Unbounded';font-weight:700;font-size:clamp(20px,2.6vw,28px);line-height:1.2;text-transform:uppercase;margin:0 0 10px;}
.section-head p{font-size:14.5px;color:var(--ink-dim);margin:0;line-height:1.6;}
/* hero — bento tile per brandbook p.47/p.50: rounded, photo bleeding right, text left */
.hero{position:relative;padding:24px 0 0;}
.hero-tile{position:relative;overflow:hidden;border-radius:20px;min-height:500px;display:flex;align-items:center;background:#000;}
@media (max-width:760px){.hero-tile{min-height:440px;border-radius:16px;}}
.hero .bgphoto{position:absolute;inset:0;background-size:cover;background-position:center right;}
.hero .bgphoto::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,0,.94) 28%,rgba(0,0,0,.62) 58%,rgba(0,0,0,.2) 100%);}
.hero .hero-inner{position:relative;z-index:2;max-width:860px;padding:56px 52px;}
@media (max-width:760px){.hero .hero-inner{padding:36px 24px;}}
/* Hero sits on a dark photo overlay in BOTH themes — its text must always stay light */
/* explicit
sets the split, so no text-wrap:balance — it would fight the manual break */
/* Unbounded Bold uppercase runs ~19.7x the font size for «ВЕНТИЛЯЦИОННЫЕ РЕШЁТКИ»; at the
756px of text width this column leaves, 38px is the largest that keeps it on one line */
.hero h1{font-family:'Unbounded';font-weight:700;font-size:clamp(22px,3vw,38px);line-height:1.2;letter-spacing:0;
text-transform:uppercase;margin:0 0 30px;color:#fff;}
.hero h1 em{font-style:normal;color:var(--accent);}
/* USP row: orange rhombus bullets, lowercase body text (brandbook p.42) */
.usp{list-style:none;display:flex;flex-wrap:wrap;gap:14px 40px;margin:0 0 32px;padding:0;}
.usp li{position:relative;padding-left:20px;max-width:20ch;font-size:14px;line-height:1.45;color:rgba(255,255,255,.9);}
.usp li::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;background:var(--accent);transform:rotate(45deg);}
.btn-white{background:#fff;color:#141414;}
.btn-white:hover{transform:translateY(-2px);}
.hero .btn-ghost{color:#F4F3F1;border-color:rgba(255,255,255,.35);}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}
.btn{font-weight:600;font-size:14.5px;padding:13px 25px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;transition:transform .2s;cursor:pointer;border:none;font-family:'Inter';}
.btn-primary{background:var(--accent);color:#171100;}
.btn-primary:hover{transform:translateY(-2px);}
.btn-ghost{border:1px solid rgba(255,255,255,.3);color:var(--ink);background:transparent;}
/* banner carousel */
.bcarousel{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);height:220px;}
.bslide{position:absolute;inset:0;display:flex;align-items:center;padding:0 44px;opacity:0;transition:opacity .6s ease;background-size:cover;background-position:center;}
.bslide.on{opacity:1;}
.bslide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85) 40%,rgba(0,0,0,.35) 100%);}
.bslide .btxt{position:relative;z-index:2;max-width:480px;}
.bslide .tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;display:block;}
.bslide h3{font-family:'Unbounded';font-weight:700;font-size:clamp(16px,1.7vw,21px);line-height:1.2;text-transform:uppercase;margin:0 0 8px;color:#fff;}
.bslide p{font-size:13px;color:rgba(255,255,255,.75);margin:0;}
.bdots{position:absolute;bottom:16px;left:44px;z-index:3;display:flex;gap:8px;}
.bdots span{width:20px;height:3px;background:rgba(255,255,255,.3);border-radius:2px;cursor:pointer;transition:background .2s;}
.bdots span.on{background:var(--accent);}
/* video */
.video-block{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/7;background-size:cover;background-position:center;cursor:pointer;}
.video-block::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55));}
.video-block .playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:78px;height:78px;border-radius:50%;background:rgba(255,145,0,.92);display:flex;align-items:center;justify-content:center;transition:transform .25s;}
.video-block:hover .playbtn{transform:translate(-50%,-50%) scale(1.08);}
.video-block .playbtn svg{width:26px;height:26px;margin-left:4px;}
.video-block .vlabel{position:absolute;left:24px;bottom:20px;z-index:2;color:#fff;font-size:13px;font-weight:600;background:rgba(0,0,0,.4);padding:7px 14px;border-radius:999px;backdrop-filter:blur(4px);}
/* stat bar (competitor-inspired quick facts row) */
.stat-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
@media (max-width:820px){.stat-bar{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.stat-bar{grid-template-columns:1fr;}}
.stat-cell{background:var(--surface);padding:22px 20px;display:flex;flex-direction:column;gap:6px;}
.stat-cell .num{font-family:'Unbounded';font-weight:700;font-size:clamp(20px,2.4vw,26px);color:var(--accent);font-variant-numeric:tabular-nums;}
.stat-cell .lbl{font-size:12px;color:var(--ink-dim);line-height:1.4;}
/* references / clients grid */
.refs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:820px){.refs-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.refs-grid{grid-template-columns:1fr;}}
/* objects sit on the page background; the plate only appears on hover */
.ref-card{background:transparent;border:1px solid var(--line);border-radius:12px;padding:18px 20px;transition:border-color .2s,background .2s;}
.ref-card:hover{border-color:var(--accent-line);background:var(--surface-2);}
/* brandbook p.42: подзаголовки — Unbounded Regular, только верхний регистр */
.ref-card h4{font-family:'Unbounded';font-size:12.5px;font-weight:500;line-height:1.2;text-transform:uppercase;margin:0 0 6px;}
.ref-card p{font-size:12px;color:var(--grey-mid);margin:0;line-height:1.45;}
/* trust bar */
.trust-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:720px){.trust-bar{grid-template-columns:1fr;}}
.trust-card{background:transparent;border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;gap:16px;align-items:center;transition:border-color .2s,background .2s;}
.trust-card:hover{border-color:var(--accent-line);background:var(--surface-2);}
.trust-card .thumb{width:56px;height:56px;border-radius:10px;overflow:hidden;flex:none;background:#0c0c0c;}
.trust-card .thumb img{width:100%;height:100%;object-fit:cover;}
.trust-card h4{font-family:'Unbounded';font-size:12.5px;font-weight:500;line-height:1.2;text-transform:uppercase;margin:0 0 6px;}
.trust-card p{font-size:11.5px;color:var(--grey-mid);margin:0;line-height:1.45;}
/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
@media (max-width:860px){.bento{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.bento{grid-template-columns:1fr;}}
.bento .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px;transition:border-color .25s,transform .25s;position:relative;overflow:hidden;}
.bento .card h3{font-family:'Unbounded';font-weight:500;font-size:14px;line-height:1.2;text-transform:uppercase;margin:0;}
.bento .card:hover{border-color:var(--accent-line);transform:translateY(-3px);}
.bento .card.photo{padding:0;justify-content:flex-end;min-height:200px;background-size:cover;background-position:center;}
.bento .card.photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.85));}
.bento .card.photo .inner{position:relative;z-index:2;padding:20px;}
.bento .card.photo h3{color:#fff;}
.bento .c1{grid-column:span 3;} .bento .c2{grid-column:span 3;} .bento .c3{grid-column:span 2;} .bento .c4{grid-column:span 2;} .bento .c5{grid-column:span 2;}
/* brandbook p.47: плитки одной сетки различаются светлотой — от тёмно-серой до белой и акцентной */
.bento .card.tone-light{background:#e8e6e3;border-color:transparent;}
.bento .card.tone-light h3,.bento .card.tone-light .num{color:#141414;}
.bento .card.tone-light p{color:rgba(20,18,15,.7);}
.bento .card.tone-accent{background:var(--accent);border-color:transparent;}
.bento .card.tone-accent h3,.bento .card.tone-accent .num,.bento .card.tone-accent p{color:#171100;}
.bento .card.tone-accent p{color:rgba(23,17,0,.75);}
@media (max-width:860px){.bento .card{grid-column:span 1 !important;}}
.card .num{font-family:'Unbounded';font-weight:700;font-size:14px;color:var(--accent);}
.card h3{font-size:16px;font-weight:600;margin:0;}
.card p{font-size:13px;line-height:1.55;color:var(--ink-dim);margin:0;}
/* catalog */
.cat-layout{display:grid;grid-template-columns:230px 1fr;gap:36px;align-items:start;}
@media (max-width:820px){.cat-layout{grid-template-columns:1fr;}}
.filters{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;position:sticky;top:90px;}
.filters h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:18px 0 10px;}
.filters h4:first-child{margin-top:0;}
.filters label{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-dim);padding:5px 0;cursor:pointer;}
.filters input{accent-color:var(--accent);}
.filters .fcount{color:var(--ink-faint);font-size:11.5px;margin-left:auto;}
.filters .fclear{font-size:12px;color:var(--accent);cursor:pointer;margin-top:16px;display:inline-block;}
.resultbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:12.5px;color:var(--ink-faint);}
/* engineering-style large row cards (not a shop grid) */
.product-list{display:flex;flex-direction:column;gap:18px;}
/* Cards sit on the page background rather than on a plate; the surface only appears on hover. */
.pcard{background:transparent;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .25s,background .25s;display:grid;grid-template-columns:minmax(280px,380px) 1fr;}
.pcard:hover{border-color:var(--accent-line);background:var(--surface-2);}
@media (max-width:760px){.pcard{grid-template-columns:1fr;}}
/* Brochure renders keep their own dark plate — cutting it out is not an option, because the
deflector inside the slot is genuinely black and any keying eats it along with the backdrop.
Instead the tile dissolves elliptically into the page, so it has no edge at all and cannot
read as a rectangle. The falloff lives in this mask rather than in the file's alpha channel:
same picture, ~40 KB a tile instead of ~290 KB. Stops approximate a smoothstep ramp. */
.pcard .thumb{overflow:hidden;background:transparent;position:relative;min-height:220px;display:flex;align-items:center;justify-content:center;
--tile-fade:radial-gradient(ellipse 43% 47% at 44% 50%, #000 0%, #000 63%,
rgba(0,0,0,.86) 74%, rgba(0,0,0,.5) 85%, rgba(0,0,0,.14) 94%, transparent 100%);
-webkit-mask-image:var(--tile-fade);mask-image:var(--tile-fade);}
@media (max-width:760px){.pcard .thumb{aspect-ratio:4/3;min-height:0;}}
.bim-badge{position:absolute;top:12px;left:12px;z-index:3;background:var(--accent);color:#171100;font-size:10px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:999px;}
/* Images stay hidden until maskify has decided what they are, so a half-processed shot never
flashes on screen. Brochure tiles fill the box and the mask above fades their edges away;
silhouettes maskify produced from white-backdrop photos are fitted inside it instead. */
.pcard .thumb img{opacity:0;transition:opacity .25s ease;}
.pcard .thumb img.unmasked{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;opacity:1;}
.pcard .thumb img.masked{position:static;width:auto;height:auto;max-width:100%;max-height:190px;object-fit:contain;opacity:1;}
.pcard .body{padding:22px 26px;display:flex;flex-direction:column;gap:10px;}
.pcard .tag{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.pcard h3{font-size:17px;font-weight:600;margin:0;line-height:1.3;}
.pcard h3 a{color:inherit;}
.pcard .desc{font-size:13px;color:var(--ink-dim);line-height:1.55;margin:0;}
.pcard .specs-mini{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:2px;padding-top:12px;border-top:1px dashed var(--line);}
.pcard .specs-mini span{font-size:12px;color:var(--ink-faint);}
.pcard .specs-mini b{display:block;font-size:12.5px;font-weight:500;color:var(--ink);margin-top:2px;}
.pcard .foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px;gap:12px;flex-wrap:wrap;}
.pcard .price{font-weight:600;font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink-dim);}
.pcard .price b{color:var(--ink);font-weight:700;}
.pcard .art{font-size:11px;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.pcard .more{font-size:12.5px;color:var(--accent);font-weight:600;}
.empty-state{padding:60px 20px;text-align:center;color:var(--ink-faint);font-size:14px;display:none;}
/* product detail */
.pd-layout{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}
@media (max-width:820px){.pd-layout{grid-template-columns:1fr;}}
.gallery-main{border-radius:18px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:#0c0c0c;}
.gallery-main img{width:100%;height:100%;object-fit:cover;}
.gallery-thumbs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;}
.gallery-thumbs .t{width:64px;height:48px;border-radius:8px;overflow:hidden;border:1px solid var(--line);cursor:pointer;}
.gallery-thumbs .t.on{border-color:var(--accent);}
.gallery-thumbs .t img{width:100%;height:100%;object-fit:cover;}
.pd-price-row{display:flex;align-items:baseline;gap:14px;margin:18px 0 22px;}
.pd-price{font-family:'Unbounded';font-weight:700;font-size:28px;}
.pd-art{color:var(--ink-faint);font-size:12.5px;}
/* wide engineering tables: they must scroll inside their own box, never the page */
.tbl-wrap{overflow-x:auto;margin:10px 0 4px;border:1px solid var(--line);border-radius:12px;}
.data-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:520px;}
.data-table th,.data-table td{padding:9px 12px;text-align:center;border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap;}
.data-table th{font-size:11px;font-weight:600;color:var(--ink-faint);background:var(--surface-2);line-height:1.35;white-space:normal;}
.data-table td:first-child,.data-table th:first-child{text-align:left;font-weight:600;position:sticky;left:0;background:var(--surface);}
.data-table th:first-child{background:var(--surface-2);}
.data-table tr:last-child td{border-bottom:none;}
.data-table th:last-child,.data-table td:last-child{border-right:none;}
.data-table td{font-variant-numeric:tabular-nums;}
.tbl-note{font-size:11.5px;color:var(--ink-faint);margin:8px 0 0;line-height:1.5;}
.spec-table{width:100%;border-collapse:collapse;margin-top:6px;}
.spec-table tr{border-bottom:1px dashed var(--line);}
.spec-table td{padding:10px 4px;font-size:13px;}
.spec-table td:first-child{color:var(--ink-faint);width:44%;}
.spec-table td:last-child{font-weight:500;}
.pd-desc{font-size:14px;line-height:1.7;color:var(--ink-dim);margin:18px 0;}
.related-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px;}
@media (max-width:820px){.related-row{grid-template-columns:repeat(2,1fr);}}
.bim-note{display:flex;align-items:center;gap:10px;background:var(--accent-dim);border:1px solid var(--accent-line);border-radius:12px;padding:12px 16px;margin-top:18px;font-size:13px;}
.bim-note b{color:var(--accent);}
.bim-note a{color:var(--ink);text-decoration:underline;}
/* extended product content (pilot: TLM) */
.pd-extra{margin-top:52px;border-top:1px solid var(--line);padding-top:8px;}
.pd-extra h2{font-family:'Unbounded';font-weight:700;font-size:20px;margin:36px 0 16px;}
.pd-extra-p{font-size:14.5px;line-height:1.7;color:var(--ink-dim);max-width:78ch;margin:0 0 14px;}
.pd-sub{font-family:'Unbounded';font-weight:600;font-size:15px;margin:26px 0 10px;}
.step-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 20px;margin:8px 0 4px;}
@media (max-width:820px){.step-grid{grid-template-columns:1fr;}}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#111;font-family:'Unbounded';font-weight:700;font-size:12px;flex:none;}
.step-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;}
.step-head p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-dim);}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 40px;}
@media (max-width:700px){.feat-grid{grid-template-columns:1fr;}}
.feat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.feat-list li{font-size:13.5px;line-height:1.55;color:var(--ink);padding-left:20px;position:relative;}
.feat-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--accent);transform:rotate(45deg);}
.warn-note{background:var(--accent-dim);border:1px solid var(--accent-line);border-radius:12px;padding:13px 16px;font-size:13px;line-height:1.55;max-width:78ch;}
/* technical figures: drawings, schemes, CFD, charts */
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:6px 0 4px;}
.tech-grid.two{grid-template-columns:repeat(2,1fr);}
.tech-grid.one{grid-template-columns:1fr;max-width:820px;}
@media (max-width:820px){.tech-grid,.tech-grid.two{grid-template-columns:1fr;}}
.tech-fig{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.tech-fig img{width:100%;height:auto;display:block;background:#fff;}
.tech-fig figcaption{font-size:12px;color:var(--ink-faint);padding:10px 14px;line-height:1.45;border-top:1px solid var(--line);}
/* Line art sits directly on the page: main.js repaints these as transparent masks
in the theme's ink colour, so no plate or blend mode is needed. Until that runs
the raw image stays hidden to avoid a white flash. */
.tech-fig.line{background:transparent;border:none;border-radius:0;}
.tech-fig.line img{background:transparent;opacity:0;transition:opacity .25s ease;}
.tech-fig.line img.masked,.tech-fig.line img.unmasked{opacity:1;}
.tech-fig.line figcaption{border-top:1px solid var(--line);padding:10px 2px 0;}
/* parameter picker (open form, no auth) */
.param-picker{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
.pp-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.pp-head h3{font-family:'Unbounded';font-weight:700;font-size:15px;margin:0;}
.pp-note{font-size:11.5px;color:var(--ink-faint);}
.pp-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
@media (max-width:560px){.pp-fields{grid-template-columns:1fr;}}
.pp-field{display:flex;flex-direction:column;gap:7px;}
.pp-field:last-child{grid-column:1 / -1;}
.pp-field > span{font-size:11.5px;color:var(--ink-faint);}
.pp-field em{font-style:normal;color:var(--ink-faint);}
.pp-field select,.pp-field input{width:100%;background:var(--bg-0);border:1px solid var(--line-strong);border-radius:10px;padding:11px 12px;color:var(--ink);font-family:'Inter';font-size:14px;font-variant-numeric:tabular-nums;}
.pp-field select:focus,.pp-field input:focus{outline:none;border-color:var(--accent);}
.pp-result{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
@media (max-width:560px){.pp-result{grid-template-columns:1fr;}}
.pp-cell{background:var(--surface);padding:13px 15px;display:flex;flex-direction:column;gap:4px;}
/* author display: rules outrank the UA [hidden] rule — restore it for the cells the picker toggles */
.pp-cell[hidden]{display:none;}
.pp-k{font-size:11px;color:var(--ink-faint);line-height:1.3;}
.pp-v{font-family:'Unbounded';font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;}
.pp-v.accent{color:var(--accent);}
.pp-warn{font-size:11.5px;color:var(--accent);margin:12px 0 0;line-height:1.5;min-height:0;}
.pp-chart-wrap{margin-top:18px;}
.pp-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:10px;}
.pp-lg{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-dim);}
.pp-lg i{width:14px;height:3px;border-radius:2px;flex:none;}
.pp-chart{height:280px;position:relative;}
.pp-src-note{font-size:11.5px;color:var(--ink-faint);line-height:1.55;margin:14px 0 0;}
.pp-src-note a{color:var(--accent);}
/* variant switcher: corner sections / modular sections / mounting */
.vtabs{max-width:820px;}
.vtabs-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;align-items:center;}
.vtabs-group{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-right:2px;}
.vtabs-group:not(:first-child){margin-left:14px;}
/* a tab can pair the render with its dimensioned drawing */
.vtabs-stage.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;}
@media (max-width:640px){.vtabs-stage.duo{grid-template-columns:1fr;}}
.vtabs-stage img[hidden]{display:none;}
.vtabs-nav button{font-family:'Unbounded';font-weight:700;font-size:12px;letter-spacing:.03em;color:var(--ink-dim);background:transparent;border:1px solid var(--line-strong);border-radius:10px;padding:9px 16px;cursor:pointer;transition:border-color .2s,color .2s,background .2s;}
.vtabs-nav button:hover{border-color:var(--accent-line);color:var(--ink);}
.vtabs-nav button.on{background:var(--accent);border-color:var(--accent);color:#171100;}
.vtabs-stage{background:transparent;}
.vtabs-stage img{width:100%;height:auto;display:block;background:transparent;opacity:0;transition:opacity .25s ease;}
.vtabs-stage img.masked{opacity:1;}
.vtabs-cap{font-size:12.5px;color:var(--ink-faint);padding:11px 2px 0;border-top:1px solid var(--line);margin-top:10px;}
/* series intro: wordmark, claim, patent + awards */
.tl-intro{margin:8px 0 30px;}
.tl-badge{display:inline-block;font-family:'Unbounded';font-weight:900;font-size:clamp(26px,4.4vw,44px);letter-spacing:.06em;line-height:1;
background:linear-gradient(92deg,var(--accent) 0%,var(--ink) 78%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.tl-claim{font-family:'Inter';font-weight:400;font-size:clamp(15px,1.9vw,19px);line-height:1.5;color:var(--ink-dim);
max-width:52ch;margin:14px 0 0;text-wrap:balance;}
.tl-claim em{font-style:normal;font-weight:600;color:var(--ink);}
.award-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px;}
@media (max-width:760px){.award-row{grid-template-columns:1fr;}}
.award{border:1px solid var(--accent-line);background:var(--accent-dim);border-radius:14px;padding:15px 18px;display:flex;flex-direction:column;gap:5px;}
.award-k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.award-v{font-family:'Unbounded';font-weight:700;font-size:14px;color:var(--accent);}
.adv-list{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:12px;max-width:80ch;}
.adv-list li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.65;color:var(--ink-dim);}
.adv-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--accent);transform:rotate(45deg);}
.adv-list b{color:var(--ink);font-weight:600;}
/* download shortcuts next to the quote CTA */
.dl-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.btn-dl{border:1px solid var(--line-strong);color:var(--ink);background:var(--surface);padding:11px 18px;font-size:13.5px;}
.btn-dl:hover{border-color:var(--accent-line);}
.dl-ico{font-family:'Unbounded';font-weight:700;font-size:9.5px;color:var(--accent);border:1px solid var(--accent-line);border-radius:6px;padding:3px 6px;}
/* collapsible reference blocks keep the page short without hiding anything */
.pd-acc{border:1px solid var(--line);border-radius:12px;margin:18px 0;background:transparent;}
.pd-acc summary{cursor:pointer;padding:14px 18px;font-size:13.5px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.pd-acc summary::-webkit-details-marker{display:none;}
.pd-acc summary::after{content:"+";color:var(--accent);font-size:18px;line-height:1;}
.pd-acc[open] summary::after{content:"–";}
.pd-acc-body{padding:4px 18px 20px;}
/* File list reads as rows on the page itself — no filled plates, just hairlines,
so the block sits on the brand background like the rest of the page. */
.docs-list{display:flex;flex-direction:column;gap:0;max-width:720px;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.doc-row{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0;
padding:16px 4px;transition:padding-left .2s,color .2s;}
.doc-row:last-child{border-bottom:none;}
.doc-row:hover{padding-left:10px;}
.doc-row:hover .doc-dl{color:var(--accent);}
.doc-row.primary .doc-ico{background:var(--accent);color:#171100;border-color:var(--accent);}
.doc-row.primary .doc-name{font-weight:600;}
.doc-row.primary .doc-dl{color:var(--accent);}
.doc-ico{font-family:'Unbounded';font-weight:700;font-size:10px;color:var(--accent);border:1px solid var(--accent-line);border-radius:8px;padding:8px 9px;}
.doc-name{font-size:13.5px;font-weight:500;}
.doc-meta{display:block;font-size:11.5px;color:var(--ink-faint);font-weight:400;margin-top:2px;}
.doc-dl{font-size:12.5px;color:var(--accent);font-weight:600;white-space:nowrap;}
/* quote request (replaces the old fake-precision calculator) */
.quote-widget{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;margin-top:26px;}
.quote-widget h3{font-family:'Unbounded';font-size:15px;margin:0 0 10px;}
.quote-widget p{font-size:13.5px;color:var(--ink-dim);line-height:1.6;margin:0;}
/* seo widget (internal use, dev preview only) */
.seo-widget{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-top:20px;}
.seo-widget .lbl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.seo-widget .lbl .ok{color:var(--good);font-size:11px;}
.snippet{font-family:Arial,sans-serif;background:#0c0c0c;border-radius:8px;padding:14px 16px;}
.snippet .url{font-size:12px;color:#8ab4f8;}
.snippet .title{font-size:15px;color:#a8c7fa;margin:3px 0;}
.snippet .desc{font-size:12.5px;color:var(--ink-dim);line-height:1.5;}
.seo-meta-row{display:flex;gap:16px;margin-top:10px;font-size:11px;color:var(--ink-faint);flex-wrap:wrap;}
.seo-meta-row b{color:var(--good);font-weight:600;}
/* faq */
.faq{margin-top:26px;}
.faq details{border-bottom:1px solid var(--line);padding:14px 2px;}
.faq summary{cursor:pointer;font-size:13.5px;font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--accent);font-size:18px;}
.faq details[open] summary::after{content:"–";}
.faq p{font-size:13px;color:var(--ink-dim);line-height:1.6;margin:10px 0 0;}
/* articles */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:900px){.article-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.article-grid{grid-template-columns:1fr;}}
.acard{background:transparent;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .25s,transform .25s,background .25s;}
.acard:hover{border-color:var(--accent-line);transform:translateY(-3px);background:var(--surface-2);}
.acard .cover{aspect-ratio:16/9;background:linear-gradient(135deg,#1c1c1c,#0a0a0a);background-size:cover;background-position:center;}
.acard .body{padding:18px 18px 20px;}
.acard .cat{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
.acard h3{font-size:15px;font-weight:600;margin:0 0 8px;line-height:1.35;}
.acard h3 a{color:inherit;}
.acard p{font-size:12.5px;color:var(--ink-faint);line-height:1.55;margin:0 0 12px;}
.acard .meta{font-size:11px;color:var(--ink-faint);display:flex;gap:12px;}
.article-body{max-width:74ch;margin:0 auto;}
.article-body .cover-lg{aspect-ratio:21/9;border-radius:18px;background:linear-gradient(135deg,#1c1c1c,#0a0a0a);margin:22px 0 32px;background-size:cover;background-position:center;}
.article-body h2{font-family:'Unbounded';font-weight:700;font-size:22px;margin:32px 0 14px;}
.article-body h3{font-family:'Inter';font-weight:600;font-size:17px;margin:24px 0 10px;}
.article-body p{font-size:15px;line-height:1.8;color:var(--ink-dim);margin:0 0 18px;}
.article-body ul{margin:0 0 18px;padding-left:20px;}
.article-body li{font-size:15px;line-height:1.8;color:var(--ink-dim);margin-bottom:6px;}
.article-meta{display:flex;gap:16px;font-size:12.5px;color:var(--ink-faint);margin:16px 0 6px;}
/* news */
.news-list{display:flex;flex-direction:column;}
.nitem{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);}
@media (max-width:560px){.nitem{grid-template-columns:1fr;}}
.nitem .date{font-weight:600;font-size:13px;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.nitem .tag{display:inline-block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-line);border-radius:999px;padding:3px 10px;margin-bottom:10px;}
.nitem h3{font-size:16px;font-weight:600;margin:0 0 8px;}
.nitem h3 a{color:inherit;}
.nitem p{font-size:13.5px;color:var(--ink-dim);line-height:1.6;margin:0 0 10px;}
.nitem p:last-child{margin-bottom:0;}
/* pager */
.pager{display:flex;justify-content:center;gap:10px;margin-top:36px;}
.pager span,.pager a{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink-faint);}
.pager .on{background:var(--accent);color:#1a1200;border-color:var(--accent);}
/* footer */
footer{padding:50px 0 60px;margin-top:40px;}
.foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:34px;border-top:1px solid var(--line);}
.foot-col{font-size:13px;color:var(--ink-faint);line-height:1.8;}
.foot-col b{color:var(--ink-dim);font-weight:500;display:block;margin-bottom:6px;}
/* product card embedded in an article: same data as the catalog card, compact layout that
fits the 74ch text column */
.art-card{display:grid;grid-template-columns:150px 1fr;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:22px 0;background:var(--surface);transition:border-color .25s;}
.art-card:hover{border-color:var(--accent-line);}
/* the render sits on the page background like catalog cards do: main.js masks it, so no
white plate appears under the product */
.art-card .ac-thumb{display:flex;align-items:center;justify-content:center;padding:12px;background:transparent;}
.art-card .ac-thumb img{opacity:0;transition:opacity .25s ease;}
.art-card .ac-thumb img.masked{position:static;width:auto;height:auto;max-width:100%;max-height:108px;object-fit:contain;filter:none;opacity:1;}
/* photos maskify leaves alone are shown the way catalogue cards show them: full-bleed with the
brand tint and a gradient into the page, so no white plate is left under the render */
.art-card .ac-thumb{position:relative;overflow:hidden;}
.art-card .ac-thumb img.unmasked{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;filter:saturate(.72) contrast(1.06) brightness(.96);opacity:1;}
.art-card .ac-thumb:has(img.unmasked)::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(90deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 42%, var(--bg-1) 100%);}
@media (max-width:560px){
.art-card .ac-thumb{min-height:150px;}
.art-card .ac-thumb:has(img.unmasked)::after{background:linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 45%, var(--bg-1) 100%);}
}
.art-card .ac-body{padding:16px 18px;display:flex;flex-direction:column;gap:7px;min-width:0;}
.art-card .ac-tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.art-card .ac-name{font-size:15px;font-weight:600;line-height:1.35;margin:0;}
.art-card .ac-name a{color:inherit;}
.art-card p{font-size:13px;line-height:1.55;color:var(--ink-dim);margin:0;}
.art-card .ac-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:10px;border-top:1px dashed var(--line);}
.art-card .ac-price{font-size:13.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
.art-card .ac-more{font-size:12.5px;font-weight:600;color:var(--accent);white-space:nowrap;}
.art-card .ac-pick{font-size:11.5px;color:var(--ink-faint);}
@media (max-width:560px){.art-card{grid-template-columns:1fr;}.art-card .ac-thumb{padding:18px;}}
/* figures inside articles are smaller than on product pages: the text column is narrow and a
full-height drawing pushes the reading flow apart */
.article-body .tech-fig img{max-height:250px;object-fit:contain;padding:6px;}
.article-body .tech-grid{margin:14px 0 6px;}
.article-body .tech-fig figcaption{font-size:11.5px;padding:8px 12px;}
/* PL50M 3D preview: canvas sits on the page background so both themes work unchanged */
.m3d{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
.m3d-stage{position:relative;height:340px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);}
@media (max-width:560px){.m3d-stage{height:260px;}}
.m3d-stage canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab;}
.m3d-stage canvas:active{cursor:grabbing;}
.m3d-hint{position:absolute;left:12px;bottom:10px;font-size:11px;color:var(--ink-faint);pointer-events:none;}
.m3d-reset{position:absolute;right:10px;top:10px;font-family:'Inter';font-size:11px;color:var(--ink-dim);background:var(--bg-0);border:1px solid var(--line-strong);border-radius:8px;padding:6px 10px;cursor:pointer;}
.m3d-reset:hover{border-color:var(--accent-line);color:var(--ink);}
/* author display rules outrank the UA [hidden] rule - restore it, same as .pp-cell */
.m3d-fallback[hidden]{display:none;}
.m3d-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:12.5px;color:var(--ink-dim);margin:0;}
.m3d .pp-fields{margin-top:16px;}
.m3d-toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-dim);margin:0 0 14px;cursor:pointer;}
.m3d-toggle input{accent-color:var(--accent);}
.m3d-code{font-size:12px;color:var(--ink-faint);margin:12px 0 0;}
.m3d-code b{font-family:'Unbounded';font-weight:700;font-size:12px;color:var(--ink);}
/* the picker stretches its last field (the value input) across both columns; the 3D block
has four equal selects instead, so that rule has to be switched off here */
.m3d .pp-field:last-child{grid-column:auto;}
/* perelinkovka inside articles: a compact strip of product tiles instead of one big card per
product — links to several items at once and eats far less vertical space. Scrolls sideways
on narrow screens, like a slider, but without any JS. */
.art-tiles-wrap{margin:26px 0;}
.art-tiles-head{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;}
.art-tiles{display:grid;grid-auto-flow:column;grid-auto-columns:150px;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;}
.art-tile{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);border-radius:12px;padding:8px;background:var(--surface);transition:border-color .2s,background .2s;color:inherit;}
.art-tile:hover{border-color:var(--accent-line);background:var(--surface-2);}
/* exactly the catalogue-card treatment: the raw file is hidden until maskify decides what it
is, so its own white or grey paper never shows through. Line art becomes a transparent mask,
a photo becomes a full-bleed tinted image fading into the page. */
.art-tile .at-thumb{position:relative;display:flex;align-items:center;justify-content:center;height:84px;overflow:hidden;border-radius:8px;background:transparent;}
.art-tile .at-thumb img{opacity:0;transition:opacity .25s ease;}
.art-tile .at-thumb img.masked{position:static;width:auto;height:auto;max-width:100%;max-height:84px;object-fit:contain;filter:none;opacity:1;}
.art-tile .at-thumb img.unmasked{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;filter:saturate(.72) contrast(1.06) brightness(.96);opacity:1;}
.art-tile .at-thumb:has(img.unmasked)::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,0) 50%, var(--bg-1) 100%);}
.art-tile .at-name{font-size:11.5px;line-height:1.35;color:var(--ink-dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.art-tile .at-price{font-size:12px;font-weight:600;color:var(--ink);margin-top:auto;font-variant-numeric:tabular-nums;}
/* Product gallery follows the same rule as everything else: a render shot on white paper must
not glare out of the dark page. The image is tinted the way catalogue cards tint theirs and
the frame fades into the page background at the edges. */
.gallery-main{position:relative;}
.gallery-main img{filter:saturate(.72) contrast(1.05) brightness(.94);}
.gallery-main::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:radial-gradient(120% 100% at 50% 40%, rgba(0,0,0,0) 45%, rgba(0,0,0,.30) 100%),
linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 30%, var(--bg-1) 100%);
opacity:.9;}
.gallery-thumbs .t img{filter:saturate(.72) contrast(1.05) brightness(.94);}
/* ==========================================================================
Адаптив: телефон и планшет
Раскладки уже собраны на grid/flex и схлопываются по своим брейкпойнтам выше;
здесь — то, что ломалось именно на узком экране: шапка, липкие блоки,
тап-зоны и всё, что вылезало за ширину вьюпорта.
========================================================================== */
/* Меню раньше просто пропадало ниже 820px — на телефоне сайт оставался без
навигации. Теперь оно переезжает второй строкой шапки и скроллится вбок,
если ссылки не помещаются. Без JS: работает всегда. */
@media (max-width:820px){
header .wrap{flex-wrap:wrap;height:auto;gap:8px 14px;padding-top:10px;padding-bottom:0;}
.mainnav{order:3;flex-basis:100%;justify-content:flex-start;gap:20px;
/* вытягиваем строку меню на всю ширину шапки, чтобы край не обрезал ссылку */
margin:0 -24px;padding:8px 24px;border-top:1px solid var(--line);
overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.mainnav::-webkit-scrollbar{display:none;}
.mainnav a{white-space:nowrap;padding:3px 0;}
.phone{margin-left:auto;}
}
@media (max-width:640px){
.mainnav{margin:0 -18px;padding-left:18px;padding-right:18px;}
}
/* На узких телефонах первая строка не вмещает бренд + тему + телефон */
@media (max-width:430px){
header .wrap{gap:8px 10px;}
.brand .line{display:none;}
.brand .word{font-size:14px;}
.mainnav{gap:16px;}
.mainnav a,.phone{font-size:12.5px;}
}
/* Липкие блоки на узком экране становятся обычными: колонка одна, и панель,
прилипшая сверху, съедала бы пол-экрана. */
.filters-toggle{display:none;}
@media (max-width:820px){
.filters.filters-closed{display:none;}
.filters{position:static;top:auto;padding:16px 18px;}
/* фильтры превращаются в набор чипов: столбцом из 14 строк они занимали
на телефоне целый экран до первого товара */
.filters h4{margin:14px 0 9px;}
.filters label{display:inline-flex;margin:0 7px 7px 0;padding:8px 13px;
border:1px solid var(--line-strong);border-radius:999px;background:var(--bg-0);font-size:12.5px;}
.filters label:has(input:checked){border-color:var(--accent-line);color:var(--ink);}
.filters .fcount{margin-left:5px;}
.filters .fclear{margin-top:14px;}
/* кнопка «Фильтры» появляется только на телефоне, её ставит main.js */
.filters-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;
width:100%;margin-bottom:14px;padding:12px 16px;border:1px solid var(--line-strong);
border-radius:12px;background:var(--surface);color:var(--ink);font-family:'Inter';
font-size:13.5px;font-weight:600;cursor:pointer;}
.filters-toggle .cnt{font-size:12px;font-weight:500;color:var(--accent);}
.filters-toggle::after{content:"+";color:var(--accent);font-size:17px;line-height:1;}
.filters-toggle[aria-expanded="true"]::after{content:"–";}
}
/* Тап-зоны: пальцем в чекбокс 13 px не попасть. */
@media (hover:none){
.filters input{width:18px;height:18px;}
/* Safari зумит страницу на поле мельче 16 px и обратно масштаб не отдаёт */
.pp-field select,.pp-field input{font-size:16px;}
.btn{padding:14px 24px;}
.gallery-thumbs .t{width:72px;height:54px;}
.pager span,.pager a{width:40px;height:40px;}
.faq summary,.pd-acc summary{padding-top:16px;padding-bottom:16px;}
}
/* Заголовки и текст: длинные слова и коды не должны растягивать страницу */
@media (max-width:560px){
h1.page-title,.hero h1,.section-head h2,.article-body h2{overflow-wrap:break-word;}
section.pad{padding:36px 0;}
.hero .hero-inner{padding:30px 20px;}
.usp{gap:10px 22px;}
.usp li{max-width:none;}
.cta-row .btn{flex:1 1 auto;justify-content:center;}
.pd-extra h2{font-size:18px;}
.article-body p,.article-body li{font-size:14.5px;}
}
/* Баннер-карусель: 220 px в высоту и текст в 44 px от края — на телефоне
заголовок налезал на точки пагинации */
@media (max-width:640px){
.bcarousel{height:auto;min-height:210px;}
.bslide{padding:22px 20px 42px;}
.bslide::before{background:linear-gradient(90deg,rgba(0,0,0,.88) 55%,rgba(0,0,0,.55) 100%);}
.bdots{left:20px;bottom:14px;}
.video-block{aspect-ratio:16/10;}
.video-block .playbtn{width:60px;height:60px;}
.video-block .vlabel{left:14px;bottom:14px;font-size:12px;}
}
/* Карточка товара: галерея, миниатюры, таблицы */
@media (max-width:820px){
.pd-layout{gap:26px;}
.pd-price{font-size:24px;}
.related-row{gap:12px;}
}
@media (max-width:560px){
.related-row{grid-template-columns:1fr;}
.doc-row{grid-template-columns:auto 1fr;gap:12px;}
.doc-row .doc-dl{grid-column:2;justify-self:start;}
.spec-table td{font-size:12.5px;padding:9px 2px;}
.spec-table td:first-child{width:50%;}
}
/* Технические таблицы: скроллятся внутри своей рамки, страница — нет.
Подсказка о боковой прокрутке нужна только там, где палец её не ждёт. */
.tbl-wrap{-webkit-overflow-scrolling:touch;}
@media (max-width:760px){
.tbl-wrap{position:relative;}
.data-table{min-width:480px;}
}
/* Ячейка grid по умолчанию не сжимается уже своего содержимого (min-width:auto),
и длинный