/* Strona produktu (public/produkty/*.html, generator tools/strony-produktow.mjs) w wyglądzie sklepu. Nakłada się na
   katalog.css, legal.css, wspolne-b.css (skala, góra strony: pasek testowy, nagłówek, pasek grup, belka telefonu)
   i zakupy-b.css (klasa wk: nagłówek h1, przycisk „Dodaj do koszyka”, belka z powrotem do sklepu); kolejność arkuszy
   jak w koszyk.html. Strona nie ładuje już style.css ani shop.css (te niosą dalej strony kategorii i index.html).
   Jeden akcent (granat), pismo o stałej szerokości wyłącznie przy kodzie produktu, bez zieleni i miętowych pudełek.

   Części pliku:
   1. Rama: tło, okruszki, skrót koszyka na telefonie
   2. Blok zakupu: zdjęcia, nazwa, kod, lista parametrów, pas z ceną, polem ilości i przyciskiem, ramka „wycofany”
   3. Opis i parametry wykonania
   4. Karty „Elementy do wspólnego montażu” i „Porównaj w tej kategorii”, linki do części
   5. Producent i bezpieczeństwo
   6. Telefon (do 900 px, ten sam próg co góra strony) */

/* ===== 1. Rama ===== */
/* Tło jak w katalogu: szare na komputerze, białe na telefonie. Treść w kontenerze sklepu (.in: 1480 px, 24 px odstępu,
   na telefonie 16 px), więc lewa krawędź okruszków, zdjęcia i sekcji stoi tam, gdzie znak marki w nagłówku. */
.wp{background:var(--bg)}
.wp main.in{padding-bottom:48px}
main a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.breadcrumb{padding:16px 0 14px;font:var(--w1) 12.5px/1.4 var(--fb);color:var(--tx2)}
.breadcrumb a:hover{color:var(--acc);text-decoration:underline}
main h2{margin:0 0 14px;font:var(--w2) 22px/1.2 var(--fd);letter-spacing:-.015em;color:var(--tx)}

/* ===== 2. Blok zakupu ===== */
/* Zdjęcie w białej karcie po lewej (5 części szerokości), po prawej karta zakupu (7): nazwa, kod produktu, parametry
   i na dole jeden pas z ceną, polem ilości i przyciskiem. Pas stoi przy dolnej krawędzi karty, więc cena i przycisk mają
   to samo miejsce niezależnie od liczby parametrów. Karta zdjęcia rośnie do wysokości karty zakupu, najwyżej do 680 px. */
