/* SINGARO - instrument panel at night, single scheme. Generated: edit theme.js. */
@font-face{font-family:"Sora";src:url("/static/version1755188000/frontend/Singaro/parts/en_US/fonts/sora-var.fa26406e.woff2") format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/static/version1755188000/frontend/Singaro/parts/en_US/fonts/publicsans-var.5ed4d31c.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/static/version1755188000/frontend/Singaro/parts/en_US/fonts/jetbrainsmono-var.18be4527.woff2") format("woff2");font-weight:100 800;font-display:swap}

:root{
  --ground:#0f1216; --panel:#161a20; --panel-2:#1d222a; --line:#262d36; --line-2:#333c48;
  --ink:#e9edf2; --muted:#9aa6b3; --faint:#6d7885;
  --plate:#eef1f4; --plate-2:#dfe4ea;
  --red:#e03a3e; --red-deep:#bd2a2e; --cyan:#35b6c9; --amber:#e2a33c;
  --r-s:4px; --r-m:8px; --r-l:14px;
  --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 12px 34px rgba(0,0,0,.45);
  --ring:0 0 0 3px rgba(224,58,62,.45);
  --ease:cubic-bezier(.2,.7,.3,1);
  --w:1280px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font:16px/1.65 "Public Sans",system-ui,sans-serif;}
h1,h2,h3,h4{font-family:"Sora",system-ui,sans-serif;font-weight:650;letter-spacing:-.01em}
h1{line-height:1.04;font-size:clamp(31px,4.6vw,55px);margin:0 0 14px}
h2{line-height:1.12;font-size:clamp(23px,2.6vw,33px);margin:0 0 12px}
h3{line-height:1.2;font-size:clamp(18px,1.5vw,21px);margin:0 0 8px}
p{margin:0 0 14px}
a{color:inherit}
a:hover{color:var(--red)}
img{max-width:100%;height:auto}
.num,.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.wrap{max-width:var(--w);margin:0 auto;padding:0 22px}
.sect{padding:56px 0}
.sect.tight{padding:34px 0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l)}
.eyebrow{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin:0 0 10px}
.rule{height:1px;background:var(--line);margin:0}

