{"id":81,"date":"2026-04-24T08:01:40","date_gmt":"2026-04-24T08:01:40","guid":{"rendered":"https:\/\/zpevneneplochy.cz\/?page_id=81"},"modified":"2026-04-24T23:01:14","modified_gmt":"2026-04-24T23:01:14","slug":"cenik","status":"publish","type":"page","link":"https:\/\/zpevneneplochy.cz\/?page_id=81","title":{"rendered":"Cen\u00edk"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"81\" class=\"elementor elementor-81\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-731d79d6 elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"731d79d6\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1d68f93a\" data-id=\"1d68f93a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-11f3721d elementor-widget elementor-widget-html\" data-id=\"11f3721d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\n:root{\n  --ink:#0A0A0A; --slate:#6B7A8F; --slate-ink:#3D4654;\n  --line:#E4E7EB; --line-2:#D1D5DB;\n  --canvas:#F7F8FA; --paper:#FFFFFF;\n  --accent:#C97B3A; --accent-soft:#FFF4E9; --accent-ink:#8B4E1E;\n  --ok:#2F7D4F; --ok-soft:#E7F4EC;\n  --f-d:\"Space Grotesk\",system-ui,sans-serif;\n  --f-b:\"Inter\",system-ui,sans-serif;\n  --f-m:\"JetBrains Mono\",ui-monospace,monospace;\n}\n*{box-sizing:border-box}\nhtml,body{margin:0;padding:0}\nbody{font-family:var(--f-b);background:var(--canvas);color:var(--ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}\nbutton{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}\na{color:inherit}\n\n.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(20px,4vw,48px)}\n\n\/* ============ TOP BAR ============ *\/\n.topbar{background:var(--paper);border-bottom:1px solid var(--line);padding:16px 0}\n.topbar .row{display:flex;align-items:center;justify-content:space-between;gap:20px}\n.logo{font-family:var(--f-d);font-weight:700;font-size:17px;letter-spacing:-0.01em}\n.logo small{display:block;font-family:var(--f-m);font-size:10px;color:var(--slate);letter-spacing:0.12em;font-weight:500;margin-top:2px}\n.topbar nav{display:flex;gap:28px;font-family:var(--f-m);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate-ink)}\n.topbar nav a{text-decoration:none}\n.topbar nav a.active{color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:4px}\n.topbar .cta{padding:10px 18px;background:var(--ink);color:#fff;border-radius:999px;font-family:var(--f-d);font-weight:600;font-size:13px;text-decoration:none}\n@media(max-width:700px){.topbar nav{display:none}}\n\n\/* ============ HEADER \/ HERO ============ *\/\n.head{padding:56px 0 32px;background:var(--paper);border-bottom:1px solid var(--line)}\n.head .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-m);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);padding:6px 12px;background:var(--accent-soft);border-radius:999px;margin-bottom:16px}\n.head h1{font-family:var(--f-d);font-size:clamp(36px,4.5vw,56px);font-weight:700;letter-spacing:-0.025em;line-height:1.02;margin:0}\n.head p{color:var(--slate-ink);max-width:60ch;margin:12px 0 0;font-size:17px}\n\n\/* ============ STEPS BAR ============ *\/\n.steps{display:flex;gap:0;padding:20px 0 0;max-width:900px}\n.step{flex:1;display:flex;align-items:center;gap:12px;position:relative;padding:16px 0}\n.step .num{width:32px;height:32px;border-radius:50%;background:var(--canvas);border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-family:var(--f-d);font-weight:700;font-size:14px;color:var(--slate);flex-shrink:0;transition:all .2s ease}\n.step .lbl{font-family:var(--f-m);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate)}\n.step.done .num{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}\n.step.active .num{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 0 0 4px rgba(10,10,10,0.08)}\n.step.active .lbl{color:var(--ink);font-weight:600}\n.step:not(:last-child)::after{content:\"\";position:absolute;top:50%;left:calc(32px + 8px);right:-12px;height:1.5px;background:var(--line-2);z-index:-1}\n.step.done:not(:last-child)::after{background:var(--ok)}\n@media(max-width:700px){.step .lbl{display:none}.step:not(:last-child)::after{right:0}}\n\n\/* ============ MAIN GRID ============ *\/\n.main{padding:40px 0 80px}\n.layout{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start}\n@media(max-width:1000px){.layout{grid-template-columns:1fr}}\n\n.panel{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,40px);margin-bottom:20px}\n.panel h2{font-family:var(--f-d);font-size:22px;font-weight:700;letter-spacing:-0.015em;margin:0 0 6px;display:flex;align-items:center;gap:10px}\n.panel h2 .bullet{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}\n.panel .hint{color:var(--slate-ink);font-size:14px;margin:0 0 20px}\n\n\/* ============ CHOICE CARDS (big picture picker) ============ *\/\n.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}\n.choice{background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px;text-align:left;transition:all .15s ease;position:relative;min-height:150px}\n.choice:hover{border-color:var(--slate);transform:translateY(-2px)}\n.choice.active{border-color:var(--ink);background:#fafafa;box-shadow:0 0 0 4px rgba(10,10,10,0.04)}\n.choice .icn{width:40px;height:40px;color:var(--ink);flex-shrink:0}\n.choice .t{font-family:var(--f-d);font-size:16px;font-weight:600;letter-spacing:-0.01em;line-height:1.2}\n.choice .d{font-family:var(--f-b);font-size:13px;color:var(--slate-ink);line-height:1.4}\n.choice .check{position:absolute;bottom:14px;right:14px;width:22px;height:22px;border-radius:50%;background:var(--ink);display:none;align-items:center;justify-content:center;z-index:2}\n.choice.active .check{display:flex}\n.choice .check svg{width:12px;height:12px;color:#fff}\n\n\/* Availability badge (top-left) *\/\n.choice .avail{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:4px;font-family:var(--f-m);font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:4px 8px 4px 6px;border-radius:999px;line-height:1}\n.choice .avail svg{width:12px;height:12px}\n.choice .avail--yes{background:var(--ok-soft);color:var(--ok)}\n.choice .avail--no{background:#F1F2F4;color:#9CA3AF}\n.choice.unavailable{opacity:0.55;cursor:not-allowed}\n.choice.unavailable:hover{transform:none;border-color:var(--line)}\n.panel button.choice{background:var(--paper);border-radius:16px;color:var(--ink);}\n\n\/* ========= STEP 1 \u00b7 grubo\u015b\u0107 maty \u2014 kwadratowe karty z zaokr\u0105glonymi rogami ========= *\/\n[data-panel=\"1\"] .choices{grid-template-columns:repeat(2,1fr);gap:16px}\n[data-panel=\"1\"] .choice{\n  position:relative;border-radius:24px;min-height:150px;padding:24px 28px;\n  flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;gap:6px;\n  border:1.5px solid var(--line);background:var(--paper);color:var(--ink);\n  transition:border-color .15s ease, background .15s ease, color .15s ease;\n}\n[data-panel=\"1\"] .choice:hover{transform:none;border-color:var(--ink)}\n[data-panel=\"1\"] .choice .icn{position:absolute;top:18px;left:22px;width:42px;height:42px;opacity:0.85;color:var(--ink)}\n[data-panel=\"1\"] .choice .icn text{font-size:7px}\n[data-panel=\"1\"] .choice > div{max-width:100%}\n[data-panel=\"1\"] .choice .t{font-family:var(--f-d);font-weight:700;font-size:18px;letter-spacing:-0.01em}\n[data-panel=\"1\"] .choice .d{font-family:var(--f-b);font-size:13px;color:var(--slate-ink);margin-top:4px;line-height:1.45}\n[data-panel=\"1\"] .choice.active{background:#0A0A0A;color:#fff;border-color:#0A0A0A}\n[data-panel=\"1\"] .choice.active .t{color:#fff}\n[data-panel=\"1\"] .choice.active .d{color:#B9C2CF}\n[data-panel=\"1\"] .choice.active .icn{color:#fff;opacity:0.95}\n[data-panel=\"1\"] .choice .check{position:absolute;top:auto;bottom:18px;right:22px;width:34px;height:34px;background:transparent;color:transparent;border:none;border-radius:50%;display:none;align-items:center;justify-content:center}\n[data-panel=\"1\"] .choice .check svg{width:18px;height:18px}\n[data-panel=\"1\"] .choice.active .check{display:inline-flex;background:#fff;color:#0A0A0A}\n@media(max-width:560px){\n  [data-panel=\"1\"] .choices{grid-template-columns:1fr}\n  [data-panel=\"1\"] .choice{min-height:130px}\n}\n\n\/* ========= POD\u015aWIETLENIE WYBORU \u2014 wsp\u00f3lne dla wszystkich segment\u00f3w ========= *\/\n\/* Kafle \"Ile potrzebujesz\" (panel 3) \u2014 aktywny: pomara\u0144czowa ramka + akcent *\/\n[data-panel=\"3\"] .choice.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 4px rgba(201,123,58,0.08)}\n[data-panel=\"3\"] .choice.active .check{background:var(--accent)}\n[data-panel=\"3\"] .choice.active .check svg{color:#fff}\n\n\/* Panel 1 \u2014 wyb\u00f3r gatunku w .pcol: A=pomara\u0144czowy pe\u0142ny gdy wybrany; B\/C=biel\u0142 z cienk\u0105 obwiedni\u0105 accent *\/\n.pcol.selected:not(.featured){box-shadow:inset 0 0 0 3px var(--accent);background:var(--accent-soft)}\n.pcol.featured.selected{background:var(--accent);color:#fff;box-shadow:none}\n.pcol.featured.selected .badge{background:rgba(255,255,255,0.18);color:#fff}\n.pcol.featured.selected .sub{color:rgba(255,255,255,0.85)}\n.pcol.featured.selected .grade{color:#fff}\n.pcol.featured.selected .pick{color:#fff}\n.pcol.featured.selected .avail-top.yes{background:rgba(255,255,255,0.18);color:#fff}\n.pcol.featured.selected .big{color:#fff}\n\/* Niewybrany .featured \u2014 bia\u0142y, niepe\u0142ny czarny *\/\n.pcol.featured:not(.selected){background:var(--paper);color:var(--ink)}\n.pcol.featured:not(.selected) .sub{color:var(--slate)}\n.pcol.featured:not(.selected) .badge{background:var(--canvas);color:var(--slate-ink)}\n.pcol.featured:not(.selected) .grade{color:var(--ink)}\n.pcol.featured:not(.selected):hover{background:#FAFBFC}\n.pcol.featured:not(.selected) .avail-top.yes{background:var(--ok-soft);color:var(--ok)}\n\n\/* Radio (dostawa, VAT) \u2014 aktywny: ramka accent + jasne t\u0142o accent *\/\n.radio.active{border-color:var(--accent);background:var(--accent-soft)}\n.radio.active .dot{border-color:var(--accent)}\n.radio.active .dot::after{background:var(--accent)}\n\n\/* (panele renumerowane: 1 = gatunek z .pcol, 2 = ile, 3 = dostawa, 4 = vat) *\/\n\n\/* ============ NUMBER STEPPERS (prominent) ============ *\/\n.numbox{background:var(--accent-soft);border:1.5px solid rgba(201,123,58,0.25);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px}\n.numbox--row{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:transparent;border:none;padding:0}\n.numbox--row .numbox{padding:20px}\n.numbox .lab{font-family:var(--f-m);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-ink);font-weight:600}\n.stepper{display:flex;align-items:center;background:var(--paper);border:1.5px solid rgba(201,123,58,0.3);border-radius:12px;overflow:hidden;height:64px}\n.stepper button{width:64px;height:100%;background:transparent;color:var(--accent);font-size:28px;font-weight:600;font-family:var(--f-d);transition:background .15s ease}\n.stepper button:hover{background:var(--accent-soft)}\n.stepper input{flex:1;border:none;outline:none;text-align:center;font-family:var(--f-d);font-size:32px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;background:transparent;width:0;min-width:60px;-moz-appearance:textfield}\n.stepper input::-webkit-outer-spin-button,\n.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n.stepper .sfx{padding:0 20px;font-family:var(--f-m);font-size:13px;color:var(--slate-ink);letter-spacing:0.06em;text-transform:uppercase;border-left:1px solid var(--line);height:100%;display:flex;align-items:center}\n\n.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}\n.quick button{padding:6px 12px;background:var(--paper);border:1px solid var(--line);border-radius:999px;font-family:var(--f-m);font-size:12px;color:var(--slate-ink);transition:all .15s ease}\n.quick button:hover{border-color:var(--ink);color:var(--ink)}\n.quick button.active{background:var(--ink);border-color:var(--ink);color:#fff}\n\n.dimsum{background:var(--paper);border:1px dashed var(--accent);border-radius:10px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;margin-top:12px}\n\n\/* Akcje dodawania pozycji *\/\n.dimacts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}\n.dimact{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;font-family:var(--f-m);font-size:13px;font-weight:600;letter-spacing:0.02em;border:1.5px solid var(--accent);background:var(--paper);color:var(--accent);cursor:pointer;transition:all .15s ease}\n.dimact:hover{background:var(--accent);color:#fff}\n.dimact svg{width:16px;height:16px}\n.dimact--danger{border-color:#E9B0A0;color:#B54A2E;background:transparent}\n.dimact--danger:hover{background:#B54A2E;color:#fff;border-color:#B54A2E}\n\n\/* Lista zapisanych pozycji *\/\n.savedlist{margin-top:14px;display:flex;flex-direction:column;gap:6px}\n.saved-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--paper);border:1px solid var(--line);border-radius:10px;font-family:var(--f-m);font-size:13px}\n.saved-item .num{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0}\n.saved-item .desc{flex:1;color:var(--ink)}\n.saved-item .desc strong{font-family:var(--f-d);font-weight:700}\n.saved-item .rm{width:26px;height:26px;border-radius:50%;background:transparent;color:var(--slate);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}\n.saved-item .rm:hover{background:#FDE8E1;color:#B54A2E}\n.saved-item .rm svg{width:14px;height:14px}\n.dimsum .l{font-family:var(--f-m);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-ink)}\n.dimsum .v{font-family:var(--f-d);font-size:20px;font-weight:700;letter-spacing:-0.01em}\n\n\/* ============ TOGGLES (smaller rows) ============ *\/\n.segrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}\n.seg{flex:1;min-width:140px;padding:14px 16px;background:var(--paper);border:2px solid var(--line);border-radius:12px;text-align:left;display:flex;flex-direction:column;gap:4px;transition:all .15s ease}\n.seg:hover{border-color:var(--slate)}\n.seg.active{border-color:var(--ink);background:#fafafa}\n.seg strong{font-family:var(--f-d);font-size:14px;font-weight:600;letter-spacing:-0.01em}\n.seg small{font-family:var(--f-m);font-size:11px;color:var(--slate);letter-spacing:0.04em}\n.panel button.seg{background:var(--paper);border-radius:12px;color:var(--ink);}\n\n.radiolist{display:grid;grid-template-columns:1fr;gap:10px}\n.radio{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--paper);border:2px solid var(--line);border-radius:12px;transition:all .15s ease;text-align:left}\n.radio:hover{border-color:var(--slate)}\n.radio.active{border-color:var(--ink);background:#fafafa}\n.radio .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);flex-shrink:0;position:relative;transition:all .15s ease}\n.radio.active .dot{border-color:var(--ink)}\n.radio.active .dot::after{content:\"\";position:absolute;inset:3px;border-radius:50%;background:var(--ink)}\n.radio .txt{flex:1}\n.radio .t{font-family:var(--f-d);font-size:15px;font-weight:600;letter-spacing:-0.01em}\n.radio .d{font-family:var(--f-m);font-size:12px;color:var(--slate);letter-spacing:0.04em;margin-top:2px}\n.radio .price{font-family:var(--f-d);font-size:15px;font-weight:700;color:var(--ink)}\n.radio .price.free{color:var(--ok)}\n.panel button.radio{background:var(--paper);border-radius:12px;color:var(--ink);}\n\n.check-opt{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--paper);border:2px solid var(--line);border-radius:12px;cursor:pointer;transition:all .15s ease}\n.check-opt.active{border-color:var(--ink);background:#fafafa}\n.check-opt input{width:22px;height:22px;accent-color:var(--ink);cursor:pointer}\n.check-opt .t{font-family:var(--f-d);font-size:15px;font-weight:600}\n.check-opt .d{font-family:var(--f-m);font-size:12px;color:var(--slate);margin-top:2px}\n\n\/* ============ RESULT (receipt style, sticky) ============ *\/\n.receipt-shell{position:sticky;top:24px;transition:transform .5s cubic-bezier(.22,1,.36,1)}\n.receipt{background:var(--paper);border:2px solid var(--ink);border-radius:22px;padding:28px;box-shadow:0 30px 60px -20px rgba(10,10,10,0.28), 0 8px 16px -8px rgba(201,123,58,0.2);position:relative;overflow:hidden}\n.receipt::before{content:\"\";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--accent) 0%,#E4A86A 50%,var(--accent) 100%);z-index:1}\n.receipt::after{content:\"\\2022 WYCENA NA \u017bYWO\";position:absolute;top:14px;right:-34px;transform:rotate(35deg);background:var(--accent);color:#fff;padding:4px 40px;font-family:var(--f-m);font-size:9px;font-weight:700;letter-spacing:0.18em;z-index:1}\n\n.receipt .head-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px dashed var(--line-2);margin-bottom:20px}\n.receipt .head-row .t{font-family:var(--f-d);font-size:17px;font-weight:700}\n.receipt .head-row .s{font-family:var(--f-m);font-size:10px;letter-spacing:0.12em;color:var(--slate);text-transform:uppercase}\n\n.rcp-lines{display:flex;flex-direction:column;gap:10px;padding-bottom:20px;border-bottom:1px dashed var(--line-2);margin-bottom:20px}\n.rcp-line{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;font-family:var(--f-m);font-size:13px}\n.rcp-line .l{color:var(--slate-ink)}\n.rcp-line .l small{display:block;color:var(--slate);font-size:11px;letter-spacing:0.04em;margin-top:2px}\n.rcp-line .v{font-family:var(--f-d);font-weight:600;color:var(--ink);white-space:nowrap}\n.rcp-line--main .l{color:var(--ink);font-weight:600}\n.rcp-line--add .v{color:var(--accent)}\n\n.rcp-sum{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--ink);margin-bottom:20px}\n.rcp-sum .l{font-family:var(--f-m);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--slate)}\n.rcp-sum .v{font-family:var(--f-d);font-size:44px;font-weight:700;letter-spacing:-0.025em;line-height:1}\n.rcp-sum .v small{font-size:18px;color:var(--slate-ink);font-weight:700}\n\n.rcp-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:16px;background:var(--canvas);border-radius:12px;margin-bottom:20px}\n.rcp-meta .cell .l{font-family:var(--f-m);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate);margin-bottom:4px}\n.rcp-meta .cell .v{font-family:var(--f-d);font-size:14px;font-weight:600}\n\n.rcp-cta{display:flex;flex-direction:column;gap:8px}\n.btn-primary{padding:16px 22px;background:var(--ink);color:#fff;border-radius:999px;font-family:var(--f-d);font-weight:600;font-size:15px;text-align:center;text-decoration:none;letter-spacing:-0.01em;display:flex;align-items:center;justify-content:center;gap:8px}\n.btn-primary:hover{background:var(--accent-ink)}\n.btn-ghost{padding:14px 20px;background:transparent;color:var(--ink);border:1.5px solid var(--line-2);border-radius:999px;font-family:var(--f-d);font-weight:600;font-size:14px}\n\n.rcp-foot{margin-top:16px;font-family:var(--f-m);font-size:11px;color:var(--slate);line-height:1.5;letter-spacing:0.03em;text-align:center}\n\n\/* ============ PRICING TABLE (compact at top) ============ *\/\n.ptable{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border-radius:16px;overflow:hidden;margin-bottom:24px;border:1px solid var(--line)}\n.pcol{background:var(--paper);padding:20px 22px;display:flex;flex-direction:column;gap:8px;position:relative;cursor:pointer;transition:background .15s ease,box-shadow .2s ease}\n.pcol:not(.unavailable):hover{background:#FAFBFC}\n.pcol.featured{background:#0A0A0A;color:#fff}\n.pcol.featured:not(.unavailable):hover{background:#1a1a1a}\n.pcol.unavailable{cursor:not-allowed;opacity:0.6}\n.pcol.selected{box-shadow:inset 0 0 0 3px var(--accent)}\n.pcol.featured.selected{box-shadow:inset 0 0 0 3px var(--accent)}\n.pcol .pick{position:absolute;bottom:14px;right:14px;top:auto;font-family:var(--f-m);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate);display:none;align-items:center;gap:4px}\n.pcol.featured .pick{color:#B9C2CF}\n.pcol.selected .pick{display:inline-flex;color:var(--accent)}\n.pcol .pick svg{width:14px;height:14px}\n.pcol .top{display:flex;align-items:center;justify-content:space-between;gap:8px}\n.pcol .avail-top{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-m);font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:4px 8px 4px 6px;border-radius:999px;line-height:1;margin-top:8px;align-self:flex-start}\n.pcol .avail-top svg{width:12px;height:12px}\n.pcol .avail-top.yes{background:var(--ok-soft);color:var(--ok)}\n.pcol .avail-top.no{background:#F1F2F4;color:#9CA3AF}\n.pcol.featured .avail-top.yes{background:rgba(47,125,79,0.3);color:#9AE6B4}\n.pcol.featured .avail-top.no{background:rgba(255,255,255,0.1);color:#9CA3AF}\n.pcol .badge{font-family:var(--f-m);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--canvas);color:var(--slate-ink)}\n.pcol.featured .badge{background:var(--accent);color:#fff}\n.pcol .grade{font-family:var(--f-d);font-weight:700;font-size:14px;letter-spacing:-0.01em}\n.pcol .sub{font-family:var(--f-m);font-size:11px;color:var(--slate);letter-spacing:0.04em}\n.pcol.featured .sub{color:#B9C2CF}\n.pcol .big{font-family:var(--f-d);font-weight:700;font-size:36px;letter-spacing:-0.025em;line-height:1;margin-top:8px}\n.pcol .big small{font-family:var(--f-m);font-size:12px;font-weight:500;color:var(--slate);letter-spacing:0.06em;margin-left:4px}\n.pcol.featured .big small{color:#B9C2CF}\n.pcol .sq{font-family:var(--f-m);font-size:11px;color:var(--slate);letter-spacing:0.06em;margin-top:4px}\n.pcol.featured .sq{color:#B9C2CF}\n@media(max-width:700px){.ptable{grid-template-columns:1fr}}\n\n\/* ============ FOOTER NOTE ============ *\/\n.small-note{font-family:var(--f-m);font-size:11px;color:var(--slate);letter-spacing:0.04em;margin-top:12px;display:flex;gap:8px;align-items:flex-start;line-height:1.5}\n.small-note svg{flex-shrink:0;margin-top:1px;color:var(--accent)}\n\n\n<\/style>\n\n\n<!-- TOPBAR usuni\u0119ty -->\n<div style=\"display:none\">\n<\/div>\n\n<!-- HEAD -->\n<div class=\"head\">\n  <div class=\"wrap\">\n    <div class=\"eyebrow\">\u25cf Kalkulator zakupu<\/div>\n    <h1>Oblicz ile mat potrzebujesz \u2014<br\/>dosta\u0144 wycen\u0119 w 60 sekund<\/h1>\n    <p>Odpowiedz na 5 pyta\u0144. Podamy dok\u0142adn\u0105 liczb\u0119 mat, wag\u0119, liczb\u0119 palet i \u0142\u0105czny koszt. Bez rejestracji.<\/p>\n\n    <div class=\"steps\" id=\"steps-bar\">\n      <div class=\"step\" data-step=\"1\"><div class=\"num\">1<\/div><div class=\"lbl\">Mata<\/div><\/div>\n      <div class=\"step\" data-step=\"2\"><div class=\"num\">2<\/div><div class=\"lbl\">Gatunek<\/div><\/div>\n      <div class=\"step\" data-step=\"3\"><div class=\"num\">3<\/div><div class=\"lbl\">Ile<\/div><\/div>\n      <div class=\"step\" data-step=\"4\"><div class=\"num\">4<\/div><div class=\"lbl\">Dostawa<\/div><\/div>\n      <div class=\"step\" data-step=\"5\"><div class=\"num\">5<\/div><div class=\"lbl\">VAT<\/div><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- MAIN -->\n<div class=\"main\">\n  <div class=\"wrap\">\n\n    <!-- CENNIK COMPACT -->\n    <div class=\"layout\">\n\n      <!-- LEFT: FORM PANELS -->\n      <div>\n\n        <!-- STEP 1 \u00b7 MATA -->\n        <section class=\"panel\" data-panel=\"1\">\n          <h2><span class=\"bullet\">1<\/span>Wybierz grubo\u015b\u0107 maty<\/h2>\n          <p class=\"hint\">Cie\u0144sza (M-PRO) na piesze wej\u015bcia i lekki sprz\u0119t. Grubsza (L-PRO) pod ci\u0119\u017ckie maszyny i parkingi.<\/p>\n          <div class=\"choices\">\n            <button class=\"choice\" data-k=\"24\">\n              <span class=\"check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><path d=\"M5 12 L10 17 L19 7\"\/><\/svg><\/span>\n              <svg class=\"icn\" viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n                <rect x=\"6\" y=\"20\" width=\"36\" height=\"8\" rx=\"1\"\/>\n                <path d=\"M6 24 h36\" stroke-dasharray=\"3 3\" opacity=\"0.4\"\/>\n                <text x=\"24\" y=\"17\" text-anchor=\"middle\" font-family=\"JetBrains Mono\" font-size=\"7\" fill=\"currentColor\" stroke=\"none\">2,4 cm<\/text>\n              <\/svg>\n              <div>\n                <div class=\"t\">Mata 2,4 cm \u00b7 M-PRO<\/div>\n                <div class=\"d\">Cienka \u00b7 29 kg\/szt. \u00b7 do pieszych i lekkiego transportu<\/div>\n              <\/div>\n            <\/button>\n            <button class=\"choice active\" data-k=\"32\">\n              <span class=\"check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><path d=\"M5 12 L10 17 L19 7\"\/><\/svg><\/span>\n              <svg class=\"icn\" viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n                <rect x=\"6\" y=\"17\" width=\"36\" height=\"14\" rx=\"1\"\/>\n                <path d=\"M6 24 h36\" stroke-dasharray=\"3 3\" opacity=\"0.4\"\/>\n                <text x=\"24\" y=\"14\" text-anchor=\"middle\" font-family=\"JetBrains Mono\" font-size=\"7\" fill=\"currentColor\" stroke=\"none\">3,2 cm<\/text>\n              <\/svg>\n              <div>\n                <div class=\"t\">Mata 3,2 cm \u00b7 L-PRO<\/div>\n                <div class=\"d\">Gruba \u00b7 33 kg\/szt. \u00b7 do ci\u0119\u017ckich maszyn i pojazd\u00f3w<\/div>\n              <\/div>\n            <\/button>\n          <\/div>\n        <\/section>\n\n        <!-- STEP 2 \u00b7 GATUNEK -->\n        <section class=\"panel\" data-panel=\"2\">\n          <h2><span class=\"bullet\">2<\/span>Wybierz gatunek<\/h2>\n          <p class=\"hint\">Gatunek B i C to sprawne panele z wad\u0105 wizualn\u0105 \u2014 taniej przy zachowanej funkcji.<\/p>\n          <div class=\"ptable\">\n            <div class=\"pcol featured selected\" data-grade-card=\"A\">\n              <div class=\"top\"><span class=\"grade\">Gatunek A<\/span><span class=\"badge\">\u2605 Polecany<\/span><\/div>\n              <span class=\"pick\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><path d=\"M5 12 L10 17 L19 7\"\/><\/svg>Wybrane<\/span>\n              <div class=\"sub\">Cena nominalna \u00b7 bez wad<\/div>\n              <span class=\"avail-top yes\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><path d=\"M5 12 L10 17 L19 7\"\/><\/svg>Dost\u0119pny<\/span>\n              <div class=\"big\">58,50<small>z\u0142 \/ szt.<\/small><\/div>\n            <\/div>\n            <div class=\"pcol\" data-grade-card=\"B\">\n              <div class=\"top\"><span class=\"grade\">Gatunek B<\/span><span class=\"badge\">\u21bb Rotacja<\/span><\/div>\n              <span class=\"pick\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><path d=\"M5 12 L10 17 L19 7\"\/><\/svg>Wybrane<\/span>\n              <div class=\"sub\">Drobne wady produkcyjne \u00b7 w\u0142a\u015bciwo\u015bci techniczne zachowane<\/div>\n              <span class=\"avail-top yes\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><path d=\"M5 12 L10 17 L19 7\"\/><\/svg>Dost\u0119pny<\/span>\n              <div class=\"big\">50,00<small>z\u0142 \/ szt.<\/small><\/div>\n            <\/div>\n            <div class=\"pcol unavailable\" data-grade-card=\"C\">\n              <div class=\"top\"><span class=\"grade\">Gatunek C<\/span><span class=\"badge\">\u21bb Rotacja<\/span><\/div>\n              <div class=\"sub\">Du\u017ce wady produkcyjne \u00b7 w\u0142a\u015bciwo\u015bci techniczne zachowane<\/div>\n              <span class=\"avail-top no\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M8 12 h8\"\/><\/svg>Niedost\u0119pny<\/span>\n              <div class=\"big\">30,00<small>z\u0142 \/ szt.<\/small><\/div>\n            <\/div>\n          <\/div>\n        <\/section>\n\n        <!-- STEP 3 \u00b7 ILE -->\n        <section class=\"panel\" data-panel=\"3\">\n          <h2><span class=\"bullet\">3<\/span>Ile potrzebujesz?<\/h2>\n          <p class=\"hint\">Wybierz scenariusz \u2014 dalszy uk\u0142ad dopasuje si\u0119 sam.<\/p>\n\n          <div class=\"choices\" style=\"margin-bottom:24px\">\n            <button class=\"choice active\" data-m=\"area\">\n              <span class=\"check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><path d=\"M5 12 L10 17 L19 7\"\/><\/svg><\/span>\n              <svg class=\"icn\" viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n                <rect x=\"8\" y=\"8\" width=\"32\" height=\"32\" rx=\"2\"\/>\n                <path d=\"M14 14 h28 M14 20 h28 M14 26 h28 M14 32 h28 M14 8 v32 M20 8 v32 M26 8 v32 M32 8 v32\" opacity=\"0.3\"\/>\n              <\/svg>\n              <div><div class=\"t\">Powierzchnia<\/div><div class=\"d\">Pe\u0142ny prostok\u0105t \/ du\u017cy teren<\/div><\/div>\n            <\/button>\n            <button class=\"choice\" data-m=\"twoTrack\">\n              <span class=\"check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><path d=\"M5 12 L10 17 L19 7\"\/><\/svg><\/span>\n              <svg class=\"icn\" viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n                <rect x=\"10\" y=\"6\" width=\"8\" height=\"36\" rx=\"1\"\/>\n                <rect x=\"30\" y=\"6\" width=\"8\" height=\"36\" rx=\"1\"\/>\n                <circle cx=\"24\" cy=\"14\" r=\"2\" fill=\"currentColor\" stroke=\"none\"\/>\n                <circle cx=\"24\" cy=\"34\" r=\"2\" fill=\"currentColor\" stroke=\"none\"\/>\n              <\/svg>\n              <div><div class=\"t\">Dwu\u015blad<\/div><div class=\"d\">Dwa pasy pod ko\u0142a pojazdu<\/div><\/div>\n            <\/button>\n            <button class=\"choice\" data-m=\"oneTrack\">\n              <span class=\"check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><path d=\"M5 12 L10 17 L19 7\"\/><\/svg><\/span>\n              <svg class=\"icn\" viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n                <rect x=\"18\" y=\"6\" width=\"12\" height=\"36\" rx=\"1\"\/>\n                <path d=\"M24 10 v28\" stroke-dasharray=\"2 3\" opacity=\"0.4\"\/>\n              <\/svg>\n              <div><div class=\"t\">Jedno\u015blad<\/div><div class=\"d\">W\u0105ska droga jednopasmowa<\/div><\/div>\n            <\/button>\n            <button class=\"choice\" data-m=\"manual\">\n              <span class=\"check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><path d=\"M5 12 L10 17 L19 7\"\/><\/svg><\/span>\n              <svg class=\"icn\" viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"24\" cy=\"10\" r=\"6\" fill=\"currentColor\" stroke=\"none\"\/>\n                <path d=\"M24 16 v22\"\/>\n                <rect x=\"16\" y=\"38\" width=\"16\" height=\"4\" rx=\"2\" fill=\"currentColor\" stroke=\"none\"\/>\n                <path d=\"M14 24 h20\"\/>\n                <path d=\"M14 31 h20\"\/>\n                <text x=\"12\" y=\"26\" font-family=\"JetBrains Mono\" font-size=\"5\" fill=\"currentColor\" stroke=\"none\" text-anchor=\"end\">1<\/text>\n                <text x=\"36\" y=\"26\" font-family=\"JetBrains Mono\" font-size=\"5\" fill=\"currentColor\" stroke=\"none\">3<\/text>\n                <text x=\"12\" y=\"33\" font-family=\"JetBrains Mono\" font-size=\"5\" fill=\"currentColor\" stroke=\"none\" text-anchor=\"end\">2<\/text>\n                <text x=\"36\" y=\"33\" font-family=\"JetBrains Mono\" font-size=\"5\" fill=\"currentColor\" stroke=\"none\">4<\/text>\n              <\/svg>\n              <div><div class=\"t\">R\u0119cznie<\/div><div class=\"d\">Znam dok\u0142adn\u0105 liczb\u0119 sztuk<\/div><\/div>\n            <\/button>\n          <\/div>\n\n          <!-- PARAMS -->\n          <div id=\"params\"><\/div>\n        <\/section>\n\n        <!-- STEP 4 \u00b7 DOSTAWA -->\n        <section class=\"panel\" data-panel=\"4\">\n          <h2><span class=\"bullet\">4<\/span>Dostawa<\/h2>\n          <p class=\"hint\">Koszt transportu liczymy po wadze \u2014 automatycznie dobieramy palety.<\/p>\n          <div class=\"radiolist\" id=\"delivery\"><\/div>\n\n          <label class=\"check-opt\" id=\"cod-label\" style=\"margin-top:16px\">\n            <input type=\"checkbox\" id=\"cod\"\/>\n            <div style=\"flex:1\">\n              <div class=\"t\">P\u0142atno\u015b\u0107 przy odbiorze (pobranie)<\/div>\n              <div class=\"d\">+ 25 z\u0142 dop\u0142aty do przesy\u0142ki<\/div>\n            <\/div>\n          <\/label>\n        <\/section>\n\n        <!-- STEP 5 \u00b7 VAT -->\n        <section class=\"panel\" data-panel=\"5\">\n          <h2><span class=\"bullet\">5<\/span>Rodzaj klienta (VAT)<\/h2>\n          <p class=\"hint\">Wybierz typ klienta \u2014 dla klienta biznesowego z VAT 23% doliczymy podatek do wyceny.<\/p>\n          <div class=\"radiolist\" id=\"vat-list\">\n            <button class=\"radio active\" data-v=\"ind\"><span class=\"dot\"><\/span><div class=\"txt\"><div class=\"t\">Klient indywidualny<\/div><div class=\"d\">VAT 0% \u00b7 cena netto = brutto<\/div><\/div><div class=\"price free\">VAT 0%<\/div><\/button>\n            <button class=\"radio\" data-v=\"biz0\"><span class=\"dot\"><\/span><div class=\"txt\"><div class=\"t\">Klient biznesowy<\/div><div class=\"d\">VAT 0% \u00b7 cena netto = brutto<\/div><\/div><div class=\"price free\">VAT 0%<\/div><\/button>\n            <button class=\"radio\" data-v=\"biz23\"><span class=\"dot\"><\/span><div class=\"txt\"><div class=\"t\">Klient biznesowy<\/div><div class=\"d\">VAT 23% \u00b7 podatek doliczony do wyceny<\/div><\/div><div class=\"price\">+ VAT 23%<\/div><\/button>\n          <\/div>\n        <\/section>\n      <\/div>\n\n      <!-- RIGHT: RECEIPT -->\n      <aside>\n        <div class=\"receipt-shell\" id=\"receipt-shell\">\n        <div class=\"receipt\">\n          <div class=\"head-row\">\n            <div class=\"t\">Twoja wycena<\/div>\n            <div class=\"s\">Podgl\u0105d na \u017cywo<\/div>\n          <\/div>\n\n          <div class=\"rcp-lines\" id=\"rcp-lines\"><\/div>\n\n          <div class=\"rcp-sum\">\n            <div class=\"l\">Razem brutto<\/div>\n            <div class=\"v\"><span id=\"grand\">0<\/span> <small>z\u0142<\/small><\/div>\n          <\/div>\n\n          <div class=\"rcp-meta\">\n            <div class=\"cell\"><div class=\"l\">Mat razem<\/div><div class=\"v\" id=\"m-panels\">0 szt.<\/div><\/div>\n            <div class=\"cell\"><div class=\"l\">Pokrycie<\/div><div class=\"v\" id=\"m-area\">0 m\u00b2<\/div><\/div>\n            <div class=\"cell\"><div class=\"l\">Waga<\/div><div class=\"v\" id=\"m-weight\">0 kg<\/div><\/div>\n            <div class=\"cell\"><div class=\"l\">Palety<\/div><div class=\"v\" id=\"m-pal\">0<\/div><\/div>\n          <\/div>\n\n          <div class=\"rcp-cta\">\n            <a href=\"#\" class=\"btn-primary\">Wy\u015blij jako zapytanie\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12 h14 M13 6 l6 6 -6 6\"\/><\/svg>\n            <\/a>\n            <button class=\"btn-ghost\">Pobierz ofert\u0119 PDF<\/button>\n          <\/div>\n\n          <div class=\"rcp-foot\">\n            \u2139 Wycena orientacyjna. Ostateczna oferta z kosztem transportu pod dok\u0142adny adres w ci\u0105gu 24 h.\n          <\/div>\n        <\/div>\n        <\/div>\n\n        <div class=\"small-note\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 8 v4 M12 16 h.01\"\/><\/svg>\n          <span>Paleta ma\u0142a do 1000 kg = 240 z\u0142 \u00b7 paleta du\u017ca do 1200 kg = 290 z\u0142. Odbi\u00f3r w\u0142asny (Warszawa \/ Racib\u00f3rz) bez dop\u0142at.<\/span>\n        <\/div>\n      <\/aside>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n\n\n<script>\n(function(){\n  var PRICES={24:{name:\"M-PRO\",weight:29},32:{name:\"L-PRO\",weight:33}};\n  var GRADES={A:{price:58.50,label:\"Gatunek A\"},B:{price:50,label:\"Gatunek B\"},C:{price:30,label:\"Gatunek C\"}};\n  var PANEL_AREA=0.96;\n  var s={thickness:\"32\",grade:\"A\",mode:\"area\",areaMode:\"dims\",dimL:25,dimW:20,areaDirect:500,length:50,orient:\"len\",oneSize:\"1.2\",manual:100,delivery:\"ship\",cod:false,vat:\"ind\",savedItems:[]};\n\n  function fPLN(n){return n.toLocaleString(\"pl-PL\",{minimumFractionDigits:2,maximumFractionDigits:2})}\n  function fPLN0(n){return Math.round(n).toLocaleString(\"pl-PL\")}\n  function splitPal(w){var r=w,L=0,S=0,f=0;while(r>0){if(r>1000){L++;f+=290;r-=Math.min(r,1200)}else{S++;f+=240;r=0}}return{L:L,S:S,fee:f,tot:L+S}}\n  function currentArea(){\n    if(s.mode===\"area\")return s.areaMode===\"dims\"?(s.dimL*s.dimW):s.areaDirect;\n    return 0;\n  }\n  function currentPanels(){\n    if(s.mode===\"area\")return Math.ceil(currentArea()\/PANEL_AREA);\n    if(s.mode===\"twoTrack\")return Math.ceil(s.length\/(s.orient===\"len\"?1.2:0.8))*2;\n    if(s.mode===\"oneTrack\")return Math.ceil(s.length\/parseFloat(s.oneSize));\n    return s.manual;\n  }\n  function savedPanels(){return s.savedItems.reduce(function(a,it){return a+it.panels},0)}\n  function savedArea(){return s.savedItems.reduce(function(a,it){return a+(it.area||0)},0)}\n  function panels(){return currentPanels()+savedPanels()}\n\n  \/\/ Step 1 \u00b7 thickness\n  document.querySelectorAll('[data-panel=\"1\"] .choice').forEach(function(b){b.addEventListener(\"click\",function(){s.thickness=b.dataset.k;document.querySelectorAll('[data-panel=\"1\"] .choice').forEach(function(c){c.classList.toggle(\"active\",c===b)});updateSteps();render();})});\n\n  \/\/ Step 3 \u00b7 mode\n  document.querySelectorAll('[data-panel=\"3\"] > .choices .choice').forEach(function(b){b.addEventListener(\"click\",function(){s.mode=b.dataset.m;document.querySelectorAll('[data-panel=\"3\"] > .choices .choice').forEach(function(c){c.classList.toggle(\"active\",c===b)});renderParams();updateSteps();render();})});\n\n  function renderParams(){\n    var el=document.getElementById(\"params\"),html=\"\";\n    if(s.mode===\"area\"){\n      html+='<div class=\"segrow\" style=\"margin-bottom:16px\">'\n        +'<button class=\"seg '+(s.areaMode===\"dims\"?\"active\":\"\")+'\" data-am=\"dims\"><strong>D\u0142ugo\u015b\u0107 \u00d7 szeroko\u015b\u0107<\/strong><small>wyliczamy automatycznie<\/small><\/button>'\n        +'<button class=\"seg '+(s.areaMode===\"direct\"?\"active\":\"\")+'\" data-am=\"direct\"><strong>Wpisz metry\u00b2<\/strong><small>znam powierzchni\u0119<\/small><\/button>'\n        +'<\/div>';\n      if(s.areaMode===\"dims\"){\n        html+='<div class=\"numbox--row\">'\n          +'<div class=\"numbox\"><div class=\"lab\">D\u0142ugo\u015b\u0107<\/div>'+stepper(\"dimL\",s.dimL,\"m\",1)+'<\/div>'\n          +'<div class=\"numbox\"><div class=\"lab\">Szeroko\u015b\u0107<\/div>'+stepper(\"dimW\",s.dimW,\"m\",1)+'<\/div>'\n          +'<\/div>'\n          +'<div class=\"dimsum\"><span class=\"l\">= Powierzchnia<\/span><span class=\"v\">'+(s.dimL*s.dimW).toLocaleString(\"pl-PL\",{maximumFractionDigits:1})+' m\u00b2<\/span><\/div>'\n          +'<div class=\"dimacts\">'\n          +'<button class=\"dimact\" data-action=\"add-dims\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M12 5 v14 M5 12 h14\"\/><\/svg>Dodaj kolejne<\/button>'\n          +(s.savedItems.length?'<button class=\"dimact dimact--danger\" data-action=\"clear-all\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 6 h18 M8 6 V4 a1 1 0 0 1 1 -1 h6 a1 1 0 0 1 1 1 v2 M6 6 l1 14 a2 2 0 0 0 2 2 h6 a2 2 0 0 0 2 -2 l1 -14 M10 11 v6 M14 11 v6\"\/><\/svg>Wyczy\u015b\u0107 wyliczenia<\/button>':'')\n          +'<\/div>'\n          +renderSavedList();\n      } else {\n        html+='<div class=\"numbox\"><div class=\"lab\">Powierzchnia w metrach\u00b2<\/div>'+stepper(\"areaDirect\",s.areaDirect,\"m\u00b2\",10)\n          +'<div class=\"quick\">'+[50,100,200,500,1000,2000].map(function(v){return '<button data-qk=\"areaDirect\" data-qv=\"'+v+'\" class=\"'+(s.areaDirect===v?\"active\":\"\")+'\">'+v+' m\u00b2<\/button>'}).join(\"\")+'<\/div>'\n          +'<\/div>'\n          +'<div class=\"dimacts\">'\n          +'<button class=\"dimact\" data-action=\"add-direct\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M12 5 v14 M5 12 h14\"\/><\/svg>Dodaj kolejne<\/button>'\n          +(s.savedItems.length?'<button class=\"dimact dimact--danger\" data-action=\"clear-all\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 6 h18 M8 6 V4 a1 1 0 0 1 1 -1 h6 a1 1 0 0 1 1 1 v2 M6 6 l1 14 a2 2 0 0 0 2 2 h6 a2 2 0 0 0 2 -2 l1 -14 M10 11 v6 M14 11 v6\"\/><\/svg>Wyczy\u015b\u0107 wyliczenia<\/button>':'')\n          +'<\/div>'\n          +renderSavedList();\n      }\n    } else if(s.mode===\"twoTrack\"){\n      html+='<div class=\"numbox\"><div class=\"lab\">D\u0142ugo\u015b\u0107 drogi<\/div>'+stepper(\"length\",s.length,\"m\",5)\n        +'<div class=\"quick\">'+[25,50,100,200,500].map(function(v){return '<button data-qk=\"length\" data-qv=\"'+v+'\" class=\"'+(s.length===v?\"active\":\"\")+'\">'+v+' m<\/button>'}).join(\"\")+'<\/div>'\n        +'<\/div>'\n        +'<div class=\"segrow\" style=\"margin-top:16px\">'\n        +'<button class=\"seg '+(s.orient===\"len\"?\"active\":\"\")+'\" data-orient=\"len\"><strong>Panel po d\u0142ugo\u015bci<\/strong><small>1,2 m \/ szt.<\/small><\/button>'\n        +'<button class=\"seg '+(s.orient===\"width\"?\"active\":\"\")+'\" data-orient=\"width\"><strong>Panel po szeroko\u015bci<\/strong><small>0,8 m \/ szt.<\/small><\/button>'\n        +'<\/div>';\n    } else if(s.mode===\"oneTrack\"){\n      html+='<div class=\"numbox\"><div class=\"lab\">D\u0142ugo\u015b\u0107 drogi<\/div>'+stepper(\"length\",s.length,\"m\",5)\n        +'<div class=\"quick\">'+[25,50,100,200,500].map(function(v){return '<button data-qk=\"length\" data-qv=\"'+v+'\" class=\"'+(s.length===v?\"active\":\"\")+'\">'+v+' m<\/button>'}).join(\"\")+'<\/div>'\n        +'<\/div>'\n        +'<div class=\"segrow\" style=\"margin-top:16px\">'\n        +'<button class=\"seg '+(s.oneSize===\"1.2\"?\"active\":\"\")+'\" data-one=\"1.2\"><strong>Szeroko\u015b\u0107 1,2 m<\/strong><small>szerszy pas<\/small><\/button>'\n        +'<button class=\"seg '+(s.oneSize===\"0.8\"?\"active\":\"\")+'\" data-one=\"0.8\"><strong>Szeroko\u015b\u0107 0,8 m<\/strong><small>w\u0119\u017cszy pas<\/small><\/button>'\n        +'<\/div>';\n    } else {\n      html+='<div class=\"numbox\"><div class=\"lab\">Dok\u0142adna liczba sztuk \u00b7 krok 1<\/div>'+stepper(\"manual\",s.manual,\"szt.\",1)\n        +'<div class=\"quick\">'+[10,25,50,100,250,500].map(function(v){return '<button data-qk=\"manual\" data-qv=\"'+v+'\" class=\"'+(s.manual===v?\"active\":\"\")+'\">'+v+'<\/button>'}).join(\"\")+'<\/div>'\n        +'<\/div>';\n    }\n    el.innerHTML=html;\n    el.querySelectorAll(\"[data-am]\").forEach(function(b){b.addEventListener(\"click\",function(){s.areaMode=b.dataset.am;renderParams();updateSteps();render()})});\n    el.querySelectorAll(\"[data-orient]\").forEach(function(b){b.addEventListener(\"click\",function(){s.orient=b.dataset.orient;renderParams();updateSteps();render()})});\n    el.querySelectorAll(\"[data-one]\").forEach(function(b){b.addEventListener(\"click\",function(){s.oneSize=b.dataset.one;renderParams();updateSteps();render()})});\n    el.querySelectorAll(\"[data-qk]\").forEach(function(b){b.addEventListener(\"click\",function(){s[b.dataset.qk]=parseFloat(b.dataset.qv);renderParams();updateSteps();render()})});\n    el.querySelectorAll(\"[data-action]\").forEach(function(b){b.addEventListener(\"click\",function(){\n      var a=b.dataset.action;\n      if(a===\"add-dims\"){\n        var area=s.dimL*s.dimW; if(area<=0)return;\n        s.savedItems.push({type:\"dims\",L:s.dimL,W:s.dimW,area:area,panels:Math.ceil(area\/PANEL_AREA)});\n        s.dimL=0;s.dimW=0;\n      } else if(a===\"add-direct\"){\n        if(s.areaDirect<=0)return;\n        s.savedItems.push({type:\"direct\",area:s.areaDirect,panels:Math.ceil(s.areaDirect\/PANEL_AREA)});\n        s.areaDirect=0;\n      } else if(a===\"clear-all\"){\n        s.savedItems=[];\n      } else if(a===\"rm-item\"){\n        s.savedItems.splice(parseInt(b.dataset.idx,10),1);\n      }\n      renderParams();updateSteps();render();\n    })});\n    bindSteppers(el);\n  }\n\n  function renderSavedList(){\n    if(!s.savedItems.length)return \"\";\n    var rows=s.savedItems.map(function(it,i){\n      var desc=it.type===\"dims\"\n        ? '<strong>'+it.L+' \u00d7 '+it.W+' m<\/strong> = '+it.area.toLocaleString(\"pl-PL\",{maximumFractionDigits:1})+' m\u00b2 \u00b7 '+it.panels+' szt.'\n        : '<strong>'+it.area.toLocaleString(\"pl-PL\")+' m\u00b2<\/strong> \u00b7 '+it.panels+' szt.';\n      return '<div class=\"saved-item\"><div class=\"num\">'+(i+1)+'<\/div><div class=\"desc\">'+desc+'<\/div><button class=\"rm\" data-action=\"rm-item\" data-idx=\"'+i+'\" title=\"Usu\u0144 pozycj\u0119\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M6 6 l12 12 M18 6 l-12 12\"\/><\/svg><\/button><\/div>';\n    }).join(\"\");\n    var totArea=savedArea(),totPanels=savedPanels();\n    return '<div class=\"savedlist\">'+rows\n      +'<div class=\"dimsum\" style=\"margin-top:6px;border-style:solid;border-color:var(--ink);background:#fafafa\"><span class=\"l\">\u03a3 Zapisane pozycje ('+s.savedItems.length+')<\/span><span class=\"v\">'+totArea.toLocaleString(\"pl-PL\",{maximumFractionDigits:1})+' m\u00b2 \u00b7 '+totPanels+' szt.<\/span><\/div>'\n      +'<\/div>';\n  }\n\n  function stepper(key,val,sfx,step){\n    return '<div class=\"stepper\" data-step=\"'+key+'\" data-inc=\"'+step+'\">'\n      +'<button data-d=\"-1\">\u2212<\/button>'\n      +'<input type=\"number\" value=\"'+val+'\"\/>'\n      +'<span class=\"sfx\">'+sfx+'<\/span>'\n      +'<button data-d=\"1\">+<\/button>'\n      +'<\/div>';\n  }\n  function bindSteppers(root){\n    root.querySelectorAll(\".stepper\").forEach(function(st){\n      var k=st.dataset.step,inc=parseFloat(st.dataset.inc),input=st.querySelector(\"input\");\n      st.querySelectorAll(\"button\").forEach(function(b){b.addEventListener(\"click\",function(){var d=parseInt(b.dataset.d,10);s[k]=Math.max(0,parseFloat(s[k])+d*inc);renderParams();updateSteps();render()})});\n      input.addEventListener(\"input\",function(){s[k]=parseFloat(input.value)||0;render()});\n    });\n  }\n\n  function renderDelivery(){\n    var w=panels()*PRICES[s.thickness].weight, p=splitPal(w);\n    var list=document.getElementById(\"delivery\");\n    var options=[\n      {k:\"ship\",t:\"Dostawa na adres\",d:p.tot+\" \u00d7 paleta (\"+(p.L?p.L+\" du\u017cych\":\"\")+(p.L&&p.S?\" + \":\"\")+(p.S?p.S+\" ma\u0142ych\":\"\")+\")\",price:p.fee+\" z\u0142\"},\n      {k:\"pickup-warszawa\",t:\"Odbi\u00f3r w\u0142asny \u00b7 Warszawa\",d:\"Magazyn Warszawa \u00b7 bez dop\u0142aty\",price:\"0 z\u0142\",free:true},\n      {k:\"pickup-raciborz\",t:\"Odbi\u00f3r w\u0142asny \u00b7 Racib\u00f3rz\",d:\"Magazyn Racib\u00f3rz \u00b7 bez dop\u0142aty\",price:\"0 z\u0142\",free:true}\n    ];\n    list.innerHTML=options.map(function(o){return '<button class=\"radio '+(s.delivery===o.k?\"active\":\"\")+'\" data-dk=\"'+o.k+'\"><span class=\"dot\"><\/span><div class=\"txt\"><div class=\"t\">'+o.t+'<\/div><div class=\"d\">'+o.d+'<\/div><\/div><div class=\"price '+(o.free?\"free\":\"\")+'\">'+o.price+'<\/div><\/button>'}).join(\"\");\n    list.querySelectorAll(\"[data-dk]\").forEach(function(b){b.addEventListener(\"click\",function(){s.delivery=b.dataset.dk;updateSteps();render()})});\n  }\n\n  function updateSteps(){\n    \/\/ 1=mata, 2=gatunek, 3=ile, 4=dostawa, 5=vat\n    document.querySelectorAll(\".step\").forEach(function(el){el.classList.remove(\"done\",\"active\")});\n    if(s.thickness) document.querySelector('[data-step=\"1\"]').classList.add(\"done\");\n    if(s.grade) document.querySelector('[data-step=\"2\"]').classList.add(\"done\");\n    var ileDone = (s.mode===\"area\" ? (s.areaMode===\"dims\" ? (s.dimL>0&&s.dimW>0) : s.areaDirect>0) : (s.mode===\"manual\" ? s.manual>0 : s.length>0));\n    if(ileDone) document.querySelector('[data-step=\"3\"]').classList.add(\"done\");\n    else document.querySelector('[data-step=\"3\"]').classList.add(\"active\");\n    if(s.delivery) document.querySelector('[data-step=\"4\"]').classList.add(\"done\");\n    if(s.vat) document.querySelector('[data-step=\"5\"]').classList.add(\"done\");\n  }\n\n  function render(){\n    var P=panels();\n    var area=P*PANEL_AREA;\n    var pricePer=GRADES[s.grade].price;\n    var sub=P*pricePer;\n    var w=P*PRICES[s.thickness].weight;\n    var p=splitPal(w);\n    var isPick=s.delivery.indexOf(\"pickup\")===0;\n    var delFee=isPick?0:p.fee;\n    var codFee=s.cod?25:0;\n    var net=sub+delFee+codFee;\n    var vatAmt = s.vat===\"biz23\" ? net*0.23 : 0;\n    var grand=net+vatAmt;\n\n    document.getElementById(\"grand\").textContent=fPLN0(grand);\n    document.getElementById(\"m-panels\").textContent=P+\" szt.\";\n    document.getElementById(\"m-area\").textContent=area.toFixed(1)+\" m\u00b2\";\n    document.getElementById(\"m-weight\").textContent=fPLN0(w)+\" kg\";\n    document.getElementById(\"m-pal\").textContent=isPick?\"\u2014\":p.tot+\"\u00d7\";\n\n    var lines=[\n      {l:\"Maty \"+GRADES[s.grade].label,s:P+\" szt. \u00d7 \"+fPLN(pricePer)+\" z\u0142\",v:fPLN0(sub)+\" z\u0142\",main:true}\n    ];\n    if(delFee>0) lines.push({l:\"Dostawa\",s:p.tot+\" \u00d7 paleta\",v:fPLN0(delFee)+\" z\u0142\"});\n    else lines.push({l:\"Odbi\u00f3r w\u0142asny\",s:s.delivery.indexOf(\"warszawa\")>-1?\"Warszawa\":\"Racib\u00f3rz\",v:\"0 z\u0142\"});\n    if(codFee>0) lines.push({l:\"Pobranie\",s:\"P\u0142atno\u015b\u0107 przy odbiorze\",v:\"+25 z\u0142\",add:true});\n    if(vatAmt>0) lines.push({l:\"VAT 23%\",s:\"Klient biznesowy\",v:\"+\"+fPLN0(vatAmt)+\" z\u0142\",add:true});\n    document.getElementById(\"rcp-lines\").innerHTML=lines.map(function(L){return '<div class=\"rcp-line '+(L.main?\"rcp-line--main\":\"\")+' '+(L.add?\"rcp-line--add\":\"\")+'\"><div class=\"l\">'+L.l+'<small>'+L.s+'<\/small><\/div><div class=\"v\">'+L.v+'<\/div><\/div>'}).join(\"\");\n\n    renderDelivery();\n  }\n\n  document.getElementById(\"cod\").addEventListener(\"change\",function(e){s.cod=e.target.checked;document.getElementById(\"cod-label\").classList.toggle(\"active\",e.target.checked);render()});\n\n  document.querySelectorAll('#vat-list .radio').forEach(function(b){b.addEventListener(\"click\",function(){s.vat=b.dataset.v;document.querySelectorAll('#vat-list .radio').forEach(function(r){r.classList.toggle(\"active\",r===b)});render()})});\n\n  \/\/ Klikanie kart w g\u00f3rnym cenniku \u2192 synchronizacja z gatunkiem (krok 2)\n  function syncGradeCards(){\n    document.querySelectorAll(\"[data-grade-card]\").forEach(function(c){c.classList.toggle(\"selected\",c.dataset.gradeCard===s.grade)});\n  }\n  document.querySelectorAll(\"[data-grade-card]\").forEach(function(c){c.addEventListener(\"click\",function(){\n    if(c.classList.contains(\"unavailable\"))return;\n    s.grade=c.dataset.gradeCard;\n    syncGradeCards();\n    updateSteps();render();\n  })});\n\n  renderParams();\n  updateSteps();\n  render();\n\n  \/\/ Parallax floating on the receipt\n  var rshell = document.getElementById(\"receipt-shell\");\n  var lastY = 0;\n  window.addEventListener(\"scroll\", function(){\n    var y = window.scrollY;\n    var d = y - lastY;\n    lastY = y;\n    if(rshell){\n      var offset = Math.max(-10, Math.min(10, d * 0.8));\n      rshell.style.transform = \"translateY(\" + offset + \"px)\";\n      clearTimeout(window.__rtmo);\n      window.__rtmo = setTimeout(function(){rshell.style.transform=\"translateY(0)\"}, 120);\n    }\n  }, {passive:true});\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u25cf Kalkulator zakupu Oblicz ile mat potrzebujesz \u2014dosta\u0144 wycen\u0119 w 60 sekund Odpowiedz na 5 pyta\u0144. Podamy dok\u0142adn\u0105 liczb\u0119 mat, wag\u0119, liczb\u0119 palet i \u0142\u0105czny koszt. Bez rejestracji. 1Mata 2Gatunek 3Ile 4Dostawa 5VAT 1Wybierz grubo\u015b\u0107 maty Cie\u0144sza (M-PRO) na piesze wej\u015bcia i lekki sprz\u0119t. Grubsza (L-PRO) pod ci\u0119\u017ckie maszyny i parkingi. 2,4 cm Mata 2,4 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-81","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zpevneneplochy.cz\/index.php?rest_route=\/wp\/v2\/pages\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zpevneneplochy.cz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zpevneneplochy.cz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zpevneneplochy.cz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zpevneneplochy.cz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=81"}],"version-history":[{"count":19,"href":"https:\/\/zpevneneplochy.cz\/index.php?rest_route=\/wp\/v2\/pages\/81\/revisions"}],"predecessor-version":[{"id":206,"href":"https:\/\/zpevneneplochy.cz\/index.php?rest_route=\/wp\/v2\/pages\/81\/revisions\/206"}],"wp:attachment":[{"href":"https:\/\/zpevneneplochy.cz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}