/* Hallmark · genre: editorial (systems manual) · design-system: whitelabel-design/redesign_2026-10-11/design.md · designed-as-app
 * theme: custom «Паспорт партии» · paper oklch(98.4% 0.004 265) · accent oklch(41% 0.23 267.4) = логотип «Шильд»
 * display + body: Geologica (SHRP 40, свой сервер) · figures: IBM Plex Mono · radius 0 · hairlines · one plate per page
 *
 * wl.css — общий стиль сайта WHITE LABEL (редизайн 11.10.2026).
 * Токены — в начале файла, OKLCH. Старые имена (--ground, --surface, --ink, --ultra…) оставлены
 * синонимами: на них держатся стили сборщика заказа и встроенные иллюстрации D1 (d1lib: --_ink = var(--ink)).
 * Версия в адресе (?v=md5) проставляется при выкладке: nginx держит assets месяц.
 */

/* ======================================== шрифты со своего сервера (build.py вписывает имена) */
/*#FONTS*/
@font-face{font-family:"Geologica";src:url("fonts/geologica-wl.d42a0e1a.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/plexmono-500-wl.bf80dc01.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geologica fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Roboto");size-adjust:105.33%;ascent-override:92.57%;descent-override:26.11%;line-gap-override:0.00%}
/* подпись логотипа: Plex Mono SemiBold, только буквы WHITE LABEL (12.10.2026) */
@font-face{font-family:"WL Mark";src:url("fonts/plexmono-600-mark.6d8121dd.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
/*#/FONTS*/

/* ============================================================== токены */
:root{
  color-scheme:only light;
  --topbar-h:64px;

  /* бумага и чернила */
  --color-paper:oklch(98.4% 0.004 265);      /* #F8FAFD лист страницы */
  --color-paper-2:oklch(95.6% 0.006 268);    /* #EFF0F5 полосы, подложки */
  --color-paper-3:oklch(92.4% 0.009 268);    /* #E3E6EC утопленные ячейки, дорожки */
  --color-surface:oklch(99.4% 0.002 265);    /* #FCFDFE карточка над листом */
  --color-rule:oklch(87.5% 0.013 264);       /* #D1D6DF волосяные линии */
  --color-edge:oklch(62.2% 0.026 264);       /* #7F8797 рамки того, на что нажимают, 3,45:1 */
  --color-muted:oklch(50.5% 0.022 262);      /* #5E6572 подписи, 5,6:1 */
  --color-ink-2:oklch(41.5% 0.03 266);       /* #444C5D второй текст, 8,3:1 */
  --color-ink:oklch(19% 0.016 266);          /* #10141B текст, 17,6:1 */

  /* ультрамарин логотипа — один акцент на всё */
  --color-accent:oklch(41% 0.23 267.4);      /* #1B2AC4 */
  --color-accent-strong:oklch(35% 0.2 267);  /* #121FA0 наведение и нажатие */
  --color-accent-ink:oklch(98.4% 0.004 265); /* текст на ультрамарине, 9,2:1 */
  --color-accent-soft:oklch(84% 0.07 268);   /* второй текст на ультрамарине, 5,9:1 */
  --color-accent-tint:oklch(94% 0.03 268);   /* #E2EBFF светлая подложка выбора */
  --color-focus:var(--color-accent);

  /* смысловые: только состояния, не украшение */
  --color-ok:oklch(50% 0.10 154);            /* #2C7448 */
  --color-warn:oklch(52% 0.13 45);           /* #A44C1D */
  --color-need:oklch(51% 0.17 30);           /* #B33022 */
  --color-new:oklch(46% 0.10 160);           /* #0C6944 */

  /* шрифты */
  --font-display:"Geologica","Geologica fallback","Segoe UI",system-ui,sans-serif;
  --font-body:"Geologica","Geologica fallback","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --font-mark:"WL Mark","IBM Plex Mono",ui-monospace,Consolas,monospace;   /* подпись логотипа (12.10.2026) */

  /* шкала кеглей 1,25 от 17 px */
  --text-xs:.8125rem;     /* 13 */
  --text-sm:.9375rem;     /* 15 */
  --text-md:1.0625rem;    /* 17 */
  --text-lg:1.3125rem;    /* 21 */
  --text-xl:1.625rem;     /* 26 */
  --text-2xl:2.0625rem;   /* 33 */
  --text-3xl:2.5rem;      /* 40 */
  --text-display:clamp(2.25rem,1.9vw + 1.55rem,4rem);

  /* пространство, шаг 4 px */
  --space-3xs:.25rem; --space-2xs:.5rem; --space-xs:.75rem; --space-sm:1rem;
  --space-md:1.5rem; --space-lg:2rem; --space-xl:3rem; --space-2xl:4.5rem; --space-3xl:7rem;

  --shell:1360px;
  --gutter:clamp(16px,3.2vw,40px);
  --measure:68ch;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-short:160ms;
  --dur-med:240ms;

  --z-bar:46; --z-mbar:45; --z-menu:50; --z-modal:60;

  /* синонимы прежней системы (сборщик заказа и иллюстрации d1lib читают их) */
  --ground:var(--color-paper);
  --surface:var(--color-surface);
  --sunk:var(--color-paper-3);
  --ink:var(--color-ink);
  --ink-2:var(--color-ink-2);
  --ink-3:var(--color-muted);
  --rule:oklch(86.9% 0.014 262);             /* #CFD4DD: левые грани рисунков D1 */
  --rule-2:var(--color-paper-3);
  --edge:var(--color-edge);
  --ultra:var(--color-accent);
  --need:var(--color-need);
  --ok:var(--color-ok);
  --warn:var(--color-warn);
  --new:var(--color-new);
  --head:var(--font-display);
  --body:var(--font-body);
  --mono:var(--font-mono);
  --maxw:var(--shell);
}

/* ================================================================ база */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topbar-h) + 16px)}
@media(max-width:420px){:root{--topbar-h:56px}}
a,button,summary,label,input,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
body{margin:0;overflow-x:clip;background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);font-size:var(--text-md);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-style:normal;color:var(--color-ink);
  text-wrap:balance;overflow-wrap:anywhere;min-width:0}
h1{font-weight:800;font-size:var(--text-display);line-height:1.02;letter-spacing:-.032em}
h2{font-weight:750;font-size:var(--text-2xl);line-height:1.12;letter-spacing:-.022em}
h3{font-weight:650;font-size:var(--text-lg);line-height:1.25;letter-spacing:-.01em}
h4{font-weight:650;font-size:var(--text-md);line-height:1.35}
p{margin:0}
a{color:var(--color-accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--color-accent-strong)}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{max-width:100%}
img{height:auto}
::selection{background:var(--color-accent);color:var(--color-accent-ink)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.sr,.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nb{white-space:nowrap}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.skip{position:absolute;left:var(--gutter);top:-60px;z-index:100;background:var(--color-accent);
  color:var(--color-accent-ink);padding:10px 16px;font-weight:600;text-decoration:none}
.skip:focus{top:10px}

/* ============================================================ раскладка */
.shell{width:100%;max-width:calc(var(--shell) + 2 * var(--gutter));margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px))}
.band{padding-block:var(--space-2xl)}
.band + .band{border-top:1px solid var(--color-rule)}
.band.tint{background:var(--color-paper-2);border-top:0}
.band.tint + .band{border-top:0}
.band.flush-top{padding-top:0}
@media(max-width:720px){.band{padding-block:var(--space-xl)}}