.product{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:stretch;margin-bottom:32px}
.product>div:first-child{display:flex;flex-direction:column}
.product-image{display:block;flex:1 1 0;width:100%;min-height:400px;max-height:680px;padding:32px;object-fit:contain;background:var(--srf);border:1px solid var(--line);border-radius:var(--r-karta)}
.thumbs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.thumbs button{display:grid;place-items:center;width:72px;height:72px;padding:6px;background:var(--srf);border:1px solid var(--line);border-radius:var(--r)}
.thumbs button:hover{border-color:var(--acc)}
.thumbs img{width:100%;height:100%;object-fit:contain}
.product>div:last-child{display:flex;flex-direction:column;padding:28px;background:var(--srf);border:1px solid var(--line);border-radius:var(--r-karta)}
.product h1{margin:0 0 6px}
/* kod produktu pod nazwą, zapis jak w koszyku: krój o stałej szerokości tylko dla samego kodu (K2a) */
.kod-prod{margin:0;font:var(--w1) var(--t1)/1.3 var(--fb);color:var(--tx2)}
.kod-prod span{font:500 12px var(--fm)}
/* parametry: nazwa małym szarym pismem, wartość pogrubiona, dwie kolumny; kolor z próbką (kolor ustawia app.js z mapy sklepu) */
.param-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px;align-content:start;flex:1 0 auto;margin:24px 0 0;padding-bottom:28px}
.param-lista:last-child{padding-bottom:0}
.param-lista dt{font:var(--w1) var(--t1)/1.3 var(--fb);color:var(--tx2)}
.param-lista dd{display:flex;align-items:flex-start;gap:8px;margin:3px 0 0;font:var(--w2) var(--t3)/1.3 var(--fb);font-variant-numeric:tabular-nums;color:var(--tx)}
.param-lista .sw{flex:none;width:14px;height:14px;margin-top:.2em;border-radius:50%;background:#9AA0A4;box-shadow:0 0 0 1px rgba(20,24,27,.18)}
/* pas zakupu: cena z lewej, pole ilości z podpisem i przycisk z prawej, pod spodem uwaga o cenie */
.zakup-pas{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;align-items:end;margin:auto -28px -28px;padding:20px 28px 22px;background:var(--soft);border-top:1px solid var(--line);border-radius:0 0 var(--r-karta) var(--r-karta)}
.zakup-pas .product-price{grid-column:1;grid-row:1}
/* Cena, jednostka i dostępność dochodzą po odpowiedzi sklepu. Do tego czasu blok trzyma niewidoczny zastępnik (.cena-zast, wstawia go
   generator, tools/strony-produktow.mjs) o tej samej budowie co gotowa cena, więc ma jej wysokość przy każdej szerokości okna,
   także gdy wiersz netto zawija się obok pola ilości; opis, ilość i przycisk pod nim nie zjeżdżają. „Pobieranie ceny…” leży na zastępniku
   i nie zmienia wysokości. */
.product-price.large{position:relative;align-content:flex-start;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font:var(--w2) 30px/1.1 var(--fb);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--tx)}
.cena-brutto{font:var(--w1) var(--t2)/1 var(--fb);letter-spacing:0;color:var(--tx2)}
.product-price.large small{flex:0 0 100%}
.product-price.large .cena-czeka{position:absolute;top:0;left:0;max-width:100%}
.cena-zast{display:contents;visibility:hidden}
.product-price small{display:block;margin-top:4px;font:var(--w1) var(--t1)/1.45 var(--fb);letter-spacing:0;color:var(--tx2)}
/* kod produktu w kartach „Porównaj” i montażu: jedyne inne miejsce kroju o stałej szerokości */
.product-price .product-code{font-family:var(--fm)}
/* Pole ilości (obrys ciemniejszy niż --obr, żeby na szarym pasie miał 3:1 dla elementów interfejsu): na komputerze samo pole, jak w katalogu i koszyku; „−” i „+” (.stp-b) tylko na telefonie. Obrys ma
   cały .stp, żeby ramka fokusu obejmowała pole z przyciskami. */
