/* Оформление 3 «Фирменный» — микс оформлений 1 и 2 в фирменном стиле завода (пользователь 2026-10-28: «Точно не третий вариант, замени его миксом
   из первого и второго и добавь больше цветов и оформления с официального сайта производителя»).
   От завода (bonolit.ru, 2026-10-28): бирюзовый #3ccbda, графитовая шапка в два яруса с бирюзовой полосой меню, белые карточки со скруглением,
   тёмная скруглённая рамка фото, панель цены на светло-сером, пунктирные выноски в характеристиках, тёмная кнопка рядом с бирюзовой.
   Из оформления 1: сетка под чертежами (бирюзовая), моноширинные цифры размеров (Martian Mono), текст Geist.
   Из оформления 2: тёмные шапки таблиц, итог калькулятора — тёмная «накладная», крупные кнопки, тёмные плашки фактов.
   На бирюзе — тёмный текст (#10282b): белый на #3ccbda — контраст 2:1, ниже нормы. Текстовые ссылки и цены — тёмная бирюза #0a6f7a (5,8:1 на белом).
   Шрифты: Jost (заголовки, цены — геометрия близка к фирменному Petrov Sans завода, который платный) + Geist (текст) + Martian Mono (размеры). */
:root {
  --bg: #f4f5f6; --bg2: #e9eced; --card: #fff; --ink: #26292c; --ink2: #50565c; --line: #d9dde0; --line-strong: #9aa2a8;
  --acc: #3ccbda; --acc-ink: #10282b; --acc-2: #0a6f7a; --acc-soft: #e3f7f9;
  --btn: #3ccbda; --btn-ink: #10282b; --btn-hover: #2fb7c6; --ghost-line: #0a6f7a;
  --dk: #3a3d40; --dk2: #2f3235; --dk-ink: #f4f5f6; --dk-ink2: #c2c8cd; --dk-line: #4b4f53;
  --hdr-bg: #3a3d40; --hdr-ink: #fff; --hdr-ink2: #c2c8cd; --hdr-line: #3a3d40; --burger-line: #5a5f64; --burger-bg: #3a3d40; --burger-ink: #fff;
  --ftr-bg: #2f3235; --ftr-ink: #c2c8cd; --ftr-link: #fff; --ftr-line: #45494d;
  --fab-bg: #3a3d40; --fab-ink: #fff; --fab-line: #4b4f53; --fab-call: #3ccbda; --fab-call-ink: #10282b;
  --media-bg: #fff; --field: #fff; --field-line: #9aa2a8; --focus: #0a6f7a;
  --draw-top: #fff; --draw-left: #eaf6f7; --draw-right: #cfe3e6; --draw-line: #26292c; --draw-dim: #0a6f7a; --draw-cut: #bfd6d9; --draw-cut2: #a9c6ca;
  --draw-in: #d6e8ea; --draw-in2: #c3dadd;
  --grid-1: rgba(60, 203, 218, .10); --grid-5: rgba(60, 203, 218, .24);
  --font-b: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-h: 'Jost', 'Geist', system-ui, sans-serif; --font-m: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-k: var(--font-h); --font-num: var(--font-h); --font-btn: var(--font-h); --font-tel: var(--font-h); --font-logo: var(--font-h); --m-stretch: 87.5%;
  --bold: 600; --h-w: 700; --h-ls: -.012em; --lh-h: 1.06; --h1-max: 68px; --h2-max: 44px; --h3: 21px;
  --k-fs: 13px; --k-w: 700; --k-ls: .1em;
  --r: 14px; --r-btn: 10px; --r-in: 8px; --r-tab: 10px; --r-chip: 8px;
  --btn-h: 52px; --btn-fs: 17px; --btn-w: 600; --btn-px: 24px;
  --logo-w: 700; --tel-w: 600; --tel-fs: 18px;
  --tab-on-bg: #3ccbda; --tab-on-ink: #10282b; --chip-on: #3ccbda; --chip-on-ink: #10282b; --tab-w: 600; --font-tab: var(--font-h);
  --price-w: 700; --price-fs: 23px; --kpi-w: 700; --pt-w: 600;
  --pcard-line: transparent; --pcard-line-h: transparent; --pgrid-gap: 12px; --pgrid-gap-d: 20px;
  --shadow: 0 16px 32px -24px rgba(38, 41, 44, .45);
  --th-bg: #3a3d40; --th-ink: #fff; --font-th: var(--font-h); --th-w: 600; --th-fs: 14px;
  --form-bg: #2f3235; --form-ink: #fff; --form-ink2: #c2c8cd; --taxi-bg: #e9eced; --taxi-ink: var(--ink); --taxi-ink2: var(--ink2);
}

