/*
 * Вікна STEKO — стиль сайту. Мова креслення вікна: палітра матеріалів (білий ПВХ, антрацит RAL 7016, золотий дуб, скло),
 * тонкі лінії замість тіней, ціна — у «штампі» креслення. Шрифт Geologica (кирилиця), мобільний перш за все.
 */
:root {
  --pvc: #f5f6f4;          /* тло — білий ПВХ */
  --paper: #ffffff;
  --ink: #2e3438;          /* антрацит */
  --ink2: #454d52;
  --muted: #687176;
  --line: #d7dcde;         /* алюміній — тонкі лінії */
  --line2: #b8c0c3;
  --oak: #9a5a24;          /* золотий дуб — дія */
  --oak-d: #7c4519;
  --oak-bg: #f6ece2;
  --glass: #e2eef3;        /* скло */
  --glass-2: #c9dfe8;
  --glass-ink: #2a6683;    /* посилання */
  --ok: #1f7a4d; --warn: #8a5300; --warn-bg: #fff4e0; --err: #b42318;
  --r: 10px; --r-s: 8px;
  --f: "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --grid: linear-gradient(var(--glass-2) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--glass-2) 1px, transparent 1px) 0 0 / 24px 24px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pvc); color: var(--ink); font: 400 16px/1.6 var(--f); font-variation-settings: "SHRP" 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (min-width: 900px) { body { font-size: 17px; } }
img, svg { max-width: 100%; }
a { color: var(--glass-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--oak-d); }
h1, h2, h3, .h3 { font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 .5em; font-variation-settings: "SHRP" 60; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.3rem); font-weight: 750; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem); }
h3, .h3 { font-size: 1.15rem; display: block; }
p { margin: 0 0 1em; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) { .wrap { padding: 0 28px; } }
.muted { color: var(--muted); } .small { font-size: .875rem; } .nowrap { white-space: nowrap; } .center { text-align: center; }
.lead { font-size: 1.12rem; color: var(--ink2); max-width: 62ch; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 8px; z-index: 99; background: #fff; padding: 8px 12px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--oak); outline-offset: 2px; }
.price, .big-price, output, .tbl td.nowrap, .stamp td { font-variant-numeric: tabular-nums; }

/* кнопки й поля */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1px solid var(--oak); border-radius: var(--r-s);
  background: var(--oak); color: #fff; font: 600 1rem var(--f); cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s; }
.btn:hover { background: var(--oak-d); border-color: var(--oak-d); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line2); }
.btn.ghost:hover { border-color: var(--ink); background: var(--paper); color: var(--ink); }
.btn.ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn.ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn.sm { min-height: 38px; padding: 0 14px; font-size: .92rem; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }
.fld { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; border: 0; padding: 0; min-width: 0; }
.fld > span { font-size: .85rem; font-weight: 500; color: var(--ink2); }
input, select, textarea, button { font: inherit; color: inherit; }
.fld input, .fld select, .fld textarea, .adm select, .sec-row select, .sec-row input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--r-s); background: var(--paper); transition: border-color .15s, box-shadow .15s; }
.fld textarea { min-height: 96px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .sec-row :is(select, input):focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px var(--glass-2); }
input[type=number] { font-variant-numeric: tabular-nums; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .row3 .fld:last-child { grid-column: 1 / -1; }
@media (min-width: 560px) { .row3 { grid-template-columns: 1fr 1fr 1.4fr; } .row3 .fld:last-child { grid-column: auto; } }
.tgl { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 14px; cursor: pointer; }
.tgl input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--oak); flex: none; }
.seg { display: flex; flex-wrap: wrap; border: 1px solid var(--line2); border-radius: var(--r-s); overflow: hidden; margin: 0 0 14px; background: var(--paper); }
.seg label { flex: 1 1 auto; } .seg label + label { border-left: 1px solid var(--line); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; text-align: center; padding: 11px 12px; font-weight: 500; font-size: .93rem; color: var(--ink2); cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; }
.seg input:checked + span { background: var(--ink); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--oak); outline-offset: -3px; }
.wrapy span { white-space: normal; }
.chip { display: inline-block; padding: 2px 9px; border: 1px solid var(--line2); border-radius: 999px; color: var(--ink2); font-size: .78rem; white-space: nowrap; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.err { color: var(--err); } .ok { color: var(--ok); font-weight: 600; }
pre.code, .code { display: block; background: var(--ink); color: #e7ecee; padding: 14px 16px; border-radius: var(--r-s); overflow-x: auto; font: 13px/1.55 ui-monospace, Consolas, monospace; white-space: pre; }
code { background: var(--glass); padding: 1px 6px; border-radius: 4px; font-size: .9em; }

/* шапка */
.hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--pvc) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.hdr-in { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 1.08rem; text-decoration: none; white-space: nowrap; font-variation-settings: "SHRP" 60; }
.logo:hover { color: var(--ink); }
.nav { display: none; }
.nav a { color: var(--ink2); font-weight: 500; padding: 8px 10px; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); border-bottom-color: var(--oak); }
.nav .nav-calc { color: var(--oak); font-weight: 600; }
.hdr-act { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.reg-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2); background: transparent; border-radius: 999px; padding: 7px 12px; font-size: .85rem; font-weight: 500; color: var(--ink2); cursor: pointer; max-width: 170px; }
.reg-btn:hover { border-color: var(--ink); }
.reg-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel { display: none; font-weight: 600; color: var(--ink); white-space: nowrap; text-decoration: none; }
.cart-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); }
.cart-btn b { position: absolute; top: 3px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--oak); color: #fff; font-size: .72rem; display: grid; place-items: center; }
.burger { display: grid; gap: 5px; width: 44px; height: 44px; place-content: center; border: 0; background: transparent; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
.nav-open .nav { display: flex; flex-direction: column; position: fixed; inset: 64px 0 auto 0; background: var(--paper); padding: 8px 16px 18px; border-bottom: 1px solid var(--line); gap: 0; }
.nav-open .nav a { padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
.nav-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-open .burger span:nth-child(2) { opacity: 0; } .nav-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1100px) { .nav { display: flex; gap: 2px; margin-left: 10px; } .burger { display: none; } .tel { display: inline; } }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 14px 0 0; margin: 0; font-size: .85rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 4px; color: var(--line2); }
.crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* секції */
.sec { padding-top: 34px; padding-bottom: 34px; }
@media (min-width: 900px) { .sec { padding-top: 48px; padding-bottom: 48px; } }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 10px; } .sec-h h2 { margin: 0; }
.sec-note { margin: 0 0 16px; font-size: .92rem; max-width: 80ch; }
.page-h { padding-top: 22px; } .narrow { max-width: 820px; }
.two { display: grid; gap: 20px; } @media (min-width: 900px) { .two { grid-template-columns: 1fr 1fr; align-items: start; } }
.price { font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.big-price { display: block; font-size: 2.1rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }

/* креслення */
svg.drw { display: block; }
.drw text { font-family: var(--f); }

/* герой: живе креслення + штамп */
.hero { border-bottom: 1px solid var(--line); }
.hero-in { display: grid; gap: 22px; padding-top: 26px; padding-bottom: 32px; }
@media (min-width: 1000px) { .hero-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; padding-top: 48px; padding-bottom: 56px; } }
.hero h1 { max-width: 14ch; }
.hero-facts { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 6px; color: var(--ink2); }
.hero-facts li { padding-left: 18px; position: relative; }
.hero-facts li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border: 1.5px solid var(--oak); }
.board { background: var(--paper); border: 1px solid var(--line2); border-radius: var(--r); padding: 12px; display: grid; gap: 12px; }
@media (min-width: 640px) { .board { padding: 16px; } }
.board-draw { background: var(--grid), var(--glass); background-blend-mode: normal; border: 1px solid var(--glass-2); border-radius: var(--r-s); padding: 10px; display: grid; place-items: center; min-height: 230px; }
.board-draw svg { width: 100%; height: auto; max-height: 360px; transition: opacity .2s; }
.board-draw.busy svg { opacity: .5; }
.board-ctl .fld { margin-bottom: 0; }
.qc-tpl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
@media (max-width: 520px) { .qc-tpl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qc-opt input { position: absolute; opacity: 0; pointer-events: none; }
.qc-opt span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; text-align: center; height: 100%; background: var(--paper); transition: border-color .15s, background-color .15s; }
.qc-opt svg { height: 46px; width: auto; }
.qc-opt i { font-style: normal; font-size: .72rem; color: var(--ink2); line-height: 1.2; }
.qc-opt input:checked + span { border-color: var(--ink); background: var(--glass); }
.qc-opt input:focus-visible + span { outline: 2px solid var(--oak); outline-offset: 1px; }
.board-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 420px) { .board-act { grid-template-columns: 1fr; } }