/* --------------------------------------------------------------- chrome */
.util{background:#0b0e11;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.util .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding-top:8px;padding-bottom:8px}
.util b{color:var(--ink);font-weight:600}
.util .util-right{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
.head{background:var(--ground);border-bottom:1px solid var(--line);position:relative;z-index:20}
.head .wrap{display:flex;align-items:center;gap:22px;padding-top:16px;padding-bottom:16px}
.logo{display:flex;flex-direction:column;gap:2px;text-decoration:none;min-width:0}
.logo b{font-family:"Sora",sans-serif;font-weight:700;font-size:23px;letter-spacing:.14em}
.logo span{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap;font-size:14.5px}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.rack{background:var(--panel);border-bottom:1px solid var(--line)}
.rack .wrap{display:flex;gap:2px;overflow:hidden;padding:0 22px}
.rack a{flex:0 1 auto;min-width:0;padding:11px 14px;font-size:13.5px;color:var(--muted);
  text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;
  text-overflow:ellipsis;overflow:hidden}
.rack a:hover{color:var(--ink);border-bottom-color:var(--red)}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;border-bottom:1px solid var(--line);
  background:
    radial-gradient(1100px 420px at 78% -10%, rgba(53,182,201,.13), transparent 65%),
    linear-gradient(180deg,#12161b,#0f1216)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,4vw,54px);align-items:center;padding-block:clamp(38px,6vw,74px)}
.hero-kicker{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 14px}
.hero-lede{font-size:17px;color:var(--muted);max-width:56ch;margin-bottom:22px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
.hero-mosaic img{display:block;width:100%;max-width:420px;aspect-ratio:1;object-fit:cover;
  background:var(--plate);border-radius:var(--r-s);border:1px solid var(--line)}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid transparent;border-radius:var(--r-m);padding:12px 20px;
  font:600 14.5px/1 "Public Sans",sans-serif;text-decoration:none;cursor:pointer;
  transition:transform .12s var(--ease),background .16s var(--ease),border-color .16s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-deep);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-sm{padding:9px 14px;font-size:13.5px}
/* Надпись на кнопке покупки нарисована пикселями (правило владельца
   2026-08-13). Высота задаётся ДОЛЕЙ от кегля кнопки, а не пикселями: доля
   берётся из сайдкара рядом с картинкой (чернила / кегль отрисовки), и тогда
   .btn-sm уменьшает надпись сам. */
.buy-label{display:block;width:auto;height:calc(1em * 0.8966)}

/* mix-blend-mode:multiply остаётся ТОЛЬКО там, где светлая плашка лежит на
   РОДИТЕЛЕ (.card-media, .pdp-stage). Blend смешивает картинку с тем, что
   позади неё: на тёмной панели тот же приём гасит фото в чёрный квадрат, и
   ровно это случилось с плитками департаментов в первой сборке (§5). */
/* ----------------------------------------------------------------- cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:18px}
.card{display:flex;flex-direction:column;min-width:0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  transition:border-color .16s var(--ease),transform .16s var(--ease)}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card-media{position:relative;background:var(--plate);padding:14px}
.card-media img{display:block;width:100%;aspect-ratio:1;object-fit:contain;
  mix-blend-mode:multiply}
.pack-badge{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;
  border-radius:999px;min-width:42px;height:42px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-family:"JetBrains Mono",monospace;
  font-size:13px;font-weight:700;line-height:1;box-shadow:var(--sh-1)}
.pack-badge small{font-size:8.5px;letter-spacing:.08em;opacity:.85;margin-top:2px}
.card-body{display:flex;flex-direction:column;gap:7px;padding:14px 15px 15px;flex:1;min-width:0}
.card-dept{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);text-decoration:none}
.card-dept:hover{color:var(--cyan)}
.card-name{font:600 15px/1.35 "Public Sans",sans-serif;margin:0;min-width:0}
.card-name a{text-decoration:none}
.card-spec{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--muted);
  display:flex;gap:8px;flex-wrap:wrap}
.card-spec span{white-space:nowrap}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding-top:10px;min-width:0}
.price{font-family:"JetBrains Mono",monospace;font-size:17px;font-weight:700}
.unit-price{display:block;font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--faint)}

/* ------------------------------------------------------- department tiles */
/* Десять департаментов в сетке по 4 дают ряд 4+4+2 и дыру справа (§5).
   215px на широком экране укладывают их в 5+5. */
.dept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px;grid-auto-flow:dense}
.dept-tile{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);
  text-decoration:none;overflow:hidden;transition:border-color .16s var(--ease)}
.dept-tile:hover{border-color:var(--dept,var(--red))}
.dept-tile::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--dept,var(--red))}
.dept-tile img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;
  background:var(--plate);border-radius:var(--r-s)}
.dept-tile b{font:600 16px/1.3 "Public Sans",sans-serif}
.dept-tile .n{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--faint)}

/* -------------------------------------------------------------- pdp */
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(22px,3.4vw,44px)}
.pdp-media{min-width:0}
.pdp-stage{background:var(--plate);border:1px solid var(--line);border-radius:var(--r-l);padding:22px}
/* Кадр фида кончается на 500px, и сцена не имеет права рисовать его шире
   (§4.2). Ширина ограничена исходником, сама плашка тянется. */