/* голова секции: номер участка (если есть) над заголовком, одна колонка */
.head{display:grid;gap:var(--space-xs);max-width:46rem;margin-bottom:var(--space-lg)}
.head .intro{font-size:var(--text-md);color:var(--color-ink-2);max-width:var(--measure)}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;
  margin-bottom:var(--space-lg)}
.head-row .head{margin-bottom:0}

/* номер участка схемы — та же выноска, что на рисунке цеха */
.stn{display:inline-flex;align-items:center;gap:var(--space-2xs);font-size:var(--text-sm);font-weight:600;
  color:var(--color-ink-2);text-decoration:none}
.stn b,.ring{flex:0 0 28px;width:28px;height:28px;display:inline-grid;place-items:center;border:1.5px solid var(--color-ink);
  border-radius:50%;font-family:var(--font-mono);font-weight:500;font-size:var(--text-xs);line-height:1;
  color:var(--color-ink);background:var(--color-surface);font-variant-numeric:tabular-nums}
a.stn:hover{color:var(--color-accent)}
a.stn:hover b{border-color:var(--color-accent);color:var(--color-accent)}

/* =============================================================== кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;
  border:0;border-radius:0;background:var(--color-accent);color:var(--color-accent-ink);
  font-family:var(--font-display);font-weight:600;font-size:var(--text-md);line-height:1.2;text-decoration:none;
  white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.btn:hover{background:var(--color-accent-strong);color:var(--color-accent-ink)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.btn[aria-disabled="true"],.btn:disabled{background:var(--color-paper-3);color:var(--color-muted);cursor:default;transform:none}
.btn svg,.lnk svg{width:18px;height:18px;flex:0 0 auto}
.btn.sm{min-height:40px;padding:0 16px;font-size:var(--text-sm)}
.btn.inv{background:var(--color-accent-ink);color:var(--color-accent)}
.btn.inv:hover{background:var(--color-paper-2);color:var(--color-accent-strong)}
/* второе действие — ссылка с подчёркиванием, без рамки */
.lnk{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--font-display);font-weight:600;
  font-size:var(--text-md);color:var(--color-accent);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.24em;white-space:nowrap}
.lnk:hover{color:var(--color-accent-strong);text-decoration-thickness:2px}
.lnk:active{transform:translateY(1px)}
.lnk.wa svg{width:20px;height:20px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-lg)}

/* ======================================================== шапка (полоса) */
.topbar{position:sticky;top:0;z-index:var(--z-bar);background:color-mix(in oklch,var(--color-paper) 94%,transparent);
  backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--color-rule)}
.topbar-in{display:flex;align-items:center;gap:var(--space-lg);min-height:var(--topbar-h)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--color-ink);text-decoration:none;white-space:nowrap}
.brand img{display:block;width:32px;height:32px}
/* логотип «Метки обреза» (12.10.2026): подпись моноширинным SemiBold в уголках-метках; правый отступ меньше на разрядку */
.brand span{position:relative;padding:5px calc(9px - .1em) 5px 9px;font-family:var(--font-mark);font-weight:600;
  font-size:15px;line-height:1;letter-spacing:.1em}
.brand span::before,.brand span::after{content:"";position:absolute;width:7px;height:7px;border:0 solid currentColor}
.brand span::before{left:0;top:0;border-width:2px 0 0 2px}
.brand span::after{right:0;bottom:0;border-width:0 2px 2px 0}
.brand:hover{color:var(--color-accent)}
.nav{display:flex;align-items:center;gap:var(--space-md);margin-right:auto}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--color-ink-2);
  text-decoration:none;font-weight:500;font-size:var(--text-sm);white-space:nowrap}
.nav a:hover{color:var(--color-ink)}
.nav a[aria-current="page"]{color:var(--color-ink)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--color-accent)}
.topbar-wa{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--color-ink);text-decoration:none;
  font-weight:500;font-size:var(--text-sm);white-space:nowrap}
.topbar-wa svg{width:20px;height:20px;color:var(--color-ok)}
.topbar-wa:hover{color:var(--color-accent)}
/* меню на телефоне — <details>, работает без скриптов */
.menu{display:none;position:relative}
.menu > summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  min-width:44px;padding:0 4px;cursor:pointer;font-weight:600;font-size:var(--text-sm);color:var(--color-ink)}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary svg{width:22px;height:22px}
.menu-panel{position:absolute;right:calc(-1 * var(--gutter));top:calc(100% + 10px);z-index:var(--z-menu);max-height:calc(100dvh - var(--topbar-h) - 12px);overflow-y:auto;overscroll-behavior:contain;
  width:min(320px,100vw);background:var(--color-surface);border:1px solid var(--color-rule);
  box-shadow:0 18px 40px -18px oklch(19% 0.016 266 / .35);padding:var(--space-2xs) 0}
.menu-panel a{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 var(--space-md);color:var(--color-ink);
  text-decoration:none;font-weight:500}
.menu-panel a:hover{background:var(--color-paper-2);color:var(--color-accent)}
.menu-panel a[aria-current="page"]{color:var(--color-accent)}
.menu-panel hr{border:0;border-top:1px solid var(--color-rule);margin:var(--space-2xs) 0}
@media(max-width:980px){
  .nav,.topbar-wa{display:none}
  .menu{display:block}
  .topbar .btn.sm{margin-left:auto}
  .topbar .btn[aria-current="page"] + details.menu{margin-left:auto}
  .topbar-in{gap:var(--space-xs)}
}
@media(max-width:420px){
  .brand span{font-size:13px;padding:4px calc(7px - .1em) 4px 7px}
  .brand span::before,.brand span::after{width:6px;height:6px}
  .brand img{width:28px;height:28px}
  .topbar .btn.sm{padding:0 12px}
}
@media(max-width:359px){.topbar .brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.topbar .btn[aria-current="page"]{display:none}

/* ======================================================= первый экран */
.hero{padding-block:var(--space-xl) var(--space-2xl)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"copy card" "facts card";gap:var(--space-xl) clamp(32px,5vw,88px);align-items:start}
.hero-copy{grid-area:copy}
.pcard{grid-area:card}
.hero .facts{grid-area:facts;align-self:end}
.kicker{font-size:var(--text-sm);font-weight:500;color:var(--color-ink-2);margin-bottom:var(--space-sm)}
.hero h1{max-width:12.5ch}
.hero .lede{margin-top:var(--space-md);font-size:clamp(1.0625rem,.4vw + .95rem,1.25rem);line-height:1.55;
  color:var(--color-ink-2);max-width:44ch}
.hero .cta-row{margin-top:var(--space-lg)}
.micro{margin-top:var(--space-sm);font-size:var(--text-sm);color:var(--color-muted);max-width:52ch}
.micro a{color:var(--color-ink-2)}
.micro a:hover{color:var(--color-accent)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--color-ink)}
.facts > div{padding:var(--space-sm) var(--space-md) var(--space-sm) 0}
.facts > div:nth-child(even){padding-left:var(--space-md);border-left:1px solid var(--color-rule)}
.facts > div:nth-child(n+3){border-top:1px solid var(--color-rule)}
.facts b{display:block;font-family:var(--font-display);font-weight:750;font-size:var(--text-xl);line-height:1.15;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.facts span{display:block;margin-top:4px;font-size:var(--text-sm);line-height:1.4;color:var(--color-ink-2)}
@media(max-width:1020px){
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "card" "facts"}
  .hero h1{max-width:14ch}
}
@media(max-width:720px){
  .hero{padding-block:var(--space-md) var(--space-xl)}
  .facts b{font-size:var(--text-lg)}
  .facts span{font-size:var(--text-xs)}
}