/* штамп креслення: таблиця з рамкою, ціна — найбільша клітинка */
.stamp { width: 100%; border-collapse: collapse; border: 1.5px solid var(--ink); font-size: .92rem; }
.stamp th, .stamp td { border: 1px solid var(--ink); padding: 6px 10px; text-align: left; vertical-align: middle; }
.stamp th { width: 30%; font-weight: 500; color: var(--ink2); font-size: .8rem; background: var(--pvc); }
.stamp-price td { padding: 8px 10px; }
.stamp-price output { font-size: 1.85rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.stamp-price td small { display: block; color: var(--muted); font-size: .8rem; }

/* каталог виробів — аркуш з клітинками */
.catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line2); border-left: 1px solid var(--line2); background: var(--paper); }
@media (min-width: 720px) { .catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cat-cell { display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 16px; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); color: var(--ink); text-decoration: none; transition: background-color .15s; }
.cat-cell:hover { background: var(--glass); color: var(--ink); }
.cat-img { position: relative; aspect-ratio: 4 / 3; margin-bottom: 10px; }
.cat-img > svg, .cat-img > .set { position: absolute; inset: 0; width: 100%; height: 100%; }
.cat-cell b { font-weight: 600; line-height: 1.3; }
.cat-cell .price { margin-top: 6px; }
.set { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 100%; } .set svg { height: 100%; width: auto; min-width: 0; }