.product-quantity{grid-column:2;grid-row:1;display:grid;grid-template-columns:auto auto;gap:6px 12px;align-items:end;margin:0}
.product-quantity label{grid-column:1;font:var(--w2) var(--t1)/1.3 var(--fb);color:var(--tx)}
.product-quantity .stp{grid-column:1;grid-row:2;display:inline-flex;align-items:stretch;height:48px;box-sizing:border-box;background:var(--srf);border:1.5px solid #7E8A96;border-radius:var(--r)}
.product-quantity .stp:focus-within{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.product-quantity .stp-b{display:none}
.product-quantity .stp input{width:104px;height:auto;box-sizing:border-box;padding:0 12px;border:0;border-radius:0;background:transparent;font:var(--w2) 17px var(--fb);font-variant-numeric:tabular-nums;text-align:center;color:var(--tx)}
.product-quantity .stp input:focus{outline:none;box-shadow:none}
.product-quantity .primary{grid-column:2;grid-row:2;width:auto;min-width:230px;min-height:48px;margin-top:0;padding:0 var(--s4);white-space:nowrap}
/* Komunikat złej ilości (public/app.js, sprawdzGlownaIlosc): stoi pod polem, aż klient poprawi. Na komputerze w kolumnie pola
   (szerokość 0 i min-width 100%, żeby długi komunikat nie rozpychał kolumny, tylko się zawijał), a nie pod ceną. */
.zakup-pas .q-blad{grid-column:2;grid-row:2;width:0;min-width:100%;margin:0;font:var(--w1) var(--t1)/1.45 var(--fb);color:var(--warn)}
.product .primary:disabled{opacity:.45;cursor:default}
.zakup-pas .czas-dostawy{grid-column:1/-1;grid-row:3;margin:0;font:var(--w1) var(--t1)/1.45 var(--fb);color:var(--tx2)}
.zakup-pas .notice{grid-column:1/-1;grid-row:4;margin:0;font:var(--w1) var(--t1)/1.45 var(--fb);color:var(--tx2)}
/* wąski komputer: cena nad polem ilości i przyciskiem */
@media(min-width:901px) and (max-width:1100px){
 .zakup-pas{grid-template-columns:minmax(0,1fr)}
 .zakup-pas .product-price,.product-quantity{grid-column:1;grid-row:auto}
 .product-quantity{grid-template-columns:auto minmax(0,1fr)}
 .product-quantity .primary{min-width:0}
 .zakup-pas .q-blad,.zakup-pas .czas-dostawy,.zakup-pas .notice{grid-row:auto}
 .zakup-pas .q-blad{grid-column:1;width:auto;min-width:0}
}

/* strona wycofanego produktu: widoczna informacja i link do następcy, w barwach sklepu */
.wycofany{margin:4px 0 8px;padding:16px 18px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-karta);font:var(--w1) var(--t2)/1.5 var(--fb);color:var(--tx)}
.wycofany b{font-weight:var(--w2)}
.wycofany p+p{margin-top:8px}
/* link w zdaniu: pole dotyku 44 px w pionie bez zmiany wysokości wiersza */
.wycofany a{padding:12px 0;color:var(--acc);font-weight:var(--w2);text-decoration:underline;text-underline-offset:3px}

/* ===== 3. Opis i parametry wykonania ===== */
/* Na komputerze w tych samych kolumnach co zdjęcie i karta zakupu (5 i 7 części), pod nimi; sam opis stoi pod zdjęciem, bez pudełka na całą
   szerokość z pustą prawą połową. */
.opis{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:start;margin-bottom:40px}
.opis>section{padding:24px 28px;background:var(--srf);border:1px solid var(--line);border-radius:var(--r-karta)}
.buying-details>div+div{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.buying-details>div:only-child p,.buying-details>div:only-child ul{max-width:70ch}
.opis p{margin:0 0 12px;font:var(--w1) var(--t2)/1.65 var(--fb);color:var(--tx)}
.opis p:last-child{margin-bottom:0}
.opis ul{margin:0;padding-left:20px}
.opis li{margin-bottom:6px;font:var(--w1) var(--t2)/1.6 var(--fb);color:var(--tx)}
.opis li::marker{color:var(--tx2)}

/* ===== 4. Karty i linki do części ===== */
/* Karty stałej szerokości, ta sama w obu sekcjach: jedna albo dwie karty nie zostawiają pustej kolumny siatki
   i nie rozciągają się na całą szerokość. */
.matching-products,.compare-products{margin-bottom:40px}
.matching-products>.grid,.compare-products>.grid{display:grid;grid-template-columns:repeat(auto-fill,260px);gap:16px;margin-top:16px}
.card{display:flex;flex-direction:column;padding:12px 14px;background:var(--srf);border:1px solid var(--line);border-radius:var(--r-karta);overflow:hidden}
.card:hover{border-color:var(--obr)}
.cardimg{display:flex;align-items:center;justify-content:center;height:150px;margin:-12px -14px 12px;background:var(--soft)}
.cardimg img{width:100%;height:100%;padding:12px;object-fit:contain;mix-blend-mode:multiply}
/* kategoria na karcie „Porównaj”: mały napis, nie granatowa pigułka filtra z katalog.css */
.tag{display:block;margin:0 0 4px;padding:0;background:none;border-radius:0;font:var(--w1) 12px/1.3 var(--fb);color:var(--tx2)}
.card h3{margin:0 0 6px;font:var(--w2) 14px/1.35 var(--fb);letter-spacing:0;color:var(--tx)}
.card h3 a:hover{color:var(--acc);text-decoration:underline}
.card .match-reason{margin:0 0 8px;font:var(--w1) var(--t1)/1.45 var(--fb);color:var(--tx)}
.card .product-price{min-height:101px;margin-top:auto;padding:4px 0 8px;font:var(--w2) 17px/1.2 var(--fb);font-variant-numeric:tabular-nums;color:var(--tx)}
.cardfoot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line)}
/* Link w karcie: pogrubiony granat. Urządzenia, które nie umieją najechać (telefon, tablet), mają cienkie podkreślenie
   od razu, bo bez niego link wygląda jak pogrubiony podpis; z myszą podkreślenie pojawia się po najechaniu i przy fokusie
   klawiatury (obrys fokusu daje .wb :focus-visible). */