/* карточка цены: флакон с вашей этикеткой + цена из ночного пересчёта */
.pcard{background:var(--color-surface);border:1px solid var(--color-rule);display:flex;flex-direction:column}
.pcard-fig{--fig-bg:var(--color-paper-2);margin:0;background:var(--color-paper-2);border-bottom:1px solid var(--color-rule);padding:var(--space-md) var(--space-md) var(--space-sm)}
.pcard-fig svg{display:block;width:100%;height:auto;max-width:480px;margin-inline:auto}
.brandfield{display:flex;align-items:center;gap:var(--space-xs);margin-top:var(--space-xs)}
.brandfield label{font-size:var(--text-xs);font-weight:600;color:var(--color-ink-2);white-space:nowrap}
.brandfield input{flex:1;min-width:0;min-height:44px;padding:0 12px;background:var(--color-surface);
  border:1px solid var(--color-edge);border-radius:0;font-family:var(--font-display);font-weight:650;
  font-size:var(--text-sm);letter-spacing:.04em;text-transform:uppercase}
.brandfield input::placeholder{color:var(--color-muted);opacity:1;text-transform:none;letter-spacing:0;font-weight:500}
.brandfield input:focus{outline:2px solid var(--color-focus);outline-offset:-1px;border-color:var(--color-focus)}
.pcard-body{padding:var(--space-md);display:grid;gap:var(--space-sm)}
.pcard-title{font-family:var(--font-display);font-weight:650;font-size:var(--text-md);line-height:1.35}
.pcard-title span{display:block;font-family:var(--font-body);font-weight:400;font-size:var(--text-sm);color:var(--color-ink-2)}
.pc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--space-sm);align-items:baseline;
  padding-top:var(--space-xs);border-top:1px solid var(--color-rule)}
.pc-row .q{font-weight:600;font-size:var(--text-md)}
.pc-row .q small{display:block;font-weight:400;font-size:var(--text-sm);color:var(--color-ink-2)}
.pc-row .u{font-family:var(--font-display);font-weight:750;font-size:var(--text-xl);letter-spacing:-.01em;line-height:1.1;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pc-row .u small{display:block;font-family:var(--font-body);font-weight:400;font-size:var(--text-xs);color:var(--color-muted);text-align:right}
.pc-row .t{grid-column:1/-1;font-size:var(--text-sm);color:var(--color-ink-2)}
.pcard-note{font-size:var(--text-xs);color:var(--color-muted)}
.pcard .lnk{justify-self:start;min-height:40px}

/* =========================================================== схема цеха */
.map-fig{margin:0}
.map-fig svg{display:block;width:100%;height:auto}
.map-fig .iso-d{max-width:1200px;margin-inline:auto}
.map-fig .iso-m{display:none;max-width:420px;margin-inline:auto}
@media(max-width:699.98px){.map-fig .iso-d{display:none}.map-fig .iso-m{display:block}}
.stations{list-style:none;margin:var(--space-lg) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid var(--color-ink)}
.stations li{padding:var(--space-sm) var(--space-sm) var(--space-sm) 0;display:grid;gap:6px;align-content:start}
.stations li + li{padding-left:var(--space-sm);border-left:1px solid var(--color-rule)}
.stations .stn{align-items:flex-start;font-weight:650;font-size:var(--text-md);line-height:1.3;color:var(--color-ink)}
.stations .stn b{margin-top:-3px}
.stations p{font-size:var(--text-sm);color:var(--color-ink-2);line-height:1.5}
.stations a.stn:hover,.stations a.stn:focus-visible{text-decoration:underline;text-underline-offset:.2em}
.stations a.stn:active{color:var(--color-accent-strong)}
.stations a.go{font-size:var(--text-sm);font-weight:600;text-decoration:underline;justify-self:start;display:inline-flex;
  align-items:center;min-height:32px}
@media(max-width:1100px){
  .stations{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stations li + li{border-left:0;padding-left:0}
  .stations li{border-bottom:1px solid var(--color-rule);padding-right:var(--space-md)}
  .stations li:nth-child(even){padding-left:var(--space-md);border-left:1px solid var(--color-rule)}
}
@media(max-width:620px){
  .stations{grid-template-columns:minmax(0,1fr)}
  .stations li:nth-child(even){padding-left:0;border-left:0}
}

/* ============================================= ① каталог: категории */
.ctiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--color-rule);border-left:1px solid var(--color-rule)}
.ctile{display:grid;grid-template-rows:auto auto 1fr;gap:4px;padding:var(--space-md) var(--space-sm) var(--space-sm);
  border-right:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule);color:var(--color-ink);text-decoration:none;
  background:var(--color-surface);transition:background-color var(--dur-short) var(--ease-out)}
.ctile svg{display:block;width:100%;max-width:150px;height:120px;margin:0 auto var(--space-xs)}
.ctile b{font-family:var(--font-display);font-weight:650;font-size:var(--text-md);line-height:1.3}
.ctile span{font-size:var(--text-sm);color:var(--color-ink-2)}
.ctile:hover{background:var(--color-paper-2);color:var(--color-ink)}
.ctile:hover b{color:var(--color-accent)}
.ctile:active{background:var(--color-paper-3)}
@media(max-width:1180px){.ctiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){
  .ctiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctile svg{height:96px}
}

/* ================================ ② плита: лестница цен (одна на страницу) */
.plate{background:var(--color-accent);color:var(--color-accent-ink)}
.plate .stn{color:var(--color-accent-soft)}
.plate .stn b{border-color:var(--color-accent-ink);color:var(--color-accent-ink);background:transparent}
.plate h2{color:var(--color-accent-ink)}
.plate .intro{color:var(--color-accent-soft)}
.plate a{color:var(--color-accent-ink)}
.plate a:hover{color:var(--color-accent-ink);text-decoration-thickness:2px}
.plate :focus-visible{outline-color:var(--color-accent-ink)}
.ladder{display:grid;border-top:1px solid color-mix(in oklch,var(--color-accent-ink) 45%,transparent)}
.rung{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr) minmax(0,auto);gap:var(--space-2xs) var(--space-lg);
  align-items:center;padding-block:var(--space-md);border-bottom:1px solid color-mix(in oklch,var(--color-accent-ink) 25%,transparent)}
.rung .q{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);line-height:1.1;font-variant-numeric:tabular-nums}
.rung .q small{display:block;margin-top:4px;line-height:1.35;font-family:var(--font-body);font-weight:400;font-size:var(--text-sm);color:var(--color-accent-soft)}
.rung .track{position:relative;height:40px;background:color-mix(in oklch,var(--color-accent-ink) 12%,transparent)}
.rung .fill{position:absolute;inset:0 auto 0 0;width:var(--w,100%);background:var(--color-accent-ink);
  display:flex;align-items:center;justify-content:flex-end;padding-right:12px}
