/* Сторінка «Ціни», варіант A «Слайсер» (redesign-2026-10/prices, build.py → a-slicer.html).
   Згенеровано docs/plans/prices-port.py — правити макет і перезбирати. Спільне: ціни за матеріалами, елементи калькулятора, приклади, чинники, кроки, FAQ, статті, підвал. Токени — ../blog/base.css */
:root { --pla: #F0560F; --petg: #109C92; --tpu: #5B5FC7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pla: #FF6A24; --petg: #2BC4B8; --tpu: #8E92F2; } }
:root[data-theme="dark"] { --pla: #FF6A24; --petg: #2BC4B8; --tpu: #8E92F2; }
html { scroll-padding-top: 6rem; }
.skip { position: fixed; left: 0.75rem; top: -3.75rem; z-index: 50; padding: 0.625rem 1rem; border-radius: 0.625rem; background: var(--ink); color: var(--bg); text-decoration: none; }
.skip:focus { top: 0.75rem; }
.nw { white-space: nowrap; }
.lead { margin: 0; max-width: 36em; font-size: 1.1875rem; line-height: 1.6; color: var(--muted); }
.sec-t { margin: 0 0 0.625rem; font: 800 clamp(1.625rem, 3vw, 2.5rem)/1.1 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.sec-lead { margin: 0 0 1.375rem; max-width: 46em; color: var(--muted); }
.more-link { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; text-decoration: none; }
.more-link::after { content: "→"; color: var(--accent); transition: translate .2s; }
.more-link:hover::after { translate: 0.25rem 0; }
.dot { display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: 0.5rem; border-radius: 0.25rem; vertical-align: 1px; }
.dot--pla { background: var(--pla); } .dot--petg { background: var(--petg); }
main > section, main > .duo { margin-top: clamp(3.5rem, 8vw, 6.875rem); }
main > .hero { margin-top: 0; }

/* Перший екран: заголовок і ціни за матеріалами */
.hero { display: grid; gap: 1.75rem; padding: clamp(1.75rem, 5vw, 3.75rem) 0 0; }
.hero h1 { margin: 0.875rem 0 1rem; font: 900 clamp(2.75rem, 6.4vw, 6.5rem)/.92 var(--display); letter-spacing: -.055em; text-wrap: balance; }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.pcard { display: grid; align-content: start; gap: 0.625rem; padding: clamp(1.125rem, 2.4vw, 1.75rem); border-radius: 1.5rem; background: var(--paper); border-top: 0.375rem solid var(--m); }
.pcard__t { margin: 0; font: 800 1.25rem/1.15 var(--display); }
.pcard__p { margin: 0; font: 900 clamp(2rem, 3.4vw, 3rem)/1 var(--display); letter-spacing: -.04em; color: var(--m); }
.pcard ul { display: grid; gap: 0.25rem; margin: 0.25rem 0 0.5rem; padding: 0; list-style: none; color: var(--muted); font-size: 0.9375rem; }
.pcard li::before { content: "·"; margin-right: 0.5rem; color: var(--m); font-weight: 900; }
.pcard .btn { justify-self: start; min-height: 2.625rem; font-size: 0.875rem; }

/* Калькулятор — спільні елементи */
.calc { display: grid; gap: 1.25rem; }
.calc[hidden] { display: none; }
.stage { position: relative; min-height: 16.25rem; touch-action: pan-y; }
.stage__view { position: absolute; inset: 0; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.stage canvas.is-drag { cursor: grabbing; }
.stage__ph { position: absolute; inset: 0; display: grid; place-content: center; gap: 0.25rem; text-align: center; color: var(--muted); }
.stage.is-3d .stage__ph { display: none; }
.stage__ph b { color: var(--ink); }
.stage__hint { position: absolute; left: 0.875rem; top: 0.75rem; z-index: 1; padding: 0.3125rem 0.6875rem; border-radius: 62.4375rem; background: color-mix(in srgb, var(--bg) 80%, transparent); font-size: 0.8125rem; color: var(--muted); pointer-events: none; }
.stage.is-over { outline: 0.1875rem dashed var(--accent); outline-offset: -0.625rem; }
.h-touch { display: none; } .stage:not(.is-3d) .h-touch { display: none !important; }
@media (pointer: coarse) { .h-fine { display: none; } .h-touch { display: inline; } } /* на телефоні файли не перетягують — модель крутять пальцем */
.cf { display: grid; gap: 0.375rem; }
.cf small { font-size: 0.8125rem; color: var(--muted); }
.file-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 3.125rem; padding: 0 1.25rem; border-radius: 62.4375rem; background: var(--ink); color: var(--bg); font-weight: 600; cursor: pointer; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn:has(input:focus-visible) { outline: 0.1875rem solid var(--accent); outline-offset: 0.1875rem; }
.samples { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--muted); }
.samples > span { flex-basis: 100%; }
.samples button { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.125rem 0 0.875rem; border: 1.5px solid var(--line); border-radius: 62.4375rem; background: transparent; color: var(--ink); font: 600 0.9375rem var(--display); cursor: pointer; }
.samples button svg { width: 1.375rem; height: 1.375rem; flex: none; color: var(--accent); }
.samples button[aria-pressed="true"] svg { color: inherit; }
.samples button:hover { border-color: var(--ink); }
.samples button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cmat { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 0.375rem; }
.cmat legend, .cqty label { padding: 0; margin-bottom: 0.375rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.375rem; }
.seg label { position: relative; display: grid; gap: 0.125rem; padding: 0.625rem 0.75rem; border-radius: 0.875rem; background: var(--bg); cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg b { font: 700 1rem/1 var(--display); }
.seg small { font-size: 0.75rem; color: var(--muted); }
.seg label:has(input:checked) { background: var(--ink); color: var(--bg); }
.seg label:has(input:checked) small { color: inherit; opacity: .7; }
.seg label:has(input:focus-visible) { outline: 0.1875rem solid var(--accent); outline-offset: 0.125rem; }
.seg label.is-off { cursor: not-allowed; opacity: .55; }
.cqty { display: grid; }
.qty { display: inline-flex; align-items: center; width: max-content; border: 1.5px solid var(--line); border-radius: 62.4375rem; background: var(--bg); }
.qty button { width: 2.75rem; height: 2.75rem; border: 0; background: none; color: var(--ink); font-size: 1.25rem; cursor: pointer; border-radius: 50%; }
.qty input { width: 4rem; height: 2.75rem; border: 0; background: none; color: var(--ink); text-align: center; font: 700 1.0625rem var(--display); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cnote { margin: 0; padding: 0.625rem 0.875rem; border-radius: 0.875rem; font-size: 0.875rem; line-height: 1.45; }
.cnote--min { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cnote--fit { background: color-mix(in srgb, #F2C200 22%, transparent); }
.cnote--msg { background: color-mix(in srgb, #D7262E 12%, transparent); }
.cnote--msg[data-kind="status"] { background: var(--paper); color: var(--muted); }
.cnote--msg[data-kind="info"] { background: color-mix(in srgb, var(--petg) 14%, transparent); }
.linkbtn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.cnote--approx { padding: 0; font-size: 0.8125rem; color: var(--muted); }

/* Поля заявки (як у формі контактів) */
.field { display: grid; gap: 0.375rem; }
.field > label { font-size: 0.8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea { width: 100%; font: inherit; color: var(--ink); padding: 0.75rem 0.875rem; border: 1.5px solid var(--line); border-radius: 0.875rem; background: var(--bg); resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
.field [aria-invalid="true"] { border-color: #C62828; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.hint { margin: 0; font-size: 0.8125rem; color: var(--muted); }
.err { margin: 0; font-size: 0.875rem; color: #C62828; }
:root[data-theme="dark"] .err { color: #FF8A80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .err { color: #FF8A80; } }
.demo { display: inline-block; margin-top: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 0.5rem; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); font-size: 0.8125rem; }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }
.cinfo { margin: 0; color: var(--muted); font-size: 0.875rem; overflow-wrap: anywhere; }
.cinfo b { color: var(--ink); }
.ccta { display: grid; gap: 0.375rem; }
.ccta .btn { justify-self: stretch; min-height: 3.25rem; font-size: 1rem; }
.ccta small { font-size: 0.8125rem; color: var(--muted); }
.formula { margin: 1.125rem 0 0; max-width: 60em; font-size: 0.9375rem; color: var(--muted); }
.formula b { color: var(--ink); font-weight: 600; }

/* Приклади цін */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ext { width: 100%; min-width: 35rem; border-collapse: collapse; font-size: 1rem; }
.ext th, .ext td { padding: 0.875rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.ext thead th { font: 600 0.8125rem/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1.5px solid var(--ink); }
.ext tbody th { font-weight: 600; }
.ext tbody th small { margin-left: 0.5rem; padding: 0.125rem 0.5rem; border-radius: 62.4375rem; background: color-mix(in srgb, var(--petg) 16%, transparent); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.ext td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ext td:nth-child(3), .ext td:nth-child(4) { font-weight: 700; }
.ex__note { margin: 1rem 0 0; max-width: 60em; color: var(--muted); }

/* Чинники й кроки */
.fac ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.fac li { padding: 1.375rem; border-radius: 1.375rem; background: var(--paper); }
.fac h3 { margin: 0 0 0.375rem; font: 800 1.1875rem/1.2 var(--display); }
.fac p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1.375rem; padding: 0; list-style: none; counter-reset: s; }
.steps li { padding: 1.375rem; border-radius: 1.375rem; border: 1.5px solid var(--line); }
.steps li span { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; margin-bottom: 0.875rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 800 1.0625rem var(--display); }
.steps h3 { margin: 0 0 0.375rem; font: 800 1.1875rem/1.2 var(--display); }
.steps p { margin: 0; color: var(--muted); font-size: 0.9375rem; }

/* FAQ + статті поруч */
.duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.875rem, 5vw, 5rem); align-items: start; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1.5px solid var(--ink); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.125rem 0; cursor: pointer; font: 600 1.125rem/1.35 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.625rem; line-height: .9; color: var(--accent); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.125rem; color: var(--muted); }
.arts ul { display: grid; gap: 0.625rem; margin: 0 0 1.125rem; padding: 0; list-style: none; }
.art { display: grid; grid-template-columns: 7rem minmax(0, 1fr); grid-template-rows: auto auto; gap: 0.125rem 1rem; align-items: center; padding: 0.5rem; border-radius: 1.125rem; text-decoration: none; transition: background-color .2s; }
.art:hover { background: var(--paper); }
.art img { grid-row: 1 / 3; width: 7rem; height: 4.375rem; object-fit: cover; border-radius: 0.75rem; background: var(--paper); }
.art__t { align-self: end; font-weight: 600; line-height: 1.3; }
.art small { align-self: start; font-size: 0.8125rem; color: var(--muted); }

/* Заклик (база — .cta з base.css) */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cta__p { margin: 0; grid-column: 1; color: color-mix(in srgb, var(--bg) 72%, transparent); }
.cta__b { grid-column: 2; grid-row: 1 / 3; display: flex; flex-wrap: wrap; gap: 0.625rem; }


@media (max-width: 900px) { .pcards, .fac ul, .steps ol, .duo { grid-template-columns: minmax(0, 1fr); } .cta { grid-template-columns: minmax(0, 1fr); } .cta__b { grid-column: 1; grid-row: auto; } }
@media (max-width: 520px) { .art { grid-template-columns: 5.5rem minmax(0, 1fr); } .art img { width: 5.5rem; height: 3.4375rem; } .seg small { font-size: 0.6875rem; } }


/* ——— A «Слайсер» ——— */
/* A «Слайсер»: калькулятор як вікно слайсера; модель стоїть на столі Bambu Lab A1 у справжньому масштабі */
.slicer { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(18.75rem, 1fr); border-radius: 1.625rem; overflow: clip; /* clip, не hidden: hidden робить вікно «скрол-контейнером» і ламає sticky-сцену */ background: var(--paper); border: 1.5px solid var(--line); }
.slicer__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 1.125rem; border-bottom: 1px solid var(--line); font: 600 0.8125rem/1.2 var(--mono); color: var(--muted); }
.slicer__bar i { width: 0.6875rem; height: 0.6875rem; border-radius: 50%; background: var(--line); }
.slicer__bar b { margin-left: 0.375rem; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slicer__bar span { margin-left: auto; padding: 0.1875rem 0.625rem; border-radius: 62.4375rem; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); }
.slicer .stage { min-height: 28.75rem; background: radial-gradient(90% 60% at 50% 30%, color-mix(in srgb, var(--ink) 5%, var(--bg)), var(--bg)); } /* ліва частина — на всю висоту блоку */
.slicer .stage__view { position: sticky; top: calc(4.5rem + 1px); height: min(calc(100svh - 4.5rem - 1px), 100%); min-height: 26.25rem; } /* модель на виду, поки гортається бокова панель */
.slicer__side { display: grid; align-content: start; gap: 1.125rem; padding: 1.25rem; border-left: 1px solid var(--line); }
.slicer__side h3 { margin: 0 0 -0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.slicer .res { margin: 0; display: grid; }
.slicer .res div { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.5625rem 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.slicer .res dt { color: var(--muted); } .slicer .res dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.slicer .res .is-big dd { font: 800 1.625rem/1 var(--display); letter-spacing: -.02em; color: var(--accent); }
.slicer .res dt small { display: block; font-size: 0.75rem; color: var(--muted); }
.slicer .res .is-sur dt { color: var(--ink); } .slicer .res .is-sur dd { color: var(--ink); }
.slicer .res .is-sur[hidden] { display: none; }
.view-btns { position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 2; display: flex; gap: 0.375rem; }
.view-btns button { width: 2.5rem; height: 2.5rem; border: 1.5px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--bg) 85%, transparent); color: var(--ink); font: 600 1.125rem/1 var(--display); cursor: pointer; }
.view-btns button:hover { border-color: var(--ink); }
.stage:not(.is-3d) .view-btns { display: none; }
.stage canvas:focus-visible { outline: 0.1875rem solid var(--accent); outline-offset: -0.1875rem; }
.order-open { width: 100%; min-height: 3.25rem; font-size: 1rem; }
.order { display: grid; gap: 0.75rem; padding-top: 0.375rem; border-top: 1px solid var(--line); }
.order__inner, .order__done { display: grid; gap: 0.75rem; }
.order h3 { margin: 0.375rem 0 0; font: 800 1.25rem/1.2 var(--display); letter-spacing: -.02em; text-transform: none; color: var(--ink); }
.order__file { margin: 0; padding: 0.625rem 0.875rem; border-radius: 0.875rem; background: var(--bg); font-size: 0.875rem; overflow-wrap: anywhere; }
.linkbtn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.order .btn[type="submit"] { min-height: 3.25rem; font-size: 1rem; }
@media (max-width: 900px) { .slicer { grid-template-columns: minmax(0, 1fr); } .slicer__side { border-left: 0; border-top: 1px solid var(--line); } .slicer .stage { min-height: 0; height: 21.25rem; } .slicer .stage__view { position: relative; top: 0; height: 100%; min-height: 0; } }

/* WP: заявка — форма Fluent №3 (.ff-skin, assets/rd/fluent.css) у панелі калькулятора; матеріал і розрахунок бере з калькулятора */
.slicer__side, .slicer__side > * { min-width: 0; } /* колонка 1fr не розростається під ширину полів форми */
.order { grid-template-columns: minmax(0, 1fr); } /* без цього auto-колонка росте під вміст форми Fluent (після завантаження файлу — на тисячі px) */
.order .ff-material { display: none; }
.order .frm-fluent-form fieldset { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; }
.order .frm-fluent-form fieldset > * { grid-column: 1 / -1; }
.order .ff-el-group:has(input[type="email"]), .order .ff-el-group:has(.ff-el-phone) { grid-column: auto; } /* email і телефон — в один рядок, як у макеті */
.order .ff-el-group:has(.ff_file_upload_holder) > .ff-el-input--label, .order .ff_file_upload_holder { display: none; } /* файл кладе калькулятор — видно лише список завантаженого */
@media (max-width: 520px) { .order .ff-el-group:has(input[type="email"]), .order .ff-el-group:has(.ff-el-phone) { grid-column: 1 / -1; } }
/* плаваюча кнопка Telegram (inc/seo-fixes.php) перекриває суми калькулятора — ховається, поки він на екрані (prices.js) */
.rd-prices .msg-float { transition: opacity .2s, visibility .2s; }
.rd-prices .msg-float.is-away { opacity: 0; visibility: hidden; pointer-events: none; }
.order .frm-fluent-form { margin: 0; }
.order .ff-el-group { margin-bottom: 0.75rem; }
.order .ff-t-container { gap: 0.75rem; }