.cardfoot a{display:inline-flex;align-items:center;min-height:44px;color:var(--acc);font:var(--w2) var(--t1) var(--fb);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media(hover:hover){
 .cardfoot a{text-decoration:none}
 .cardfoot a:is(:hover,:focus-visible){text-decoration:underline;text-decoration-thickness:2px}
}
/* „+” 44 × 44 w obrysie sklepu; katalog.css ma pod .add granatowy przycisk „Dodaj” z tabeli wariantów */
.add{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;background:var(--srf);border:1.5px solid var(--obr);border-radius:var(--r);font:var(--w2) 22px/1 var(--fb);color:var(--acc)}
.add:hover{background:var(--accbg);border-color:var(--acc)}
.add:disabled{opacity:.35;cursor:default}
/* Baner „Szukaj pozostałych części”: dwa albo trzy kafle w siatce kart nad nim, zdjęcie kategorii, nazwa i strzałka;
   na telefonie wiersze jak lista kart. Strzałka i zdjęcie mówią „to link” bez najechania. */
.selection-links{margin-top:32px}
.selection-links :is(h2,h3){margin:0 0 4px;font:var(--w2) var(--t3)/1.3 var(--fd);color:var(--tx)}
.selection-links p{margin:0 0 12px;font:var(--w1) var(--t1)/1.5 var(--fb);color:var(--tx2)}
.kafle-kategorii{display:grid;grid-template-columns:repeat(auto-fill,260px);gap:16px}
.kafle-kategorii a{display:flex;align-items:center;gap:12px;min-height:76px;padding:10px 14px 10px 10px;background:var(--srf);border:1px solid var(--line);border-radius:var(--r-karta);font:var(--w2) var(--t2)/1.3 var(--fb);color:var(--tx)}
.kafle-kategorii a:hover{border-color:var(--acc);color:var(--acc)}
.kafel-zdj{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r);background:var(--soft)}
.kafel-zdj img{width:100%;height:100%;padding:4px;object-fit:contain;mix-blend-mode:multiply}
.kafel-n{flex:1;min-width:0}
.kafel-strz{flex:none;width:8px;height:8px;margin-right:4px;border-top:2px solid var(--acc);border-right:2px solid var(--acc);transform:rotate(45deg)}

/* ===== 5. Producent i bezpieczeństwo ===== */
/* Tylko styl: blok składa sync-legal.py (wymóg prawny). Nagłówek jak inne sekcje, wiersze jak tabela parametrów. */
.product-safety{margin:0 0 40px;padding:24px 28px;background:var(--srf);border:1px solid var(--line);border-radius:var(--r-karta)}
.product-safety h2{margin:0 0 8px;font:var(--w2) 22px/1.2 var(--fd)}
.product-safety .legal-data{margin:0}
.product-safety .legal-data dt,.product-safety .legal-data dd{padding:10px 12px 10px 0;font:var(--w1) 14px/1.5 var(--fb);color:var(--tx2)}
.product-safety .legal-data dd{font-weight:var(--w2);color:var(--tx)}
.product-safety .notice{margin:12px 0 0;font:var(--w1) var(--t1)/1.45 var(--fb);color:var(--tx2)}