.rung .fill .u{font-family:var(--font-display);font-weight:750;font-size:var(--text-lg);color:var(--color-accent);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.rung .meta{display:grid;gap:0;justify-items:end;text-align:right;font-size:var(--text-sm);color:var(--color-accent-soft);white-space:nowrap}
.rung .fill .u small{margin-left:6px;font-family:var(--font-body);font-weight:500;font-size:var(--text-xs);color:var(--color-ink-2)}
.rung .meta b{font-family:var(--font-display);font-weight:700;color:var(--color-accent-ink);font-size:var(--text-md);font-variant-numeric:tabular-nums}
.rung .meta a{font-weight:600;min-height:32px;display:inline-flex;align-items:center}
.plate-note{margin-top:var(--space-md);font-size:var(--text-sm);color:var(--color-accent-soft);max-width:var(--measure)}
.plate .cta-row{margin-top:var(--space-lg)}
@media(max-width:820px){
  .rung{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--space-xs)}
  .rung .track{grid-column:1/-1;grid-row:2}
  .rung .meta{grid-column:2;grid-row:1}
}

/* ================================== ③ тара и аромат: настоящие фото */
.packs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--space-sm)}
.packs figure{margin:0;display:grid;gap:6px;align-content:start}
.packs img{display:block;width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;background:var(--color-surface)}
.packs figcaption{font-size:var(--text-xs);line-height:1.35;color:var(--color-ink-2);overflow-wrap:anywhere}
.split2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg) var(--space-xl);margin-top:var(--space-xl)}
.split2 h3{margin-bottom:var(--space-2xs)}
.split2 p{color:var(--color-ink-2);max-width:var(--measure)}
.split2 p + p{margin-top:var(--space-2xs)}
@media(max-width:980px){.packs{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:480px){.packs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.split2{grid-template-columns:minmax(0,1fr)}}

/* ======================================= ④ шаги по договору — одна линия */
.line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));counter-reset:st}
.line li{position:relative;display:grid;gap:var(--space-2xs);align-content:start;padding:0 var(--space-md) 0 0;counter-increment:st}
.line li::before{content:counter(st,decimal-leading-zero);display:inline-grid;place-items:center;width:40px;height:40px;
  border:1.5px solid var(--color-ink);border-radius:50%;background:var(--color-paper);position:relative;z-index:1;
  font-family:var(--font-mono);font-weight:500;font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.line li::after{content:"";position:absolute;left:40px;right:0;top:20px;height:1.5px;background:var(--color-ink)}
.line li:last-child::after{display:none}
.line b{font-family:var(--font-display);font-weight:650;font-size:var(--text-md);line-height:1.3;margin-top:var(--space-2xs)}
.line span{font-size:var(--text-sm);line-height:1.5;color:var(--color-ink-2)}
.line .dur{justify-self:start;font-style:normal;font-family:var(--font-body);font-weight:600;font-size:var(--text-xs);color:var(--color-ink);
  background:var(--color-paper-3);padding:3px 8px;font-variant-numeric:tabular-nums}
.line-note{margin-top:var(--space-lg);font-size:var(--text-sm);color:var(--color-ink-2);max-width:var(--measure)}
@media(max-width:1100px){
  .line{grid-template-columns:minmax(0,1fr);gap:0}
  .line li{grid-template-columns:40px minmax(0,1fr);column-gap:var(--space-sm);padding:0 0 var(--space-md)}
  .line li::before{grid-row:1/span 4}
  .line li > *{grid-column:2}
  .line li::after{left:20px;right:auto;top:40px;bottom:0;width:1.5px;height:auto}
  .line b{margin-top:8px}
}

/* ===================================== ⑤ что входит в цену — лист спецификации */
.scope{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--color-ink)}
.scope > div{padding:var(--space-md) var(--space-md) var(--space-md) 0}
.scope > div + div{padding-left:var(--space-md);border-left:1px solid var(--color-rule)}
.scope h3{display:flex;align-items:center;gap:10px;font-size:var(--text-lg)}
.scope h3::before{content:"";flex:0 0 12px;width:12px;height:12px;background:var(--c,var(--color-ink))}
.scope .in{--c:var(--color-ok)}
.scope .extra{--c:var(--color-warn)}
.scope .you{--c:var(--color-ink)}
.scope ul{list-style:none;margin:var(--space-sm) 0 0;padding:0;display:grid;gap:var(--space-2xs)}
.scope li{position:relative;padding-left:20px;font-size:var(--text-sm);line-height:1.5;color:var(--color-ink-2)}
.scope li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:1.5px;background:var(--c,var(--color-ink))}
.terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-xl);margin:var(--space-xl) 0 0}
.terms div{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:var(--space-sm);
  padding-block:var(--space-xs);border-top:1px solid var(--color-rule)}
.terms dt{font-weight:600;font-size:var(--text-sm)}
.terms dd{margin:0;font-size:var(--text-sm);color:var(--color-ink-2)}
@media(max-width:980px){
  .scope{grid-template-columns:minmax(0,1fr)}
  .scope > div + div{padding-left:0;border-left:0;border-top:1px solid var(--color-rule)}
  .terms{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:480px){.terms div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* ======================================================= кому подходит */
.aud{display:grid;border-top:1px solid var(--color-ink)}
.aud-row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-md) var(--space-xl);
  align-items:center;padding-block:var(--space-md);border-bottom:1px solid var(--color-rule)}
.aud-row img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;mix-blend-mode:multiply}
.aud-row h3{font-size:var(--text-lg)}
.aud-row .pain{margin-top:6px;font-size:var(--text-md);color:var(--color-ink);font-weight:500}
.aud-row .ans{font-size:var(--text-sm);color:var(--color-ink-2);line-height:1.55}
.aud-row .ans a{display:inline-flex;margin-top:6px;font-weight:600}
@media(max-width:980px){
  .aud-row{grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:var(--space-xs) var(--space-md);align-items:start}
  .aud-row .ans{grid-column:2}
}
@media(max-width:520px){
  .aud-row{grid-template-columns:minmax(0,104px) minmax(0,1fr)}
  .aud-row h3{font-size:var(--text-md)}
  .aud-row .pain{font-size:var(--text-sm)}
  .aud-row .ans{grid-column:1/-1}
}

/* ============================================== проверьте до заказа */
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--color-ink)}
.offers > div{display:grid;gap:var(--space-xs);align-content:start;padding:var(--space-md) var(--space-lg) var(--space-md) 0}
.offers > div + div{padding-left:var(--space-lg);border-left:1px solid var(--color-rule)}
.offers p{color:var(--color-ink-2);max-width:var(--measure)}
@media(max-width:820px){
  .offers{grid-template-columns:minmax(0,1fr)}
  .offers > div + div{padding-left:0;border-left:0;border-top:1px solid var(--color-rule)}
}

/* ================================================== статьи (на главной) */
.arts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-lg) var(--space-md)}
.art{display:grid;gap:var(--space-2xs);align-content:start;color:var(--color-ink);text-decoration:none}
.art img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;mix-blend-mode:multiply;
  background:var(--color-surface);border:1px solid var(--color-rule)}
