/* ДХК — стили внутренних страниц. Токены совпадают с главной. */
:root{
  --ink:#05070f;--ink-2:#0a0e1c;--navy:#081243;--accent:#fe6700;--accent-deep:#8f3600;--aqua:#0584c9;
  --paper:#fff;--muted:rgba(255,255,255,.62);--muted-2:rgba(255,255,255,.38);--line:rgba(255,255,255,.12);
  --l-bg:#f4f5f8;--l-line:rgba(11,15,28,.12);--l-txt:#0b0f1c;--l-mut:#5a6478;
  --f-display:'Archivo',system-ui,sans-serif;--f-body:'Inter',system-ui,sans-serif;--f-mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* страховка от бокового сдвига: если что-то однажды вылезет за правый край,
   страница не поедет целиком и не появится белая полоса вдоль шапки и подвала */
html,body{overflow-x:hidden;max-width:100%}
body{background:var(--l-bg);color:var(--l-txt);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.02;letter-spacing:-.02em}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;color:var(--accent-deep);font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}
.eyebrow::before{content:'';width:24px;height:2px;background:var(--accent-deep)}

/* кнопки */
.btn{display:inline-flex;align-items:center;gap:.9rem;border:none;border-radius:100px;font-family:var(--f-display);
  font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;padding:.65rem .65rem .65rem 1.4rem;
  transition:transform .25s,background .25s}
