/* NOWY WYGLĄD – KARTA PRODUKTU (makieta a-produkt-d2.html; reguły z baza.css + a.css makiety, przeniesione 1:1 tam, gdzie się da).
   Ładowane tylko przez templates/nowy/product.html.twig (?v=pm_nowy_v). Wspólne klasy (.btn, .pc, .hbox, .block, .sw…) są w nowy.css. */

.p-main{display:block}
.p-main>.wrap:first-child{padding-top:0}

/* ---------- góra: galeria | kupno */
.p-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start;padding:4px 0 12px}
.gal{position:relative;min-width:0}
.gal--tiles{position:sticky;top:20px}
.gal-main{position:relative;aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:var(--sky-50)}
.gal-stage,.gal-cur{position:absolute;inset:0}
.gal-stage{display:block}
.gal-cur img{width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.gal-brak{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;color:var(--muted);font-weight:600}
.gal-count{position:absolute;right:14px;bottom:14px;z-index:3;padding:5px 11px;border-radius:20px;background:rgba(14,47,79,.72);color:#fff;font-size:13px;font-weight:600}
.gal-nav{position:absolute;top:50%;z-index:3;margin-top:-24px;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--navy);display:grid;place-items:center;box-shadow:var(--shadow-2);opacity:0;transition:opacity .2s}
.gal-main:hover .gal-nav,.gal-nav:focus-visible{opacity:1}
.gal-prev{left:14px}.gal-prev .i{transform:rotate(180deg)}
.gal-next{right:14px}
.gal-hq{position:absolute;right:14px;top:14px;z-index:3;padding:4px 9px;border-radius:8px;background:rgba(14,47,79,.72);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;transition:background .3s}
.gal-hq.is-complete{background:var(--green)}
.gal-zoom{position:absolute;right:14px;bottom:52px;z-index:3;display:flex;align-items:center;gap:6px;padding:7px 12px;border:0;border-radius:10px;background:rgba(255,255,255,.94);color:var(--navy);font-size:13px;font-weight:700;box-shadow:var(--shadow-1);opacity:0;transition:opacity .2s}
.gal-main:hover .gal-zoom,.gal-zoom:focus-visible{opacity:1}
.gal-main.pm360-open .gal-zoom,.gal-main.pm360-open .gal-nav,.gal-main.pm360-open .gal-count,.gal-main.pm360-open .gal-hq{display:none}

/* obrót 360 (pm-360.js bez zmian; panel zastępuje zdjęcie w tym samym kadrze) */
.gal-main>.pm360-panel{position:absolute;inset:0;z-index:2;background:#fff}
.gal-main>.pm360-panel [data-pm360]{width:100%;height:100%}
.gal-main>.pm360-switch{position:absolute;left:14px;bottom:14px;z-index:4;margin:0}
.gal-main>.pm360-switch .pm360-switch__btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border:0;border-radius:12px;background:var(--navy);color:#fff;font-weight:700;font-size:14px;box-shadow:0 10px 24px -8px rgba(14,47,79,.6)}
.gal-main>.pm360-switch .pm360-switch__btn:hover{background:var(--blue-800)}
/* (08.10, Krist) „Zobacz w 3D” widoczny na zdjęciu (lewy górny róg); BEZ „Wróć do zdjęć” – powrót = klik w dowolne zdjęcie (prod.js) */
.gal-main>.pm360-switch{top:14px;bottom:auto}
.gal-main>.pm360-switch [data-pm360-open]{min-height:36px;padding:7px 13px;border-radius:999px;background:rgba(14,47,79,.88);font-size:13.5px;letter-spacing:.01em}
.gal-main>.pm360-switch [data-pm360-close]{display:none!important}
.tile--3d.is-on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,140,214,.25)}
.tile--3d[data-ladowanie]::after{content:attr(data-ladowanie);position:absolute;left:0;right:0;bottom:4px;font-size:11px;color:#BFD9EC}

/* kafelki 4 w rzędzie */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:1/1;padding:0;border:2px solid transparent;border-radius:14px;overflow:hidden;background:var(--sky-50);transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--sky-200);transform:translateY(-2px)}
.tile.is-on{border-color:var(--blue)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile--3d{background:radial-gradient(120% 90% at 30% 10%,#1E6FA8 0%,var(--navy) 70%);color:#fff}
.tile--3d .cube3d{color:var(--blue);margin-bottom:6px}
.tile--3d b{font-size:18px;line-height:1}
.tile--3d small{font-size:12px;color:#BFD9EC}
.tile--more img{filter:blur(1px) brightness(.55)}
.tile--more span{position:relative;display:grid;justify-items:center;color:#fff;font-size:13px;font-weight:600}
.tile--more b{font-size:26px;line-height:1.05}
.cube3d{position:relative;display:inline-block;width:26px;height:26px;transform-style:preserve-3d;animation:p-cube 6s linear infinite;flex:none}
.cube3d i{position:absolute;inset:0;border:2px solid currentColor;border-radius:3px;background:rgba(255,255,255,.12)}
.cube3d i:nth-child(1){transform:translateZ(13px)}.cube3d i:nth-child(2){transform:rotateY(180deg) translateZ(13px)}
.cube3d i:nth-child(3){transform:rotateY(90deg) translateZ(13px)}.cube3d i:nth-child(4){transform:rotateY(-90deg) translateZ(13px)}
.cube3d i:nth-child(5){transform:rotateX(90deg) translateZ(13px)}.cube3d i:nth-child(6){transform:rotateX(-90deg) translateZ(13px)}
@keyframes p-cube{from{transform:rotateX(-20deg) rotateY(0)}to{transform:rotateX(-20deg) rotateY(360deg)}}

/* filmy pod galerią */
.gal-films{margin-top:16px}
.gal-films-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px;font-weight:700;color:var(--navy)}
.gal-films-h .i{width:26px;height:26px;padding:6px;border-radius:50%;background:var(--orange-600);color:#fff;box-sizing:border-box}
.vids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vid{display:flex;align-items:center;gap:14px;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;text-align:left;min-width:0}
.vid:hover{border-color:var(--blue)}
.vid-img{position:relative;flex:none;width:120px;aspect-ratio:2/1;border-radius:10px;overflow:hidden;background:var(--sky-50)}
.vid-img img{width:100%;height:100%;object-fit:cover}
.vid-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.vid-play .i{width:36px;height:36px;padding:9px;border-radius:50%;background:var(--orange-600);box-sizing:border-box}
.vid-txt{min-width:0}
.vid-txt b{display:block;color:var(--navy);line-height:1.3}
.vid-txt small{color:var(--muted)}

/* ---------- kupno */
.buy{display:flex;flex-direction:column;gap:20px;min-width:0}
.buy h1,.buy-head h1{font-size:40px;line-height:1.1;font-weight:800;margin:-6px 0 0;overflow-wrap:anywhere}
.buy-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:14px;color:var(--muted)}
.code b{color:var(--navy)}
.stock{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:20px;background:var(--green-50);color:var(--green);font-weight:700;font-size:14px}
.stock.is-time{background:var(--sky-50);color:var(--blue-700)}
.stock.is-ask{background:var(--amber-50);color:var(--orange-700)}
.stock-od{font-weight:700;color:var(--orange-700)}
.flag-pl{display:inline-block;width:18px;height:12px;border-radius:2px;background:linear-gradient(#fff 50%,#DC143C 50%);box-shadow:0 0 0 1px rgba(14,47,79,.22);flex:none;vertical-align:-1px}
.pl-badge{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 8px;border-radius:20px;background:#fff;border:1px solid var(--line);color:var(--navy);font-weight:700;font-size:14px}

.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.facts li{display:flex;flex-direction:column;gap:2px;padding:12px 10px;border-radius:12px;background:#fff;border:1px solid var(--line);text-align:center;min-width:0}
.facts b{font-size:18px;color:var(--navy);white-space:nowrap}
.facts span{font-size:12.5px;color:var(--muted);line-height:1.25}
.facts--a li{display:grid;justify-items:center;align-content:start;gap:4px;padding:14px 6px 12px}
.facts--a .i{color:var(--blue-600);width:26px;height:26px;padding:4px;border-radius:8px;background:var(--sky-50);box-sizing:content-box}
.facts--a b{font-size:17px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.facts--a span{font-size:12px}
.facts--a .f-col{border-color:var(--sky-200)}
.facts--a .f-col b{white-space:normal;line-height:1.2;overflow-wrap:anywhere}
.facts--n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.facts--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.facts--n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.facts--n1{grid-template-columns:minmax(0,1fr)}
.facts--list{grid-template-columns:minmax(0,1fr)!important;gap:0}
.facts--list li{flex-direction:row-reverse;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border:0;border-bottom:1px dashed var(--line);border-radius:0;background:none;text-align:left}
.facts--list li:last-child{border-bottom:0}
.facts--list b{font-size:16px;white-space:normal;text-align:right}
.facts--list span{font-size:14px}

/* próbki kolorów (klasy z productSpecification.swatch_class: pm-product-spec__swatch--black itd.) */
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(14,47,79,.25);vertical-align:-1px;margin-right:6px;background:#ccc}
.sw--big{width:34px;height:34px;border-radius:9px;margin:0;box-shadow:inset 0 0 0 1px rgba(14,47,79,.25),0 0 0 3px #fff,0 0 0 4px var(--line)}
.swatch{display:inline-block;width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(14,47,79,.25);flex:none}
.psw--black{background:#1b1d20}.psw--white{background:#fff}.psw--silver{background:linear-gradient(135deg,#e6e9ec,#aab1b8)}
.psw--graphite{background:#4a4f55}.psw--blue{background:#1f5fae}.psw--green{background:#2f8a4a}.psw--red{background:#c62828}
.psw--transparent{background:repeating-conic-gradient(#e9eef3 0 25%,#fff 0 50%) 0 0/8px 8px}
.psw--custom{background:conic-gradient(#e53935,#fdd835,#43a047,#1e88e5,#8e24aa,#e53935)}

.buy-box{display:grid;gap:18px;padding:24px;border-radius:20px;background:linear-gradient(160deg,var(--sky-50),#fff 70%);border:1px solid var(--sky-200)}
.price-net{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price-net b{font-size:36px;line-height:1;color:var(--navy);letter-spacing:-.01em}
.price-net span{font-size:15px;color:var(--muted);font-weight:600}
.price-gross{color:var(--muted);font-size:15px;margin-top:4px}
.price--ask .price-net b{font-size:28px}
.ship{display:inline-block;padding:13px 6px;margin:-13px -6px -13px -2px;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.actions .btn{min-height:52px}
.actions .btn-cart{flex:1 1 220px}
.points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;font-size:13.5px}
.points li{display:flex;gap:10px;align-items:flex-start;min-width:0}
.points .i{color:var(--blue-600);margin-top:1px}
.points a[href^="tel:"]{white-space:nowrap}

/* dodatki (product.options) – lista z zaznaczaniem (wariant A3) */
.cfg{border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.cfg-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:16px 18px 10px}
.cfg-head h2{font-size:18px}
.cfg-head span{font-size:13px;color:var(--muted)}
.p-opts{display:grid;gap:8px;padding:0 18px 12px}
/* (05.10) kolumna listy dodatków nigdy szersza niż ramka – przy 768–860 px etykieta naklejki z logo miała 413 px i strona przewijała się w bok o 62 px */
.p-opts{grid-template-columns:minmax(0,1fr)}
.p-opt{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 12px 8px 8px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.p-opt--info{cursor:default}
.p-opt:not(.p-opt--info):hover{border-color:var(--sky-200)}
.p-opt.is-on{border-color:var(--blue);background:var(--sky-50);box-shadow:inset 0 0 0 1px var(--blue)}
.p-opt img,.p-opt-noimg{width:48px;height:48px;border-radius:8px;object-fit:cover;background:var(--sky-50)}
.p-opt-noimg{display:grid;place-items:center;color:var(--blue-600)}
.p-opt-t{min-width:0}
.p-opt-t b{display:block;font-size:14.5px;color:var(--navy);line-height:1.3;overflow-wrap:anywhere}
.p-opt-t small{display:block;font-size:12.5px;color:var(--orange-700);font-weight:700}
.p-opt-info{display:inline-block;margin-top:3px;font-size:13px;font-weight:600;color:var(--blue-700,#075C96);text-decoration:underline;text-underline-offset:2px}
.p-opt-info:hover{color:var(--navy)}
.p-opt-ch{position:relative;display:grid;place-items:center}
.p-opt-ch input{position:absolute;opacity:0;width:26px;height:26px;margin:0;cursor:pointer}
.p-opt-box{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;border:2px solid var(--line);background:#fff;color:transparent;transition:all .15s}
.p-opt-ch input:checked+.p-opt-box{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.p-opt-ch input:focus-visible+.p-opt-box{outline:3px solid var(--blue);outline-offset:2px}
.p-opt:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.p-cfg-note{display:flex;gap:8px;align-items:flex-start;margin:0;padding:0 18px 12px;font-size:13px;color:var(--muted)}
.p-cfg-note .i{flex:none;color:var(--blue-600);margin-top:2px}
.cfg-sum{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 12px;padding:14px 18px;background:var(--sky-50);border-radius:0 0 var(--radius) var(--radius)}
.cfg-sum span{font-weight:700;color:var(--navy)}
.cfg-sum b{font-size:22px;color:var(--navy)}
.cfg-sum small{grid-column:2;text-align:right;color:var(--muted)}
/* nadruk grafiki klienta (pm_nadruk.yaml): podsekcja pod dodatkami, opcja z opisem terminu i uwagą o pliku */
.p-nd{border-top:1px solid var(--line-2);padding-top:12px}
.p-opts+.p-nd{margin-top:2px}
.p-nd-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0 18px 10px;font-weight:700;color:var(--navy)}
.p-nd-h .i{color:var(--blue-600)}
.p-nd-h small{font-weight:400;font-size:13px;color:var(--muted)}
.p-opt--nd{align-items:start}
.p-opt--nd .p-opt-ch{align-self:center}
.p-nd-t{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.p-nd-uw{display:flex;gap:8px;align-items:flex-start;margin:0;padding:0 18px 12px;font-size:12.5px;color:var(--muted)}
.p-nd-uw .i{flex:none;color:var(--blue-600);margin-top:1px}
/* naklejka z logo (Centrum, runda 5): zablokowana przy dodatku, który ją wyklucza (np. „Brak górnego toppera”) – prod.js wyklucz() */
.p-opt.is-off{opacity:.6;cursor:not-allowed;background:var(--sky-50)}
.p-opt.is-off .p-opt-ch input{cursor:not-allowed}
.p-nakl-zabl{display:flex;gap:8px;align-items:flex-start;margin:-2px 0 4px;padding:8px 12px;border-radius:10px;background:#FFF8E6;font-size:13px;line-height:1.4;color:var(--navy)}
.p-nakl-zabl .i{flex:none;color:var(--orange-700);margin-top:1px}
.p-nakl-zabl[hidden]{display:none}
/* WYDRUKI etap A (Krist 07.10, decyzja 2): plakaty – „Bez plakatów / Komplet na cały stojak – N / Inna liczba [− n +]” (radio, prod.js plPokaz),
   linia „Cena za 1 plakat A4: … · od 10 szt. …” i „Jak liczymy?” (<details> – działa bez JS) */
.p-opt--pl{cursor:default}
.p-pl{display:grid;gap:6px;min-width:0;margin:-2px 0 2px 60px;padding:0;border:0}
.p-pl-o{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:9px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-weight:400;transition:border-color .15s,background .15s}
.p-pl-o:hover{border-color:var(--sky-200)}
.p-pl-o.is-on{border-color:var(--blue);background:var(--sky-50);box-shadow:inset 0 0 0 1px var(--blue)}
.p-pl-o>label{position:relative;display:flex;align-items:center;gap:10px;margin:0;cursor:pointer;flex:1 1 180px}
.p-pl-o input[type=radio]{position:absolute;opacity:0;width:22px;height:22px;margin:0}
.p-pl-r{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:#fff;box-shadow:inset 0 0 0 4px #fff;transition:all .15s}
.p-pl-o input:checked+.p-pl-r{border-color:var(--blue-600);background:var(--blue-600)}
.p-pl-o input:focus-visible+.p-pl-r{outline:3px solid var(--blue);outline-offset:2px}
.p-pl-t{min-width:0;flex:1 1 160px}
.p-pl-t b{display:block;font-size:14px;color:var(--navy);line-height:1.3}
.p-pl-t small,.p-pl-kw{display:block;font-size:12.5px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.p-pl-t small b,.p-pl-kw b{display:inline;font-size:12.5px;color:var(--orange-700)}
.p-pl-o--n .p-pl-kw{flex:1 1 100%;padding-left:32px}
.p-pl-q button{width:40px;min-height:40px}
.p-pl-q input{width:52px;min-height:40px}
.p-pl-info{margin:-2px 0 4px 60px;padding:8px 12px;border-radius:10px;background:var(--sky-25);border:1px solid var(--line-2);font-size:13px;line-height:1.45;color:var(--ink)}
.p-pl-info p{margin:0}
.p-pl-info b{font-variant-numeric:tabular-nums}
.p-jak{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.p-opts>.p-jak{margin:-4px 0 2px 60px}
.p-jak summary{display:inline-flex;align-items:center;gap:6px;min-height:28px;cursor:pointer;color:var(--blue-700,#075C96);font-weight:600;list-style:none}
.p-jak summary::-webkit-details-marker{display:none}
.p-jak summary:hover span:last-child{text-decoration:underline;text-underline-offset:2px}
.p-jak summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
.p-jak-i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;font-size:12px;line-height:1}
.p-jak[open] .p-jak-i{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.p-jak p{margin:4px 0 0;padding:8px 10px;border-radius:8px;background:#fff;border:1px solid var(--line-2);color:var(--ink);max-width:62ch}
@media (max-width:640px){.p-pl,.p-pl-info,.p-opts>.p-jak{margin-left:0}}
/* progi ceny nadruku i pakiet naklejek – 3 sposoby (pm_nadruk.prezentacja: a tabelka, b podpowiedź, c schodki) */
.p-prog{margin:-2px 0 2px 60px;padding:8px 12px;border-radius:10px;background:var(--sky-25);border:1px solid var(--line-2);font-size:13px;line-height:1.45;color:var(--ink)}
.p-prog p{margin:0}
.p-prog small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.p-prog-tab{width:100%;border-collapse:collapse;font-size:13px}
.p-prog-tab caption{text-align:left;font-size:12.5px;color:var(--muted);padding-bottom:4px;caption-side:top}
.p-prog-tab th{text-align:left;font-weight:600;font-size:12.5px;color:var(--muted);padding:2px 0;border-bottom:1px solid var(--line)}
.p-prog-tab th:last-child,.p-prog-tab td:last-child{text-align:right}
.p-prog-tab td{padding:3px 0;border-bottom:1px solid var(--line-2);font-variant-numeric:tabular-nums}
.p-prog-tab tr:last-child td{border-bottom:0}
.p-prog-sch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.p-prog-sch li{display:grid;gap:1px;padding:6px 8px;border-radius:8px;background:#fff;border:1.5px solid var(--line);text-align:center}
.p-prog-sch li small{margin:0;font-size:12px}
.p-prog-sch li b{font-size:14px;color:var(--navy);font-variant-numeric:tabular-nums}
.p-prog-sch li.is-on{border-color:var(--blue);background:var(--sky-50)}
.p-prog-uw{margin-top:5px}
.p-msg{margin:0;font-weight:700;color:var(--orange-700)}
.p-msg:empty{display:none}
.pmwc{margin:0}

/* ---------- pasek sekcji */
.pnav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-top:40px}
.pnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.pnav .wrap::-webkit-scrollbar{display:none}
.pnav a{position:relative;padding:17px 14px;color:var(--muted);font-weight:600;font-size:15px;white-space:nowrap;text-decoration:none}
.pnav a:hover{color:var(--navy)}
.pnav a.is-on{color:var(--blue-800)}
.pnav a.is-on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px;background:var(--blue)}

/* ---------- treść */
.p-body .block:first-child{padding-top:44px}
/* skok z paska sekcji: jedno przesunięcie = wysokość paska .pnav + odstęp (ta strona; html scroll-padding ramy nadpisany tylko tu) */
html{scroll-padding-top:72px}
.p-body .block{scroll-margin-top:0}
.desc-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.desc{max-width:760px;font-size:17.5px;line-height:1.75;color:#24323F;min-width:0;overflow-wrap:break-word}
.desc h2{font-size:28px;line-height:1.25;margin:0 0 18px}
.desc h3{font-size:22px;margin:40px 0 12px;padding-top:4px}
.desc p{margin:0 0 1em}
.desc ul,.desc ol{padding-left:22px;margin:6px 0 1em}
.desc li{margin:3px 0}
.desc img,.desc video,.desc iframe{max-width:100%;height:auto;border-radius:12px}
.desc iframe{aspect-ratio:16/9;width:100%}
.desc table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.desc td,.desc th{padding:6px 10px;border:1px solid var(--line)}
/* stare klasy opisu z CKEditora (product-desc-container, -main-header, -text-block, -benefit-grid/-card, -footer-note) */
.desc .product-main-header h2{font-size:28px}
.desc .product-main-header>p{font-size:19px;line-height:1.7;color:var(--ink)}
.desc .product-benefit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:6px 0 18px}
.desc .product-benefit-card{padding:18px 20px;border-radius:var(--radius);background:var(--sky-50);border:1px solid var(--line-2);font-size:16px;line-height:1.6}
.desc .product-benefit-card strong{display:block;color:var(--navy);font-size:16.5px;margin-bottom:6px}
.desc .product-benefit-card p{margin:0}
.desc .product-footer-note{margin:24px 0 0;padding:16px 20px;border-radius:var(--radius);border-left:4px solid var(--blue);background:var(--sky-50);font-size:16.5px}
.desc .product-footer-note+.product-footer-note{margin-top:12px}
.desc .product-footer-note:last-child{border-left-color:var(--orange);background:var(--orange-50)}
.desc-side{position:sticky;top:80px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}
.desc-side>*{min-width:0}
.side-card{padding:22px;border-radius:18px;border:1px solid var(--line);background:#fff}
.side-h{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--navy)}
.side-more{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-top:2px;font-weight:700;font-size:14px}

.feats,.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.feat,.opt{display:flex;flex-direction:column;border-radius:var(--radius);background:#fff;border:1px solid var(--line);overflow:hidden;min-width:0;transition:box-shadow .2s,transform .2s}
.feat:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.feat-media,.opt-media{position:relative;display:block;width:100%;aspect-ratio:2/1;padding:0;border:0;background:var(--sky-50);overflow:hidden}
.feat-media img,.opt-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
[data-zoom-src]{cursor:zoom-in}
.feat:hover .feat-media img{transform:scale(1.03)}
.feat-play{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;align-items:center;padding:7px 12px 7px 9px;border-radius:20px;background:var(--orange-600);color:#fff;font-size:13px;font-weight:800}
.feat-body,.opt-body{padding:18px 20px 20px;min-width:0;overflow-wrap:break-word}
.feat-body h3,.opt-body h3{font-size:18px;margin-bottom:8px}
.feat-txt,.opt-txt{font-size:15px;line-height:1.65;color:#34424F}
.feat-txt p:last-child,.opt-txt p:last-child{margin-bottom:0}
.feat-txt img,.opt-txt img,.feat-txt video,.opt-txt video{max-width:100%;height:auto}
.feat-txt iframe,.opt-txt iframe{display:block;max-width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:10px}
.opt-badge{position:absolute;left:12px;top:12px;padding:5px 10px;border-radius:20px;background:var(--orange-50);color:var(--orange-700);font-size:12px;font-weight:800;border:1px solid #FBD9AE}
.opt-head{padding:14px 20px 0}
.opt-badge--static{position:static;display:inline-block}

.spec-top{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:20px}
.spec-top--n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.spec-top--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.spec-top--n2,.spec-top--n1{grid-template-columns:repeat(2,minmax(0,1fr))}
.spec-tile{padding:16px 18px;border-radius:var(--radius);background:var(--sky-50);border:1px solid var(--line-2);min-width:0}
.spec-tile span{display:block;font-size:13px;color:var(--muted);font-weight:600}
.spec-tile b{display:flex;align-items:center;gap:8px;font-size:22px;color:var(--navy);overflow-wrap:break-word;min-width:0}
.spec-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.spec-group{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;background:#fff;min-width:0}
.spec-group h3{font-size:16px;margin-bottom:8px}
.spec-group dl{margin:0}
.spec-group dl div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed var(--line)}
.spec-group dl div:last-child{border-bottom:0}
.spec-group dt{color:var(--muted);font-size:14.5px}
.spec-group dd{margin:0;font-weight:700;color:var(--navy);text-align:right;font-size:14.5px;overflow-wrap:anywhere}
.spec-note{margin:8px 0 0;font-size:13px;color:var(--muted)}
.p-uwaga{margin-top:24px;padding:22px 26px;border-radius:var(--radius);background:linear-gradient(120deg,var(--sky-100),#fff 70%);border:1px solid var(--sky-200);overflow-wrap:break-word}
.p-uwaga-h{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-weight:700;color:var(--navy)}
.p-uwaga-t{font-size:15.5px}
.p-uwaga-t h3{font-size:20px;margin:0 0 8px}
.p-uwaga-t p:last-child{margin-bottom:0}
.p-uwaga-t a{font-weight:700}
/* treść Snipetu serwisu P99 (div.pm-service-banner z bazy) */
.pm-service-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center}
.pm-service-banner__info{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--blue-600);color:#fff;font-weight:800;font-style:italic}
.pm-service-banner__badge{display:grid;justify-items:center;min-width:112px;padding:14px 10px;border-radius:16px;background:#fff;box-shadow:var(--shadow-1);color:var(--navy);text-align:center;font-weight:800;line-height:1.2}
.pm-service-banner__badge strong,.pm-service-banner__badge b{font-size:38px;line-height:1}
.pm-service-banner__shield{color:var(--blue-600);font-size:15px}
.pm-service-banner__badge-text,.pm-service-banner__years,.pm-service-banner__caption{display:block}
.pm-service-banner__years span{display:block;font-size:13px;letter-spacing:.1em}
.pm-service-banner__caption{margin-top:4px;font-size:12px;font-weight:600;color:var(--muted)}

.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.faq-item{padding:20px 22px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);min-width:0}
.faq-item h3{display:flex;gap:12px;font-size:17px;margin-bottom:8px}
.faq-item h3::before{content:"?";flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--sky-100);color:var(--blue-700);font-size:15px;font-weight:800}
.faq-item .section-faq--text{margin:0 0 0 38px;color:#34424F;font-size:15.5px;white-space:pre-line;overflow-wrap:break-word}

/* porównanie */
.cmp-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px}
.cmp-fam{font-weight:700;color:var(--muted)}
.cmp-intro{color:var(--muted);margin:-12px 0 16px}
/* position:relative – ukryte napisy .sr (position:absolute) w komórkach muszą zostać w ramce przewijania; bez tego rozpychały stronę w bok (poprawka 04.10) */
.cmp-box{position:relative}
.cmp-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:15px}
.cmp th,.cmp td{padding:14px 16px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--line-2)}
.cmp tbody tr:last-child>*{border-bottom:0}
.cmp tbody th{text-align:left;color:var(--muted);font-weight:600;background:#fff;position:sticky;left:0;z-index:1}
.cmp-corner{text-align:left!important;vertical-align:bottom!important;position:sticky;left:0;z-index:2;background:#fff;width:190px}
.cmp-corner span{display:block;font-size:17px;color:var(--navy);font-weight:800}
.cmp-corner small{display:block;margin-top:4px;font-weight:500;font-size:12.5px;color:var(--muted)}
.cmp thead th{vertical-align:top;padding-top:18px}
.cmp-prod{display:grid;justify-items:center;gap:4px}
.cmp-a{display:grid;justify-items:center;gap:4px;color:inherit}
.cmp-prod img{width:96px;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:10px;background:var(--sky-50);margin-bottom:6px}
.cmp-prod b{font-size:14px;color:var(--navy);line-height:1.3;max-width:150px}
.cmp-prod span{font-size:13px;color:var(--muted);font-weight:600}
.cmp-tag{margin-top:6px;padding:4px 10px;border-radius:20px;background:var(--blue-600);color:#fff;font-style:normal;font-size:12px;font-weight:800}
.cmp-go{margin-top:0;font-size:13px;font-weight:700}
.cmp .is-cur{background:var(--sky-50)}
.cmp thead th.is-cur{box-shadow:inset 0 3px 0 var(--blue)}
.cmp td{color:#465563}
.cmp td.diff{color:var(--navy);font-weight:800}
.cmp td.is-cur{color:var(--navy);font-weight:700}
.cmp-sec{display:block;font-size:12.5px;font-weight:500;color:var(--muted)}
.cmp-hint{display:none;margin:8px 0 0;font-size:13px;color:var(--muted)}
.cmp-more{display:none}
.cmp-box.is-scroll:not(.is-end)::after{content:"";position:absolute;top:1px;right:1px;bottom:1px;width:44px;border-radius:0 var(--radius) var(--radius) 0;background:linear-gradient(to right,rgba(255,255,255,0),rgba(14,47,79,.14));pointer-events:none}
.cmp-box.is-scroll:not(.is-end) .cmp-more{display:block;position:absolute;right:10px;top:14px;z-index:3;padding:5px 10px;border-radius:20px;background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;box-shadow:var(--shadow-1);pointer-events:none}
.cmp-go{display:inline-flex;align-items:center;min-height:44px}

/* podobne – 5 w rzędzie (decyzja Krista 01.10) */
.sim{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.sim .pc-img{padding:10px}
.sim .pc-name{font-size:14.5px}

/* ---------- okna */
.mbar{display:none}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(10,30,50,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:p-fade .2s}
@keyframes p-fade{from{opacity:0}}
.modal-box{position:relative;width:min(620px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:20px;padding:28px;box-shadow:var(--shadow-3)}
.modal-box--vid{width:min(960px,100%);padding:0;background:#000;overflow:hidden}
.modal-box--vid video{width:100%;max-height:80vh}
.modal-x{position:absolute;right:12px;top:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:var(--sky-50);color:var(--navy);display:grid;place-items:center}
.modal-box--vid .modal-x{background:rgba(255,255,255,.9)}
.ma-ok{display:flex;align-items:center;gap:10px;font-size:20px;color:var(--green);padding-right:44px}
.ma-ok .i{width:36px;height:36px;padding:7px;border-radius:50%;background:var(--green-50);box-sizing:border-box}
.ma-ok b{color:var(--navy)}
.ma-ok.is-warn{color:var(--orange-700)}
.ma-ok.is-warn .i{background:var(--orange-50)}
.ma-note{margin:6px 0 20px 46px;color:var(--muted)}
.ma-h{font-size:17px;font-weight:700;color:var(--navy);margin:0 0 10px}
.ma-list{display:grid;gap:8px}
.ma-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:12px}
.ma-row img,.ma-row .p-opt-noimg{width:56px;height:56px;border-radius:8px;object-fit:cover}
.ma-row b{display:block;color:var(--navy);font-size:15px;line-height:1.3}
.ma-row small{color:var(--muted);font-size:13px}
.ma-row [aria-pressed="true"]{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
/* przyciski przyklejone do dołu okna – lista dodatków przewija się nad nimi (poprawka 04.10) */
.ma-act{position:sticky;bottom:-28px;z-index:2;display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin:22px -28px -28px;padding:14px 28px 28px;background:#fff;border-top:1px solid var(--line-2)}

.lb{position:fixed;inset:0;z-index:120;display:grid;grid-template-columns:72px minmax(0,1fr) 72px;grid-template-rows:auto minmax(0,1fr) auto;background:rgba(8,20,34,.96);color:#fff;animation:p-fade .2s}
.lb-top{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:14px 20px;min-width:0}
.lb-c{font-weight:800;white-space:nowrap}
.lb-name{color:#9FB6CA;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-x{margin-left:auto;flex:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center}
.lb-nav{align-self:center;justify-self:center;width:56px;height:56px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center}
.lb-nav:hover,.lb-x:hover{background:rgba(255,255,255,.25)}
.lb-prev .i{transform:rotate(180deg)}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;gap:10px}
.lb-fig img{max-width:min(100%,900px);max-height:min(calc(100vh - 210px),1200px);width:auto;height:auto;object-fit:contain;border-radius:8px}
.lb-fig figcaption{font-size:14px;color:#C8DAE9;text-align:center;padding:0 8px}
.lb-thumbs{grid-column:1/-1;display:flex;gap:8px;justify-content:center;padding:12px 20px 18px;overflow-x:auto}
.lb-th{flex:none;width:52px;aspect-ratio:3/4;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;opacity:.55;background:none}
.lb-th img{width:100%;height:100%;object-fit:cover}
.lb-th.is-on{border-color:var(--blue);opacity:1}
.lb--1 .lb-nav,.lb--1 .lb-thumbs,.lb--1 .lb-c{visibility:hidden}
/* (05.10, uwaga Krista z produkcji) klik w tło zamyka powiększenie (prod.js): na tle kursor „pomniejsz”, na zdjęciu, podpisie,
   liczniku i nazwie zwykły, na przyciskach (strzałki, miniatury, ✕) rączka */
.lb,.lb-top,.lb-fig,.lb-thumbs{cursor:zoom-out}
.lb-fig img,.lb-fig figcaption,.lb-c,.lb-name{cursor:default}
.lb button{cursor:pointer}
/* palcem w bok po zdjęciu = poprzednie / następne (prod.js) – przeglądarka nie przewija wtedy w bok i nie cofa strony gestem „wstecz”;
   pas miniatur przewija się palcem w bok jak dotąd */
.lb{touch-action:pan-y pinch-zoom}
.lb-thumbs{touch-action:pan-x pinch-zoom}

/* ---------- responsywność */
@media (max-width:1200px){
  .sim{grid-template-columns:repeat(4,minmax(0,1fr))}
  .points{grid-template-columns:minmax(0,1fr)}
  .desc-grid{grid-template-columns:minmax(0,1fr) 320px;gap:32px}
}
@media (max-width:1100px){
  .feats,.opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .p-top{grid-template-columns:minmax(0,1fr);gap:24px}
  .gal--tiles{position:static}
  .gal-main{max-height:72vh;margin:0 auto}
  .desc-grid{grid-template-columns:minmax(0,1fr)}
  .desc-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .buy h1,.buy-head h1{font-size:28px}
  .buy-box{padding:18px}
  .tiles{gap:6px}
  .tile{border-radius:10px;min-height:44px}
  .tile--3d .cube3d{width:20px;height:20px;margin-bottom:2px}
  .tile--3d small{display:none}
  .tile--more b{font-size:20px}
  .gal-nav{opacity:1;width:44px;height:44px;margin-top:-22px}
  .gal-zoom{opacity:1;padding:7px;min-width:44px;min-height:44px;justify-content:center}
  .gal-zoom span{display:none}
  .facts--a{gap:5px}
  .facts--a li{padding:8px 2px 7px;border-radius:10px;gap:2px}
  .facts--a .i{width:16px;height:16px;padding:3px}
  .facts--a .sw--big{width:22px;height:22px;border-radius:6px}
  .facts--a b{font-size:12.5px}
  .facts--a span{font-size:10px;line-height:1.15}
  .vids{grid-template-columns:minmax(0,1fr)}
  html{scroll-padding-top:60px}
  .pnav{margin-top:24px}
  .pnav a{padding:13px 10px;font-size:14px}
  .desc{font-size:17px}
  .desc h2,.desc .product-main-header h2{font-size:23px}
  .desc .product-main-header>p{font-size:17.5px}
  .desc h3{font-size:20px;margin-top:32px}
  .desc .product-benefit-grid{grid-template-columns:minmax(0,1fr)}
  .desc-side{grid-template-columns:minmax(0,1fr)}
  .spec-top{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .spec-top .spec-tile:last-child:nth-child(odd){grid-column:span 2}
  .spec-tile{padding:12px 14px}
  .spec-tile b{font-size:18px}
  .spec-groups,.faq,.feats,.opts{grid-template-columns:minmax(0,1fr)}
  .faq-item .section-faq--text{margin-left:0}
  .pm-service-banner{grid-template-columns:minmax(0,1fr)}
  .pm-service-banner__info{display:none}
  .pm-service-banner__badge{justify-self:start}
  .p-uwaga{padding:18px}
  .cmp{font-size:14px;min-width:640px}
  .cmp-corner{width:104px;padding-left:12px!important;padding-right:10px!important}
  .cmp tbody th{padding-left:12px;padding-right:10px;font-size:13px}
  .cmp-prod img{width:72px}
  .cmp-hint{display:block}
  .sim{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;margin:0 -16px;padding-left:16px;padding-right:16px}
  .sim .pc{flex:0 0 46%;min-width:0;scroll-snap-align:start}
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(14,47,79,.08)}
  .mbar-p{min-width:0}
  .mbar-n{display:block;color:var(--muted);font-size:13px;font-weight:600;line-height:1.1}
  .mbar-n b{font-size:20px;color:var(--navy)}
  .mbar-p small{display:block;margin-top:2px;color:var(--muted);font-size:12.5px}
  .mbar .ship{font-size:12px}
  .mbar .btn{flex:none;min-height:48px;padding:0 18px}
  .mbar-n{white-space:nowrap}
  .page-product .ft{padding-bottom:80px}
  .page-product .dor{bottom:84px}
  .page-product .to-top{bottom:84px}
  body.page-product:has(.dor:not([hidden])) .to-top{bottom:152px}
  .modal-box{padding:22px}
  .ma-act{bottom:-22px;margin:16px -22px -22px;padding:12px 22px 22px;gap:8px}
  .ma-act .btn{min-height:46px}
  .ma-note{margin-left:0}
  .ma-act .btn{flex:1}
  .ma-row{grid-template-columns:44px minmax(0,1fr) auto;gap:10px}
  .ma-row img,.ma-row .p-opt-noimg{width:44px;height:44px}
  .ma-row .btn{padding:0 12px}
  .lb{grid-template-columns:minmax(0,1fr)}
  .lb-nav{position:absolute;top:50%;width:44px;height:44px}
  .lb-prev{left:8px}.lb-next{right:8px}
  .lb-fig{padding:0 8px}
}
@media (max-width:480px){
  .price-net b{font-size:30px}
  .actions .btn{flex:1 1 100%}
  .p-opt{grid-template-columns:40px minmax(0,1fr) auto;gap:10px}
  .p-opt img,.p-opt-noimg{width:40px;height:40px}
  .p-prog{margin-left:0}
}
@media (max-width:360px){
  .mbar{gap:8px;padding-left:12px;padding-right:12px}
  .mbar-n b{font-size:17px}
  .mbar .btn{padding:0 12px;gap:6px}
}
@media (prefers-reduced-motion:reduce){.cube3d{animation:none}.feat,.tile,.feat-media img{transition:none}}

/* ---------- PRZEŁĄCZNIKI (config/packages/pm_nowy_prod.yaml; domyślnie wyłączone = wygląd makiety) */
/* T2 – telefon: kod, dostępność i nazwa (H1) nad zdjęciem; komputer: ta sama prawa kolumna (siatka z obszarami) */
.buy-head{display:flex;flex-direction:column;gap:20px;min-width:0}
.p-main--t2 .p-top{grid-template-areas:"gal head" "gal buy";grid-template-rows:auto 1fr;row-gap:20px}
.p-main--t2 .gal{grid-area:gal}
.p-main--t2 .buy-head{grid-area:head}
.p-main--t2 .buy{grid-area:buy}
@media (max-width:980px){
  .p-main--t2 .p-top{grid-template-areas:"head" "gal" "buy";grid-template-rows:auto;row-gap:16px}
}
@media (max-width:860px){
  .p-main--t2 .buy-head{gap:10px}
  .p-main--t2 .buy-head h1{font-size:24px;margin:0}
  .p-main--t2 .gal-main{max-height:55vh;max-height:55svh}
  .p-main--t2 .tiles{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;gap:6px}
  .p-main--t2 .tiles::-webkit-scrollbar{display:none}
  .p-main--t2 .tile{flex:0 0 calc((100% - 18px) / 4.4);scroll-snap-align:start}
}
/* T10 – tablet 768–980 px: dwie kolumny jak na komputerze */
@media (min-width:768px) and (max-width:980px){
  .p-main--t10 .p-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
  .p-main--t10.p-main--t2 .p-top{grid-template-areas:"gal head" "gal buy";grid-template-rows:auto 1fr;row-gap:16px}
  .p-main--t10 .gal--tiles{position:sticky;top:16px}
  .p-main--t10 .gal-main{max-height:none}
  .p-main--t10 .facts--a{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* mocniejszy kontrast drobnych napisów (WCAG AA 4,5:1) */
.p-kontrast .p-opt-t small,.p-kontrast .opt-badge,.p-kontrast .stock-od,.p-kontrast .p-msg{color:#A85400}
.p-kontrast .feat-play,.p-kontrast .vid-play .i,.p-kontrast .gal-films-h .i{background:#B35A00}
.p-kontrast .pm-service-banner__shield,.p-kontrast .p-uwaga-t a{color:#0077BE}
/* konfigurator witryn P572 (arkusz komponentu bez zmian – nadpisanie tylko na nowej karcie) */
.p-kontrast .pmwc-promo__cta{color:var(--navy)!important;text-shadow:none!important}
.p-kontrast .pmwc-promo__badge{background:linear-gradient(145deg,#1170A8,#0B4F8A)}
.p-kontrast .pmwc-promo__badge strong,.p-kontrast .pmwc-promo__badge small{color:#fff;font-size:10px}
.p-kontrast .pmwc-promo__eyebrow{font-size:12px;color:#0B6E99}
.p-kontrast .pmwc-promo__eyebrow>span{color:var(--navy)}
.p-kontrast .pmwc-promo__step-number{background:#0E5F99;font-size:12px}
.p-kontrast .pmwc-promo__step strong,.p-kontrast .pmwc__lead.pmwc-promo__lead{font-size:12px}
/* ===== KOLORY (wariant C, decyzja Krista 04.10.2026 – decyzje/KOLORY_PRODUKTOW.md §7), nad ceną w .buy-box.
   Miniatury innych kolorów (linki do ich kart) i kafelki kolorów-dopłat (wybierz jeden) – wszystkie tej samej wielkości;
   zdjęcie w proporcjach zdjęć Promation 3:4 (object-fit:contain – nic nie jest ucinane). Znacznik ceny: jasnoniebieski
   + granat (kontrast ok. 13:1), „w cenie”/„ta sama cena” – szary (ok. 8:1). Telefon: jeden rząd przesuwany palcem (kafelek 86 px – czwarty wystaje, widać, że można przesunąć). */
.kol{display:grid;gap:14px;min-width:0}
.kol-g{min-width:0}
.kol-h{margin:0 0 8px;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px}
.kol-h span{color:var(--ink);font-weight:600}
.kol-h b{color:var(--navy);font-weight:700}
.kol-h small{flex-basis:100%;font-size:12.5px;color:var(--muted)}
.kol-row{display:flex;flex-wrap:wrap;gap:10px;min-width:0}
.kol-t{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:0 0 108px;width:108px;min-width:0;padding:6px 6px 8px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);text-decoration:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}
a.kol-t:hover,label.kol-t:hover{border-color:var(--blue-700)}
.kol-t.is-cur,.kol-t.is-on,.kol-t:has(input:checked){border-color:var(--blue-700);box-shadow:inset 0 0 0 1px var(--blue-700);background:var(--sky-25)}
.kol-t:has(input:focus-visible),a.kol-t:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.kol-t--info{cursor:default}
.kol-img{position:relative;display:block;width:100%;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:#fff;border:1px solid var(--line-2)}
.kol-img img{display:block;width:100%;height:100%;object-fit:contain}
.kol-img--kolor{border:1px solid rgba(14,47,79,.22);box-shadow:inset 0 0 0 3px rgba(255,255,255,.55)}
.kol-img--jasny{border-color:#AEBBC8}
.kol-img .kol-mini{position:absolute;right:6px;bottom:6px;width:46%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:6px;border:1px solid rgba(14,47,79,.2);box-shadow:0 1px 3px rgba(14,47,79,.18)}
.kol-n{font-size:13px;font-weight:700;color:var(--navy);line-height:1.2;margin-top:3px;overflow-wrap:anywhere}
.kol-b{font-size:12px;font-weight:700;line-height:1.35;padding:1px 7px;border-radius:999px;background:var(--sky-100);color:var(--navy);white-space:nowrap}
.kol-b--0{background:#EEF2F5;color:#3B4A59}
.kol-s{font-size:11.5px;line-height:1.3;color:#3B4A59;overflow-wrap:anywhere}
.kol-s.is-in,.kol-s.is-time,.kol-s.is-ask{position:relative;padding-left:11px}
.kol-s.is-in::before,.kol-s.is-time::before,.kol-s.is-ask::before{content:"";position:absolute;left:0;top:.42em;width:7px;height:7px;border-radius:50%;background:var(--green)}
.kol-s.is-time::before{background:var(--blue-700)}
.kol-s.is-ask::before{background:var(--orange-700)}
.kol-sum{margin:0;font-size:14px;color:var(--ink)}
.kol-sum b{color:var(--navy)}
@media (max-width:860px){
  .kol-row{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:3px 3px 8px;margin:-3px -3px 0;scrollbar-width:thin}
  .kol-t{flex:0 0 86px;width:86px;scroll-snap-align:start}
}

/* === KARTA 04.10 (dostawa + YouTube) – początek === */
/* ---------- okienko „Koszt i czas dostawy” (pomysł Krista 04.10): najechanie myszą / fokus z klawiatury / dotknięcie.
   Wygląd jak .hd-card ramy (biała karta, cień --shadow-2, zaokrąglenie 18px). Jedno okienko na stronę – prod.js przenosi je
   do klikniętego miejsca: .dost--dol (punkty pod przyciskami: w dół), .dost--gora (pod ceną: w górę, a gdy brak miejsca –
   pod przyciskami, nigdy na „Dodaj do koszyka”), .dost--pasek (pasek na telefonie: nad paskiem). Napisy okienka: pm_nowy_prod.yaml;
   kwoty i opisy (05.10): strona „Koszt i czas dostawy” z panelu (pm_dostawa(), src/Twig/NowyDostawaExtension.php). */
.dost{position:relative;display:inline-block;max-width:100%}
.dost-btn{font:inherit;line-height:inherit;letter-spacing:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
.points .dost-btn{padding:0;margin:0;color:var(--blue-700)}
.points .dost-btn:hover{text-decoration:underline;text-underline-offset:3px}
.dost-btn[aria-expanded="true"]{color:var(--navy)}
.dost-pop{position:absolute;z-index:70;left:0;top:calc(100% + 10px);width:390px;max-width:calc(100vw - 24px);padding:14px 16px 12px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-2);color:var(--ink);font-size:14px;font-weight:400;line-height:1.5;text-align:left;white-space:normal;letter-spacing:0;cursor:auto}
.dost-pop[hidden]{display:none}
/* mostek nad/pod okienkiem – zjazd myszą z napisu na okienko go nie zamyka */
.dost-pop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dost-pop--gora{top:auto;bottom:calc(100% + 10px)}
.dost-pop--gora::before{top:auto;bottom:-12px}
.dost-pop--pod{bottom:auto}
.dost-pop--pod::before{display:none}
.mbar .dost{position:static}
.dost-pop--pasek{left:12px;right:12px;width:auto;max-width:none;top:auto;bottom:calc(100% + 8px)}
.dost-pop--pasek::before{top:auto;bottom:-10px;height:10px}
.dost-pop-g{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 -6px 8px 0}
.dost-pop-h{display:flex;align-items:center;gap:8px;margin:0;color:var(--navy);font-weight:700;font-size:15px;line-height:1.3}
.dost-pop-h .i{color:var(--blue-600);flex:none}
.dost-x{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border:0;border-radius:10px;background:var(--sky-50);color:var(--navy);cursor:pointer}
.dost-x:hover{background:var(--sky-200)}
.dost-ten{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;padding:8px 11px;border-radius:12px;background:var(--sky-50);color:var(--navy);font-size:13.5px;line-height:1.45}
.dost-ten .i{flex:none;margin-top:1px;color:var(--blue-600)}
.dost-lista{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:5px}
.dost-pop .dost-lista li{display:block;min-width:0;gap:0;position:relative;padding-left:15px;font-size:13.5px;line-height:1.45;color:#34424F}
.dost-lista li::before{content:"";position:absolute;left:3px;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.dost-lista b{color:var(--navy);font-weight:700}
/* (05.10) nagłówek tabeli kosztów ze strony dostawy (np. „Koszt wysyłki (cały kraj, ceny netto):”) – bez kropki */
.dost-pop .dost-lista li.dost-lista-h{padding-left:0;margin-top:3px;font-weight:700;color:var(--navy)}
.dost-lista li.dost-lista-h::before{content:none}
.dost-wiecej{display:inline-flex;align-items:center;min-height:40px;font-weight:700;color:var(--blue-700)}
/* (05.10, uwaga Krista z telefonu) okienko NIE blokuje przewijania strony: przy napisach w karcie (pod ceną, w punktach) okienko
   jest zwykłym elementem strony (bez własnego przewijania) – przesunięcie palcem po nim przewija stronę; prod.js zamyka je, gdy strona
   przewinie się o kawałek. Okienko nad dolnym paskiem (.dost-pop--pasek, przyklejone do ekranu) – własne przewijanie TYLKO gdy treść jest wyższa niż
   ekran (klasa .dost-pop--dlugie z prod.js), bez overscroll-behavior:contain; inaczej przesunięcie palcem po nim przewija stronę. */
@media (max-width:860px){.dost-pop--pasek.dost-pop--dlugie{max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto}}
@media (max-width:400px){.dost-pop{padding:12px 13px 10px}.dost-ten,.dost-pop .dost-lista li{font-size:13px}.dost-lista{gap:4px}}
@media (prefers-reduced-motion:no-preference){.dost-pop:not([hidden]){animation:p-dost .15s ease-out}}
@keyframes p-dost{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- YouTube w opisie i cechach: plansza z naszego serwera (filtr pm_yt_klik) – film dopiero po kliknięciu „Odtwórz”
   (przegląd prawny 04.10; polityka prywatności). Bez JS plansza jest linkiem do filmu na youtube.com (nowa karta). */
.yt-klik{display:block;position:relative;width:100%;max-width:100%;aspect-ratio:16/9;margin:0 auto;border-radius:12px;overflow:hidden;background:#0E2F4F;text-align:center}
.yt-plansza{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;background:radial-gradient(ellipse at 50% 45%,#1E4A75 0,#0E2F4F 72%);color:#fff!important;text-decoration:none!important;line-height:1.35;font-size:15px;font-weight:400}
.yt-ikona{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--navy);box-shadow:0 6px 20px rgba(0,0,0,.28);transition:transform .15s,background .15s,color .15s}
.yt-ikona svg{margin-left:4px}
.yt-plansza:hover .yt-ikona,.yt-plansza:focus-visible .yt-ikona{transform:scale(1.06);background:var(--orange);color:#fff}
.yt-plansza:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.yt-napis{font-weight:700;font-size:16px}
.yt-uwaga{font-size:12.5px;opacity:.8}
.yt-klik iframe{position:absolute;inset:0;width:100%;height:100%;max-width:none;border:0;border-radius:0;aspect-ratio:auto}
/* ---------- (07.10) obrót stojaka w opisie (filtr pm_obrot_film): poster + ▶, film MP4 dopiero po kliknięciu (prod.js) */
.desc .obrot-klik{position:relative;margin:18px auto;width:100%;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.obrot-plansza{position:relative;display:block;color:#fff!important;text-decoration:none!important}
.desc .obrot-plansza img,.desc .obrot-klik video{display:block;width:100%;height:auto;max-width:none;margin:0;border-radius:0}
.obrot-ikona{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(14,47,79,.88);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform .15s,background .15s}
.obrot-ikona svg{margin-left:4px}
.obrot-napis{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:rgba(14,47,79,.88);font-weight:700;font-size:15px;text-align:center}
.obrot-plansza:hover .obrot-ikona,.obrot-plansza:focus-visible .obrot-ikona{transform:translate(-50%,-50%) scale(1.06);background:var(--orange)}
.obrot-plansza:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.pm360-podpis{margin:6px 0 0;font-size:12.5px;color:var(--muted,#5b6b7c);text-align:center}
.desc .obrot-podpis{padding:8px 12px;font-size:13px;color:var(--muted,#5b6b7c);text-align:center;border-top:1px solid var(--line)}
@media (max-width:420px){.yt-ikona{width:52px;height:52px}.yt-napis{font-size:15px}.yt-plansza{gap:6px}}
/* ---------- spis sekcji (.pnav) z dłuższymi nazwami (Krist 04.10): na wąskim ekranie przewijany palcem W PASKU (strona nie
   przesuwa się w bok); wygaszona krawędź podpowiada, że w bok jest więcej (klasy ustawia prod.js) */
.pnav--prawo .wrap{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.pnav--lewo .wrap{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px);mask-image:linear-gradient(90deg,transparent,#000 44px)}
.pnav--lewo.pnav--prawo .wrap{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
/* ---------- 320 px: długie słowo w kafelku „Dane techniczne” (np. „Przezroczysty” przy próbce koloru) wychodziło poza ekran */
@media (max-width:360px){.spec-tile b{flex-wrap:wrap;gap:4px 8px;font-size:16px;overflow-wrap:anywhere}}
/* === KARTA 04.10 (dostawa + YouTube) – koniec === */
/* ---------- NAKLEJKA Z LOGO – opis W STOJAKACH (Krist 05.10; pm_nadruk.naklejka_opis 'a' tabelka / 'b' licznik / 'c' schodki /
   'd' obrazek kompletu; templates/nowy/_n/naklejka-opis.html.twig). Ramka jak .p-prog (to samo tło i odstępy). */
.p-nk{margin:-2px 0 2px 60px;padding:10px 12px;border-radius:10px;background:var(--sky-25);border:1px solid var(--line-2);font-size:13.5px;line-height:1.45;color:var(--ink)}
.p-nk-h{margin:0 0 6px}
.p-nk-h b,.p-nk-kpl-t b{color:var(--navy)}
.p-nk-uw{display:block;margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.p-nk-tab{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.p-nk-tab th{text-align:left;font-weight:600;font-size:12px;line-height:1.25;color:var(--muted);padding:2px 8px 4px 0;border-bottom:1px solid var(--line);vertical-align:bottom}
.p-nk-tab td{padding:5px 8px 5px 0;border-bottom:1px solid var(--line-2);vertical-align:top;white-space:nowrap}
.p-nk-tab th:nth-child(n+3),.p-nk-tab td:nth-child(n+3){text-align:right}
.p-nk-tab th:last-child,.p-nk-tab td:last-child{padding-right:0}
.p-nk-tab td small{display:block;margin:0;font-size:12px;line-height:1.3;color:var(--muted)}
.p-nk-tab td b{color:var(--navy)}
.p-nk-tab tr:last-child td{border-bottom:0}
.p-nk-kalk{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:2px}
.p-nk-kalk label{font-weight:600;color:var(--navy)}
.p-nk-st{display:inline-flex;align-items:stretch;border:1.5px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.p-nk-b{width:44px;min-height:44px;border:0;background:#fff;font:inherit;font-size:20px;line-height:1;color:var(--blue-700);cursor:pointer}
.p-nk-b:hover{background:var(--sky-50)}
.p-nk-b:focus-visible,.p-nk-st input:focus-visible{outline-offset:-3px}
.p-nk-st input{width:56px;min-height:44px;margin:0;padding:0;border:0;border-left:1px solid var(--line-2);border-right:1px solid var(--line-2);border-radius:0;text-align:center;font:inherit;font-size:16px;font-weight:700;color:var(--navy);background:#fff;-moz-appearance:textfield;appearance:textfield}
.p-nk-st input::-webkit-outer-spin-button,.p-nk-st input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.p-nk-wynik{display:block;flex:1 1 100%;padding:7px 10px;border-radius:8px;background:#fff;border:1.5px solid var(--blue);font-weight:700;color:var(--navy)}
.p-nk-sch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.p-nk-sch li{display:grid;align-content:start;gap:1px;padding:6px 8px;border-radius:8px;background:#fff;border:1.5px solid var(--line);text-align:center}
.p-nk-sch li small{display:block;margin:0;font-size:12px;line-height:1.3;color:var(--muted)}
.p-nk-sch li small:first-child{font-weight:700;color:var(--navy);font-size:12.5px}
.p-nk-sch li b{font-size:15px;color:var(--navy);font-variant-numeric:tabular-nums}
.p-nk-sch li:last-child{border-color:var(--blue);background:var(--sky-50)}
.p-nk-kpl{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
.p-nk-g{display:grid;justify-items:center;gap:3px;padding:4px 5px 5px;border-radius:7px;background:#fff;border:1.5px solid var(--line)}
.p-nk-nr{font-size:12px;font-weight:700;line-height:1.1;color:var(--muted)}
.p-nk-sz{display:flex;gap:2px}
.p-nk-sz i{display:block;width:22px;height:9px;border-radius:2px;background:var(--blue)}
.p-nk-g--wolne{border-style:dashed}
.p-nk-g--wolne i{background:var(--line)}
.p-nk-kpl-t{margin:0}
.p-nk-nw{white-space:nowrap}
@media (max-width:480px){
  .p-nk{margin-left:0}
  .p-nk-sch{grid-template-columns:1fr}
  .p-nk-sch li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 8px;text-align:left}
  .p-nk-sch li small:last-child{flex:1 1 100%;text-align:right}
}
@media (max-width:360px){.p-nk-tab th,.p-nk-tab td{padding-right:5px}.p-nk-tab{font-size:12.5px}}
/* NAJPROSTSZE e/f/g (Krist 05.10: „bardziej łopatologicznie”) – większe zdania, lista F jako 3 krótkie wiersze */
.p-nk--prosty{font-size:14.5px;line-height:1.5}
.p-nk--prosty .p-nk-h{margin:0 0 4px}
.p-nk-p{margin:0}
.p-nk-p b{color:var(--navy)}
.p-nk-f{display:flex;flex-wrap:wrap;gap:6px 8px;margin:2px 0 0;padding:0;list-style:none}
.p-nk-f li{padding:5px 10px;border-radius:8px;background:#fff;border:1.5px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
.p-nk-f li b{color:var(--navy)}
.p-nk-f li:last-child{border-color:var(--blue);background:var(--sky-50)}
@media (max-width:480px){.p-nk-f{display:grid;gap:5px}.p-nk-f li{white-space:normal}}
/* (05.10) wiersz F nigdy szerszy niż ramka – na tablecie (wąska kolumna kupna) „do 5 stojaków nadal 250,00 zł (50 zł/stojak)” wychodził w bok */
.p-nk-f li{max-width:100%}
@media (max-width:980px){.p-nk-f li{white-space:normal}}

/* (05.10, uwaga Krista z produkcji) ILOŚĆ DODATKU NA 1 STOJAK – ramka pod zaznaczonym dodatkiem (haki, kosze, półki…; prod.js):
   „Ilość: [− 1 +] szt. na 1 stojak    +2,60 zł netto” + przykład „Przy 2 stojakach razem 2 szt.”; doklejona do zaznaczonego dodatku */
.p-opt-q{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:-9px 0 0;padding:12px 12px 10px 68px;border:1.5px solid var(--blue);border-top:0;border-radius:0 0 12px 12px;background:var(--sky-50);box-shadow:inset 1px 0 0 var(--blue),inset -1px 0 0 var(--blue),inset 0 -1px 0 var(--blue)}
.p-opt.is-on:has(+.p-opt-q:not([hidden])){border-bottom-left-radius:0;border-bottom-right-radius:0}
.p-opt-q-l{font-size:14px;font-weight:700;color:var(--navy)}
.p-qty{display:inline-flex;align-items:stretch;border:1.5px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.p-qty button{width:44px;min-height:44px;border:0;background:#fff;font:inherit;font-size:20px;line-height:1;color:var(--blue-700);cursor:pointer}
.p-qty button:hover{background:var(--sky-50)}
.p-qty button[aria-disabled="true"]{color:#8496A6;cursor:default;background:#fff}
.p-qty button:focus-visible,.p-qty input:focus-visible{outline-offset:-3px}
.p-qty input{width:52px;min-height:44px;margin:0;padding:0;border:0;border-left:1px solid var(--line-2);border-right:1px solid var(--line-2);border-radius:0;text-align:center;font:inherit;font-size:16px;font-weight:700;color:var(--navy);background:#fff}
.p-opt-q-j{font-size:14px;font-weight:600;color:var(--navy)}
.p-opt-q-k{margin-left:auto;font-size:14.5px;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.p-opt-q-s,.p-opt-q-mx{flex:1 1 100%;font-size:13px;line-height:1.4;color:var(--muted)}
.p-opt-q-mx{color:var(--navy);font-weight:600}
@media (max-width:480px){.p-opt-q{padding-left:58px}}
@media (max-width:400px){.p-opt-q{padding-left:12px}}
/* (05.10, Krist: „tego pomarańczowego jest za dużo, dominuje”) kolory kwot w ramce „Wyposażenie i dodatki” – przełącznik pm_prod.dodatki_kolor
   (config/packages/pm_nowy_prod.yaml): 'pomarancz' = jak dotąd (bez klasy; kwoty #D66F00 – kontrast tylko 3,4:1), 'granat', 'koszyk', 'blekit'
   (klasa cfg--kol-… na ramce, kwota brutto w span.p-opt-br). Pomarańcz zostaje tylko na „Dodaj do koszyka”. Kontrast napisów ≥ 4,5:1 także na
   tle zaznaczonego dodatku (--sky-50): granat 12,9:1, #075C96 6,6:1, szary --muted 5,1:1. Podgląd: warianty/KARTA_DODATKI_KOLOR.html */
.p-cfg[class*="cfg--kol-"] .p-nakl-zabl{background:var(--sky-50)}
.p-cfg[class*="cfg--kol-"] .p-nakl-zabl .i{color:var(--blue-700)}
.p-cfg.cfg--kol-granat .p-opt-t small{color:var(--navy);font-weight:600}
.p-cfg.cfg--kol-koszyk .p-opt-t small,.p-cfg.cfg--kol-blekit .p-opt-t small{color:var(--navy);font-weight:700}
.p-cfg.cfg--kol-blekit .p-opt-t small{color:var(--blue-800)}
.p-cfg.cfg--kol-koszyk .p-opt-br,.p-cfg.cfg--kol-blekit .p-opt-br{color:var(--muted);font-weight:400}
/* (05.10) „−” i „+” przy ilości dodatku i naklejek: #075C96 zamiast #0077BE – na jasnoniebieskim tle po najechaniu myszą było 4,46:1 (mniej niż 4,5:1) */
.p-qty button:not([aria-disabled="true"]),.p-nk-b{color:var(--blue-800)}
/* (06.10, decyzja Krista – wariant „obok przycisku”) LICZBA STOJAKÓW [− N +] po lewej od „Dodaj do koszyka”, w jednym rzędzie (.p-kup);
   wygląd jak ilość dodatku (.p-qty: ramka, zaokrąglenie 10 px, przyciski 44 px) – wysokość jak przycisk (52 px). „Zapytaj o produkt” obok
   albo niżej (zawija się jak dotąd). Wąsko (tablet w 2 kolumnach, telefon): rząd się nie rozjeżdża i nie poszerza kolumny – napis
   przycisku może przejść do 2. linii (white-space:normal), ikona znika ≤ 400 px, pole liczby węższe ≤ 360 px (przyciski zawsze 44 px). */
.actions .p-kup{display:flex;align-items:stretch;gap:10px;flex:1 1 360px;min-width:0}
.actions .p-kup .btn-cart{flex:1 1 auto;min-width:0;padding:0 16px;white-space:normal;line-height:1.15;text-align:center}
.p-ile{flex:none}
.p-ile button{min-height:44px}
.p-ile input{width:56px;min-height:44px}
.actions .p-ile-uw{flex:1 1 100%;margin:-4px 0 0;font-size:13.5px;font-weight:600;line-height:1.4;color:var(--navy)}
.cfg-sum .cfg-sum-x{grid-column:1/-1;margin-top:4px;text-align:right;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:480px){
  .actions .p-kup{flex:1 1 100%}
  .actions .p-kup .btn-cart{padding:0 14px}
  .p-ile input{width:48px}
}
@media (max-width:400px){
  .actions .p-kup{gap:8px}
  .actions .p-kup .btn-cart{padding:0 8px}
  .actions .p-kup .btn-cart .i{display:none}
}
@media (max-width:360px){.p-ile input{width:40px}}
/* pasek telefonu: kwota od 1 000 zł (kilka stojaków) – na wąskim ekranie przycisk „Do koszyka” bez ikony, żeby kwota się mieściła */
@media (max-width:400px){.mbar.mbar--dluga .btn .i{display:none}}

/* (06.10, UX nr 2) linijki „Dostawa od … zł netto · faktura VAT” i „Płatność: …” pod przyciskami karty (kwota z pm_dostawa) */
.p-warunki{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px;font-size:13.5px;line-height:1.35;color:#34424F}
.p-warunki li{display:flex;gap:8px;align-items:flex-start;min-width:0}
.p-warunki .i{flex:none;color:var(--green);margin-top:1px}
.p-warunki b{color:var(--navy)}

/* (06.10, UX nr 7) tablet 761–860 px: dolny pasek „Do koszyka” schowany, dopóki duży przycisk „Dodaj do koszyka” jest na ekranie
   albo niżej (prod.js zdejmuje klasę mbar--czeka po przewinięciu za przycisk). Telefon ≤ 760 px – bez zmian (pasek od razu). */
@media (min-width:761px) and (max-width:860px){
  .mbar{transition:transform .2s ease,visibility .2s}
  .mbar.mbar--czeka{transform:translateY(110%);visibility:hidden}
}
@media (prefers-reduced-motion:reduce){.mbar{transition:none}}

/* (06.10, UX nr 12) telefon i tablet: większe miejsca do dotknięcia i czytelniejsze drobne napisy
   – „Koszt i czas dostawy” w punktach pod ceną: pole dotyku 44 px (jak „+ koszt dostawy” przy cenie), wygląd bez zmian
   – podpisy parametrów pod nazwą („wysokość”, „waga”…) 10 → 12 px; termin w kafelkach kolorów 11,5 → 12,5 px (wszędzie) */
.kol-s{font-size:12.5px}
@media (max-width:860px){
  .points .dost-btn{display:inline-block;padding:12px 8px;margin:-12px -8px}
  .facts--a span{font-size:12px;line-height:1.2}
}

/* (06.10, UX nr 13) „Cechy produktu” i „Elementy opcjonalne”: tekst zawsze do lewej. Opisy z panelu mają czasem justowanie w stylu
   (style="text-align:justify" / align="justify") – w wąskiej kolumnie robiło dziury między słowami. Jedna reguła; opisy w bazie bez zmian. */
.feat-txt,.opt-txt,.feat-txt [style*="justify"],.opt-txt [style*="justify"],.feat-txt [align="justify"],.opt-txt [align="justify"]{text-align:left!important}

/* (06.10, drobiazg D4) karta produktu na telefonie: ścieżka „Strona główna › … › nazwa” zajmowała 2 linijki – widać tylko
   „‹ <kategoria produktu>” (ostatni link ścieżki). Pozostałe linki i dane BreadcrumbList zostają w HTML bez zmian. */
@media (max-width:760px){
  .page-product .crumbs>*{display:none}
  .page-product .crumbs>a:last-of-type{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--blue-700);font-weight:600}
  .page-product .crumbs>a:last-of-type::before{content:"‹";font-size:22px;line-height:1;margin-top:-2px}
}
/* (08.10, Krist – wersja C) kolor stelaża: nazwa na pasku w tym kolorze (tło z pm_nowy_kolory.yaml) */
.kol-n--pasek{align-self:stretch;margin-top:5px;padding:3px 8px;border-radius:7px;color:#fff;text-align:center;border:1px solid transparent}
.kol-n--jasny{color:var(--navy);border-color:#AEBBC8}