.art b{font-family:var(--font-display);font-weight:650;font-size:var(--text-md);line-height:1.3;margin-top:var(--space-2xs)}
.art span{font-size:var(--text-sm);color:var(--color-ink-2);line-height:1.5}
.art:hover b{color:var(--color-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
@media(max-width:1100px){.arts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.arts{grid-template-columns:minmax(0,1fr)}}

/* ============================================================ вопросы */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--space-xl)}
.faq-grid .head{margin-bottom:0;align-content:start}
#faqbox{border-top:1px solid var(--color-ink)}
#faqbox details{border-bottom:1px solid var(--color-rule)}
#faqbox summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  min-height:56px;padding-block:var(--space-sm);font-family:var(--font-display);font-weight:650;font-size:var(--text-md);line-height:1.35}
#faqbox summary::-webkit-details-marker{display:none}
#faqbox summary::after{content:"";flex:0 0 10px;width:10px;height:10px;margin-right:4px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--dur-short) var(--ease-out)}
#faqbox details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
#faqbox summary:hover{color:var(--color-accent)}
#faqbox details > div{padding:0 0 var(--space-md);font-size:var(--text-md);line-height:1.6;color:var(--color-ink-2);max-width:var(--measure)}
@media(max-width:900px){.faq-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}}

/* ========================================== финальный призыв (утверждение) */
.closer{background:var(--color-paper-2);border-top:1px solid var(--color-rule)}
.closer-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-lg) var(--space-xl);align-items:end}
.closer h2{font-size:clamp(2rem,1.6vw + 1.4rem,3.25rem);line-height:1.05;letter-spacing:-.028em;max-width:16ch}
.closer p{margin-top:var(--space-sm);color:var(--color-ink-2);max-width:48ch}
.closer .cta-row{justify-content:flex-start}
@media(max-width:900px){.closer-in{grid-template-columns:minmax(0,1fr)}}

/* =============================================================== подвал */
.foot{padding-block:var(--space-xl) var(--space-lg);border-top:1px solid var(--color-rule);font-size:var(--text-sm);color:var(--color-ink-2)}
.foot-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:var(--space-lg) var(--space-xl)}
.foot .brand{margin-bottom:var(--space-xs)}
.foot p{max-width:44ch}
.foot nav{display:grid;gap:2px;align-content:start}
.foot a{color:var(--color-ink-2);text-decoration:none;display:inline-flex;align-items:center;min-height:36px}
.foot a:hover{color:var(--color-accent);text-decoration:underline}
.foot .contacts{display:grid;gap:2px;align-content:start}
.foot .contacts b{color:var(--color-ink);font-weight:600}
.foot-legal{margin-top:var(--space-lg);padding-top:var(--space-sm);border-top:1px solid var(--color-rule);font-size:var(--text-xs);color:var(--color-muted)}
@media(max-width:820px){.foot-grid{grid-template-columns:minmax(0,1fr)}}

/* ============================================ липкая панель на телефоне */
.mbar{display:none}
@media(max-width:720px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-mbar);gap:var(--space-xs);
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:var(--color-surface);
    border-top:1px solid var(--color-rule);box-shadow:0 -10px 24px -16px oklch(19% 0.016 266 / .35);
    transition:transform var(--dur-med) var(--ease-out)}
  .mbar .btn{flex:1 1 auto}
  .mbar .wa{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;
    border:1px solid var(--color-edge);color:var(--color-ink);text-decoration:none;font-weight:600}
  .mbar .wa svg{width:20px;height:20px;color:var(--color-ok)}
  .mbar.off{transform:translateY(110%)}
  .mbar .btn{min-width:0}
  body.has-mbar{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  html:has(body.has-mbar){scroll-padding-bottom:96px}
}
@media(max-width:440px){.mbar .wa{padding:0 12px}.mbar .wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.mbar{transition:none}}
@media print{.topbar,.mbar,.closer,.foot nav{display:none!important}body{background:#fff}}

/* подписи кнопки шапки: длинная и короткая */
.l-short{display:none}
@media(max-width:440px){.l-long{display:none}.l-short{display:inline}}
.menu-panel svg{width:20px;height:20px;color:var(--color-ok)}

/* цели касания на сенсорных экранах — не меньше 44 px */
@media(pointer:coarse){
  .topbar .btn.sm,.pcard .lnk,.rung .meta a,.foot a,.prose .related a,.ue-chips button{min-height:44px}
}
/*#PAGES*/
/* =================================================================
   Общие компоненты прежней разметки (сборщик заказа, каталог, статьи)
   в новой системе: те же имена классов, новый вид.
   ================================================================= */
.b1,.b2{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;
  border-radius:0;font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);line-height:1.2;
  text-decoration:none;cursor:pointer;border:1px solid var(--color-accent);
  transition:background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.b1{background:var(--color-accent);color:var(--color-accent-ink)}
.b1:hover{background:var(--color-accent-strong);border-color:var(--color-accent-strong);color:var(--color-accent-ink)}
.b2{background:transparent;color:var(--color-accent);border-color:var(--color-edge)}
.b2:hover{border-color:var(--color-accent);background:var(--color-accent-tint);color:var(--color-accent-strong)}
.b1:active,.b2:active{transform:translateY(1px)}
.b1[aria-disabled="true"]{background:var(--color-paper-3);border-color:var(--color-paper-3);color:var(--color-muted);cursor:default;transform:none}
.b2[aria-disabled="true"]{opacity:.6;cursor:default;transform:none}
.b1.lg,.b2.lg{min-height:48px;padding:0 22px;font-size:var(--text-md)}
.btns{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);margin-top:var(--space-sm)}
.eyebrow{font-size:var(--text-sm);font-weight:500;color:var(--color-ink-2)}
.lede{font-size:var(--text-lg);line-height:1.5;color:var(--color-ink-2);max-width:var(--measure)}
.sub{font-size:var(--text-sm);color:var(--color-ink-2);max-width:var(--measure)}
.hint{font-size:var(--text-sm);color:var(--color-muted);max-width:var(--measure);margin-top:var(--space-xs)}
.tag{display:inline-block;margin-left:8px;padding:2px 6px;vertical-align:2px;font-family:var(--font-body);font-weight:600;
  font-size:var(--text-xs);line-height:1.2;color:var(--color-new);background:color-mix(in oklch,var(--color-new) 12%,var(--color-surface))}
.tabs{display:flex;flex-wrap:wrap;gap:0 var(--space-md);border-bottom:1px solid var(--color-rule)}
.tabs a,.tabs button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;background:none;border:0;
  border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;font-family:var(--font-display);font-weight:600;
  font-size:var(--text-sm);color:var(--color-ink-2);text-decoration:none}