/* шапка: графит, на телефоне — бирюзовая черта снизу (на компьютере — бирюзовая полоса меню, см. @media) */
.v3 .hdr { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 -3px 0 var(--acc); }
.v3 .nav a { font-weight: 500; }
.v3 .burger__nav, .v3 .burger__nav a { border-bottom-color: var(--dk-line); }
.v3 .burger__nav a { font-family: var(--font-h); font-weight: 600; }
.v3 .burger__nav a.burger__sub { color: var(--hdr-ink2); font-family: var(--font-b); font-weight: 400; }
.v3 .hdr__cta { --_bg: var(--btn); --_ink: var(--btn-ink); }

/* сетка из оформления 1 — бирюзовая: первый экран, шапки страниц и только чертежи (под фото завода фон ровный) */
.v3 .hero, .v3 .phead, .v3 .gal__v.is-draw, .v3 .pcard__m.is-draw, .v3 .stile__m:has(> svg) {
  background-image: linear-gradient(var(--grid-5) 1px, transparent 1px), linear-gradient(90deg, var(--grid-5) 1px, transparent 1px),
    linear-gradient(var(--grid-1) 1px, transparent 1px), linear-gradient(90deg, var(--grid-1) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px; background-position: -1px -1px; }
.v3 .pcard__m.is-draw, .v3 .stile__m:has(> svg) { background-size: 24px 24px, 24px 24px, 6px 6px, 6px 6px; }

/* надписи разделов — бирюзовая метка с тёмным квадратом, как подписи на сайте завода */
.v3 main .kicker { color: var(--acc-2); }
.v3 main .kicker::before { content: ''; width: 12px; height: 12px; border-radius: 3px; background: var(--acc); box-shadow: inset 0 0 0 3px var(--acc-soft); }
.v3 .hero .kicker { display: inline-flex; padding: 6px 12px 5px; border-radius: 999px; background: var(--dk); color: #fff; }
.v3 .hero .kicker::before { box-shadow: none; }
.v3 .sec__h h2, .v3 .split h2 { margin-top: 4px; }

/* первый экран: лист с сеткой, чертёж в рамке завода, цифры — тёмная плашка (как в оформлении 2) */
.v3 .hero h1 { letter-spacing: -.02em; }
.v3 .hero__fig { padding: 14px 14px 12px; background: #fff; border-radius: 18px; box-shadow: var(--shadow); }
.v3 .hero__fig figcaption { margin-top: 8px; padding-top: 10px; border-top: 1px dotted var(--line-strong); font: 500 11.5px/1.45 var(--font-m); font-stretch: 87.5%; color: var(--ink); }
.v3 .kpis { gap: 1px; background: var(--dk-line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.v3 .kpis div { padding: 16px 16px 14px; background: var(--dk); }
.v3 .kpis dt { color: var(--dk-ink2); font-size: 12.5px; }
.v3 .kpis dd { color: #fff; }
.v3 .kpis div:last-child dd { color: var(--acc); }
.v3 .hero__cta .btn--ghost { background: #fff; }

/* кнопки: бирюзовая — главная, тёмная — вторая (как «Купить в 1 клик» у завода), контурная — бирюза */
.v3 .btn { letter-spacing: .005em; }
.v3 .btn:not(.btn--ghost) { box-shadow: 0 10px 22px -14px rgba(16, 40, 43, .55); }
.v3 .btn--ghost { color: var(--acc-2); border-color: var(--acc); border-width: 2px; }
.v3 .btn--ghost:hover { background: var(--acc-soft); color: var(--acc-ink); border-color: var(--acc); }
.v3 .more a { color: var(--acc-2); border-bottom: 2px solid var(--acc); font-family: var(--font-h); font-weight: 600; }
.v3 a { text-decoration-color: rgba(10, 111, 122, .45); }
.v3 .chip { font: 600 14px/1 var(--font-h); }

/* вкладки — рамкой, выбранная — бирюзовая (вкладки карточки у завода) */
.v3 .picker__tabs button { font-family: var(--font-h); }
.v3 .picker__tabs button:not([aria-selected='true']) { background: #fff; }

/* карточки: белые со скруглением и тенью; фото и чертёж — в тёмной скруглённой рамке, как у завода */
.v3 .pcard, .v3 .stile { border: 0; border-radius: 16px; background: #fff; box-shadow: 0 1px 0 rgba(38, 41, 44, .05), var(--shadow); }
.v3 .pcard:hover, .v3 .stile:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--acc), var(--shadow); }
.v3 .pcard__m, .v3 .stile__m { border: 2px solid var(--dk); border-radius: 14px; background-color: #fff; }   /* рамка фото, как на bonolit.ru */
.v3 .pcard__t, .v3 .stile__t { font-family: var(--font-h); font-weight: 600; }
.v3 .stile__t { font-size: 19px; }
.v3 .pcard__f, .v3 .stile__n { font-size: 12.5px; }
.v3 .pcard .price__v, .v3 .price__v { color: var(--acc-2); }

/* таблицы — тёмная шапка (оформление 2), цифры размеров — моноширинные (оформление 1) */
.v3 .matrix, .v3 .spec__t { border: 0; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.v3 .matrix__t th[scope=row] { font: 700 17px/1 var(--font-h); }
.v3 .matrix__t td.num a { font-family: var(--font-m); font-stretch: 87.5%; }
.v3 .matrix__t td.num a:hover { background: var(--acc); color: var(--acc-ink); }
.v3 .matrix__t tr:nth-child(even) td, .v3 .matrix__t tr:nth-child(even) th[scope=row] { background: #f6f8f9; }
.v3 .matrix__t--cmp td { font-family: var(--font-b); font-size: 15px; }
.v3 .spec__t td.mono, .v3 .prod__chips span { font-family: var(--font-m); font-stretch: 87.5%; }

/* факты — тёмные плашки с бирюзовой полосой (оформление 2 в цветах завода) */
.v3 .facts { gap: 10px; background: transparent; border: 0; overflow: visible; }
.v3 .fact { border-radius: 14px; background: var(--dk); color: var(--dk-ink); border-top: 4px solid var(--acc); box-shadow: var(--shadow); }
.v3 .fact__k { color: var(--acc); font: 700 20px/1.2 var(--font-h); text-transform: none; letter-spacing: 0; }
.v3 .fact__v { color: var(--dk-ink2); }
.v3 .box, .v3 .plant { border: 0; border-radius: 16px; box-shadow: var(--shadow); }
.v3 .dlist { border-top-color: var(--dk); }

/* калькулятор: ввод — белый лист, итог — тёмная «накладная» с бирюзовой суммой */
.v3 .calc { border: 0; border-radius: 16px; box-shadow: var(--shadow); }
.v3 .calc legend { color: var(--acc-2); font-family: var(--font-h); font-weight: 700; letter-spacing: .06em; }
.v3 .calc__out { margin: 0 -16px -16px; padding: 18px 16px; background: var(--dk); color: #fff; border-radius: 0 0 16px 16px; --res-bg: var(--dk2); --line: var(--dk-line); }
.v3 .calc__out dt, .v3 .calc__out small, .v3 .calc__out .note { color: var(--dk-ink2); }
.v3 .calc__res div { border-radius: 10px; }
.v3 .calc__res dd { font-family: var(--font-h); font-weight: 700; font-size: 24px; }
.v3 .calc__sum { color: var(--acc); font-family: var(--font-h); font-weight: 700; font-size: clamp(30px, 8vw, 44px); }

/* заявка — спокойный графит (как тёмные блоки bonolit.ru), такси — светлый блок; формы — белые карточки */
.v3 .sec--form h2 { color: #fff; }
.v3 .sec--form .kicker { color: var(--acc); }
.v3 .form { border: 0; border-radius: 16px; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .7); }
.v3 .sec--taxi .form { box-shadow: var(--shadow); }
.v3 .taxi-note { background: var(--acc-soft); border-left: 4px solid var(--acc); border-radius: 10px; }
.v3 .form input, .v3 .form textarea, .v3 .form select, .v3 .calc input, .v3 .calc select { min-height: 50px; }

/* шапки страниц, карточка товара: чертёж/фото в рамке, панель цены — светло-серая со скруглением, как у завода */
.v3 .phead { border-bottom: 0; }
.v3 .prod h1 { font-size: clamp(30px, 7.4vw, 54px); }
.v3 .prod__chips span { background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.v3 .gal { border: 2px solid var(--dk); border-radius: 18px; background: #fff; }
.v3 .gal__tabs button:not([aria-pressed='true']) { background: #fff; }
.v3 .buy { border: 0; border-radius: 18px; background: #eef0f1; box-shadow: none; }
.v3 .buy__cta .btn--ghost { background: var(--dk); color: #fff; border-color: var(--dk); }
.v3 .buy__cta .btn--ghost:hover { background: #26292c; color: #fff; border-color: #26292c; }
.v3 .qty__out b { color: var(--acc-2); font-family: var(--font-h); font-weight: 700; font-size: 20px; }
.v3 .specs th, .v3 .specs td { border-bottom: 1px dotted var(--line-strong); }   /* выноски «Размер, мм ........ 600×300×250», как у завода */
.v3 .specs td { font-family: var(--font-m); font-stretch: 87.5%; font-size: 14px; }
.v3 .qa summary { font-family: var(--font-h); font-weight: 600; }
.v3 .qa summary::after { content: '+'; width: 30px; height: 30px; display: grid; place-items: center; background: var(--acc); color: var(--acc-ink); border-radius: 50%; font: 600 20px/1 var(--font-b); }
.v3 .qa[open] summary::after { content: '−'; background: var(--dk); color: #fff; }
.v3 .doclist li::before { color: var(--acc-ink); background: var(--acc); border-color: var(--acc); border-radius: 8px; }

/* подвал и нижняя панель — графит, заголовки подвала бирюзовые */
.v3 .ftr { border-top: 4px solid var(--acc); }
.v3 .ftr__h { color: var(--acc); opacity: 1; }
.v3 .ftr__tel { font: 700 26px/1.2 var(--font-h); }
.v3 .fab a { font-family: var(--font-h); font-weight: 600; }
.v3 .cookie { border-radius: 16px; }

@media (min-width: 760px) {
  .v3 .calc__out { margin: 0 -22px -22px; padding: 22px; }
  .v3 .facts { gap: 16px; }
}
@media (min-width: 1080px) {
  /* шапка в два яруса, как у завода: сверху — графит (логотип, телефон, кнопка), снизу — бирюзовая полоса меню с тёмным текстом */
  .v3 { --hdr-h: 116px; }
  .v3 .hdr { box-shadow: none; background-color: var(--hdr-bg); background-image: linear-gradient(to top, var(--acc) 46px, transparent 46px); }
  .v3 .hdr__in { flex-wrap: wrap; row-gap: 0; min-height: 0; }
  .v3 .hdr__in > .logo, .v3 .hdr__in > .hdr__tel, .v3 .hdr__in > .hdr__cta { margin-top: 12px; margin-bottom: 12px; }
  .v3 .nav { order: 9; flex: 1 0 100%; display: flex; justify-content: space-between; align-items: center; height: 46px; margin: 0; padding: 0; background-color: var(--acc); }
  .v3 .nav a { color: #10282b; font: 600 15px/1 var(--font-h); }
  .v3 .nav a:hover { color: #10282b; text-decoration: underline; text-underline-offset: 6px; }
  .v3 .nav a[aria-current] { color: #10282b; box-shadow: inset 0 -3px 0 #10282b; }
  .v3 .calc__out { margin: 0; border-radius: 16px; padding: 24px; }
  .v3 .hero { padding: 48px 0 56px; }
}