/* старі сітки карток (сторінки серій, груп) — у тому ж стилі аркуша */
.grid { display: grid; gap: 0; }
.tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line2); border-left: 1px solid var(--line2); background: var(--paper); }
@media (min-width: 720px) { .tpl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .tpl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tpl { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); border-radius: 0; padding: 0; background: transparent; transition: background-color .15s; }
a.tpl:hover { background: var(--glass); color: var(--ink); }
.tpl-img { position: relative; aspect-ratio: 4 / 3; margin: 14px 14px 0; }
.tpl-img > svg, .tpl-img > .set { position: absolute; inset: 0; width: 100%; height: 100%; }
.tpl-b { padding: 10px 14px 16px; display: flex; flex-direction: column; gap: 2px; flex: 1; } .tpl-b b { font-weight: 600; line-height: 1.3; }
.tpl-b .price { margin-top: 6px; } .tpl-b .btn { margin-top: 10px; align-self: flex-start; }
.ser-grid { grid-template-columns: 1fr; gap: 12px; } @media (min-width: 700px) { .ser-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .ser-grid { grid-template-columns: repeat(3, 1fr); } }
.ser { display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; transition: border-color .15s; }
a.ser:hover { border-color: var(--ink); color: var(--ink); }
.ser-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ser-top b { font-size: 1.08rem; }
.ser p { margin: 0; } .ser .price { margin-top: auto; }