.btn i{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:1.05rem;line-height:1}
.btn--accent{background:var(--accent);color:#fff}.btn--accent i{background:#fff;color:var(--accent)}
.btn--accent:hover{transform:translateY(-3px);background:#ff7a1f}
.btn--dark{background:var(--navy);color:#fff}.btn--dark i{background:var(--accent);color:#fff}
.btn--dark:hover{transform:translateY(-3px);background:#0c1c6e}
.btn--out{background:transparent;color:var(--l-txt);border:1px solid var(--l-line)}
.btn--out i{background:var(--navy);color:#fff}
.btn--out:hover{transform:translateY(-3px);border-color:var(--accent)}

/* шапка */
.header{position:sticky;top:0;z-index:120;background:rgba(5,7,15,.94);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);color:#fff}
.header-in{display:flex;align-items:center;gap:1.2rem;padding:12px 24px;max-width:1440px;margin:0 auto}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand svg{width:36px;height:36px}
.brand b{font-family:var(--f-display);font-weight:900;font-size:1.1rem;display:block;line-height:1}
.brand span{font-family:var(--f-mono);font-size:.52rem;letter-spacing:.15em;color:var(--muted);text-transform:uppercase}
.nav{display:flex;gap:.2rem;margin-left:auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:.3rem;border-radius:100px}
.nav>a,.nav>.drop>a{display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:.5rem 1rem;border-radius:100px;transition:.25s;white-space:nowrap}
.nav>a:hover,.nav>a.on,.nav>.drop>a:hover,.nav>.drop>a.on{background:var(--accent);color:#fff}
.drop{position:relative}
.drop-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:290px;
  background:#0a0e1c;border:1px solid var(--line);border-radius:16px;padding:.5rem;opacity:0;visibility:hidden;transition:.22s}
.drop:hover .drop-menu,.drop:focus-within .drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop-menu a{display:block;padding:.5rem .8rem;border-radius:10px;font-size:.85rem;color:var(--muted)}
.drop-menu a:hover{background:rgba(255,255,255,.07);color:#fff}
.header-tel{font-family:var(--f-display);font-weight:700;font-size:.92rem;white-space:nowrap;color:#fff}
.header-tel small{display:block;font-family:var(--f-mono);font-size:.54rem;letter-spacing:.14em;color:var(--muted);font-weight:400}
.burger{display:none;width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid var(--line);
  align-items:center;justify-content:center;flex-direction:column;gap:4px;margin-left:auto}
.burger span{width:17px;height:2px;background:#fff}
.mnav{display:none;background:#05070f;color:#fff;padding:8px 24px 22px}
.mnav.open{display:block}
.mnav a{display:block;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.mnav .sub a{padding-left:14px;color:var(--muted);font-size:.88rem}
/* кнопку заявки в шапке на телефоне прячем, поэтому она живёт здесь, в меню */
.mnav .mnav-cta{display:inline-flex;margin-top:1rem;border-bottom:none;font-size:.76rem;padding:.5rem .5rem .5rem 1.15rem;gap:.7rem}
.mnav .mnav-cta i{width:28px;height:28px;flex:0 0 28px;font-size:.95rem}

/* хлебные крошки и заголовок */
.page-top{background:var(--navy);color:#fff;padding:44px 0 40px}
.crumbs{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:1rem}
.crumbs a:hover{color:var(--accent)}
.crumbs span{margin:0 .45rem;opacity:.5}
.page-top h1{font-size:clamp(1.7rem,4vw,3.1rem);text-transform:uppercase}
.page-top p{color:rgba(255,255,255,.66);max-width:none;margin-top:1rem;font-size:1rem}

/* раскладка каталога */
.layout{display:grid;grid-template-columns:288px minmax(0,1fr);gap:34px;padding:44px 0 72px}
.side{align-self:start;position:sticky;top:82px;background:#fff;border:1px solid var(--l-line);border-radius:18px;overflow:hidden}
.side h2{background:var(--navy);color:#fff;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;padding:.95rem 1.1rem}
.side>ul{list-style:none}
.side>ul>li{border-top:1px solid var(--l-line)}
.side>ul>li>a{display:block;padding:.75rem 1.1rem;font-weight:600;font-size:.92rem}
.side>ul>li>a:hover{color:var(--accent-deep)}
.side>ul>li.on>a{background:var(--navy);color:#fff}
.side .sub{list-style:none;padding:.2rem 0 .6rem}
.side .sub a{display:block;padding:.32rem 1.1rem .32rem 1.6rem;font-size:.84rem;color:var(--l-mut)}
.side .sub a:hover,.side .sub a.on{color:var(--accent-deep)}

/* сетка товаров */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--l-line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px rgba(8,18,67,.4);border-color:var(--accent)}
.card-vis{height:210px;display:grid;place-items:center;background:#f2f4f8;border-bottom:1px solid var(--l-line);padding:14px;position:relative}
.card-vis img{max-height:180px;width:auto;object-fit:contain}
.card-vis svg{height:170px;width:auto}
.card-tag{position:absolute;left:12px;top:12px;font-family:var(--f-mono);font-size:.53rem;letter-spacing:.12em;
  text-transform:uppercase;background:var(--navy);color:#fff;padding:.25rem .5rem;border-radius:5px}
.card-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card-body h3{font-size:.98rem}
.card-body p{color:var(--l-mut);font-size:.85rem;line-height:1.5;flex:1}
.card-more{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}

/* карточка товара */
.prod{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:34px;align-items:start}
.prod-vis{background:#f2f4f8;border:1px solid var(--l-line);border-radius:22px;
  display:grid;place-items:center;padding:30px;min-height:400px}
.prod-vis img{max-height:380px;width:auto;object-fit:contain}
.prod-vis svg{height:340px;width:auto}
.prod-side h2{font-size:1.05rem;margin-bottom:.7rem;text-transform:uppercase}
.packs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem}
.pack-chip{border:1px solid var(--l-line);background:#fff;border-radius:100px;padding:.4rem .85rem;font-family:var(--f-mono);
  font-size:.68rem;letter-spacing:.06em;color:var(--l-txt);cursor:pointer;line-height:1.2;
  transition:border-color .18s,background .18s,color .18s}
.pack-chip:hover{border-color:var(--accent)}
.pack-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pack-chip.on{border-color:var(--accent);background:rgba(254,103,0,.08);color:var(--accent-deep)}
.pack-hint{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;color:var(--l-mut);text-transform:none;margin-left:.5rem}
.minord{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;color:var(--l-mut);text-transform:uppercase;margin-bottom:1.2rem}
.minord b{color:var(--l-txt);font-size:.85rem}
.prod-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.6rem}
.spec{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff;border:1px solid var(--l-line);border-radius:14px;overflow:hidden}
.spec tr{border-bottom:1px solid var(--l-line)}
.spec tr:last-child{border-bottom:none}
.spec td{padding:.62rem .9rem;vertical-align:top}
.spec td:first-child{color:var(--l-mut);font-family:var(--f-mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;width:46%}
.acc{margin-top:1.4rem;border-top:1px solid var(--l-line)}
.acc-item{border-bottom:1px solid var(--l-line)}
.acc-head{width:100%;text-align:left;background:none;border:none;padding:.85rem 0;display:flex;align-items:center;
  gap:.7rem;font-family:var(--f-display);font-weight:700;font-size:.86rem;text-transform:uppercase;color:var(--l-txt)}
.acc-head::after{content:'+';margin-left:auto;color:var(--accent);font-size:1.15rem}
.acc-item.open .acc-head::after{content:'–'}
.acc-body{display:none;padding-bottom:1rem;color:var(--l-mut);font-size:.9rem}
.acc-item.open .acc-body{display:block}
.block{margin-top:44px}
.block h2{font-size:clamp(1.2rem,2.2vw,1.7rem);text-transform:uppercase;margin-bottom:1rem}
.block p{margin-bottom:.9rem;color:#28324a}
.block .warn{background:#fff;border-left:3px solid var(--accent);padding:1rem 1.2rem;font-size:.9rem;color:#28324a}

/* формы и текстовые страницы */
.form-band{background:var(--ink);color:#fff;padding:56px 0}
.form-band h2{font-size:clamp(1.4rem,2.6vw,2.2rem);text-transform:uppercase;margin-bottom:.6rem}
.form-band p.sub{color:var(--muted);margin-bottom:1.6rem;font-size:.94rem}
/* блок заявки: слева текст и контакты, справа форма; на планшете и телефоне
   колонки складываются друг под друга, иначе форма сжимается до 200px */
.fb{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px}
@media(max-width:860px){ .fb{grid-template-columns:1fr;gap:26px} }
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
/* без min-width:0 select в ячейке грида растягивается по длине самого длинного
   пункта списка и вылезает за экран на телефоне */
.form-grid>*{min-width:0}
.field{margin-bottom:12px;min-width:0}
.field label{display:block;font-family:var(--f-mono);font-size:.57rem;letter-spacing:.14em;color:var(--muted-2);text-transform:uppercase;margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%;max-width:100%;min-width:0;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;
  padding:.72rem .9rem;color:#fff;font-family:var(--f-body);font-size:.92rem}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field select option{background:#0a0e1c;color:#fff}
.consent{display:flex;gap:.6rem;align-items:flex-start;margin:.6rem 0 1.1rem;color:var(--muted-2);font-size:.74rem;line-height:1.5}
.consent input{margin-top:3px;accent-color:var(--accent);width:15px;height:15px;flex-shrink:0}
.consent a{color:var(--accent)}
.hp{position:absolute;left:-9999px;opacity:0}
.prose{padding:44px 0 72px;max-width:none}
.prose h2{font-size:1.25rem;text-transform:uppercase;margin:2rem 0 .7rem}
.prose p,.prose li{margin-bottom:.7rem;color:#28324a}
.prose ul,.prose ol{padding-left:1.3rem}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:1.6rem}
.info{background:#fff;border:1px solid var(--l-line);border-radius:18px;padding:1.3rem}
.info b{display:block;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:.92rem;margin-bottom:.5rem}
.info p{color:var(--l-mut);font-size:.88rem;margin:0}

/* подвал */
.footer{background:var(--ink);color:var(--muted);border-top:1px solid var(--line);padding:52px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:2rem}
.foot-col h4{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;color:var(--muted-2);text-transform:uppercase;margin-bottom:1rem}
.foot-col a,.foot-col p{display:block;font-size:.86rem;padding:.22rem 0}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.4rem;padding-top:1.3rem;
  border-top:1px solid var(--line);font-family:var(--f-mono);font-size:.57rem;letter-spacing:.1em;color:var(--muted-2);text-transform:uppercase}

@media(max-width:1080px){
  /* кнопку «Запросить цену» в шапке прячем вместе с меню и телефоном:
     иначе бренд + кнопка + бургер не помещаются и страница едет вбок */
  .nav,.header-tel,.hdr-cta{display:none}
  .burger{display:flex;margin-left:auto}
  .layout{grid-template-columns:1fr;gap:24px;padding:28px 0 56px}
  .side{position:static}
  .prod{grid-template-columns:1fr;gap:22px}
  .prod-vis{min-height:0;padding:20px}
  .prod-vis svg{height:240px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .page-top{padding:28px 0 26px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* галерея фасовок на карточке товара */
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.thumb{background:#f2f4f8;border:1px solid var(--l-line);border-radius:14px;padding:6px 6px 4px;width:88px;
  display:flex;flex-direction:column;align-items:center;gap:2px;transition:.2s}
.thumb img{height:56px;width:auto;object-fit:contain}
.thumb span{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.06em;color:var(--l-mut)}
.thumb:hover{border-color:var(--accent)}
.thumb.on{border-color:var(--accent);background:rgba(254,103,0,.07)}
.thumb.on span{color:var(--accent-deep)}
.prod-vis img#mainPhoto{transition:opacity .2s}

/* ссылка на официальный TDS */
.tds-link{display:flex;align-items:center;gap:.9rem;margin-top:1.2rem;padding:.9rem 1rem;background:#fff;
  border:1px solid var(--l-line);border-radius:16px;transition:.25s}
.tds-link:hover{border-color:var(--accent);transform:translateY(-2px)}
.tds-ico{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.06em}
.tds-link b{display:block;font-family:var(--f-display);font-weight:700;font-size:.88rem;text-transform:uppercase}
.tds-link span span{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.08em;color:var(--l-mut)}

/* текстовые страницы на всю ширину: соседние абзацы становятся колонками,
   заголовки, списки и карточки занимают всю ширину */
@media(min-width:1100px){
  .prose{display:grid;grid-template-columns:1fr 1fr;column-gap:52px;align-items:start}
  .prose > *{grid-column:1 / -1}
  .prose > p{margin-bottom:1rem}
  /* два абзаца подряд встают колонками, одиночный занимает всю ширину */
  .prose > p:has(+ p){grid-column:1}
  .prose > p:has(+ p) + p{grid-column:2}
  .prose h2{margin-top:2.2rem}
}