/* ============================================================ karta.css, karta produktu przy decyzji (paczka Z3, zadanie Z3B) Arkusz idzie tylko na kartach produktow i tylko za sklep.css (zaleznosc uchwytu spawlab-sklep), wiec przy rownej wadze selektora wygrywa kolejnoscia. Kolory biora sie wylacznie z tokenow --ns-* ustawionych w sklep.css, dlatego motyw ciemny obsluguje sie sam i nie ma tu ani jednej wartosci koloru wpisanej na sztywno. Uklad: prawa kolumna karty jest kolumna elastyczna, a o kolejnosci decyduje wlasciwosc order. Dzieki temu porzadek na ekranie mozna ustawic pod decyzje zakupowa, nie ruszajac szablonu produktu ani kolejnosci w kodzie strony. Przegladarka bez :has zostaje przy dzisiejszej kolejnosci, czyli przy tym, co jest dzis na zywo. Spis: 1 kolejnosc w prawej kolumnie 2 naglowek i konfiguracja 3 cena i parametry 4 skrot wiersza "W zestawie" 5 przelacznik netto i brutto 6 formularz koszyka i zapytanie o zestaw 7 karta doradcy 8 termin i warunki (pasek zaufania) 9 krotki opis, porownanie, numer katalogowy 10 pasek kotwic "Na tej stronie" 11 sekcje zamiast zakladek 12 tabela danych technicznych 13 telefon ============================================================ */ /* ------------------------------------------------------------ 1. Kolejnosc w prawej kolumnie Kolumna prawa to jedyna kolumna karty, ktora zaczyna sie od H1, wiec taki selektor trafia w nia i nie trafia w galerie po lewej. Blok koszyka dostaje display:contents: jego opakowanie znika z ukladu, a formularz, pasek zaufania i pole porownania staja sie zwyklymi elementami kolumny i moga miec wlasne miejsce w kolejce. ------------------------------------------------------------ */ .single-product .wp-block-column:has(> h1.wp-block-post-title){ display:flex;flex-direction:column} /* Element elastyczny bez min-width:0 nie chce sie zwezic ponizej swojej tresci, a wtedy dluga nazwa albo dlugi wiersz rozpycha cala kolumne. */ .single-product .wp-block-column:has(> h1.wp-block-post-title) > *{min-width:0} .single-product .wp-block-column:has(> h1.wp-block-post-title) > .wp-block-add-to-cart-form{ display:contents} .single-product .wp-block-column:has(> h1.wp-block-post-title) > h1.wp-block-post-title{order:10} .single-product .wp-block-column:has(> h1.wp-block-post-title) > .ns-konfig{order:20} .single-product .wp-block-column:has(> h1.wp-block-post-title) > .wp-block-woocommerce-product-price{order:30} .single-product .wp-block-column:has(> h1.wp-block-post-title) > .ns-kafel-parametry{order:31} .single-product .wp-block-column:has(> h1.wp-block-post-title) > .ns-sklad{order:40} .single-product .wp-block-column:has(> h1.wp-block-post-title) > style{order:45} .single-product .wp-block-column:has(> h1.wp-block-post-title) > .spawlab-ceny{order:50} .single-product .wp-block-column:has(> h1.wp-block-post-title) form.cart{order:60} .single-product .wp-block-column:has(> h1.wp-block-post-title) > .ns-wycena{order:60} .single-product .wp-block-column:has(> h1.wp-block-post-title) .ns-doradca{order:70} .single-product .wp-block-column:has(> h1.wp-block-post-title) .ns-zaufanie{order:80} .single-product .wp-block-column:has(> h1.wp-block-post-title) > .wp-block-post-excerpt{order:90} .single-product .wp-block-column:has(> h1.wp-block-post-title) .ns-por-pole{order:100} .single-product .wp-block-column:has(> h1.wp-block-post-title) > .wp-block-woocommerce-product-meta{order:101} /* ------------------------------------------------------------ 2. Naglowek i konfiguracja W H1 zostaje sam model, konfiguracja schodzi do akapitu pod nim (karta.php, filtr render_block core/post-title). Naglowek zawija sie do konca, bez ucinania: nazwa maszyny to nie ozdoba, tylko informacja, po ktorej klient sprawdza, czy patrzy na to wykonanie. ------------------------------------------------------------ */ .single-product h1.wp-block-post-title{ font-size:clamp(28px,2.3vw,32px);line-height:1.18;letter-spacing:-.02em; margin:0 0 5px;overflow-wrap:anywhere} .ns-konfig{margin:0 0 13px;font-size:14.5px;line-height:1.45;color:var(--ns-ink-2)} .ns-konfig-et{margin-right:8px;font-size:10.5px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:var(--ns-muted)} /* ------------------------------------------------------------ 3. Cena i trzy parametry Rozmiar pisma na samym bloku ceny ustawia klasa motywu .has-large-font-size z dopiskiem !important (tak wypisuje ja WordPress w regulach globalnych), wiec rozmiaru nie da sie tam nadpisac bez drugiego !important. Zamiast tego opisujemy element w srodku bloku, ktorego ta klasa nie dotyczy. Atrybut data-is-descendent-of-single-product-template trafia wylacznie w cene ogladanej maszyny, a nie w kafelki "podobnych maszyn". ------------------------------------------------------------ */ .single-product .wp-block-woocommerce-product-price{margin:0} .wp-block-woocommerce-product-price[data-is-descendent-of-single-product-template="true"] .wc-block-components-product-price{ font-size:26px;font-weight:700;line-height:1.15;color:var(--ns-ink)} .wp-block-woocommerce-product-price[data-is-descendent-of-single-product-template="true"] .wc-block-components-product-price .ceny-dop{ font-size:14px;font-weight:400;color:var(--ns-muted)} .single-product .ns-kafel-parametry{margin:9px 0 0} /* ------------------------------------------------------------ 4. Skrot wiersza "W zestawie" Pierwsze pytanie przy zestawie brzmi "co dostaje za te cene". Odpowiedz stoi wiec przy cenie, a nie dwa ekrany nizej w tabeli. Odnosnik prowadzi do pelnego wiersza, gdy skrot zostal ucienty. ------------------------------------------------------------ */ .ns-sklad{margin:14px 0 0;padding:11px 14px;max-width:58ch; border:1px solid var(--ns-line);border-left:3px solid var(--ns-line-2);border-radius:3px; background:var(--ns-sunk)} .ns-sklad b{display:block;margin:0 0 4px;font-size:11px;font-weight:700; letter-spacing:.07em;text-transform:uppercase;color:var(--ns-muted)} .ns-sklad p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ns-ink-2)} .ns-sklad a{color:var(--ns-act);text-decoration:underline;text-underline-offset:3px;white-space:nowrap} .ns-sklad a:hover{color:var(--ns-ink)} .ns-sklad a:focus-visible{outline:2px solid var(--ns-act);outline-offset:2px} /* ------------------------------------------------------------ 5. Przelacznik netto i brutto Wtyczka cen dopina swoje reguly stylem wewnetrznym w tresci strony, czyli za tym arkuszem, wiec przy wadze (0,1,0) wygrywalaby kolejnoscia. Przedrostek .single-product podnosi wage o stopien. ------------------------------------------------------------ */ .single-product .spawlab-ceny{margin:16px 0 0;font-size:13px;color:var(--ns-muted)} .single-product .spawlab-ceny span.grupa a{font-size:12.5px;padding:4px 11px} /* ------------------------------------------------------------ 6. Formularz koszyka i zapytanie o zestaw Przycisk zakupu jest jedynym dzialaniem glownym w tym widoku (poziom 1, 48 px). Obok niego, w tej samej linii, stoi przejscie do formularza na tej samej stronie: poziom 2, ta sama wysokosc. ------------------------------------------------------------ */ /* Dolny margines formularza koszyka ustawia woocommerce.css regula ".woocommerce div.product form.cart" o wadze (0,2,2), czyli 2 em, co przy pismie bloku daje 44 px. Zeby ja przebic, trzeba trzech klas. */ .single-product form.cart, .single-product .wp-block-column .wp-block-add-to-cart-form form.cart{ display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 0} .ns-zap-skrot{min-height:48px;padding:0 18px;font-size:15px} /* Blok wyceny (maszyna bez ceny) ma trzy drogi dalej w jednej linii: zapytanie mailem (poziom 1), formularz na tej stronie (poziom 2) i telefon. Bez ukladu elastycznego stoja na roznych liniach pisma. */ .single-product .ns-wycena{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin:18px 0 0} .single-product .ns-wycena .ns-wycena-info{flex:1 0 100%;margin:0 0 12px} .single-product .ns-wycena .ns-wycena-tel{margin-left:0} /* ------------------------------------------------------------ 7. Karta doradcy Ma byc widoczna, ale nie ma konkurowac z przyciskiem zakupu: spokojne tlo, bez koloru dzialania poza jednym odnosnikiem. Miejsce na zdjecie pojawia sie samo, gdy plik dane/doradca.webp wejdzie do paczki wtyczki (karta.php sprawdza, czy jest). ------------------------------------------------------------ */ .ns-doradca{display:flex;gap:14px;align-items:flex-start;max-width:58ch; margin:16px 0 0;padding:13px 15px;border:1px solid var(--ns-line);border-radius:4px; background:var(--ns-steel);font-size:13.5px;line-height:1.5;color:var(--ns-ink-2)} .ns-doradca-foto{flex:0 0 auto;width:64px;height:64px;border-radius:50%;object-fit:cover; background:var(--ns-sunk)} .ns-doradca-tresc{min-width:0} .ns-doradca p{margin:0} .ns-doradca-kto{display:flex;flex-wrap:wrap;gap:0 9px;align-items:baseline} .ns-doradca-kto b{font-size:14.5px;font-weight:700;color:var(--ns-ink)} .ns-doradca-kto span{font-size:12.5px;color:var(--ns-muted)} .ns-doradca-co{margin-top:5px} .ns-doradca-kontakt{display:flex;flex-wrap:wrap;gap:0 12px;align-items:baseline;margin-top:8px} .ns-doradca-tel{font-family:var(--ns-mono);font-size:15px;font-weight:600;color:var(--ns-ink); text-decoration:underline;text-underline-offset:3px} .ns-doradca-tel:hover{color:var(--ns-act)} .ns-doradca-tel:focus-visible, .ns-doradca-akcja a:focus-visible{outline:2px solid var(--ns-act);outline-offset:2px} .ns-doradca-godziny{font-size:12.5px;color:var(--ns-muted)} .ns-doradca-akcja{margin-top:9px} .ns-doradca-akcja .ns-btn-3{font-size:13.5px} /* ------------------------------------------------------------ 8. Termin i warunki Pasek zaufania schodzi z szesciu akapitow do zwartej siatki, zeby termin dostawy miescil sie w pierwszym ekranie prawej kolumny. Dostepnosc, czyli termin, stoi pierwsza i ma wlasna ramke: to liczba, po ktorej klient decyduje, czy w ogole pyta o reszte. ------------------------------------------------------------ */ .single-product .ns-zaufanie{ display:grid;grid-template-columns:1fr 1fr;gap:10px 22px; margin:16px 0 0;padding:14px 0 0; border-top:1px solid var(--ns-line);border-bottom:0} .single-product .ns-zaufanie .ns-z b{font-size:10.5px} .single-product .ns-zaufanie .ns-z span{font-size:13px;line-height:1.45} .single-product .ns-zaufanie .ns-z:first-child{ grid-column:1/-1;padding:9px 12px;border:1px solid var(--ns-line-2);border-radius:3px; background:var(--ns-steel)} .single-product .ns-zaufanie .ns-z:first-child span{font-size:14px;font-weight:600;color:var(--ns-ink)} .single-product .ns-zaufanie .ns-z.ns-z-platnosc{padding-top:10px} .single-product .ns-z-wiecej{font-size:13px} /* ------------------------------------------------------------ 9. Krotki opis, porownanie, numer katalogowy ------------------------------------------------------------ */ .single-product .wp-block-post-excerpt{margin:18px 0 0;max-width:62ch} .single-product .wp-block-post-excerpt__excerpt{font-size:15px;line-height:1.6;color:var(--ns-ink-2)} .single-product .ns-por-pole{margin:16px 0 0} .single-product .wp-block-woocommerce-product-meta{margin:16px 0 0} /* ------------------------------------------------------------ 10. Pasek kotwic "Na tej stronie" Zwykly pas nad sekcjami, nie przyklejony do naglowka: przy przyklejonym pasku na telefonie zostaje pol ekranu na tresc. Etykiety maja wyglad odnosnika dzialania (poziom 3), a pole klikalne ma pelne 44 px wysokosci. ------------------------------------------------------------ */ .ns-kotwice{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px; margin:30px 0 4px;padding:0; border-top:1px solid var(--ns-line);border-bottom:1px solid var(--ns-line)} .ns-kotwice a{display:inline-flex;align-items:center;min-height:44px; font:600 13.5px/1.3 var(--ns-archivo);color:var(--ns-act); text-decoration:underline;text-underline-offset:3px} .ns-kotwice a:hover{color:var(--ns-ink)} .ns-kotwice a:focus-visible{outline:2px solid var(--ns-act);outline-offset:2px} /* ------------------------------------------------------------ 11. Sekcje zamiast zakladek Zakladki chowaly opis, dane techniczne i opinie pod trzema przyciskami. Panele stoja teraz jeden pod drugim, a pasek zakladek znika. Skrypt WooCommerce chowa nieaktywne panele stylem wpisanym w element, wiec bez !important nie da sie ich odslonic arkuszem; to jedyne miejsce w tym pliku, gdzie go uzywamy. Rozwiazanie skryptem oznaczaloby mrugniecie: tresc najpierw znika, potem wraca. ------------------------------------------------------------ */ .woocommerce-tabs ul.tabs{display:none} .woocommerce-tabs .woocommerce-Tabs-panel{display:block !important} .woocommerce-tabs .woocommerce-Tabs-panel + .woocommerce-Tabs-panel{ margin-top:34px;padding-top:26px;border-top:1px solid var(--ns-line)} /* Odstep u gory przy skoku z paska kotwic, taki sam jak ma juz kotwica #formularz w sklep.css. */ .woocommerce-tabs .woocommerce-Tabs-panel h2{scroll-margin-top:90px} .single-product .ns-zaufanie, .single-product table.ns-dane tr[id]{scroll-margin-top:90px} /* Formularz opinii chowala do tej pory zakladka, wiec nikt go nie widzial i zostal w wygladzie motywu: czarny przycisk w ksztalcie pigulki i pola bez ramek. Skoro opinie staja sie ostatnia sekcja karty, formularz musi wygladac jak reszta sklepu. Przycisk jest poziomem 2 (obrys): to najmniej wazne dzialanie na tej stronie i nie ma konkurowac z zakupem ani z wysylka zapytania. */ .woocommerce-Reviews .comment-form label{display:block;margin:0 0 4px; font-size:13.5px;font-weight:600;color:var(--ns-ink-2)} .woocommerce-Reviews .comment-form input[type=text], .woocommerce-Reviews .comment-form input[type=email], .woocommerce-Reviews .comment-form select, .woocommerce-Reviews .comment-form textarea{ width:100%;max-width:40rem;box-sizing:border-box;padding:9px 11px; border:1px solid var(--ns-line);border-radius:3px;background:var(--ns-paper); font:400 14.5px/1.45 var(--ns-archivo);color:var(--ns-ink)} .woocommerce-Reviews .comment-form input:focus-visible, .woocommerce-Reviews .comment-form select:focus-visible, .woocommerce-Reviews .comment-form textarea:focus-visible{ outline:2px solid var(--ns-act);outline-offset:1px;border-color:var(--ns-act)} .woocommerce-Reviews .comment-form .submit{ display:inline-flex;align-items:center;justify-content:center;width:auto; min-height:44px;padding:0 18px;border:1.5px solid var(--ns-act);border-radius:3px; background:transparent;color:var(--ns-act); font:600 15px/1.2 var(--ns-archivo);cursor:pointer; transition:background-color .15s, border-color .15s, color .15s} .woocommerce-Reviews .comment-form .submit:hover{background:var(--ns-act-soft)} .woocommerce-Reviews .comment-form .submit:focus-visible{outline:2px solid var(--ns-act);outline-offset:2px} /* ------------------------------------------------------------ 12. Tabela danych technicznych Etykieta dostaje 38 procent szerokosci, wartosc zawija sie do konca. Obwoluta z wlasnym przewijaniem jest zabezpieczeniem dla najwezszych ekranow: przewija sie tabela, a nie cala strona. Obwoluta jest osiagalna z klawiatury, inaczej nie da sie do niej wejsc bez myszy. ------------------------------------------------------------ */ .ns-dane-w{max-width:100%;overflow-x:auto} .ns-dane-w:focus-visible{outline:2px solid var(--ns-act);outline-offset:2px} table.ns-dane{width:100%;min-width:0;border-collapse:collapse} table.ns-dane th{width:38%;text-align:left;vertical-align:top;font-weight:600; overflow-wrap:anywhere} table.ns-dane td{vertical-align:top;overflow-wrap:anywhere} table.ns-dane tr[id]:target{background:var(--ns-act-soft)} /* ------------------------------------------------------------ 13. Telefon ------------------------------------------------------------ */ @media (max-width:640px){ .single-product h1.wp-block-post-title{font-size:24px;line-height:1.2} .ns-konfig{font-size:13.5px;margin-bottom:11px} .wp-block-woocommerce-product-price[data-is-descendent-of-single-product-template="true"] .wc-block-components-product-price{font-size:24px} .wp-block-woocommerce-product-price[data-is-descendent-of-single-product-template="true"] .wc-block-components-product-price .ceny-dop{display:block;margin-top:3px;font-size:13.5px} .ns-sklad{padding:10px 12px} .single-product .ns-zaufanie{grid-template-columns:1fr;gap:9px} .single-product .ns-zaufanie .ns-z:first-child{grid-column:1} .ns-doradca{padding:12px 13px} .ns-kotwice{gap:0 18px;margin-top:24px} .ns-kotwice a{min-height:40px;font-size:13px} .woocommerce-tabs .woocommerce-Tabs-panel + .woocommerce-Tabs-panel{ margin-top:26px;padding-top:20px} table.ns-dane{font-size:13.5px} table.ns-dane th{width:38%} } @media (max-width:560px){ /* przycisk zakupu i zapytanie nie zmieszcza sie obok pola ilosci w jednej linii, wiec zapytanie schodzi na pelna szerokosc */ .ns-zap-skrot{flex:1 0 100%} .single-product .ns-wycena{gap:10px 0} .single-product .ns-wycena .ns-wycena-przycisk{flex:1 0 100%} } /* === Z6 odbior (16 wrzesnia 2026) === */ /* Telefon doradcy na karcie produktu mial na telefonie 23 px wysokosci (15 px razy 1,55), czyli ponizej 24 px z WCAG 2.5.8. Podnosimy sam obszar dotykowy; pismo i odstepy zostaja bez zmian. */ @media (max-width:640px){ .ns-doradca-tel{display:inline-flex;align-items:center;min-height:24px} } /* ============================================================ === Z8A rekord SKU w bloku "W zestawie" (17 wrzesnia 2026) === Audyt 17.09, zadanie R05. Blok pod cena wypisuje teraz pozycje z rekordu SKU (rekord.php), a nie skrot jednego wiersza tabeli: osobno to, co jest w cenie, osobno to, co poza nia, i numer czesci w nawiasie, gdy karta go podaje. Ramka, tlo i naglowek zostaja te same, co w wersji z akapitem, wiec kolejnosc w prawej kolumnie (order:40) sie nie zmienia. ============================================================ */ /* Lista pozycji bez punktorow: w waskiej kolumnie punktor zabiera miejsce, a kazda pozycja i tak stoi w osobnym wierszu. */ .ns-sklad-lista{margin:0;padding:0;list-style:none; font-size:13.5px;line-height:1.5;color:var(--ns-ink-2)} .ns-sklad-lista li{margin:0 0 3px;padding-left:13px;text-indent:-13px} .ns-sklad-lista li:last-child{margin-bottom:0} /* Znacznik pozycji rysujemy sami, zeby nie zalezal od listy przegladarki i zeby przy zawinieciu tekst wracal pod pierwsza litere, nie pod kropke. */ .ns-sklad-lista li::before{content:"";display:inline-block;width:5px;height:5px; margin-right:8px;border-radius:50%;background:var(--ns-line-2); vertical-align:middle;text-indent:0} /* Numer czesci: ten sam stopien co pozycja, ale pismem technicznym i w kolorze tekstu pomocniczego, zeby nie konkurowal z nazwa elementu. Numer sie nie lamie, bo polowa numeru katalogowego nie jest numerem. */ .ns-sklad-nr{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px;color:var(--ns-muted);white-space:nowrap} .ns-sklad-dalej{margin:6px 0 0;font-size:13px;color:var(--ns-muted)} /* Pozycje poza cena: jedno zdanie pod lista, oddzielone linia, zeby nikt nie wziel ich za czesc zestawu. */ .ns-sklad-opcja{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--ns-line); font-size:13px;line-height:1.5;color:var(--ns-ink-2)} .ns-sklad-et{display:inline-block;margin-right:6px;font-size:11px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--ns-muted)} /* Uwaga z karty, na przyklad "Bez uchwytu spawalniczego, do skompletowania osobno". Pismo mniejsze, kolor tekstu pomocniczego, kontrast 6,6 na tle var(--ns-sunk). */ .ns-sklad-uwaga{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--ns-muted)} @media (max-width:640px){ .ns-sklad-lista{font-size:13px} .ns-sklad-opcja,.ns-sklad-dalej{font-size:12.5px} }