/* Etykieta GARAN. Kroj narzuca zalacznik II przez sam plik SVG Komisji
(font-family: Inter). Inter jest na licencji SIL OFL, wiec jedzie w paczce -
bez niego przegladarka podstawia kroj zastepczy, co jest widoczna roznica
wobec wzoru. Font wchodzi RAZ na sklep, dlatego SVG idzie w tresc strony,
a nie przez ![]()
: obrazek zewnetrzny nie widzi @font-face strony. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('../fonts/Inter-ExtraBold.woff2') format('woff2');
}
/* Urzedowy SVG prosi najpierw o rodzine "Inter-ExtraBold", a dopiero potem o "Inter"
(font-family: Inter-ExtraBold, Inter). Motywy sklepowe (np. Classic) czesto
deklaruja wlasna rodzine "Inter" w kilku wagach (np. 700) - bez wlasnej deklaracji
pod pierwsza nazwa dopasowanie schodzi do wagi motywu zamiast naszej wagi 800, a
wyglad cyfry zalezy wtedy od tego, co akurat zaladowal motyw. Deklaracja pod
dokladna pierwsza nazwa z SVG usuwa te zaleznosc od motywu bezwarunkowo. */
@font-face {
font-family: 'Inter-ExtraBold';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('../fonts/Inter-ExtraBold.woff2') format('woff2');
}
/* Regula wspolna. Dla formy nested nizsze `min-width: 180px` i tak wygrywa z tym
`max-width` - przy sprzecznosci CSS przyznaje pierwszenstwo min-width (CSS 2.1 10.4),
niezaleznie od kolejnosci i specyficznosci. Zostawione, bo dla formy pelnej jest
wlasciwe, a dla nested nieszkodliwe. */
.pl-gl-label svg {
max-width: 100%;
height: auto;
}
.pl-gl-label__link {
display: inline-block;
text-decoration: none;
}
.pl-gl-label--product {
margin: 1.5rem 0;
max-width: 340px;
}
.pl-gl-label--product svg {
/* Sama forma full dzis dziala (340x358 px) tylko dlatego, ze nie jest
owinieta w - block-level replaced element bez atrybutow width/height
na SVG wypelnia wtedy szerokosc kontenera. To przypadek kaskady, nie
projekt: forma nested ma identyczna regule width:auto + height:auto i
renderuje sie 0x0, bo jest owinieta w (inline). Jawny width usuwa
ta zaleznosc od tego, czy ktos kiedys owinie forme full w link. */
/* Forma pelna ZOSTAJE przy max-width: 100%, w odroznieniu od nested wyzej.
340 px to niemal cala szerokosc telefonu, wiec zmniejszenie do kontenera jest
tu proporcjonalne i etykieta zostaje czytelna - to nie ta sama sytuacja, co
pasek 180 px wtloczony w kolumne 18 px (ruling 102, drobne D2 z przegladu). */
width: 340px;
max-width: 100%;
height: auto;
}
.pl-gl-label__notice {
margin-top: .5rem;
font-size: .875rem;
}
.pl-gl-label--cart,
.pl-gl-label--listing,
.pl-gl-label--checkout,
.pl-gl-label--checkout-top,
.pl-gl-label--cart-footer,
.pl-gl-label--checkout-footer,
.pl-gl-label--cart-line,
.pl-gl-label--checkout-line,
.pl-gl-label--product-price {
margin: .5rem 0 0;
}
/* Miejsca przy wierszu trafiaja zwykle do kontenera FLEX samego wiersza (TheCheckout:
`.product-line-body`, `display: inline-flex; flex-wrap: wrap`). Bez tych dwoch
wlasciwosci etykieta jest kolejnym elementem TEJ SAMEJ linii, czyli laduje z prawej,
za ikona kosza, i przy waskim oknie wychodzi poza ekran - zmierzone na TheCheckout.
`flex-basis: 100%` spycha ja do wlasnej linii POD produktem (dziala, bo kontener ma
`flex-wrap: wrap`), a `align-self` odbiera jej rozciaganie na cala wysokosc wiersza
(opakowanie paska 28 px mierzylo bez tego 121 px i zostawialo pusta plame).
Obie wlasciwosci dzialaja WYLACZNIE w kontenerze flex/grid - w zwyklym ukladzie sa
bez skutku, wiec nie zmieniaja niczego w pozostalych miejscach ekspozycji. */
.pl-gl-label--cart-line,
.pl-gl-label--checkout-line {
align-self: flex-start;
flex-basis: 100%;
}
/* Karta produktu, forma nested (1.0.4). Ten sam pasek 180 px co w koszyku i na listingu -
`min-width`, nie `max-width`, bo pasek ma WYSTAWAC z za ciasnego kontenera, a nie
po cichu zniknac (ruling 111). */
.pl-gl-label--cart svg,
.pl-gl-label--listing svg,
.pl-gl-label--checkout svg,
.pl-gl-label--checkout-top svg,
.pl-gl-label--cart-footer svg,
.pl-gl-label--checkout-footer svg,
.pl-gl-label--cart-line svg,
.pl-gl-label--checkout-line svg,
.pl-gl-label--product-price svg {
/* Urzedowe SVG nie ma atrybutow width/height, tylko viewBox. Przy width:auto
RAZEM z height:auto przegladarka rozwiazuje jego rozmiar do zera - etykieta
zostaje w drzewie dokumentu, ale znika z ekranu i nie da sie w nia kliknac.
Jawny width to naprawia. Atrybutow do SVG dopisac NIE WOLNO - urzedowa grafika
zostaje bajt w bajt (G1).
`min-width` zamiast `max-width: 100%` to wniosek z rulingu 102. Tamten zapis
kazal paskowi ZMNIEJSZYC sie do kontenera - i w kolumnie 18 px na Classicu
urzedowe oznakowanie schodzilo do 2,8 px wysokosci: bylo w DOM, klikalne,
z poprawnym aria-label i nieczytelne. Wytyczne praktyczne Komisji 3.3.2 zadaja
"legible at default display size", wiec ciche zmniejszanie jest zlamaniem wymogu,
a nie eleganckim ustepstwem. Przy min-width pasek w za ciasnym kontenerze
WYSTAJE - awaria, ktora widac przy pierwszym spojrzeniu i da sie zglosic,
zamiast takiej, ktora przechodzi przeglad i komplet sprawdzianow.
Zmierzone miejsca (getBoundingClientRect, 2026-09-10): kolumna pod cena
jednostkowa ma 233 px na Classicu przy 1440 px, 230 px przy 375 px
i 536 px na Hummingbirdzie - wszedzie z zapasem ponad 180 px. */
width: 180px;
min-width: 180px;
height: auto;
}
/* Modal z pelna etykieta (1.0.4). Element