/* ============================================================ Конфігуратор паркінгу — /konfihurator-parkinhu Підключається ТІЛЬКИ на цій сторінці (block extra_head). Власної палітри немає: усе на токенах сайту зі style.css (--ink/--ink-2/--bg/--soft/--panel/--card/--line/--line-2/ --accent/--accent-2/--accent-soft/--green), тому темна тема вмикається сама разом з data-theme на . Усі селектори під .pcfg — щоб не зачепити решту сайту і щоб перебити однойменні класи сайту там, де вони збігаються. ============================================================ */ .pcfg{ --pc-r:14px; /* картка — як .pcard/.ngc-feat сайту */ --pc-r-ctl:11px; /* контрол — як .icon-btn/.btn-eng */ --pc-r-lg:18px; /* велика панель — як .pform */ --pc-mono:'JetBrains Mono',monospace; --pc-shadow:0 12px 34px -20px rgba(0,0,0,.25); /* приглушений текст на тонованій підкладці вибраної картки: --ink-2 дає на --accent-soft лише 4.06:1, тому там темніший відтінок */ --pc-muted-on-accent:#5A6373; /* акцент як КОЛІР ТЕКСТУ: #3D6CFF на білому = 4.39:1, трохи темніший → 5.3:1 */ --pc-accent-text:color-mix(in srgb, var(--accent) 86%, #000); --pc-accent-solid:color-mix(in srgb, var(--accent) 90%, #000); --pc-on-accent:#fff; /* галочка в чекбоксі: на світлому акценті біла, на темному — темна */ --pc-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.3 8.4l3.1 3.1 6.3-6.6'/%3E%3C/svg%3E"); --pc-check-on-ink:var(--pc-check); --pc-danger:#B42318; --pc-danger-bg:#FEF3F2; --pc-danger-line:#F6C9C3; --pc-warn:#8A5A00; --pc-warn-bg:#FBF4E4; --pc-warn-line:#EBD9AE; --pc-info-bg:var(--panel); --pc-info-line:var(--line); color:var(--ink); font-size:15px; line-height:1.5; } [data-theme="dark"] .pcfg{ --pc-muted-on-accent:var(--ink-2); --pc-accent-text:var(--accent); --pc-accent-solid:var(--accent); --pc-on-accent:#0B0C0F; --pc-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230B0C0F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.3 8.4l3.1 3.1 6.3-6.6'/%3E%3C/svg%3E"); --pc-check-on-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230B0C0F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.3 8.4l3.1 3.1 6.3-6.6'/%3E%3C/svg%3E"); --pc-danger:#FF9A8E; --pc-danger-bg:#33201F; --pc-danger-line:#5A3330; --pc-warn:#F3C46B; --pc-warn-bg:#2F2717; --pc-warn-line:#4D4023; --pc-shadow:0 14px 34px -22px rgba(0,0,0,.7); } .pcfg *{box-sizing:border-box} .pcfg button,.pcfg input{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent} .pcfg [hidden]{display:none !important} .pcfg :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--pc-r-ctl)} .pcfg .num,.pcfg .card-sum,.pcfg .card-install,.pcfg .row-sum,.pcfg .row-qty,.pcfg .block-sum, .pcfg .sums-main,.pcfg .sums-uah,.pcfg .sums-row b,.pcfg .tab-cost,.pcfg .stepper-val, .pcfg .mb-once,.pcfg .pill-delta,.pcfg .elcard-qty,.pcfg .elcard-sums b,.pcfg .numinput, .pcfg .numhint,.pcfg .scene-fallback-meta,.pcfg .pc-pill{ font-family:var(--pc-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em; } .pcfg h2,.pcfg h3{margin:0;letter-spacing:-.025em;line-height:1.14;font-weight:600} /* намальовані іконки */ .pcfg .ico{ flex:none;width:20px;height:20px;display:block; fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; } .pcfg .ico-sm{width:18px;height:18px} .pcfg .ico-xs{width:16px;height:16px} /* ---------- кнопки (стилістика сайту: .btn-eng / .nf-b / .icon-btn) ---------- */ .pcfg .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:44px;padding:0 18px;border-radius:var(--pc-r-ctl); border:1px solid var(--line-2);background:var(--card);color:var(--ink); font-weight:600;font-size:14.5px;cursor:pointer;transition:.16s; } .pcfg .btn:hover{border-color:var(--ink);color:var(--ink)} .pcfg .btn-ghost{background:transparent} /* суцільна акцентна кнопка: білий на чистому #3D6CFF дає лише 4.39:1, тому в світлій темі акцент трохи темніший (5.6:1), а в темній — темний текст на світлому акценті (6.6:1) */ .pcfg .btn-primary{background:var(--pc-accent-solid);border-color:var(--pc-accent-solid);color:var(--pc-on-accent)} .pcfg .btn-primary:hover{background:#2f5be0;border-color:#2f5be0;color:#fff} [data-theme="dark"] .pcfg .btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:#0B0C0F} /* ---------- шапка сторінки ---------- */ .pc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:10px 0 24px} .pc-head h1{font-size:30px;font-weight:600;letter-spacing:-.025em;line-height:1.12} .pc-head .pc-sub{color:var(--ink-2);font-size:15px;margin-top:8px;max-width:62ch} .pc-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pcfg .pc-pill{font-size:12.5px;color:var(--ink-2);white-space:nowrap} @media(max-width:560px){.pc-head h1{font-size:24px}.pc-head{margin-bottom:18px}} /* ---------- вибір продукту: окремий рівень над конфігурацією ---------- */ .pcfg .prodbar{margin:0 0 20px} .pcfg .prodbar[hidden]{display:none} .pcfg .prodbar-label{ margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em; color:var(--ink-3);font-weight:500; } .pcfg .prodbar .prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;max-width:760px} /* ---------- каркас: рейка, дошка, кошторис ---------- */ .pc-layout{display:grid;gap:18px;align-items:start;padding-bottom:40px} @media(min-width:1024px){ .pc-layout{grid-template-columns:236px minmax(0,1fr) 400px} .pc-stage{display:none} } @media(min-width:768px) and (max-width:1023px){ .pc-layout{grid-template-columns:224px minmax(0,1fr)} } .pc-rail{display:flex;flex-direction:column;gap:16px;min-width:0} @media(min-width:1024px){.pc-rail{position:sticky;top:96px}} .pc-board{min-width:0} .rail-group{display:flex;flex-direction:column;gap:7px} .pcfg .rail-label{ font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3); font-weight:500;margin:0; } .pcfg .prods{display:flex;flex-direction:column;gap:7px} .pcfg .prod{min-height:auto;padding:11px 13px} .pcfg .scens{display:flex;flex-direction:column;gap:6px} .pcfg .scen{ display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;min-height:44px; background:var(--card);border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:.16s; } .pcfg .scen:hover{border-color:var(--ink-3)} .pcfg .scen.is-on{border-color:var(--accent);background:var(--accent-soft)} .pcfg .scen-title{font-size:13px;font-weight:600} .pcfg .scen-note{font-size:11px;color:var(--ink-2);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pcfg .scen.is-on .scen-note{color:var(--pc-muted-on-accent)} .pcfg .lanes{display:flex;flex-direction:column;gap:6px} .pcfg .rlane{ display:flex;align-items:center;gap:9px;min-height:42px;padding:9px 12px;text-align:left;width:100%; background:var(--card);border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:.16s; } .pcfg .rlane:hover{border-color:var(--ink-3)} .pcfg .rlane.is-on{border-color:var(--accent);background:var(--accent-soft)} .pcfg .rlane-name{flex:1 1 auto;min-width:0;font-size:13px;font-weight:600;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pcfg .rlane-cost{ flex:none;font-family:var(--pc-mono);font-size:11px;color:var(--ink-2); font-variant-numeric:tabular-nums;letter-spacing:-.01em;max-width:46%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .pcfg .rlane.is-on .rlane-cost{color:var(--pc-muted-on-accent)} .pcfg .rlane-x{ flex:none;font-family:var(--pc-mono);font-size:11.5px;font-weight:600;color:var(--ink-2); } .pcfg .rlane.is-on .rlane-x{color:var(--pc-muted-on-accent)} .pcfg .lane-qty{ display:inline-flex;align-items:center;gap:2px;flex:none; border:1px solid var(--line-2);border-radius:10px;background:var(--card);padding:2px; } .pcfg .lane-qty .stepbtn{width:34px;height:34px;border:0;background:transparent} .pcfg .lane-qty-val{ min-width:32px;text-align:center;font-family:var(--pc-mono);font-size:13px;font-weight:600; font-variant-numeric:tabular-nums; } .pcfg .addlane{ width:100%;min-height:40px;border:1px dashed var(--line-2);border-radius:10px;background:transparent; color:var(--ink-2);font-size:12.5px;cursor:pointer;transition:.16s; } .pcfg .addlane:hover{border-color:var(--accent);color:var(--accent)} @media(max-width:767px){ .pc-rail{display:contents} .rail-group.g-lanes{order:2} .pc-board{order:3} .rail-group.g-scen{order:4} .pcfg .prodbar .prods{grid-template-columns:1fr 1fr;gap:8px} } /* ---------- дошка: список як прайс ---------- */ .pcfg .gsec{margin-bottom:22px} .pcfg .gsec > .q-head{display:block;margin-bottom:10px} .pcfg .gsec > .q-head .q-hint{display:block;margin-top:2px} .pcfg .gsec .q{margin:0 0 12px} .pcfg .gsec .q:last-child{margin-bottom:0} .pcfg .sublabel{ display:block;margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em; color:var(--ink-3);font-weight:500; } .pcfg .gsec .cards{margin-top:0} .pcfg .q-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px} .pcfg .q-hint{font-size:11.5px;color:var(--ink-3)} .pcfg .caplist{ display:flex;flex-direction:column; background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden; } .pcfg .crow{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center; padding:11px 10px 11px 13px;border-top:1px solid var(--line);transition:background .14s ease; } .pcfg .crow:first-child{border-top:0} .pcfg .crow.is-new{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--pc-accent-solid)} .pcfg .crow.is-owned{background:var(--soft);box-shadow:inset 3px 0 0 var(--line-2)} .pcfg .crow-text{min-width:0;display:flex;flex-direction:column;gap:1px} .pcfg .crow-title{font-size:14px;font-weight:600;line-height:1.3} .pcfg .crow-meta{ font-size:11.5px;color:var(--ink-2);line-height:1.35; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .pcfg .crow.is-new .crow-meta{color:var(--pc-muted-on-accent)} .pcfg .crow-price{ justify-self:end;display:flex;align-items:baseline;gap:8px;white-space:nowrap; font-family:var(--pc-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em; } .pcfg .crow-sum{font-size:13.5px;font-weight:600;color:var(--ink)} .pcfg .crow-from{font-size:12.5px;color:var(--ink-3)} .pcfg .crow-work{font-size:11.5px;color:var(--ink-2)} .pcfg .crow.is-new .crow-work{color:var(--pc-muted-on-accent)} .pcfg .crow-bot{grid-column:1 / -1;display:flex;align-items:center;gap:8px} .pcfg .crow.is-blocked .crow-title{color:var(--ink-3)} .pcfg .crow-lock{justify-self:end;font-size:12px;color:var(--ink-3)} .pcfg .crow-variants{grid-column:1 / -1;margin-top:2px} .pcfg .crow-variants .part-subs{margin:0} .pcfg .crow-variants .sub-title{display:none} .pcfg .crow-variants .sub-opt{background:var(--card)} .pcfg .crow-seg{align-self:flex-start} .pcfg .crow-seg .seg-btn{min-height:30px;padding:0 12px;font-size:12px} .pcfg .crow-conf{ flex:none;margin-left:auto;min-height:32px;padding:0 12px; border:1px solid var(--line-2);border-radius:9px;background:var(--card); color:var(--ink);font-size:12.5px;font-weight:500;cursor:pointer;transition:.16s; } .pcfg .crow-conf:hover{border-color:var(--accent);color:var(--accent)} .pcfg .crow-conf:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media(max-width:600px){ /* назва і ціна зліва, «Налаштувати» справа, перемикач окремим рядком на всю ширину */ .pcfg .crow{grid-template-columns:minmax(0,1fr) auto;column-gap:10px} .pcfg .crow-text{grid-column:1;grid-row:1} .pcfg .crow-price{grid-column:1;grid-row:2;justify-self:start} .pcfg .crow-bot{display:contents} .pcfg .crow-conf{grid-column:2;grid-row:1 / span 2;align-self:start;margin:0} .pcfg .crow-seg{grid-column:1 / -1;grid-row:3;align-self:stretch;flex-wrap:nowrap} .pcfg .crow-seg .seg-btn{flex:1 1 0;min-height:38px;padding:0 6px} .pcfg .crow-variants{grid-row:4} } /* ---------- попап налаштувань ---------- */ .confmodal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px} .confmodal[hidden]{display:none} body.conf-open{overflow:hidden} .conf-backdrop{position:absolute;inset:0;background:rgba(10,11,14,.55);border:0;padding:0;cursor:pointer} .conf-box{ position:relative;width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column; background:var(--card);border:1px solid var(--line-2);border-radius:16px;overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.4); } .conf-head{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line)} .conf-x{ flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin:-4px -4px 0 0; border:1px solid transparent;border-radius:9px;background:transparent;color:var(--ink-2);cursor:pointer;transition:.16s; } .conf-x:hover{border-color:var(--line-2);color:var(--ink);background:var(--soft)} .conf-titles{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0} .conf-titles strong{font-size:16px;font-weight:600;letter-spacing:-.01em} .conf-titles span{font-size:12px;color:var(--ink-2);line-height:1.4} .conf-sum{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none; font-family:var(--pc-mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums} .conf-work{font-size:11px;font-weight:500;color:var(--ink-2)} .conf-body{padding:14px 18px;display:flex;flex-direction:column;gap:8px;overflow:auto} .conf-own{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:4px} .conf-own-label{font-size:12px;color:var(--ink-2)} .conf-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:13px 18px;border-top:1px solid var(--line);background:var(--soft)} @media(max-width:600px){ .confmodal{padding:0;align-items:flex-end} .conf-box{width:100%;max-height:92vh;border-radius:18px 18px 0 0} } @media(min-width:768px) and (max-width:1023px){ .pc-stage{grid-column:1 / -1} } .pc-settings{min-width:0} /* права колонка — липка, як .calc-out сайту */ .pc-panel{display:flex;flex-direction:column;gap:16px;min-width:0} @media(min-width:1024px){ .pc-panel{ position:sticky;top:96px; max-height:calc(100vh - 118px);overflow-y:auto;overscroll-behavior:contain; padding-right:4px; scrollbar-width:thin;scrollbar-color:var(--line-2) transparent; } .pc-panel::-webkit-scrollbar{width:10px} .pc-panel::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px;border:3px solid transparent;background-clip:content-box} .pc-panel::-webkit-scrollbar-track{background:transparent} .pc-panel > .scene-wrap{position:sticky;top:0;z-index:15;height:clamp(300px,34vh,360px);outline:8px solid var(--bg)} .pc-panel > .scene-wrap #scene{height:100%;width:100%;display:grid;place-items:center} .pc-panel > .scene-wrap #scene svg{width:auto;height:auto;max-width:100%;max-height:100%} .pc-panel > .scene-wrap > .scene-expand{display:inline-flex} } .pc-panel > *{flex:0 0 auto} .panel-head{display:none} /* ---------- секції і питання ---------- */ .pcfg .section-title{font-size:17px;font-weight:600;margin:28px 0 12px} .pc-settings > .presets-wrap > .section-title:first-child{margin-top:0} .pcfg .presets-wrap{margin-bottom:26px} .pcfg .chips{margin:0;gap:8px} .pcfg .chip{min-height:40px;font-size:14px} .pcfg .chip.is-on{background:var(--pc-accent-solid);border-color:var(--pc-accent-solid);color:var(--pc-on-accent);font-weight:600} [data-theme="dark"] .pcfg .chip.is-on{color:#0B0C0F;background:var(--accent);border-color:var(--accent)} .pcfg .preset-note{margin:10px 0 0;font-size:13.5px;color:var(--ink-2)} .pcfg .group{margin-bottom:26px} .pcfg .group-title{font-size:17px;font-weight:600;margin:28px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)} .pcfg .group:first-child .group-title{margin-top:0} .pcfg .q{margin-bottom:26px;scroll-margin-top:150px;border-radius:var(--pc-r);transition:box-shadow .4s ease} .pcfg .q.flash{box-shadow:0 0 0 3px var(--accent-soft),0 0 0 4px var(--accent)} .pcfg .q-title{font-size:15.5px;font-weight:600;margin:24px 0 4px} .pcfg .q:first-child .q-title{margin-top:0} .pcfg .q-note{margin:0 0 8px;font-size:13px;color:var(--ink-2)} .pcfg .cards{ display:flex;flex-direction:column;margin-top:12px; background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden; } .pcfg .cards > *{min-width:0;border-top:1px solid var(--line)} .pcfg .cards > *:first-child{border-top:0} .pcfg .cards .pc-card{border:0;border-radius:0;background:transparent;box-shadow:none !important} .pcfg .cards .optwrap.is-on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--pc-accent-solid)} .pcfg .cards .pc-card:hover{background:var(--soft)} .pcfg .cards .optwrap.is-on .pc-card:hover{background:transparent} /* дві картки в ряд — лише поки сторінка одноколонкова і місця вистачає. З 1024px ліворуч лишається ~660px, і на 320px картки назви ламаються посеред слова («Шлагбаум GANT 2S / Turbo»), тому там один стовпчик. */ /* ---------- картка опції ---------- */ .pcfg .pc-card{ position:relative;display:flex;gap:11px;align-items:flex-start; min-height:48px;padding:13px 14px; background:var(--card);border:1px solid var(--line);border-radius:var(--pc-r); cursor:pointer;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease; } .pcfg .pc-card:hover{border-color:var(--ink-3)} .pcfg .card-input,.pcfg .card-input-own{position:absolute;opacity:0;width:1px;height:1px} /* Позначки: чекбокс — квадрат із галочкою, радіо — коло з крапкою. Форма і символ різні, тож множинний вибір видно з першого погляду. */ .pcfg .card-mark,.pcfg .sub-mark{ flex:none;border:1.5px solid var(--line-2);background:var(--card); background-repeat:no-repeat;background-position:center; transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease; } .pcfg .card-mark{width:19px;height:19px;margin-top:1px;border-radius:50%} .pcfg .pc-card:has(input[type="checkbox"]) .card-mark{border-radius:6px} .pcfg .pc-card:hover .card-mark,.pcfg .subcard:hover .sub-mark{border-color:var(--accent)} .pcfg .pc-card:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft)} /* радіо: коло з акцентною крапкою всередині */ .pcfg .pc-card:has(input[type="radio"]:checked) .card-mark{ border-color:var(--accent);background-color:var(--accent); box-shadow:inset 0 0 0 4px var(--card); } /* чекбокс: залитий квадрат із галочкою */ .pcfg .pc-card:has(input[type="checkbox"]:checked) .card-mark, .pcfg .subcard:has(input:checked) .sub-mark{ border-color:var(--accent);background-color:var(--accent); background-image:var(--pc-check);background-size:13px 13px; } .pcfg .pc-card:has(input:focus-visible) .card-mark, .pcfg .subcard:has(input:focus-visible) .sub-mark{border-color:var(--accent)} .pcfg .pc-card:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px} /* у списку картка впритул до рамки — кільце всередину, інакше його обрізає */ .pcfg .cards .pc-card:has(input:focus-visible){outline-offset:-2px;border-radius:0} /* мишею — без кілець: фокус після перемальовування ставиться програмно */ body:not(.kbd) .pcfg :focus-visible, body:not(.kbd) .pcfg .pc-card:has(input:focus-visible), body:not(.kbd) .pcfg .subcard:has(input:focus-visible){outline:none} .pcfg .card-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .pcfg .card-title{font-weight:600;font-size:14.5px} .pcfg .card-note{font-size:12.5px;color:var(--ink-2);line-height:1.45} .pcfg .card-price{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right} .pcfg .card-sum{font-size:13px;font-weight:600;white-space:nowrap} .pcfg .card-sum.is-free,.pcfg .card-sum.is-minus{color:var(--ink-2)} .pcfg .card-sum.is-plus{color:var(--pc-accent-text)} .pcfg .card-sum.is-neutral{color:var(--ink)} .pcfg .card-install{font-size:11.5px;color:var(--ink-2);white-space:normal;text-wrap:balance} .pcfg .card-lock{font-size:11.5px;color:var(--pc-warn);font-weight:600} /* обидва числа в одному місці: ціна нового і ціна підключення наявного */ .pcfg .card-owned{ display:block;margin-top:3px;font-family:var(--pc-mono);font-size:11px;line-height:1.35; font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink-2); white-space:normal;text-wrap:balance; } /* колонка ціни не має розпирати картку на вузькому екрані */ .pcfg .card-price{max-width:44%} .pcfg .pc-card:has(input:checked) .card-owned{color:var(--pc-muted-on-accent)} /* перемикач «Це вже встановлено» — окремий блок, не плутається з субопціями */ .pcfg .subs-owned{margin-bottom:6px} /* «вже встановлено» — це не покупка, тому й не акцентний синій: позначка нейтральна (сіра), щоб не плуталась із «вибрано в проєкт» */ .pcfg .subcard.is-owned{border-style:dashed;background:var(--soft)} .pcfg .subcard.is-owned:hover{border-color:var(--ink-3);background:var(--panel)} .pcfg .subcard.is-owned:hover .sub-mark{border-color:var(--ink-3)} .pcfg .subcard.is-owned:has(input:checked){border-style:solid;border-color:var(--ink-3);background:var(--panel)} .pcfg .subcard.is-owned:has(input:checked) .sub-mark{ border-color:var(--ink-2);background-color:var(--ink-2);background-image:var(--pc-check-on-ink); } .pcfg .subcard.is-owned .sub-title{font-weight:600} .pcfg .subcard.is-owned:has(input:focus-visible){outline-color:var(--ink-2)} .pcfg .pc-card.is-disabled{opacity:.6;cursor:not-allowed} .pcfg .pc-card.is-disabled:hover{border-color:var(--line)} /* приглушений текст на вибраній (тонованій) картці */ .pcfg .pc-card:has(input:checked) .card-note, .pcfg .pc-card:has(input:checked) .card-install, .pcfg .pc-card:has(input:checked) .card-sum.is-minus, .pcfg .pc-card:has(input:checked) .card-sum.is-free, .pcfg .subcard:has(input:checked) .sub-note, .pcfg .subcard:has(input:checked) .card-install, .pcfg .subcard:has(input:checked) .card-sum.is-minus, .pcfg .subcard:has(input:checked) .card-sum.is-free, .pcfg .seg-btn.is-on .pill-delta, .pcfg .tab[aria-selected="true"] .tab-cost{color:var(--pc-muted-on-accent)} /* ---------- повзунок кількості ---------- */ .pcfg .numrow{display:flex;gap:12px;align-items:center;margin-top:12px} .pcfg .range{flex:1;min-width:0;height:44px;accent-color:var(--accent);cursor:pointer} .pcfg .numbox{display:flex;align-items:center;gap:6px;height:44px;padding:0 13px;background:var(--soft);border:1px solid var(--line-2);border-radius:10px} .pcfg .numbox:focus-within{border-color:var(--accent);background:var(--card)} .pcfg .numbox span{color:var(--ink-2);font-size:13px} .pcfg .numinput{width:66px;border:0;background:transparent;font-weight:600;color:var(--ink)} .pcfg .numinput:focus{outline:none} .pcfg .numhint{margin:6px 0 0;font-size:12.5px;color:var(--ink-2)} /* ---------- вкладки смуг ---------- */ .pcfg .tabsbar{display:flex;align-items:stretch;gap:8px;min-width:0;margin-bottom:14px;padding-bottom:2px;border-bottom:1px solid var(--line)} .pcfg .tabs{display:flex;gap:8px;flex:1 1 0;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:6px} .pcfg .tabs::-webkit-scrollbar{display:none} .pcfg .tab{ flex:0 0 auto;display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 14px; border:1px solid var(--line);border-radius:var(--pc-r-ctl);background:var(--card);color:var(--ink-2); cursor:pointer;transition:.16s; } .pcfg .tab:hover{border-color:var(--ink-3);color:var(--ink)} .pcfg .tab[aria-selected="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)} .pcfg .tab[aria-selected="true"] .tab-ico{color:var(--accent)} .pcfg .tab-ico{flex:none;color:var(--ink-2);display:flex} .pcfg .tab:hover .tab-ico{color:var(--ink)} .pcfg .tab-body{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0} .pcfg .tab-name{font-size:14px;font-weight:600;white-space:nowrap} .pcfg .tab-cost{font-size:11.5px;color:var(--ink-2);white-space:nowrap} .pcfg .tabadd{position:relative;flex:none;display:flex;align-items:flex-start} .pcfg .tabadd-btn{ display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--pc-r-ctl); border:1px dashed var(--line-2);background:var(--card);color:var(--ink-2);cursor:pointer;transition:.16s; } .pcfg .tabadd-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} .pcfg .addmenu{ position:absolute;top:54px;right:0;z-index:30;min-width:214px;display:flex;flex-direction:column;padding:6px; background:var(--card);border:1px solid var(--line-2);border-radius:var(--pc-r);box-shadow:var(--pc-shadow); } .pcfg .addmenu button{ display:flex;align-items:center;gap:9px;min-height:44px;padding:0 10px;border:0;border-radius:9px; background:transparent;color:var(--ink);font-size:14px;font-weight:500;text-align:left;cursor:pointer; } .pcfg .addmenu button:hover{background:var(--panel)} .pcfg .addmenu .ico{color:var(--ink-2)} .pcfg .addmenu button:hover .ico{color:var(--accent)} .pcfg .lanebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px} .pcfg .lane-name{ flex:1 1 200px;min-width:120px;max-width:280px;min-height:44px;padding:9px 13px; border:1px solid var(--line-2);border-radius:10px;background:var(--soft);color:var(--ink); font-weight:600;font-size:14.5px;font-family:inherit; } .pcfg .lane-name:hover{border-color:var(--ink-3)} .pcfg .lane-name:focus{border-color:var(--accent);background:var(--card);outline:none} .pcfg .lane-act{ display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border-radius:var(--pc-r-ctl); border:1px solid var(--line-2);background:var(--card);color:var(--ink);font-size:13.5px;font-weight:600; cursor:pointer;transition:.16s; } .pcfg .lane-act:hover:not(:disabled){border-color:var(--ink)} .pcfg .lane-act:disabled{opacity:.45;cursor:not-allowed} .pcfg .lane-act .ico{color:var(--ink-2)} .pcfg .lane-hint{font-size:12.5px;color:var(--ink-2)} .pcfg .pc-card.flash,.pcfg .optwrap.flash > .pc-card{box-shadow:0 0 0 3px var(--accent-soft),0 0 0 4px var(--accent)} @media(max-width:820px){.pcfg .tab{min-height:46px;padding:5px 12px}} /* на вузькому назва бере весь рядок, керування — окремим рядком під нею */ @media(max-width:600px){ .pcfg .lane-name{flex:1 1 100%} .pcfg .lane-qty{margin-right:auto} } /* ---------- субопції ---------- */ .pcfg .optwrap{display:flex;flex-direction:column} .pcfg .subs{display:flex;flex-direction:column;gap:6px;margin:4px 0 4px 26px;padding:0 0 2px} .pcfg .subcard{ /* relative обовʼязково: схований input усередині — absolute, і без цього він «тікає» до сторінки, а клік по мітці кидає браузер на її початок */ position:relative; display:flex;align-items:flex-start;gap:9px;min-height:44px;padding:9px 11px; border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;transition:.16s; } .pcfg .subcard:hover{border-color:var(--ink-3)} .pcfg .subcard input{position:absolute;opacity:0;width:1px;height:1px} .pcfg .sub-mark{width:17px;height:17px;margin-top:1px;border-radius:5px} .pcfg .subcard:has(input:checked){border-color:var(--accent);background:var(--accent-soft)} .pcfg .subcard:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px} .pcfg .sub-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .pcfg .sub-title{font-size:13.5px;font-weight:600} .pcfg .sub-note{font-size:11.5px;color:var(--ink-2);line-height:1.4} .pcfg .sub-price{flex:none;display:flex;flex-direction:column;align-items:flex-end;text-align:right} .pcfg .sub-price .card-sum{font-size:12.5px} /* ---------- вибір продукту ---------- */ .pcfg .products-wrap{margin-bottom:18px} .pcfg .prod{ display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left; padding:13px 15px;min-height:56px;background:var(--card);border:1px solid var(--line); border-radius:var(--pc-r);cursor:pointer;transition:.16s; } .pcfg .prod:hover{border-color:var(--ink-3)} .pcfg .prod.is-on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft)} .pcfg .prod:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .pcfg .prod-title{font-size:14px;font-weight:600} .pcfg .prod-note{font-size:11.5px;color:var(--ink-2);line-height:1.4; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pcfg .prod.is-on .prod-note{color:var(--pc-muted-on-accent)} /* ---------- функції смуги і їхні частини ---------- */ .pcfg .caps{display:flex;flex-direction:column;gap:10px} .pcfg .cap{display:flex;flex-direction:column} /* шапка функції + кнопка розгортання складу праворуч */ .pcfg .cap-row{position:relative;display:flex} .pcfg .cap-head{align-items:flex-start} .pcfg .cap-seg{margin-top:9px;align-self:flex-start} .pcfg .cap-seg .seg-btn{min-height:32px;padding:0 13px;font-size:12px} .pcfg .cap-head{width:100%} .pcfg .cap-row.has-toggle .cap-head{padding-right:46px} .pcfg .cap-toggle{ position:absolute;top:0;bottom:0;right:0;width:42px; display:flex;align-items:center;justify-content:center; background:none;border:0;border-radius:var(--pc-r);cursor:pointer;color:var(--ink-2); transition:color .16s ease,background .16s ease; } .pcfg .cap-toggle:hover{color:var(--ink);background:var(--soft)} .pcfg .cap.is-on .cap-toggle{color:var(--pc-muted-on-accent)} .pcfg .cap.is-on .cap-toggle:hover{color:var(--ink);background:transparent} .pcfg .cap-toggle .ico{transition:transform .18s ease} .pcfg .cap-toggle.is-open .ico{transform:rotate(180deg)} .pcfg .cap-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* частини — з відступом під функцією, як субопції */ .pcfg .cap-parts{display:flex;flex-direction:column;gap:6px;margin:6px 0 2px 26px} .pcfg .part{ border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:10px; padding:10px 12px;background:var(--card);transition:border-color .16s ease,background .16s ease,opacity .16s ease; } /* стан видно з одного погляду: синій кант — купуємо, сірий — лише підключаємо, блідий — не треба */ .pcfg .part.is-new{border-left-color:var(--accent)} .pcfg .part.is-owned{border-left-color:var(--ink-3);background:var(--soft)} .pcfg .part.is-no{border-left-color:var(--line);opacity:.6} .pcfg .part:hover{border-color:var(--ink-3)} .pcfg .part.is-new:hover{border-left-color:var(--accent)} .pcfg .part-main{display:flex;gap:12px;align-items:flex-start;justify-content:space-between} .pcfg .part-body{display:flex;flex-direction:column;gap:2px;min-width:0} .pcfg .part-name{font-size:13.5px;font-weight:600} .pcfg .part-note{font-size:11.5px;color:var(--ink-2);line-height:1.4} .pcfg .part-price{ flex:none;display:flex;flex-direction:column;align-items:flex-end;text-align:right; max-width:46%;gap:1px; } .pcfg .part-price .card-sum{font-size:12.5px;white-space:normal} .pcfg .part.is-auto{border-left-color:var(--ink-3);background:var(--soft);cursor:default} .pcfg .part-auto{ margin-top:3px;font-family:var(--pc-mono);font-size:11px;letter-spacing:-.01em; font-variant-numeric:tabular-nums;color:var(--ink-2); } .pcfg .q-solo{display:flex;flex-direction:column;gap:8px} .pcfg .solo-head{display:flex;flex-direction:column;gap:2px} .pcfg .solo-title{font-size:13.5px;font-weight:600} .pcfg .solo-note{font-size:11.5px;color:var(--ink-2);line-height:1.4} .pcfg .q-solo .part-pick{margin-top:0} .pcfg .part-pick{display:flex;flex-direction:column;gap:6px;margin-top:9px} .pcfg .pick{ display:flex;align-items:flex-start;gap:9px;width:100%;min-height:44px;padding:9px 11px; background:var(--card);border:1px solid var(--line);border-radius:10px; text-align:left;cursor:pointer;transition:.16s; } .pcfg .pick:hover{border-color:var(--ink-3)} .pcfg .pick.is-on{border-color:var(--accent);background:var(--accent-soft)} .pcfg .pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .pcfg .pick-mark{ flex:none;width:17px;height:17px;margin-top:1px;border-radius:50%; border:1.5px solid var(--line-2);background:var(--bg);transition:.16s; } .pcfg .pick.is-on .pick-mark{ border-color:var(--accent); box-shadow:inset 0 0 0 3.5px var(--bg),inset 0 0 0 9px var(--accent); } .pcfg .pick-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto} .pcfg .pick-title{font-size:13px;font-weight:600} .pcfg .pick-note{font-size:11.5px;color:var(--ink-2);line-height:1.4} .pcfg .pick-price{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right} .pcfg .pick-price .card-sum{font-size:12.5px} .pcfg .part-seg{margin-top:9px} .pcfg .part-seg .seg-btn{min-height:34px;padding:0 13px;font-size:12px} .pcfg .part-subs{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-2)} /* згорнутий вибір виконання: рядок «що обрано» + «змінити» */ .pcfg .part-subs.is-folded{padding-top:7px} .pcfg .subpick{ display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;width:100%; padding:6px 8px;min-height:36px;background:none;border:1px dashed var(--line-2); border-radius:9px;cursor:pointer;text-align:left;transition:.16s; } .pcfg .subpick:hover{border-color:var(--accent);background:var(--soft)} .pcfg .subpick:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .pcfg .subpick-row{display:flex;align-items:baseline;gap:7px;min-width:0;flex:1 1 auto} .pcfg .subpick-label{font-size:11.5px;color:var(--ink-2);flex:none} .pcfg .subpick-val{font-size:12.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pcfg .subpick-price{ font-family:var(--pc-mono);font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:-.01em; color:var(--ink-2);flex:none; } .pcfg .subpick-act{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;color:var(--accent);flex:none} .pcfg .subfold{ display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:4px 8px;min-height:30px; background:none;border:0;border-radius:8px;color:var(--ink-2);font-size:11.5px;cursor:pointer; } .pcfg .subfold:hover{color:var(--ink);background:var(--soft)} .pcfg .subfold .ico{transform:rotate(180deg)} .pcfg .ico-xs{width:13px;height:13px} .pcfg .part-subs .subchoice{gap:5px;padding:0} .pcfg .part-subs .sub-title{font-size:12px;color:var(--ink-2);font-weight:600} @media(max-width:600px){ .pcfg .cap-parts{margin-left:14px} .pcfg .cap-head .card-price{max-width:52%} .pcfg .part-main{flex-direction:column;gap:6px} .pcfg .part-price{max-width:100%;align-items:flex-start;text-align:left} .pcfg .part-seg .seg-btn{min-height:40px;flex:1 1 auto} } /* сегментований перемикач */ .pcfg .subchoice{display:flex;flex-direction:column;gap:6px;padding:2px 0 2px 2px} .pcfg .seg{ /* доріжка з повзунком: вибраний сегмент — окрема «клавіша», а не тонований шмат рамки */ display:inline-flex;align-items:stretch;align-self:flex-start;max-width:100%;flex-wrap:wrap; gap:2px;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--soft); } .pcfg .seg.is-stacked{ display:flex;flex-direction:column;align-self:stretch;gap:0;padding:0; border-radius:var(--pc-r);background:var(--card);overflow:hidden; } .pcfg .seg.is-stacked .seg-btn{justify-content:flex-start;border-radius:0;border-top:1px solid var(--line);padding:0 13px} .pcfg .seg.is-stacked .seg-btn:first-child{border-top:0} .pcfg .seg.is-stacked .pill-delta{margin-left:auto} .pcfg .seg-btn{ flex:1 1 auto;justify-content:center;display:inline-flex;align-items:center;gap:7px; min-height:34px;padding:0 14px;border:0;border-radius:8px;background:transparent; color:var(--ink-2);font-size:12.5px;font-weight:500;white-space:nowrap;cursor:pointer; transition:background .14s ease,color .14s ease,box-shadow .14s ease; } .pcfg .seg-btn:hover{color:var(--ink)} .pcfg .seg-btn.is-on{ background:var(--card);color:var(--ink);font-weight:600; box-shadow:0 1px 2px rgba(15,17,22,.12),0 0 0 1px var(--line-2); } .pcfg .seg.is-stacked .seg-btn.is-on{background:var(--accent-soft);box-shadow:none} .pcfg .seg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .pcfg .pill-delta{font-size:11.5px;font-weight:600;color:var(--ink-2)} /* варіанти виконання зі змістовними примітками — списком, примітка під назвою */ .pcfg .sub-opts{display:flex;flex-direction:column;gap:6px;align-self:stretch} .pcfg .sub-opt{ display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left; min-height:44px;padding:9px 11px;border:1px solid var(--line);border-radius:10px; background:var(--card);color:var(--ink);cursor:pointer;transition:.16s; } .pcfg .sub-opt:hover{border-color:var(--accent);background:var(--panel)} .pcfg .sub-opt.is-on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)} .pcfg .sub-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .pcfg .sub-opt-mark{ flex:none;width:17px;height:17px;margin-top:1px;border-radius:50%; border:1.5px solid var(--line-2);background:var(--card);transition:.16s; } .pcfg .sub-opt:hover .sub-opt-mark{border-color:var(--accent)} .pcfg .sub-opt.is-on .sub-opt-mark{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3.5px var(--card)} .pcfg .sub-opt-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .pcfg .sub-opt-title{font-size:13px;font-weight:600;line-height:1.35} .pcfg .sub-opt.is-on .sub-opt-title{font-weight:700} .pcfg .sub-opt-note{font-size:11.5px;line-height:1.45;color:var(--ink-2)} .pcfg .sub-opt.is-on .sub-opt-note{color:var(--pc-muted-on-accent)} .pcfg .sub-opt-price{ flex:none;margin-left:auto;font-family:var(--pc-mono);font-size:12.5px;font-weight:600; color:var(--ink);white-space:nowrap; } .pcfg .sub-opt.is-on .sub-opt-price{color:var(--pc-accent-text)} @media (max-width:600px){ .pcfg .sub-opt{flex-wrap:wrap} .pcfg .sub-opt-price{margin-left:26px;width:100%;order:3} } /* ---------- степер кількості ---------- */ .pcfg .stepper{ display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 0 26px;padding:9px 11px; border:1px solid var(--line);border-radius:10px;background:var(--card); } .pcfg .stepper-label{font-size:12.5px;font-weight:600} .pcfg .stepper-ctl{display:inline-flex;align-items:center;gap:4px;margin-left:auto} .pcfg .stepbtn{ display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px; border:1px solid var(--line-2);background:var(--card);color:var(--ink);cursor:pointer;transition:.16s; } .pcfg .stepbtn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} .pcfg .stepbtn:disabled{opacity:.4;cursor:not-allowed} .pcfg .stepper-val{min-width:34px;text-align:center;font-size:15px;font-weight:600} .pcfg .stepper-note{flex:1 1 100%;font-size:11.5px;color:var(--ink-2)} /* ---------- сцена ---------- */ .pc-stage{min-width:0} .pc-stage:empty{display:none} @media(min-width:768px) and (max-width:1023px){ .pc-stage{position:sticky;top:96px;z-index:25;background:var(--bg);padding-bottom:14px} .pc-stage .scene-wrap{aspect-ratio:var(--scene-ratio,1.7);height:auto;min-height:0;width:100%; max-width:calc(min(38vh,330px) * var(--scene-ratio,1.7));max-height:min(38vh,330px);margin-inline:auto} .pc-stage #scene{height:100%;width:100%;display:grid;place-items:center} .pc-stage #scene svg{width:auto;height:auto;max-width:100%;max-height:100%} .pcfg .q{scroll-margin-top:calc(min(38vh,330px) + 120px)} } .pcfg .scene-wrap{ position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line); border-radius:16px;box-shadow:var(--pc-shadow);min-height:240px; display:flex;align-items:center;justify-content:center; } .pcfg #scene{width:100%;display:block} .pcfg #scene svg{display:block;width:100%;max-width:100%} .pcfg .scene-fallback{ display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center; padding:32px 20px;margin:16px;width:100%; border:1px dashed var(--line-2);border-radius:var(--pc-r);color:var(--ink-2); } .pcfg .scene-fallback strong{font-size:15px;font-weight:600;color:var(--ink)} .pcfg .scene-fallback span{font-size:13px;max-width:34ch} .pcfg .scene-expand{ position:absolute;top:10px;right:10px;z-index:6;display:none;align-items:center;gap:6px; min-height:34px;padding:0 12px;border:1px solid var(--line-2);border-radius:10px; background:var(--card);color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer;transition:.16s; } .pcfg .scene-expand:hover{border-color:var(--ink);background:var(--panel)} .pcfg .scene-expand .ico{width:16px;height:16px;color:var(--ink-2)} .pcfg #tip{ position:absolute;transform:translate(-50%,-100%);padding:5px 9px;border-radius:7px;pointer-events:none; background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;white-space:nowrap;z-index:5; } /* оверлей «на весь екран» */ .pcfg .zoom{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px} .pcfg .zoom-backdrop{position:absolute;inset:0;background:rgba(10,11,14,.88);border:0;padding:0;cursor:zoom-out} .pcfg .zoom-inner{position:relative;display:flex;flex-direction:column;gap:10px;width:min(1680px,96vw);max-height:94vh} .pcfg .zoom-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#F2F2F0} .pcfg .zoom-bar strong{font-size:15px;font-weight:600} .pcfg .zoom-close{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#F2F2F0} .pcfg .zoom-close:hover{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.5)} .pcfg #zoomhost{min-height:0;display:flex} .pcfg #zoomhost .scene-wrap{width:100%;max-width:none;height:auto;min-height:0; aspect-ratio:var(--scene-ratio,1.7);max-height:86vh;margin-inline:auto;outline:0} .pcfg #zoomhost #scene{height:100%;width:100%;display:grid;place-items:center} .pcfg #zoomhost #scene svg{width:auto;height:auto;max-width:100%;max-height:100%} body.zoom-open{overflow:hidden} /* ---------- картка вибраного елемента сцени ---------- */ .pcfg .elcard{padding:16px;background:var(--card);border:1px solid var(--accent);border-radius:16px;box-shadow:0 0 0 3px var(--accent-soft)} .pcfg .elcard-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .pcfg .elcard-head strong{font-size:15px;font-weight:600} .pcfg .iconbtn{ display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:9px; border:1px solid var(--line-2);background:var(--card);font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.16s; } .pcfg .iconbtn:hover{color:var(--ink);border-color:var(--ink)} .pcfg .iconbtn .ico{width:16px;height:16px} .pcfg .elcard-where{margin:4px 0 0;font-size:12px;color:var(--ink-2);font-weight:600} .pcfg .elcard-note{margin:6px 0 0;font-size:12.5px;color:var(--ink-2)} .pcfg .elcard-list{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:5px} .pcfg .elcard-list li{display:flex;justify-content:space-between;gap:12px;font-size:13px} .pcfg .elcard-qty{color:var(--ink-2);white-space:nowrap;font-size:12px} .pcfg .elcard-sums{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px;font-size:12.5px;color:var(--ink-2)} .pcfg .elcard-sums b{color:var(--ink);font-size:14px;font-weight:600} /* ---------- блок сум (подача як .calc-out сайту) ---------- */ .pcfg .sums{padding:22px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--pc-shadow)} .pcfg .sums-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)} .pcfg .sums-main{display:block;margin-top:6px;font-family:inherit;font-size:36px;font-weight:800; line-height:1.1;letter-spacing:-.02em;color:var(--ink)} .pcfg .sums-uah{display:block;margin-top:4px;font-size:13px;color:var(--ink-2)} .pcfg .sums-rows{margin-top:16px;display:flex;flex-direction:column} .pcfg .sums-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding:11px 0;border-top:1px solid var(--line);font-size:13.5px} .pcfg .sums-row span:first-child{color:var(--ink-2)} .pcfg .sums-row b{font-weight:600;font-size:14px;color:var(--ink)} /* перемикач монтажу в кошику */ .pcfg .sums-switch{cursor:pointer;align-items:center;min-height:44px;padding:6px 0} .pcfg .sums-switch-end{display:flex;align-items:center;gap:12px} .pcfg .sums-switch b.is-off{color:var(--ink-2);font-weight:500} .pcfg .montage-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .pcfg .sw{position:relative;flex:none;width:36px;height:20px;border-radius:999px;background:var(--soft); border:1px solid var(--line-2);transition:background .15s ease,border-color .15s ease} .pcfg .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%; background:var(--ink-2);transition:transform .15s ease,background .15s ease} .pcfg .montage-input:checked + .sw{background:var(--accent);border-color:var(--accent)} .pcfg .montage-input:checked + .sw::after{transform:translateX(16px);background:#fff} .pcfg .sums-switch:hover .sw{border-color:var(--ink-2)} body.kbd .pcfg .montage-input:focus-visible + .sw{outline:2px solid var(--accent);outline-offset:2px} .pcfg .sums-month{margin-top:6px;padding-top:12px;border-top:1px solid var(--line-2)} .pcfg .sums-month span:first-child{color:var(--ink);font-weight:600} .pcfg .sums-month b{font-size:17px;font-weight:700} /* ---------- кошторис ---------- */ .pcfg .block{margin-bottom:20px} .pcfg .block summary{display:flex;align-items:center;justify-content:space-between;gap:12px; min-height:44px;padding:8px 0;cursor:pointer;list-style:none;border-top:1px solid var(--line-2)} .pcfg .block summary::-webkit-details-marker{display:none} .pcfg .block summary:hover .block-title{color:var(--accent)} .pcfg .block-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px} .pcfg .block-title .ico{width:16px;height:16px;color:var(--ink-2);transition:transform .18s ease} .pcfg .block[open] .block-title .ico{transform:rotate(180deg)} .pcfg .block-sum{font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap} .pcfg .rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .pcfg .rows li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline; font-size:13.5px;padding:10px 0;border-top:1px solid var(--line)} .pcfg .row-name{min-width:0} .pcfg .row-qty{color:var(--ink-2);white-space:nowrap;font-size:12px} .pcfg .row-sum{font-weight:600;white-space:nowrap;min-width:72px;text-align:right} /* рядок без числа: те, що рахують по місцю */ .pcfg .rows li.is-custom .row-sum{font-weight:500;font-size:11.5px;color:var(--ink-2)} /* ---------- попередження і опис ---------- */ .pcfg .panel-title{font-size:15.5px;font-weight:600;margin-bottom:12px} .pcfg .warns{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .pcfg .warn{display:flex;gap:10px;padding:12px 13px;border-radius:12px;font-size:13px;line-height:1.5;border:1px solid transparent} .pcfg .warn .ico{width:18px;height:18px;margin-top:1px} .pcfg .warn-error{background:var(--pc-danger-bg);color:var(--pc-danger);border-color:var(--pc-danger-line)} .pcfg .warn-warn{background:var(--pc-warn-bg);color:var(--pc-warn);border-color:var(--pc-warn-line)} .pcfg .warn-info{background:var(--pc-info-bg);color:var(--ink);border-color:var(--pc-info-line)} .pcfg .warn-text{color:var(--ink)} .pcfg .warn-error .warn-text,.pcfg .warn-warn .warn-text{color:inherit} .pcfg .warn-empty{margin:0;font-size:13px;color:var(--ink-2)} .pcfg .panel-box{padding:18px;background:var(--card);border:1px solid var(--line);border-radius:16px} .pcfg .story{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .pcfg .story li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.55} .pcfg .story li::before{content:"";position:absolute;left:1px;top:8px;width:6px;height:6px;border-radius:2px;background:var(--accent);opacity:.55} /* ---------- завантаження / помилка даних ---------- */ .pc-boot{max-width:620px;margin:0 0 40px;border:1px solid var(--line);border-radius:18px; background:var(--soft);padding:26px 28px;color:var(--ink-2);font-size:14.5px;line-height:1.6} .pc-boot strong{display:block;color:var(--ink);font-size:17px;font-weight:600;margin-bottom:6px} .pc-boot span{display:block} .pc-boot a{color:var(--pc-accent-text);font-weight:600;text-decoration:underline} .pc-boot .btn{margin-top:16px} @media(max-width:560px){.pc-boot{padding:20px 18px;border-radius:16px}} .pc-skel{display:grid;gap:10px;margin-top:16px} .pc-skel i{display:block;height:14px;border-radius:7px;background:var(--panel);animation:pcpulse 1.4s ease-in-out infinite} .pc-skel i:nth-child(2){width:78%}.pc-skel i:nth-child(3){width:56%} @keyframes pcpulse{0%,100%{opacity:1}50%{opacity:.5}} @media(prefers-reduced-motion:reduce){.pc-skel i{animation:none}} /* ---------- мобільна смуга і оверлей «Мій паркінг» ---------- */ /* --pc-cookie-h ставить скрипт сторінки: реальна висота спільного кукі-банера (position:fixed;bottom:0;z-index:120). Поки він видимий — смуга з сумою стоїть над ним, коли зник — опускається назад. Сам компонент кукі не чіпаємо. */ .pcfg .mobilebar{ display:none;position:fixed;left:0;right:0;bottom:var(--pc-cookie-h,0px);z-index:70;gap:12px;align-items:center; transition:bottom .3s ease; padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); background:var(--card);border-top:1px solid var(--line); } .pcfg .mobilesum{display:flex;flex-direction:column;min-width:0;flex:1} .pcfg .mb-once{font-weight:700;font-size:19px;color:var(--ink)} .pcfg .mb-sub{font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:1023px){ .pcfg .mobilebar{display:flex} .pc-stage{display:none} .pc-panel{ position:fixed;inset:0;z-index:80;margin:0;background:var(--bg);overflow:auto; padding:16px;padding-top:calc(16px + env(safe-area-inset-top,0px)); padding-bottom:calc(24px + var(--pc-cookie-h,0px) + env(safe-area-inset-bottom,0px)); transform:translateY(100%);transition:transform .25s ease; } body.sheet-open .pc-panel{transform:translateY(0)} body.sheet-open{overflow:hidden} .panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px} .panel-head h2{font-size:18px;font-weight:600} .panel-head-actions{display:flex;gap:8px} .pcfg .stepbtn{width:44px;height:44px} .pcfg .seg-btn{min-height:44px} body:has(.pcfg){padding-bottom:calc(84px + var(--pc-cookie-h,0px) + env(safe-area-inset-bottom,0px))} } @media(min-width:768px) and (max-width:1023px){ .pc-panel{padding-inline:clamp(20px,7vw,96px)} } @media(prefers-reduced-motion:reduce){.pcfg *{transition:none !important;animation:none !important}} /* ---------- друк ---------- */ @media print{ header,.topbar,.catnav,footer,.cookie,.pc-head-actions,.pc-settings,.pcfg .mobilebar, .pcfg #tip,.pcfg .iconbtn,.pcfg .btn,.pcfg .chip,.pcfg .zoom{display:none !important} .pc-layout{display:block;padding:0} .pc-panel{position:static;max-height:none;overflow:visible;display:block;transform:none;padding:0} .pc-panel > .scene-wrap{position:static;height:auto;outline:0} .pcfg .scene-wrap,.pcfg .panel-box,.pcfg .block,.pcfg .sums{box-shadow:none;break-inside:avoid} .pcfg .sums{margin-bottom:12px} .pcfg .block .rows{display:flex !important} .pcfg .elcard{display:none} .panel-head{display:none !important} }