/* ===== 6. Telefon ===== */
@media(max-width:900px){
 /* skrót koszyka: wspolne-b.css chowa .cartbox poniżej 900 px (katalog ma tam dolny pasek koszyka, koszyk i kasa go
    nie potrzebują); strona produktu pokazuje w wierszu marki ikonę z liczbą pozycji (decyzja właściciela „Jak w sklepie”),
    pusty koszyk: sama ikona. Nazwę dla czytnika ekranu daje aria-label ze sklep.js. */
 .wp{background:var(--srf)}
 .wp .cartbox{display:flex;align-items:center;justify-content:center;gap:var(--s1);height:var(--dotyk);min-width:60px;padding:0 var(--s2);margin-left:auto}
 .wp .cartbox .v,.wp .cartbox #koszSlowo{display:none}
 /* pusty koszyk zostawia miejsce na liczbę (niewidoczną), więc ikona stoi w tym samym miejscu przed i po wczytaniu koszyka */
 .wp .cartbox[data-pusty] .kosz-ile{display:inline;visibility:hidden}
 .wp .cartbox .l{font-size:0}
 .wp .cartbox #cartCount{font:var(--w2) var(--t2)/1 var(--fb);font-variant-numeric:tabular-nums;color:var(--acc)}
 .breadcrumb{padding:12px 0 10px}
 /* blok zakupu bez kart: białe tło strony, zdjęcie niższe, żeby cena i przycisk weszły do pierwszego ekranu; najpierw
    pas zakupu, potem parametry (pod nimi linia) */
 .product{grid-template-columns:1fr;gap:16px;margin-bottom:24px}
 .product-image{flex:none;height:240px;min-height:0;padding:16px}
 .thumbs button{width:56px;height:56px;padding:4px}
 .product>div:last-child{padding:0;border:0;border-radius:0;background:none}
 .product h1{margin:6px 0 6px}
 .kod-prod{margin-bottom:0}
 .zakup-pas{order:1;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;gap:0 16px;margin:14px 0 0;padding:0;background:none;border:0;border-radius:0}
 .product-quantity{display:contents}
 .zakup-pas .product-price{grid-column:1;grid-row:1/3;align-self:end}
 .product-price.large{font-size:26px}
 .product-quantity label{grid-column:2;grid-row:1;align-self:end;margin-bottom:6px}
 .product-quantity .stp{grid-column:2;grid-row:2}
 .product-quantity .stp-b{display:grid;place-items:center;width:44px;height:auto;padding:0;border:0;border-radius:0;background:transparent;color:var(--acc);font:var(--w1) var(--t5)/1 var(--fb);cursor:pointer}
 .product-quantity .stp-b:active:not(:disabled){background:var(--soft)}
 .product-quantity .stp-b:disabled{opacity:.4;cursor:default}
 .product-quantity .stp input{width:56px;padding:0 2px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
 .product-quantity .primary{grid-column:1/-1;grid-row:4;width:100%;min-width:0;margin-top:8px}
 .zakup-pas .q-blad{grid-column:1/-1;grid-row:3;width:auto;min-width:0;margin-top:8px}
 .zakup-pas .czas-dostawy{grid-row:5;margin-top:8px}
 .zakup-pas .notice{grid-row:6;margin-top:4px}
 .param-lista{order:2;grid-template-columns:fit-content(62%) minmax(0,1fr);gap:14px 16px;margin-top:20px;padding:20px 0 0;border-top:1px solid var(--line)}
 .param-lista:last-child{padding-bottom:0}
 .param-lista dd{font-size:var(--t2)}
 main h2{font-size:20px}
 /* opis, parametry i producent jako kolejne części strony oddzielone linią, bez kart */
 .opis{grid-template-columns:1fr;gap:0;margin-bottom:24px}
 .opis>section,.product-safety{padding:20px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
 .opis>section+section{margin-top:20px}
 .product-safety{margin-bottom:24px}
 .product-safety .legal-data dt{padding-bottom:0;border-bottom:0}
 /* karty montażu i „Porównaj” jako zwarte rzędy: miniatura z lewej, tekst z prawej; kategoria (.tag) jest w „Porównaj”
    zawsze ta sama, więc znika. Link „Zobacz parametry” i „Sprawdź szczegóły” z polem dotyku co najmniej 44 px. */
 .compare-products .grid{grid-template-columns:1fr;gap:0}
 .compare-products .cardfoot a{display:inline-flex;align-items:center;min-height:44px}
 .matching-products>.grid,.compare-products>.grid{grid-template-columns:1fr;gap:0;margin-top:8px}
 .matching-products,.compare-products{margin-bottom:24px}
 .card{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:12px;align-items:start;padding:12px 0;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;overflow:visible}
 .cardimg{grid-column:1;grid-row:1/6;width:64px;height:64px;margin:0;border:1px solid var(--line);border-radius:var(--r)}
 .cardimg img{padding:4px}
 .card>:not(.cardimg){grid-column:2}
 .compare-products .tag{display:none}
 .card h3{font-size:14px;margin-bottom:4px}
 .card .match-reason{margin-bottom:4px}
 .card .product-price{min-height:93px;padding:2px 0 4px;font-size:15px}
 .cardfoot{padding-top:0;border-top:0}
 .selection-links{margin-top:24px}
 .kafle-kategorii{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
 .kafle-kategorii a{min-height:72px;padding:8px 0;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0}
 .kafel-zdj{border:1px solid var(--line);background:var(--srf)}
}