.tabs a:hover,.tabs button:hover{color:var(--color-ink)}
.tabs a[aria-current="true"],.tabs button[aria-selected="true"]{color:var(--color-accent);border-bottom-color:var(--color-accent)}
.tabs .cnt{font-family:var(--font-body);font-weight:500;font-size:var(--text-xs);color:var(--color-muted);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.chip{display:flex;flex-direction:column;gap:2px;min-width:96px;padding:8px 12px;background:var(--color-surface);
  border:1px solid var(--color-edge);color:inherit;text-decoration:none}
a.chip:hover{border-color:var(--color-accent)}
.chip b{font-family:var(--font-display);font-weight:650;font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.chip s{text-decoration:none;font-size:var(--text-xs);color:var(--color-muted)}

/* ============================================================ статьи */
.art-page{padding-block:var(--space-lg) var(--space-2xl)}
.art-grid{display:grid;grid-template-columns:minmax(0,42rem) minmax(0,300px);justify-content:space-between;gap:var(--space-xl)}
.side{position:relative}
.side-in{position:sticky;top:calc(var(--topbar-h) + 24px);display:grid;gap:var(--space-lg);max-height:calc(100vh - var(--topbar-h) - 40px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.side-toc b{display:block;margin-bottom:var(--space-2xs);font-size:var(--text-sm);font-weight:650}
.side-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--color-rule)}
.side-toc a{display:block;padding:5px 0 5px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:var(--text-sm);
  line-height:1.4;color:var(--color-ink-2);text-decoration:none}
.side-toc a:hover{color:var(--color-ink)}
.side-toc a[aria-current="true"]{border-left-color:var(--color-accent);color:var(--color-accent)}
.side-cta{padding:var(--space-md);background:var(--color-paper-2);display:grid;gap:var(--space-xs)}
.side-cta p{font-size:var(--text-sm);color:var(--color-ink-2)}
.side-cta b{font-family:var(--font-display);font-weight:650;font-size:var(--text-md);color:var(--color-ink)}
@media(max-width:1100px){.art-grid{grid-template-columns:minmax(0,1fr)}.side{display:none}}

.prose{--measure:100%;min-width:0;font-size:var(--text-md);line-height:1.7}
.prose h1{font-size:clamp(1.875rem,1.4vw + 1.3rem,2.625rem);line-height:1.1;letter-spacing:-.025em;margin:var(--space-2xs) 0 0}
.prose > p,.prose > ul,.prose > ol{max-width:var(--measure)}
.prose > p{margin:0 0 var(--space-sm)}
.prose h2{font-size:var(--text-xl);line-height:1.2;letter-spacing:-.018em;margin:var(--space-xl) 0 var(--space-xs)}
.prose h3{font-size:var(--text-lg);margin:var(--space-lg) 0 var(--space-2xs)}
.prose ul,.prose ol{margin:0 0 var(--space-sm);padding-left:1.25em}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--color-muted)}
.prose li p{margin:0}
.prose b,.prose strong{font-weight:650;color:var(--color-ink)}
.prose a{text-decoration-thickness:1px;text-underline-offset:.2em}
.crumbs{display:flex;flex-wrap:wrap;gap:4px 6px;font-size:var(--text-sm);color:var(--color-muted);margin-bottom:var(--space-sm)}
.crumbs a{color:var(--color-ink-2);text-decoration:underline;text-decoration-color:var(--color-rule);text-underline-offset:.2em;white-space:nowrap}
.crumbs a:hover{color:var(--color-accent);text-decoration:underline}
.prose .updated{margin:var(--space-sm) 0 0;font-size:var(--text-xs);color:var(--color-muted);font-variant-numeric:tabular-nums}
.prose .lead{margin:var(--space-md) 0 var(--space-lg);font-size:var(--text-lg);line-height:1.55;color:var(--color-ink-2);max-width:var(--measure)}
.prose .short,.prose .fit,.prose .ask,.prose .say,.prose .toc{max-width:var(--measure);margin:0 0 var(--space-lg);padding:var(--space-md);background:var(--color-paper-2)}
.prose .short{background:var(--color-accent-tint);font-size:var(--text-md)}
.prose .short b,.prose .fit b,.prose .ask b,.prose .say b,.prose .toc b,.prose .sources b,.prose .related b{display:block;margin-bottom:6px;
  font-family:var(--font-display);font-weight:650;font-size:var(--text-sm);letter-spacing:0;text-transform:none;color:var(--color-ink)}
.prose .short b{color:var(--color-accent)}
.prose .fit{font-size:var(--text-sm);color:var(--color-ink-2)}
.prose .ask ol,.prose .toc ol{margin:0;padding-left:1.25em}
.prose .say p{margin:0 0 var(--space-2xs)}
.prose .say p:last-child{margin-bottom:0}
.prose .say .tip,.prose .tip{font-size:var(--text-sm);color:var(--color-muted)}
.prose .note{max-width:var(--measure);margin:var(--space-md) 0;padding-top:var(--space-xs);border-top:1px solid var(--color-rule);
  font-size:var(--text-sm);color:var(--color-ink-2)}
.prose .formula{max-width:var(--measure);margin:0 0 var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-paper-3);
  font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6;overflow-x:auto}
.prose .sec{height:0;border-top:1px solid var(--color-rule);margin:var(--space-xl) 0 0}
.prose .scroll{overflow-x:auto;margin:0 0 var(--space-md);-webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse;width:100%;font-size:var(--text-sm);line-height:1.5;font-variant-numeric:tabular-nums}
.prose .scroll table{min-width:520px}
.prose th,.prose td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--color-rule);vertical-align:top}
.prose th{font-weight:650;color:var(--color-ink);border-bottom:1.5px solid var(--color-ink);white-space:nowrap}
.prose td:first-child{color:var(--color-ink)}
.prose .tsub{font-weight:400;font-size:.86em;color:var(--color-muted)}
.prose .cover{margin:0 0 var(--space-lg);min-width:0}
.prose .cover picture,.prose .cover img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.prose .cover figcaption{margin-top:var(--space-2xs);font-size:var(--text-sm);color:var(--color-muted)}
.prose .faq{max-width:var(--measure);border-top:1px solid var(--color-ink);margin-top:var(--space-sm)}
.prose .faq h3{font-size:var(--text-md);margin:var(--space-md) 0 6px}
.prose .faq p{margin:0 0 var(--space-sm);color:var(--color-ink-2);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-rule)}
.prose .sources{max-width:var(--measure);margin-top:var(--space-xl);padding-top:var(--space-sm);border-top:1px solid var(--color-rule);
  font-size:var(--text-sm);color:var(--color-ink-2)}
.prose .sources ol{padding-left:1.25em}
.prose .sources a{overflow-wrap:anywhere}
.prose .cta{max-width:var(--measure);margin:var(--space-xl) 0;padding:var(--space-md) var(--space-lg);background:var(--color-paper-2);
  border-top:2px solid var(--color-accent)}
.prose .cta h3{font-size:var(--text-lg);margin:0 0 6px}
.prose .cta p{margin:0 0 var(--space-sm);font-size:var(--text-sm);color:var(--color-ink-2)}
.prose .cta .b1,.prose .cta .b2{margin:0 var(--space-xs) var(--space-xs) 0}
.prose .related{max-width:var(--measure);margin-top:var(--space-xl);padding-top:var(--space-sm);border-top:1px solid var(--color-rule)}
.prose .related a{display:flex;align-items:center;min-height:40px;font-weight:600;font-size:var(--text-md);text-decoration:none}
.prose .related a:hover{text-decoration:underline}
.prose .sect{margin:var(--space-xl) 0 var(--space-sm);padding-bottom:var(--space-2xs);border-bottom:1px solid var(--color-ink);
  font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);letter-spacing:-.01em;color:var(--color-ink)}

/* калькулятор прибыли в статье о юнит-экономике */
.ue{max-width:var(--measure);margin:var(--space-lg) 0 var(--space-xl);padding:var(--space-md);background:var(--color-surface);
  border:1px solid var(--color-rule);border-top:2px solid var(--color-accent)}