.pdp-stage img{display:block;width:100%;max-width:500px;margin:0 auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.pdp-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pdp-thumbs img{width:74px;height:74px;object-fit:contain;background:var(--plate);
  border:1px solid var(--line);border-radius:var(--r-s);padding:5px;cursor:pointer}
.pdp-thumbs img[aria-current="true"]{border-color:var(--red)}
.pdp-buy{display:flex;flex-direction:column;gap:12px;margin:18px 0}
.pdp-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pdp-price .price{font-size:29px}
.facts{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.facts div{display:flex;gap:14px;justify-content:space-between;padding:9px 14px;
  border-bottom:1px solid var(--line);min-width:0}
.facts div:last-child{border-bottom:0}
.facts .k{color:var(--muted);font-size:13.5px;min-width:0}
.facts .v{font-family:"JetBrains Mono",monospace;font-size:13.5px;text-align:right;min-width:0}
.compat{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.compat span{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--cyan);
  border:1px solid var(--line-2);border-radius:999px;padding:4px 10px}

/* ---------------------------------------------------------- brand story */
.brand-story{display:flex;flex-direction:column;gap:34px}
.b-lede{font-size:18.5px;color:var(--muted);max-width:70ch}
.b-quote{border-left:3px solid var(--red);padding:6px 0 6px 18px;margin:0;
  font-family:"Sora",sans-serif;font-size:20px;line-height:1.4;max-width:60ch}
.b-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);
  align-items:center}
.b-row.flip .b-text{order:2}
.b-text{min-width:0}
.b-photo{margin:0;min-width:0}
.b-photo img{display:block;width:100%;background:var(--plate);border:1px solid var(--line);
  border-radius:var(--r-l);object-fit:contain;aspect-ratio:4/3;padding:14px}
.b-photo figcaption{margin-top:9px;font-size:13px;color:var(--faint)}
.b-plate{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:22px}

/* -------------------------------------------------------------- tables */
.rt{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 8px}
.rt caption{caption-side:bottom;text-align:left;color:var(--faint);font-size:12.5px;padding-top:8px}
.rt th,.rt td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.rt thead th{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);border-bottom-color:var(--line-2)}
.rt td.n,.rt th.n{text-align:right;font-family:"JetBrains Mono",monospace}
.table-scroll{overflow-x:auto}

/* ------------------------------------------------------------- gallery */
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gal figure{margin:0}
.gal img{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:var(--plate);
  border:1px solid var(--line);border-radius:var(--r-m);padding:12px}
.gal figcaption{margin-top:7px;font-size:12.5px;color:var(--faint)}

/* --------------------------------------------------------------- prose */
/* .wrap центрирует блок, .prose сужает его до 74ch, и вместе они уносят
   текст в середину экрана, тогда как крошка над ним и вся сетка сайта
   стоят по левому полю. Ровно этот дефект чинился на bthfst 2026-08-14.
   Контейнер держит ширину сетки, длину строки держат дети. */
.prose{max-width:74ch}
.wrap.prose{max-width:var(--w)}
.wrap.prose > *{max-width:74ch}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.3em}
.prose ul,.prose ol{padding-left:1.15em}
.prose li{margin-bottom:.45em}
.prose blockquote{margin:22px 0;padding:2px 0 2px 18px;border-left:3px solid var(--cyan);
  color:var(--ink);font-size:17px}
.prose blockquote cite{display:block;margin-top:8px;font-size:13px;color:var(--faint);font-style:normal}
.prose figure{margin:22px 0}
.prose figure img{background:var(--plate);border:1px solid var(--line);border-radius:var(--r-m);
  padding:14px}
.prose figcaption{margin-top:8px;font-size:12.5px;color:var(--faint)}

/* article furniture */
.art-head{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:26px}
.art-meta{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--faint);
  display:flex;gap:16px;flex-wrap:wrap}
.art-toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);
  padding:16px 18px;margin:0 0 26px}
.art-toc b{display:block;font-family:"JetBrains Mono",monospace;font-size:11.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.art-toc ol{margin:0;padding-left:1.1em;columns:2;column-gap:26px}
.art-toc li{margin-bottom:4px;font-size:14px}
.inset{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red);
  border-radius:var(--r-m);padding:14px 16px;margin:22px 0}
.inset img{width:110px;height:110px;object-fit:contain;background:var(--plate);
  border-radius:var(--r-s);padding:8px}
.inset .k{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}
.inset b{display:block;font-size:15.5px;margin:3px 0 5px}
.inset .price{font-size:16px}
.card-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:22px 0}

