/* Cenowka sklepu - wynik SHOWPREIS() z includes/functions/products.inc.php.
 *
 * Plik jest czystym ASCII - strony sa w ISO-8859-1.
 *
 * Znaczniki:
 *   .cenaBox                  kontener (--promo, rodzaj obnizki, --lewo / --prawo)
 *     .cenaBox__rabat         pigulka "-30%"
 *     .cenaBox__stara         cena przed obnizka, przekreslona
 *     .cena                   cena aktualna
 *       .cena__cal            zlotowki
 *       .cena__gr             grosze, indeks gorny
 *       .cena__wal            waluta
 *     .cenaBox__info          termin waznosci oferty itp.
 *
 * Co zastapilo: kazdy z jedenastu rodzajow promocji mial wlasny komplet klas
 * (ramkaPromocja, ramkaPromocja0, 2, 3 i ich Old/New/To), a nowa cena byla
 * wpisywana w zolta naklejke z /img/misc/sticker.png o sztywnych 110x41 px.
 * Naklejka nie miescila dluzszych kwot i nie skalowala sie.
 *
 * UWAGA: reguly responsywne sa CELOWO na koncu pliku - media query nie
 * podnosi specyficznosci.
 */

.cenaBox {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2;
}

.cenaBox--prawo { text-align: right; }
.cenaBox--lewo  { text-align: left; }

/* =====================================================================
 * CZYTELNOSC - ZMIANA Z 2026-08-07
 *
 * Powod: cenowka promocyjna byla trudna do odczytania dla starszych klientow.
 * Pomiar na produkcji wykazal cztery elementy ponizej normy WCAG 4,5:1
 * (etykieta #888 = 3,5:1, cena przekreslona, jej grosze i termin #8d8d8d
 * = 3,3:1), a grosze w cenie przekreslonej mialy 8,7 px - mniej niz polowa
 * wysokosci zwyklego tekstu strony.
 *
 * Wzorzec: Amazon.de. Przejete stamtad: kwota oferty prawie czernia zamiast
 * czerwieni (czerwien pracuje na pigulce rabatu), czytelna cena odniesienia,
 * pelna kwota dla czytnikow ekranu.
 * NIE przejeto przecinka dziesietnego przed groszami - sklep zostaje przy
 * zapisie bez separatora, decyzja wlasciciela.
 * ===================================================================== */

/* Pelna kwota dla czytnikow ekranu - niewidoczna, ale odczytywana.
   Nie "display: none" ani "visibility: hidden": jedno i drugie usuwa tekst
   takze z drzewa dostepnosci, czyli czytnik tez by go nie zobaczyl. */