.ue-head{display:grid;gap:4px;margin-bottom:var(--space-sm)}
.ue-head b{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);line-height:1.25}
.ue-head span{font-size:var(--text-sm);color:var(--color-ink-2)}
.ue-form{display:grid;gap:var(--space-sm)}
.ue-g{border:0;border-top:1px solid var(--color-rule);margin:0;padding:var(--space-xs) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xs) var(--space-sm)}
.ue-g legend{padding:0 8px 0 0;font-family:var(--font-display);font-weight:650;font-size:var(--text-sm);color:var(--color-ink)}
.ue-f{display:flex;flex-direction:column;gap:4px;font-size:var(--text-sm);line-height:1.35;color:var(--color-ink-2);min-width:0}
.ue-wide{grid-column:1/-1}
.ue-f input,.ue-f select{min-height:44px;width:100%;padding:0 10px;background:var(--color-surface);border:1px solid var(--color-edge);
  border-radius:0;font-family:var(--font-display);font-weight:600;font-size:var(--text-md);color:var(--color-ink);font-variant-numeric:tabular-nums}
.ue-f input:focus,.ue-f select:focus{outline:2px solid var(--color-focus);outline-offset:-1px;border-color:var(--color-focus)}
.ue-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.ue-chips button{min-height:40px;padding:0 12px;background:var(--color-surface);border:1px solid var(--color-edge);cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);color:var(--color-accent)}
.ue-chips button:hover{border-color:var(--color-accent)}
.ue-chips button[aria-pressed="true"]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}
.ue-hint{grid-column:1/-1;margin:0;font-size:var(--text-xs);line-height:1.45;color:var(--color-ink-2)}
.ue-out{margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--color-rule)}
.ue-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--space-sm)}
.ue-main span{width:100%;font-family:var(--font-display);font-weight:650;font-size:var(--text-sm);color:var(--color-ink-2)}
.ue-main b{font-family:var(--font-display);font-weight:800;font-size:var(--text-2xl);line-height:1.1;font-variant-numeric:tabular-nums;color:var(--color-new)}
.ue-main b.neg{color:var(--color-need)}
.ue-main em{font-style:normal;font-size:var(--text-sm);color:var(--color-ink-2)}
.ue-bar{display:flex;height:14px;margin:var(--space-xs) 0 var(--space-2xs);background:var(--color-paper-3);overflow:hidden}
.ue-bar span{display:block;height:100%;min-width:0}
.ue-legend{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:var(--text-sm);color:var(--color-ink-2)}
.ue-legend li{display:flex;align-items:center;gap:8px}
.ue-legend i{flex:0 0 10px;width:10px;height:10px;display:block}
.ue-legend b{margin-left:auto;font-family:var(--font-display);font-weight:650;font-size:var(--text-sm);color:var(--color-ink);font-variant-numeric:tabular-nums}
.ue-prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xs);margin-top:var(--space-sm)}
.ue-prices div{display:grid;gap:4px;padding:var(--space-xs) var(--space-sm);background:var(--color-paper-2)}
.ue-prices span{font-size:var(--text-xs);color:var(--color-ink-2)}
.ue-prices i{font-style:normal}
.ue-prices b{font-family:var(--font-display);font-weight:750;font-size:var(--text-lg);font-variant-numeric:tabular-nums}
.ue-warn{margin:var(--space-2xs) 0 0;font-size:var(--text-sm);color:var(--color-need)}
.ue-how{margin-top:var(--space-sm);font-size:var(--text-sm)}
.ue-how summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-weight:600;color:var(--color-accent)}
.ue-how .formula{margin:var(--space-2xs) 0}
@media(max-width:560px){.ue{padding:var(--space-sm)}.ue-g,.ue-prices{grid-template-columns:minmax(0,1fr)}}
@media print{.ue{display:none}}

/* ======================================================= список статей */
.blog-head{padding-block:var(--space-lg) var(--space-md)}
.blog-list{padding-top:var(--space-lg)}
.blog-head h1{font-size:var(--text-3xl);letter-spacing:-.03em}
.blog-list .lead{max-width:62ch}
.blog-head .lead{margin-top:var(--space-sm);font-size:var(--text-lg);line-height:1.55;color:var(--color-ink-2);max-width:var(--measure)}
.blog-list{padding-bottom:var(--space-2xl)}
.blog-list .sect{margin:var(--space-xl) 0 var(--space-sm);padding-bottom:var(--space-2xs);border-bottom:1px solid var(--color-ink);
  font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);letter-spacing:-.015em}
.blog-list .cards.wide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-xl)}
.blog-list .card{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);grid-template-rows:auto 1fr;gap:4px var(--space-md);
  padding:var(--space-sm) 0;border-bottom:1px solid var(--color-rule);color:var(--color-ink);text-decoration:none}
.blog-list .card .thumb{grid-row:1/3;display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;mix-blend-mode:multiply;
  background:var(--color-surface);border:1px solid var(--color-rule)}
.blog-list .card .t{font-family:var(--font-display);font-weight:650;font-size:var(--text-md);line-height:1.3}
.blog-list .card .d{font-size:var(--text-sm);line-height:1.5;color:var(--color-ink-2)}
.blog-list .card:hover .t{color:var(--color-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
@media(max-width:900px){.blog-list .cards.wide{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.blog-list .card{grid-template-columns:minmax(0,112px) minmax(0,1fr);gap:4px var(--space-sm)}.blog-list .card .d{display:none}}

/* ============================================================ каталог */
.cat-head{padding-block:var(--space-lg) var(--space-md)}
.cat-head h1{font-size:var(--text-3xl);letter-spacing:-.03em;max-width:18ch}
.cat-head .lede{margin-top:var(--space-sm)}
.cat-head .facts{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--space-lg)}
.cat-head .facts > div:nth-child(n+3){border-top:0}
.cat-head .facts > div:nth-child(3){padding-left:var(--space-md);border-left:1px solid var(--color-rule)}
.cat-nav{position:sticky;top:var(--topbar-h);z-index:5;background:var(--color-paper);padding-top:var(--space-2xs)}
.cat-nav .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.cat-nav .tabs::-webkit-scrollbar{display:none}
.cat-nav .tabs a{white-space:nowrap}
#cat .sec{padding-top:var(--space-xl)}
html:has(.cat-nav){scroll-padding-top:calc(var(--topbar-h) + 64px)}
#cat .sh{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--space-sm);align-items:end;
  margin-bottom:var(--space-md)}
#cat .sh .n{font-size:var(--text-sm);font-weight:600;color:var(--color-muted);text-transform:lowercase}
#cat .sh .n::first-letter{text-transform:uppercase}
#cat .sh .t{font-size:var(--text-2xl);line-height:1.1;letter-spacing:-.022em}
#cat .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--color-ink);border-left:1px solid var(--color-rule)}
#cat .card.pos{position:relative;display:flex;flex-direction:column;gap:6px;padding:var(--space-md) var(--space-xl) var(--space-md) var(--space-md);
  background:var(--color-surface);border-right:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule);color:var(--color-ink);text-decoration:none;
  transition:background-color var(--dur-short) var(--ease-out)}