/* --------------------------------------------------------------- footer */
.foot{background:#0b0e11;border-top:1px solid var(--line);margin-top:20px;
  padding:44px 0 30px;font-size:14px;color:var(--muted)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.foot-brand b{font-family:"Sora",sans-serif;letter-spacing:.14em;color:var(--ink)}
.foot-list{display:flex;flex-direction:column;gap:7px}
.foot-list a{text-decoration:none}
.foot-depts{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 0}
.foot-chip{font-size:12.5px;color:var(--muted);text-decoration:none;border:1px solid var(--line);
  border-radius:999px;padding:5px 11px}
.foot-chip:hover{border-color:var(--line-2);color:var(--ink)}
.foot-bot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--faint)}
.foot-bot nav{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto}
.foot-bot a{text-decoration:none}

/* ------------------------------------------------------------ utilities */
[hidden]{display:none!important}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 20px}
.filters button{font:500 13px/1 "Public Sans",sans-serif;color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:8px 13px;cursor:pointer}
.filters button[aria-pressed="true"]{color:#fff;background:var(--red);border-color:var(--red)}
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;align-items:end}
.calc label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted)}
.calc input,.calc select{font:15px/1.2 "JetBrains Mono",monospace;color:var(--ink);
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-s);padding:10px 12px}
.calc-out{font-family:"JetBrains Mono",monospace;font-size:15px}
/* Опоры для длинных текстовых страниц (правило владельца 2026-08-15):
   ряд текст/фото с чередованием сторон и врезка-цитата. */
.rows{display:flex;flex-direction:column;gap:clamp(30px,5vw,60px);margin:26px 0}
.row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(22px,3.5vw,48px);align-items:start}
.row.flip .row-text{order:2}
.row-text{min-width:0;max-width:56ch}
.row-photo{margin:0;min-width:0}
.row-photo img{display:block;width:100%;max-width:420px;border-radius:12px}
.row-photo figcaption{margin-top:9px;font-size:13px;color:var(--faint,#8a8f96)}
.pull{margin:30px 0;padding:0 0 0 20px;border-left:3px solid var(--accent,#e03a3e);max-width:60ch}
.pull p{margin:0;font-size:clamp(19px,1.9vw,24px);line-height:1.35}
@media (max-width:760px){
  .row{grid-template-columns:1fr}
  .row.flip .row-text{order:0}
}
.measure-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.measure{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:16px}
.measure-n{font-family:"JetBrains Mono",monospace;font-size:26px;font-weight:700}
.measure-v{font-size:14px;color:var(--muted);margin-top:4px}
.measure-where{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--faint);
  letter-spacing:.08em;text-transform:uppercase;margin-top:8px}
.legal{font-size:14.5px}
.crumbs{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--faint);padding:16px 0}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--cyan)}

@media (max-width:1000px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .pdp{grid-template-columns:minmax(0,1fr)}
  .b-row{grid-template-columns:minmax(0,1fr)}
  .b-row.flip .b-text{order:0}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-top{grid-template-columns:1fr 1fr}
  .art-toc ol{columns:1}
}
@media (max-width:760px){
  /* Полоса департаментов прокручивается, а не ужимается: у флекс-детей
     shrink по умолчанию 1, и вместе с ellipsis они схлопывались в "T... C..."
     на телефоне. flex:0 0 auto держит ярлык целиком. */
  .rack .wrap{overflow-x:auto;scrollbar-width:none}
  .rack .wrap::-webkit-scrollbar{display:none}
  .rack a{flex:0 0 auto;text-overflow:clip}
  .util .wrap{gap:6px 14px}
  .util span:nth-child(2){display:none}
  .head .wrap{flex-wrap:wrap;gap:12px}
  .nav{width:100%;margin-left:0;gap:16px}
  .foot-top{grid-template-columns:minmax(0,1fr)}
  .inset{grid-template-columns:minmax(0,1fr)}
  .inset img{width:100%;height:auto;aspect-ratio:1}
  .hero-mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Таблица складывается в карточки: подпись из data-label, шапка прячется. */
  .rt thead{display:none}
  .rt tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
  .rt td{display:flex;justify-content:space-between;gap:14px;border:0;padding:5px 0}
  .rt td::before{content:attr(data-label);color:var(--faint);font-size:12.5px}
  .rt td.n{text-align:right}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}