.cena__czytnik {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- etykieta "IHR PREIS:" --- */
.cenaBox__etykieta {
    font-size: 12px;
    /* #888 dawalo 3,5:1, ponizej normy 4,5:1 dla drobnego tekstu.
       #565959 daje 7,1:1 i nadal czyta sie jak tekst drugoplanowy. */
    color: #565959;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

/* =====================================================================
 * CENA
 * Grosze ida w indeks gorny i bez zadnego separatora.
 * Rozmiary sa w em, wiec caly blok skaluje sie jedna liczba: font-size
 * na .cena (i mniejsza na .cenaBox__stara dla ceny przekreslonej).
 * ===================================================================== */
.cena {
    font-size: 34px;
    color: #0f1111;
    white-space: nowrap;
}

.cena__cal { font-weight: bold; }

.cena__gr {
    /* 0.58em, bylo 0.5em. Bez przecinka przed groszami indeks gorny jest
       jedynym sygnalem, ze to grosze - wiec musi byc na tyle duzy, zeby dalo
       sie go odczytac, a nie tylko zauwazyc. Przy 34 px daje to 20 px. */
    font-size: 0.58em;
    font-weight: bold;
    vertical-align: super;
    /* bez odstepu i bez kropki - grosze maja sie kleic do zlotowek */
    margin-left: 1px;
    line-height: 0;
}

.cena__wal {
    font-size: 0.62em;
    font-weight: normal;
    margin-left: 4px;
}

/* =====================================================================
 * KOLOR OBNIZKI - JEDEN DLA WSZYSTKICH RODZAJOW
 *
 * Sklep rozroznial kiedys rodzaje promocji kolorem cenowki - bursztyn dla
 * oferty czasowej, pomarancz dla Sonderpreis, zielen dla ceny warunkowej,
 * czerwien dla ceny startowej (spadek po czterech naklejkach sticker*.png).
 * Decyzja z 2026-08-04: obnizka ma jeden kolor, bez wzgledu na powod.
 *
 * Kolor jest ciemny celowo - pigulka "-40%" ma bialy napis 12 px, wiec musi
 * miec mocny kontrast wobec bieli. #960001 daje okolo 9:1, z zapasem ponad
 * wymagane 4,5:1 dla drobnego tekstu.
 *
 * Rodzaj promocji nadal da sie rozpoznac, i to bez polegania na barwie:
 * pigulka podaje procent obnizki, przekreslona cena pokazuje punkt odniesienia,
 * a oferty czasowe maja osobna linie z terminem. Klasy cenaBox--akcja,
 * --sonder, --bonus i --start zostaja w znacznikach, tylko nie zmieniaja juz
 * koloru - gdyby kiedys trzeba bylo do rozroznienia wrocic, jest gdzie zaczepic.
 * ===================================================================== */

/* CENA OFERTY JEST PRAWIE CZARNA, NIE CZERWONA (zmiana z 2026-08-07).
 *
 * Czerwien zostaje - ale na pigulce rabatu, gdzie pracuje jako sygnal, a nie
 * jako tresc do czytania. Powod jest fizjologiczny: soczewka oka zoltnie
 * z wiekiem i tlumi krotkie fale, przez co czerwony tekst traci wyrazistosc
 * szybciej niz czarny, nawet gdy sam wspolczynnik kontrastu jest poprawny.
 * #960001 dawalo 9,1:1, #0f1111 daje 19:1.
 *
 * Obnizka nie ginie bez koloru: niesie ja pigulka z procentem, przekreslona
 * cena odniesienia i linia z terminem - czyli trzy nosniki niezalezne od
 * barwy, czego wymaga zreszta WCAG.
 *
 * GDYBY WRACAC DO CZERWONEJ KWOTY: wystarczy zmienic ponizsza linie na
 * "color: #960001". Reszta zmian jest od niej niezalezna. */
.cena--promo     { color: #0f1111; }
.cenaBox__rabat  { background: #960001; }

/* =====================================================================
 * PROMOCJA
 * ===================================================================== */
/* Cena przed obnizka. 16 px zamiast 14 i #565959 zamiast #8d8d8d (3,3:1 ->
   7,1:1). Kwota idzie tu ZWYKLYM TEKSTEM - SP_CenaPlaska() w products.inc.php,
   nie SP_CenaRozbita() - bo indeks gorny schodzil przy tym rozmiarze do 8,7 px.
   Dlatego nie ma juz tutaj nadpisan dla .cena__cal / .cena__gr / .cena__wal:
   w tym miejscu te elementy po prostu nie wystepuja. */
.cenaBox__stara {
    font-size: 16px;
    color: #565959;
    margin-bottom: 2px;
}

/* przekreslenie obejmuje cala kwote razem z groszami i waluta */
.cenaBox__stara s { text-decoration: line-through; }

/* Pigulka z procentem obnizki. Wczesniej procent pokazywala tylko czesc
 * wariantow promocji, i to zwyklym tekstem; teraz liczy sie go z dwoch cen,
 * wiec jest wszedzie tam, gdzie cena faktycznie spadla.
 *
 * Tlo NIE jest ustawiane tutaj - kolor obnizki ma jedno miejsce, wyzej
 * w sekcji "KOLOR OBNIZKI". Ta regula lezy dalej w pliku, wiec wlasne
 * "background" nadpisaloby tamto ustawienie. */
.cenaBox__rabat {
    display: inline-block;
    /* 15 px zamiast 12 i prostokat zamiast pigulki. Skoro kwota przestala byc
       czerwona, to ten znacznik przejmuje role sygnalu obnizki - musi byc
       czytelny z odleglosci, z jakiej klient przeglada liste. */
    padding: 4px 10px;
    margin-bottom: 5px;
    border-radius: 4px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Termin oferty. Byl najdrobniejszym tekstem w calej cenowce (11 px, 3,3:1),
   a niesie informacje, ktora realnie wplywa na decyzje o zakupie.

   Kolor firmowy #960001 (2026-08-08) - ten sam, co pigulka rabatu i adnotacja
   o wersji EEP, wiec cenowka ma jeden czerwony zamiast szarego terminu obok
   czerwonego procentu. Kontrast na tym nie traci: #960001 daje na bieli 9,1:1,
   czyli WIECEJ niz dotychczasowe #565959 (7,1:1).
   Uwaga na zaleznosc: gdyby kiedys wracac do czerwonej KWOTY (patrz komentarz
   przy .cena--promo), termin przestalby sie od niej odrozniac. */
.cenaBox__info {
    margin-top: 4px;
    font-size: 13px;
    color: #960001;
    line-height: 1.35;
}

.cenaBox__info time { color: #960001; }

/* Nota "Alle Preise incl. der geltenden MwSt." pod kwota.
 *
 * Powtarza sie przy KAZDEJ pozycji listy, wiec ma byc drugoplanowa - ale
 * drugoplanowa znaczy mniejsza, nie niewidoczna. Do 2026-08-07 szla ze stylem
 * wpisanym w atrybut (color:#666666; font-size:9px), co dawalo tekst 9 px
 * o kontrascie ponizej normy, i czego nie dalo sie poprawic z arkusza, bo
 * styl w atrybucie wygrywa. Teraz klasa jest nadawana w products.inc.php.
 * Hierarchie robi rozmiar - 11 px wobec 13 px danych produktu - a nie
 * wygaszanie koloru do granicy widocznosci. */
.cenaVat {
    font-size: 11px;
    color: #565959;
    line-height: 1.4;
    margin-top: 2px;
}

/* =====================================================================
 * REGULY RESPONSYWNE - CELOWO NA KONCU PLIKU
 * Viewport ma initial-scale=0.6, wiec telefon 390px renderuje uklad
 * ~650px. Dlatego prog to 700px, nie 480px.
 * ===================================================================== */
@media only screen and (max-width: 700px) {
    .cena { font-size: 29px; }
    /* Cena odniesienia i termin schodza tylko o krok - to wlasnie one byly
       nieczytelne, wiec nie ma sensu odbierac im na telefonie tego, co
       dopiero co dostaly. */
    .cenaBox__stara { font-size: 15px; }
    .cenaBox__rabat { font-size: 14px; padding: 3px 9px; }
    .cenaBox__info { font-size: 12px; }
}