#cat .card.pos:hover{background:var(--color-paper-2)}
#cat .card.pos:active{background:var(--color-paper-3)}
#cat .card.pos .t{font-family:var(--font-display);font-weight:650;font-size:var(--text-lg);line-height:1.25}
#cat .card.pos:hover .t{color:var(--color-accent)}
#cat .card.pos .d{font-size:var(--text-sm);line-height:1.5;color:var(--color-ink-2)}
#cat .card.pos .vols{font-size:var(--text-xs);line-height:1.5;color:var(--color-muted);font-variant-numeric:tabular-nums}
/* «от N ₸/шт» — строка паспорта внизу карточки; пустую (сервер ещё не вписал) не показываем */
#cat .card.pos .pr{margin-top:auto;padding-top:var(--space-sm);border-top:1px solid var(--color-rule);font-size:var(--text-sm);line-height:1.4;
  color:var(--color-ink-2);font-variant-numeric:tabular-nums}
#cat .card.pos .pr:empty{display:none}
#cat .card.pos .pr b{font-family:var(--font-display);font-weight:650;font-size:var(--text-lg);color:var(--color-ink);letter-spacing:-.01em}
#cat .card.pos .pr small{margin-left:6px;font-size:var(--text-xs);color:var(--color-muted)}
.cat-head .cat-note{margin-top:var(--space-sm);max-width:var(--measure);font-size:var(--text-sm);line-height:1.5;color:var(--color-muted)}
.cat-head .cat-note:empty{display:none}
#cat .card.pos .go{position:absolute;right:var(--space-sm);top:var(--space-md);width:18px;height:18px;overflow:hidden;font-size:0;color:var(--color-accent);
  background:currentColor;-webkit-mask:url("img/ui/arrow.svg") center/contain no-repeat;mask:url("img/ui/arrow.svg") center/contain no-repeat}
@media(max-width:1020px){#cat .cards{grid-template-columns:repeat(2,minmax(0,1fr))}.cat-head .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-head .facts > div:nth-child(3){padding-left:0;border-left:0}.cat-head .facts > div:nth-child(n+3){border-top:1px solid var(--color-rule)}}
@media(max-width:620px){#cat .cards{grid-template-columns:minmax(0,1fr)}#cat .sh .t{font-size:var(--text-xl)}}
.cat-read{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--color-ink)}
.cat-read > div{padding:var(--space-md) var(--space-md) 0 0}
.cat-read > div + div{padding-left:var(--space-md);border-left:1px solid var(--color-rule)}
.cat-read h3{font-size:var(--text-md);margin-bottom:6px}
.cat-read p{font-size:var(--text-sm);color:var(--color-ink-2)}
@media(max-width:1020px){.cat-read{grid-template-columns:repeat(2,minmax(0,1fr))}.cat-read > div:nth-child(3){padding-left:0;border-left:0}}
@media(max-width:560px){.cat-read{grid-template-columns:minmax(0,1fr)}.cat-read > div + div{padding-left:0;border-left:0;border-top:1px solid var(--color-rule);margin-top:var(--space-sm)}}

/* =============================================================== 404 */
.nf{padding-block:var(--space-2xl) var(--space-3xl)}
.nf .kicker{font-size:var(--text-sm);font-weight:600;color:var(--color-accent)}
.nf h1{max-width:14ch}
.nf .lede{margin-top:var(--space-sm)}
.nf ul{list-style:none;margin:var(--space-xl) 0 0;padding:0;border-top:1px solid var(--color-ink);max-width:40rem}
.nf li a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);min-height:56px;border-bottom:1px solid var(--color-rule);
  font-family:var(--font-display);font-weight:650;font-size:var(--text-lg);color:var(--color-ink);text-decoration:none}
.nf li a:hover{color:var(--color-accent)}
.nf li a span{font-family:var(--font-body);font-weight:400;font-size:var(--text-sm);color:var(--color-ink-2);text-align:right}

/* =========================================== сборщик: заставки шагов (декоративные) */
.step-ill{margin:0;line-height:0;pointer-events:none;user-select:none}
.step-ill svg{display:block;width:100%;height:auto}
.step > .step-ill ~ :not(.sh):not(.sub):not(.step-ill){clear:right}
@media(min-width:621px){.step > .ill-sm{display:none}.step > .ill-lg{float:right;width:240px;margin:-8px 0 4px var(--space-lg)}}
@media(max-width:620px){.step > .ill-lg{display:none}.step > .ill-sm{float:right;width:132px;margin:4px 0 6px 12px}}
.sheeth{align-items:center}
.sheeth .step-ill{width:120px;flex:0 0 auto;margin:-10px 4px -10px auto}
@media(max-width:620px){.sheeth .step-ill{display:none}}
/* Фото карточки цены (11.10.2026): реальная съёмка вместо рисованного флакона; надпись бренда ложится на пустую этикетку */
.pcard-fig.photo{padding:0;background:var(--color-surface)}
.pcard-fig.photo .brandfield{margin:0;padding:var(--space-sm) var(--space-md)}
.pc-photo{position:relative;border-bottom:1px solid var(--color-rule);overflow:hidden;background:var(--color-paper-2)}
.pc-photo img{display:block;width:100%;height:auto}
.pc-label{position:absolute;left:var(--lx);top:var(--ly);width:var(--lw);height:var(--lh);container-type:inline-size;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.35em;padding:0;text-align:center;color:#1A1F2E;mix-blend-mode:multiply;pointer-events:none}
.pc-label .wl-brand{display:inline-block;white-space:nowrap;font-family:var(--font-display);font-weight:700;font-size:16cqw;line-height:1;letter-spacing:.05em}
.pc-label small{font-size:max(7px,7.4cqw);line-height:1.2;letter-spacing:.04em;color:#3A4152;white-space:nowrap}
.pc-label > *{position:relative;top:-8%}
@media(max-width:620px){.pc-label{left:var(--mlx);top:var(--mly);width:var(--mlw);height:var(--mlh)}}

/* фото категорий вместо рисованных значков (11.10.2026) */
.ctile img{display:block;width:100%;max-width:180px;height:auto;aspect-ratio:5/4;object-fit:cover;margin:0 auto var(--space-xs)}
/* схема цеха: фото макета вместо рисунка; номера участков ставит сайт (11.10.2026) */
.map-photo{position:relative;max-width:1200px;margin-inline:auto}
.map-photo img{display:block;width:100%;height:auto}
.map-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.map-pin b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--color-surface);border:1.5px solid var(--color-ink);font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);line-height:1;color:var(--color-ink)}
.map-pin::after{content:"";width:1.5px;height:18px;background:var(--color-ink)}
@media(max-width:699.98px){.map-pin{left:var(--mx);top:var(--my)}.map-pin b{width:26px;height:26px}.map-pin::after{height:12px}}
/* заставки шагов сборщика — фото серии на белом (12.10.2026). Без рамки: multiply растворяет белый фон кадра
   в цвете страницы, остаются только предметы и тени (владелец: «не как окошко, должны сливаться с фоном») */
.step-ill img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
/* ролики (12.10.2026): запуск по клику, со звуком; файл грузится только после нажатия (preload=none) */
.vid-frame{margin:0;max-width:1200px}
.vid-frame video,.howto video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--color-ink);border:1px solid var(--color-rule)}
.howto{margin-top:var(--space-sm)}
.howto>summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;font-weight:600;color:var(--color-accent)}
.howto>summary::-webkit-details-marker{display:none}
.howto>summary svg{width:22px;height:22px;flex:0 0 auto}
.howto>summary:hover{text-decoration:underline}
.howto>summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.howto[open]>summary{margin-bottom:var(--space-xs)}
.howto video{max-width:960px}
/*#/PAGES*/