/* Elementy prawne i dziewięć stron prawnych (public/*.html z sync-legal.py). Arkusz ładują też koszyk, kasa i strony
   produktów (stopka prawna, blok „Producent i bezpieczeństwo”), więc wyglądu strony prawnej nie wolno dopisywać
   poza klasą .legal-page (body ma klasy wb i wl). Strona prawna nakłada się na katalog.css, wspolne-b.css (skala i góra
   strony) i zakupy-b.css (kolejność arkuszy jak w koszyk.html). Jeden akcent (granat), bez zieleni.

   Części pliku:
   1. Wspólne z koszykiem, kasą i stronami produktów: stopka prawna, dane w wierszach, blok producenta
   2. Strona prawna w wyglądzie sklepu: tło, dokument, nagłówki, tekst, przyciski, dane, karty, tabela, formularz
   3. Telefon (do 900 px, ten sam próg co góra strony)
   4. Wydruk: bez górnego paska, menu i stopki, zostaje treść dokumentu */

/* ===== 1. Wspólne ===== */
.product-safety h2{font-size:25px;margin:32px 0 14px}
.product-safety a{text-decoration:underline}
.legal-data{display:grid;grid-template-columns:minmax(160px,1fr) 2fr;gap:0;margin:20px 0;overflow-wrap:anywhere}
.legal-data dt,.legal-data dd{padding:12px;border-bottom:1px solid var(--line);margin:0;line-height:1.65}
.legal-data dt{font-weight:600}
.legal-data dd ul{margin:0;padding-left:18px}
table{border-collapse:collapse;width:100%}
.legal-footer{display:block!important;margin-top:25px}
.legal-footer>div{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:14px}
.legal-footer a{text-decoration:underline;font-size:13px;padding:5px 0}
.legal-platnosci{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:16px 0 0;font-size:13px;color:var(--tx2)}
.legal-platnosci img{display:block;object-fit:contain}
.legal-firma{margin:0 0 10px;font-size:13px;color:var(--tx2)}
.product-safety{margin:35px 0}
.legal-checkout{font-size:13px;line-height:1.7}
.legal-checkout a{text-decoration:underline}
:focus-visible{outline:3px solid #947000;outline-offset:4px}
@media(max-width:700px){.legal-data{grid-template-columns:1fr}.legal-data dt{border:0;padding-bottom:0}.legal-data dd{padding-top:4px}.legal-footer>div{display:grid;grid-template-columns:1fr 1fr}}

/* ===== 2. Strona prawna w wyglądzie sklepu ===== */
/* Tło jak w koszyku i katalogu (szare na komputerze, białe na telefonie). Treść w kontenerze sklepu (.in), więc lewa
   krawędź okruszków i dokumentu stoi tam, gdzie znak marki w nagłówku. Dokument to biała karta jak karty koszyka. */
.wl{background:var(--bg)}
.legal-page{padding-top:0;padding-bottom:64px;min-height:60vh}
.legal-page .breadcrumb{padding:16px 0 14px;font:var(--w1) 12.5px/1.4 var(--fb);color:var(--tx2)}
.legal-page .breadcrumb a{color:inherit;text-decoration:none}
.legal-page .breadcrumb a:hover{color:var(--acc);text-decoration:underline}
.legal-page article{max-width:860px;padding:32px 40px 40px;background:var(--srf);border:1px solid var(--line);border-radius:var(--r-karta)}
.legal-page .eyebrow{display:block;font:var(--w2) 12px/1.3 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
.legal-page h1{margin:8px 0 20px;font:var(--w2) 28px/1.15 var(--fd);letter-spacing:-.015em;color:var(--tx)}
.legal-page h2{margin:32px 0 12px;font:var(--w2) var(--t4)/1.25 var(--fd);letter-spacing:-.01em;color:var(--tx)}
.legal-page p,.legal-page li{font:var(--w1) var(--t2)/1.65 var(--fb);color:var(--tx)}
.legal-page p{margin:0 0 14px}
.legal-page ul{margin:0 0 14px;padding-left:22px}
.legal-page li{margin-bottom:8px}
.legal-page li::marker{color:var(--tx2)}
.legal-page strong{font-weight:var(--w2)}
.legal-page article a{color:var(--acc);text-decoration:underline;text-decoration-color:rgba(22,50,79,.35);text-underline-offset:3px}
.legal-page article a:hover{text-decoration-color:var(--acc)}

/* ramka „Wersja testowa”: barwy sklepu, bez koloru spoza palety i bez kreski z boku */
.legal-page .legal-notice{margin:20px 0;padding:16px 18px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-karta);font:var(--w1) var(--t2)/1.6 var(--fb);color:var(--tx)}
.legal-page .legal-notice strong{display:block}
/* „Drukuj / zapisz PDF”: przycisk drugorzędny sklepu (obrys, granat, 44 px) */
.legal-page .legal-print{display:inline-flex;align-items:center;justify-content:center;min-height:var(--dotyk);margin:0 0 20px;padding:0 var(--s4);border:1.5px solid var(--obr);border-radius:var(--r);background:var(--srf);color:var(--acc);font:var(--w2) var(--t2) var(--fb);cursor:pointer}
.legal-page .legal-print:hover{border-color:var(--acc)}

/* dane sprzedawcy: wiersze jak tabela parametrów sklepu (etykieta zwykła szara, wartość pogrubiona, linia między wierszami) */
.legal-page .legal-data{grid-template-columns:minmax(180px,1fr) 2fr;margin:16px 0 20px}
.legal-page .legal-data dt,.legal-page .legal-data dd{padding:10px 0;border-bottom:1px solid var(--line);font:var(--w1) 14px/1.5 var(--fb)}
.legal-page .legal-data dt{padding-right:16px;color:var(--tx2)}
.legal-page .legal-data dd{font-weight:var(--w2);font-variant-numeric:tabular-nums;color:var(--tx)}
.legal-page .legal-data dt:last-of-type,.legal-page .legal-data dd:last-of-type{border-bottom:0}

/* „Informacje dla klienta”: osiem odnośników jako karty sklepu */
.legal-page .legal-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 8px}
.legal-page .legal-cards a{display:flex;align-items:center;min-height:var(--dotyk);padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-karta);background:var(--srf);color:var(--acc);font:var(--w2) var(--t2)/1.35 var(--fb);text-decoration:none}
.legal-page .legal-cards a:hover{border-color:var(--acc);text-decoration:underline;text-underline-offset:3px}