/* профілі: переріз */
.prof { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line2); }
.prof li { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.prof-name { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; } .prof-name b { font-weight: 650; font-size: 1.05rem; } .prof-name:hover b { color: var(--oak-d); }
.prof-cut { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.cut { display: flex; width: calc(var(--w) * .62); min-width: 60px; height: 22px; border: 2px solid var(--ink); background: var(--paper); }
.cut i { flex: 1; border-right: 1px solid var(--ink2); } .cut i:last-child { border-right: 0; }
.cut i:nth-child(even) { background: var(--glass); }
.prof-use { grid-column: 1 / -1; }
.prof .price { grid-column: 2; grid-row: 1; text-align: right; }
@media (min-width: 900px) {
  .prof li { grid-template-columns: 220px minmax(0, 1fr) 260px 150px; }
  .prof-cut, .prof-use { grid-column: auto; }
  .prof .price { grid-column: auto; grid-row: auto; }
  .cut { width: calc(var(--w) * .7); }
}

/* смуга «Як замовити» — послідовність */
.band { background: var(--ink); color: #dfe5e8; }
.steps { padding-top: 40px; padding-bottom: 44px; } .steps h2 { color: #fff; }
.steps ol { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 0; counter-reset: s; }
@media (min-width: 860px) { .steps ol { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: s; padding: 16px 16px 16px 0; border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 860px) { .steps li { padding: 18px 22px 0 0; } }
.steps li::before { content: counter(s); font-size: 2.2rem; font-weight: 750; line-height: 1; color: #c98a4b; font-variation-settings: "SHRP" 100; margin-bottom: 6px; }
.steps li b { color: #fff; } .steps li span { color: #b6c0c5; font-size: .95rem; }
.promo { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; padding: 20px 0; border-top: 2px solid var(--ink); }
.promo b { font-size: 1.3rem; font-variation-settings: "SHRP" 60; } .promo span { color: var(--ink2); } .promo .lnk { color: var(--oak); font-weight: 600; margin-top: 6px; }
.promo:hover b { color: var(--oak-d); }
.reg-cols { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 24px; } @media (min-width: 800px) { .reg-cols { columns: 4; } }
.reg-cols li { padding: 5px 0; break-inside: avoid; border-bottom: 1px solid var(--line); }
.reg-cols a { color: var(--ink); text-decoration: none; } .reg-cols a:hover { color: var(--oak-d); text-decoration: underline; }
.reg-cloud { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.reg-cloud a { padding: 4px 0; color: var(--glass-ink); }
.ai-band { background: var(--ink); color: #fff; }
.ai { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; padding-bottom: 28px; }
.ai b { font-size: 1.15rem; } .ai p { color: #b6c0c5; margin: 6px 0 0; max-width: 70ch; }

/* FAQ, таблиці */
.faq { max-width: 900px; border-top: 1px solid var(--line2); }
.faq details { border-bottom: 1px solid var(--line2); }
.faq summary { cursor: pointer; padding: 16px 32px 16px 0; font-weight: 600; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 4px; top: 22px; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 26px; }
.faq-a p { color: var(--ink2); margin: 0 0 16px; max-width: 75ch; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line2); background: var(--paper); border-radius: var(--r-s); }
.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tbl th, .tbl td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th { font-size: .82rem; font-weight: 600; color: var(--muted); background: var(--pvc); border-bottom-color: var(--line2); }
.tbl tbody tr:last-child td, .tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: #fafbfa; }
.tbl.kv { background: var(--paper); border: 1px solid var(--line2); border-radius: var(--r-s); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.tbl.kv th { width: 42%; color: var(--muted); font-weight: 500; }
.facts { display: flex; flex-wrap: wrap; gap: 0; margin: 8px 0 20px; border: 1.5px solid var(--ink); width: fit-content; max-width: 100%; background: var(--paper); }
.facts div { padding: 10px 16px; display: flex; flex-direction: column; border-right: 1px solid var(--ink); min-width: 110px; }
.facts div:last-child { border-right: 0; }
.facts b { font-size: 1.15rem; } .facts span { font-size: .8rem; color: var(--muted); }
@media (max-width: 560px) { .facts { width: 100%; } .facts div { flex: 1 1 45%; border-bottom: 1px solid var(--ink); } }
.sw-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; }
.sw i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); }
.tpl-hero { display: grid; gap: 24px; align-items: center; } @media (min-width: 860px) { .tpl-hero { grid-template-columns: .95fr 1.05fr; } }
.tpl-draw { background: var(--grid), var(--glass); border: 1px solid var(--glass-2); border-radius: var(--r); padding: 14px; } .tpl-draw svg, .tpl-draw .set { display: flex; width: 100%; height: auto; max-height: 480px; }
.howto { padding-left: 1.2em; display: grid; gap: 10px; color: var(--ink2); max-width: 75ch; }
.obl-grid { display: grid; gap: 0; border-top: 1px solid var(--line2); } @media (min-width: 700px) { .obl-grid { grid-template-columns: repeat(2, 1fr); column-gap: 32px; } } @media (min-width: 1080px) { .obl-grid { grid-template-columns: repeat(3, 1fr); } }
.obl { padding: 16px 0; border-bottom: 1px solid var(--line); }
.obl h2 { margin-bottom: 4px; } .obl h2 a { color: var(--ink); text-decoration: none; } .obl h2 a:hover { color: var(--oak-d); }
.obl ul { list-style: none; padding: 0; margin: 10px 0 0; columns: 2; font-size: .93rem; } .obl li { padding: 2px 0; break-inside: avoid; }
.local { border-left: 3px solid var(--oak); padding-left: 16px; } .local p { max-width: 75ch; color: var(--ink2); }
.local-contact { font-weight: 600; } .local-contact span { color: var(--muted); font-weight: 400; margin-left: 10px; }

/* калькулятор */
.calc-h { padding-top: 18px; } .calc-h h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); margin-bottom: 4px; }
.calc { display: grid; gap: 18px; padding-bottom: 110px; }
@media (max-width: 979px) { .calc-side { order: -1; } .calc-draw svg { max-height: 300px; } .calc-sum .btn { display: none; } }
@media (min-width: 980px) { .calc { grid-template-columns: minmax(0, 1fr) 440px; align-items: start; padding-bottom: 40px; } .calc-side { position: sticky; top: 80px; } .mbar { display: none !important; } }
.step { border: 0; border-top: 1px solid var(--line2); background: transparent; padding: 18px 0 6px; margin: 0; min-width: 0; }
.step legend { float: left; width: 100%; display: flex; align-items: baseline; gap: 10px; font-weight: 650; font-size: 1.08rem; margin-bottom: 12px; padding: 0; font-variation-settings: "SHRP" 60; }
.step legend + * { clear: both; }
.step legend span { color: var(--oak); font-weight: 750; font-size: 1.2rem; }
.tpl-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
.tpl-pick label input, .ser-pick label input, .glass-pick label input, .sw-pick label input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-pick label span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; text-align: center; height: 100%; font-size: .78rem; line-height: 1.2; color: var(--ink2); background: var(--paper); transition: border-color .15s, background-color .15s; }
.tpl-pick svg, .tpl-pick .set { height: 60px; width: auto; }
.tpl-pick input:checked + span, .ser-pick input:checked + span, .glass-pick input:checked + span { border-color: var(--ink); background: var(--glass); }
.tpl-pick input:focus-visible + span, .ser-pick input:focus-visible + span, .glass-pick input:focus-visible + span, .sw-pick input:focus-visible + span { outline: 2px solid var(--oak); outline-offset: 1px; }
.ser-pick { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ser-pick label span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; height: 100%; background: var(--paper); transition: border-color .15s, background-color .15s; }
.ser-pick b { font-weight: 600; } .ser-pick small { color: var(--muted); font-size: .8rem; }
.ser-pick label.off span { opacity: .4; cursor: not-allowed; }
.glass-pick { display: grid; gap: 6px; margin-bottom: 12px; }
.glass-pick label span { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; background: var(--paper); transition: border-color .15s, background-color .15s; }
.glass-pick b { font-weight: 600; } .glass-pick small { grid-column: 1 / -1; color: var(--muted); font-size: .82rem; } .glass-pick em { font-style: normal; color: var(--muted); font-size: .82rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sw-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-pick label span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: .82rem; background: var(--paper); transition: border-color .15s; }
.sw-pick label span i { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); flex: none; }
.sw-pick input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sw-pick .grp { width: 100%; font-size: .8rem; color: var(--muted); margin-top: 6px; }
.secs { display: grid; gap: 6px; }
.sec-row { display: grid; grid-template-columns: auto 1fr 110px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.sec-row b { font-size: .85rem; font-weight: 500; color: var(--muted); } .sec-row select, .sec-row input { min-height: 42px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line2); border-radius: var(--r-s); overflow: hidden; width: max-content; background: var(--paper); }
.stepper button { width: 44px; height: 46px; border: 0; background: var(--pvc); font-size: 1.3rem; cursor: pointer; }
.stepper button:hover { background: var(--glass); }
.stepper input { width: 64px; text-align: center; border: 0 !important; min-height: 46px; border-radius: 0 !important; box-shadow: none !important; }
.fld.qty { max-width: 220px; }
.calc-card { padding: 12px; border-color: var(--line2); }
.calc-draw { background: var(--grid), var(--glass); border: 1px solid var(--glass-2); border-radius: var(--r-s); padding: 10px; min-height: 220px; display: grid; place-items: center; }
.calc-draw svg { width: 100%; height: auto; max-height: 380px; transition: opacity .2s; }
.calc-draw.busy svg { opacity: .5; }
.calc-sum { display: flex; align-items: stretch; gap: 10px; margin: 12px 0 8px; flex-wrap: wrap; }
.calc-sum > div { flex: 1 1 200px; border: 1.5px solid var(--ink); padding: 8px 12px; }
.calc-sum .btn { align-self: center; }
.warn { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.warn li { background: var(--warn-bg); color: var(--warn); border-left: 3px solid var(--warn); padding: 8px 10px; font-size: .88rem; }
.specs { border-top: 1px solid var(--line); margin-top: 6px; }
.specs summary { cursor: pointer; font-weight: 600; padding: 10px 2px; }
.specs dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 4px 2px 10px; font-size: .9rem; }
.specs dt { color: var(--muted); } .specs dd { margin: 0; font-weight: 500; }
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--paper); border-top: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.mbar div { display: flex; flex-direction: column; line-height: 1.2; } .mbar b { font-size: 1.45rem; font-weight: 750; font-variant-numeric: tabular-nums; }

/* кошик */
.cart { display: grid; gap: 18px; } @media (min-width: 960px) { .cart { grid-template-columns: minmax(0, 1fr) 370px; align-items: start; } .cart-tot { position: sticky; top: 80px; } }
.cart-list { display: grid; gap: 0; border-top: 1px solid var(--line2); }
.ci { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line2); }
.ci-img { background: var(--grid), var(--glass); border: 1px solid var(--glass-2); border-radius: var(--r-s); display: grid; place-items: center; padding: 6px; align-self: start; } .ci-img svg { width: 100%; height: auto; max-height: 120px; }
.ci h3 { font-size: 1.02rem; margin: 0 0 4px; } .ci .small { color: var(--muted); }
.ci-bot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ci-bot b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.ci-bot .stepper button { width: 38px; height: 38px; } .ci-bot .stepper input { width: 46px; min-height: 38px; }
.ci-act { display: flex; gap: 14px; font-size: .88rem; margin-top: 6px; } .ci-act button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 0; } .ci-act button:hover { color: var(--err); }
.row-b { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.row-b.big { font-size: 1.2rem; border-top: 1.5px solid var(--ink); margin-top: 6px; padding-top: 12px; } .row-b b { font-variant-numeric: tabular-nums; }
.cart-tot { border-color: var(--line2); } .cart-tot .btn { margin-top: 8px; }
.mini-list { display: grid; gap: 6px; margin: 10px 0; font-size: .9rem; } .mini-list div { display: flex; justify-content: space-between; gap: 10px; }
.form { display: block; } .form .btn { margin-top: 4px; }
.ok-ico { margin: 10px auto 12px; }

/* вибір області */
.sheet { position: fixed; inset: 0; z-index: 80; background: rgba(46,52,56,.5); display: flex; align-items: flex-end; justify-content: center; }
.sheet-box { background: var(--paper); width: 100%; max-width: 760px; max-height: 85vh; overflow: auto; border-radius: 14px 14px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
@media (min-width: 720px) { .sheet { align-items: center; } .sheet-box { border-radius: var(--r); } }
.sheet-h { display: flex; align-items: center; justify-content: space-between; } .sheet-h b { font-size: 1.15rem; }
.x { width: 40px; height: 40px; border: 1px solid var(--line2); background: transparent; border-radius: var(--r-s); font-size: 1.4rem; cursor: pointer; }
.reg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 16px; }
.reg-list a { padding: 10px 2px; color: var(--ink); border-bottom: 1px solid var(--line); text-decoration: none; }
.reg-list a:hover, .reg-list a.on { color: var(--oak-d); } .reg-list a.on { font-weight: 600; }

/* підвал */
.ftr { background: var(--ink); color: #b6c0c5; margin-top: 0; }
.ftr a { color: #e7ecee; text-decoration: none; } .ftr a:hover { color: #fff; text-decoration: underline; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .92rem; }
.ftr-grid { display: grid; gap: 26px; padding-top: 40px; padding-bottom: 34px; } @media (min-width: 860px) { .ftr-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.ftr-brand { color: #fff; font-weight: 700; font-size: 1.15rem; margin-bottom: 8px; } .ftr-h { color: #fff; font-weight: 600; margin-bottom: 10px; }
.ftr .muted { color: #95a0a6; } .ftr-bot { border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; padding-bottom: 18px; font-size: .85rem; }

/* адмінка */
.adm .hdr-in { justify-content: space-between; } .adm-nav { display: flex; gap: 16px; flex-wrap: wrap; }
.fld.chk { flex-direction: row; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; }            /* галочка / перемикач поруч із підписом */
.fld.chk input { width: 20px; height: 20px; min-height: 0; padding: 0; flex: none; accent-color: var(--oak); }
.adm details { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); }
.adm details > summary { cursor: pointer; padding: 4px 0; } .adm details[open] > summary { margin-bottom: 10px; }
.st-new { border-color: #d9a441; color: #7a5200; } .st-done { border-color: #5aa77d; color: #1f6b44; } .st-cancel { border-color: #d98b85; color: #9b2a21; }

@media (max-width: 420px) {
  .row2 { grid-template-columns: 1fr; } .reg-btn span { max-width: 90px; }
  .ci { grid-template-columns: 84px 1fr; } .sec-row { grid-template-columns: 1fr 1fr; } .sec-row b { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.prof .price small { display: block; font-size: .78rem; font-weight: 400; color: var(--muted); }
.logo-mark { flex: none; }
@media (max-width: 599px) { .hero-facts { display: none; } .hero h1 { font-size: 2rem; } .hero .lead { font-size: 1rem; } }
@media (max-width: 420px) { .hdr-in { gap: 6px; } .hdr-act { gap: 0; } .logo { font-size: 1rem; gap: 7px; } .reg-btn { padding: 6px 9px; } .reg-btn span { max-width: 62px; } .cart-btn, .burger { width: 40px; } }
.prof-about { display: grid; gap: 24px; } @media (min-width: 900px) { .prof-about { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.prof-text p { max-width: 72ch; color: var(--ink2); }
.prof-lists h3 { margin-top: 0; }
.ticklist { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 6px; }
.ticklist li { position: relative; padding-left: 20px; color: var(--ink2); }
.ticklist li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border: 1.5px solid var(--oak); }
/* перемикач «Як у житті / Креслення» */
.view-tg { display: inline-flex; border: 1px solid var(--line2); border-radius: 999px; overflow: hidden; background: var(--paper); justify-self: start; margin-bottom: 8px; }
.view-tg input { position: absolute; opacity: 0; pointer-events: none; }
.view-tg span { display: block; padding: 6px 14px; font-size: .85rem; font-weight: 500; color: var(--ink2); cursor: pointer; }
.view-tg input:checked + span { background: var(--ink); color: #fff; }
.view-tg input:focus-visible + span { outline: 2px solid var(--oak); outline-offset: -3px; }
.board-draw.is-real, .calc-draw.is-real { background: #e4e0da; padding: 0; overflow: hidden; border-color: var(--line2); }
.board-draw.is-real svg, .calc-draw.is-real svg { max-height: 420px; }
/* смуга «перегляд теми» (лише в браузері адміністратора, ?tema=…) */
.tema-bar { position: relative; z-index: 60; background: #111; color: #fff; font: 500 .86rem/1.4 system-ui, sans-serif; text-align: center; padding: 8px 12px; }
.tema-bar a { color: #fff; font-weight: 700; margin: 0 4px; }