/* tabela cookies: jak tabele sklepu, linie poziome, bez podświetlenia wiersza i bez przyklejonego nagłówka z katalog.css */
.legal-page .legal-table{margin:16px 0 20px;overflow-x:auto}
.legal-page .legal-table table{font:var(--w1) 14px/1.5 var(--fb)}
.legal-page .legal-table th,.legal-page .legal-table td{padding:10px 16px 10px 0;border:0;border-bottom:1px solid var(--line);white-space:normal;vertical-align:top;text-align:left}
.legal-page .legal-table thead th{position:static;background:none;font:var(--w2) var(--t1)/1.3 var(--fb);letter-spacing:0;color:var(--tx2)}
.legal-page .legal-table tbody td:first-child{font-weight:var(--w2)}
@media(min-width:901px){.legal-page .legal-table tbody td:first-child{min-width:11em}}
.legal-page .legal-table tbody tr:hover td{background:none}
.legal-page .legal-table tbody tr:last-child td{border-bottom:0}

/* formularz odstąpienia: ramka w barwach sklepu, wiersze do wypełnienia długopisem zostają zwykłym tekstem */
.legal-page .withdrawal-form{margin:16px 0;padding:20px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-karta);overflow-wrap:anywhere}
.legal-page .withdrawal-form p{margin:0 0 10px;line-height:2}
.legal-page .withdrawal-form p:last-child{margin-bottom:0}

/* Bez skryptów katalogu (strona prawna ich nie ładuje) pasek grup jest pusty, a skrót koszyka nie zna liczby pozycji
   ani kwoty: pustego paska nie pokazujemy, skrót mówi samo „Koszyk”. Gdy strona dostanie sklep.js, obie reguły
   przestają działać same (pasek ma zawartość, a liczby wrócą razem ze skryptem: wtedy usunąć drugą regułę). */
.wl .cats:has(#catbar:empty){display:none}
.wl .cartbox .kosz-ile,.wl .cartbox .v{display:none}

/* ===== 3. Telefon ===== */
@media(max-width:900px){
 .wl{background:var(--srf)}
 .legal-page{padding-bottom:40px;min-height:0}
 .legal-page .breadcrumb{padding:12px 0 10px}
 /* dokument bez karty: biała strona, kolejne części oddzielone liniami i nagłówkami */
 .legal-page article{max-width:none;padding:0;background:none;border:0;border-radius:0}
 .legal-page h1{margin:6px 0 16px;font-size:24px}
 .legal-page h2{margin:28px 0 10px}
 .legal-page .legal-print{display:flex;width:100%}
 .legal-page .legal-data{grid-template-columns:1fr}
 .legal-page .legal-data dt{padding:10px 0 0;border:0}
 .legal-page .legal-data dd{padding:2px 0 10px}
 .legal-page .legal-data dt:last-of-type{padding-top:10px}
 .legal-page .legal-cards{grid-template-columns:1fr}
 .legal-page .withdrawal-form{padding:16px}
 /* tabela cookies jako lista: trzy kolumny nie mieszczą się na telefonie. Nagłówek kolumn zostaje dla czytnika ekranu,
    a „Cel” i „Okres” stoją przy wartościach (atrybut data-label z generatora) */
 .legal-page .legal-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .legal-page .legal-table :is(table,tbody,tr,td){display:block}
 .legal-page .legal-table tr{padding:12px 0;border-bottom:1px solid var(--line)}
 .legal-page .legal-table tbody tr:last-child{border-bottom:0}
 .legal-page .legal-table td{min-width:0;padding:2px 0;border:0}
 .legal-page .legal-table td[data-label]::before{content:attr(data-label) ": ";font-weight:var(--w2);color:var(--tx2)}
 /* skrót koszyka w wierszu marki: wspolne-b.css chowa go poniżej 900 px, a strona prawna nie ma dolnego paska koszyka;
    sama ikona z nazwą dla czytnika ekranu (aria-label), bo liczby pozycji tu nie ma */
 .wb.wl .cartbox{display:flex;align-items:center;justify-content:center;height:var(--dotyk);min-width:var(--dotyk);padding:0 var(--s2);margin-left:auto}
 .wb.wl .cartbox .kosz-t{display:none}
}

/* ===== 4. Wydruk ===== */
@media print{
 header,footer,.testbar,.legal-print,.breadcrumb,dialog{display:none!important}
 .wl .top,.wl .mbar{display:none!important}
 .legal-page{padding:0!important;min-height:0}
 .legal-page article{max-width:none;padding:0;border:0;border-radius:0}
 .legal-page h1{font-size:24pt}
 .legal-page h2{break-after:avoid}
 .legal-page .legal-notice{border:1px solid #777;background:none}
 .legal-page article a{color:#000}
 .legal-page .withdrawal-form{background:none}
 .legal-data{break-inside:avoid}
 body,.wl{background:white}
}