/* KROJE PISMA - u nas, nie w Google.
*
* Powod jest zmierzony, a nie ideologiczny: podmiana kroju po doczytaniu
* z `fonts.gstatic.com` byla JEDYNYM zrodlem przeskakiwania ukladu na
* kazdej stronie sklepu (CLS 0,156 na stronie glownej przy progu 0,1).
* Tekst renderowal sie krojem zastepczym i zmienial szerokosc po dojsciu
* wlasciwego - nagłowki, pasek promocyjny, opisy produktow.
*
* `latin-ext` jest OBOWIAZKOWY: polskie znaki diakrytyczne siedza wlasnie
* w tym zakresie. Bez niego "Taśmy" renderuja sie dwoma roznymi krojami
* naraz.
*
* `swap`, a nie `optional`: przy `optional` przegladarka potrafi zostac
* przy kroju zastepczym na cala wizyte, a marka sklepu siedzi w krojach.
*/
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/bebas-neue-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/bebas-neue-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/oswald-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/oswald-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* =========================================================================
EgoTape — motyw WooCommerce
Design system: black #0B0B0B + amber #F69500, Bebas Neue / Oswald / Inter
========================================================================= */
:root {
/* Brand */
--color-brand-orange: #F69500;
--color-brand-orange-bright: #FFA827;
--color-brand-orange-deep: #C77400;
--color-brand-amber-grain: #3A2C14;
/* Inks */
--color-ink-1: #0B0B0B;
--color-ink-2: #171717;
--color-ink-3: #1F1F1F;
--color-ink-4: #2A2A2A;
--color-ink-5: #3A3A3A;
/* Bone */
--color-bone-0: #FFFFFF;
--color-bone-1: #F5F1EA;
--color-bone-2: #E6E0D4;
--color-bone-3: #B8AE9E;
/* Semantic */
--color-success: #4CAE6B;
/* Czerwien bledu: jeden token dla calego motywu (audyt D9). #FF7A6E daje
7,74:1 na --bg-page i 6,48:1 na --bg-input; poprzedni #D33A2C mial 4,13:1
jako tekst, ponizej progu 4,5:1. Trzy literalne #FF8A80 i --et-kasa-blad
wskazuja teraz tutaj. */
--color-danger: #FF7A6E;
--color-info: #4C8DAE;
--bg-page: var(--color-ink-1);
--bg-surface: var(--color-ink-2);
--bg-input: var(--color-ink-3);
--fg-default: var(--color-bone-1);
--fg-muted: var(--color-bone-3);
--fg-faint: #8A8070; /* WCAG AA ~5.06:1 na --color-ink-1 (było #6E6557, ~3.43:1) */
--border-default: var(--color-ink-4);
--border-strong: var(--color-ink-5);
/* Obrys POL i przyciskow drugorzednych (audyt D8). WCAG 1.4.11 wymaga 3:1
dla granicy, ktora identyfikuje kontrolke; --border-default dawal 1,15:1
na tle pola. #6F6A62 (cieply, z palety kosci): 3,07:1 na --bg-input,
3,34:1 na --bg-surface, 3,67:1 na --bg-page. Separatory i karty zostaja
na --border-default - to nie sa cele dotyku. */
--border-input: #6F6A62;
--font-display: "Bebas Neue", "Arial Narrow", sans-serif;
--font-heading: "Oswald", "Bebas Neue", "Arial Narrow", sans-serif;
--font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
--radius-3: 8px;
--radius-pill: 999px;
--shadow-1: 0 6px 20px rgba(0,0,0,.45);
--shadow-2: 0 14px 40px rgba(0,0,0,.6);
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
/* odstępy między modułami — sterowane w Personalizacji */
--et-space-desktop: 96px;
--et-space-mobile: 56px;
--et-space: var(--et-space-desktop);
--et-space-sm: calc(var(--et-space-desktop) * .5);
}
/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg-page);
color: var(--fg-default);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
}
img { max-width: 100%; height: auto; }
/* Safari na iPhonie powieksza strone przy fokusie w polu ponizej 16 px i sam
nie wraca (audyt D4/U10). `:where()` ma zerowa szczegolowosc: wygrywa tylko
z arkuszem przegladarki (13,33 px), a kazda regula motywu nadal moze dac
wiecej - np. wyszukiwarka 20 px, napis na pudelku 17 px. Pola motywu,
ktore mialy 13-15 px, dostaly 16 px u siebie. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea) { font-size: 16px; }
/* KRÓJ MOTYWU TAKŻE W STEROWANIU BEZ WŁASNEJ REGUŁY (audyt iOS 2026-09-26).
Arkusz iPhone'a daje przyciskom i polom `font: 11px system-ui` (Chrome:
13,33 px), a pisma się nie dziedziczy. Sloty „Rolka 1-4" konfiguratora,
kropki hero i krzyżyki pomocy, zgód i popupu nie miały kroju motywu -
krzyżyk „×" wychodził na iPhonie z kroju systemowego. Zerowa waga jak
wyżej: każda reguła motywu i wtyczki wygrywa. Rozmiar zostaje z arkusza
przeglądarki - `inherit` podniósłby go w Chrome z 13,33 do 16 px. */
:where(button, input, select, textarea) { font-family: inherit; }
a { color: var(--color-brand-orange); text-decoration: none; }
/* NAJECHANIE TYLKO TAM, GDZIE JEST MYSZ (audyt iOS 2026-09-26).
Safari na iPhonie nadaje `:hover` elementowi po dotknięciu i zostawia go,
dopóki nie dotknie się czegoś innego: przycisk zostaje rozjaśniony, kolor
w palecie konfiguratora ma pomarańczową ramkę jak wybrany. Dlatego efekty
najechania stoją w `(hover: hover) and (pointer: fine)` - ta sama
konwencja, co przy kartach produktów. Na dotyk odpowiada `:active`. */
@media (hover: hover) and (pointer: fine) {
a:hover { color: var(--color-brand-orange-bright); }
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--color-bone-0); line-height: 1.05; margin: 0 0 .5em; }
h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-bone-0); }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.4rem; }
.container {
width: min(100% - (var(--et-gutter, 24px) * 2), var(--et-container, 1320px));
max-width: none;
margin-inline: auto;
padding: 0;
}
.site-main {
width: min(100% - (var(--et-gutter, 24px) * 2), var(--et-container, 1320px));
margin-inline: auto;
padding: var(--et-space-sm) 0 var(--et-space);
}
/* Grain — sygnaturowe amber-speckle tło */
.et-grain { position: relative; }
.et-grain::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
opacity: .18;
background-image:
radial-gradient(circle at 12% 30%, var(--color-brand-amber-grain) 0 1.5px, transparent 2px),
radial-gradient(circle at 78% 12%, var(--color-brand-amber-grain) 0 1px, transparent 1.6px),
radial-gradient(circle at 55% 80%, var(--color-brand-amber-grain) 0 1.2px, transparent 1.8px),
radial-gradient(circle at 30% 65%, var(--color-brand-amber-grain) 0 1px, transparent 1.5px),
radial-gradient(circle at 90% 55%, var(--color-brand-amber-grain) 0 1.4px, transparent 2px);
background-size: 220px 220px, 180px 180px, 260px 260px, 200px 200px, 240px 240px;
}
.et-grain > * { position: relative; z-index: 1; }
/* --- Dostępność: treść tylko dla czytników ekranu -------------------------- */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* --- Focus klawiatury (dostępność) ----------------------------------------- *
* Jeden spójny pierścień focusu dla całego motywu.
*
* `:focus-visible` odpala się TYLKO przy nawigacji klawiaturą — kliknięcie
* myszą nie zostawia ramki. To rozwiązuje pierwotny problem, dla którego
* focus był wcześniej gaszony na sztywno (`outline: none` w 4 miejscach):
* chodziło o brak brzydkiej ramki po kliknięciu, ale efektem ubocznym był
* całkowicie niewidoczny focus przy nawigacji Tabem — m.in. w polu
* wyszukiwarki, które ma `border: 0`, więc podświetlanie ramki nic nie dawało.
*/
:focus-visible {
outline: 2px solid var(--color-brand-orange);
outline-offset: 2px;
}
/* Przeglądarki wspierające :focus-visible — chowamy pierścień przy myszy.
Starsze (bez wsparcia) zignorują tę regułę i pokażą domyślny outline,
co jest bezpiecznym zachowaniem awaryjnym. */
:focus:not(:focus-visible) {
outline: none;
}
/* Na ciemnym tle sam pomarańczowy pierścień bywa mało czytelny przy
elementach w kolorze akcentu (np. przycisk CTA) — dokładamy ciemny
kontrapunkt, żeby pierścień był widoczny na każdym tle. */
.btn:focus-visible,
button:focus-visible,
.et-palette-color:focus-visible,
.et-slot:focus-visible {
outline-color: var(--color-brand-orange);
box-shadow: 0 0 0 4px var(--color-ink-1);
}
/* --- Skip link (dostępność) ------------------------------------------------ */
.skip-link {
position: absolute;
top: -100px;
left: 12px;
z-index: 10000;
background: var(--color-brand-orange, #F69500);
color: var(--color-ink-1, #0B0B0B);
padding: 10px 18px;
border-radius: 4px;
font-weight: 600;
text-decoration: none;
transition: top .15s ease;
}
.skip-link:focus {
top: 12px;
}
/* --- Promo strip ---------------------------------------------------------- */
.promo {
background: var(--color-ink-1);
border-bottom: 1px solid var(--border-default);
overflow: hidden;
height: 34px;
display: flex;
align-items: center;
/* ZNIKANIE PRZY KRAWĘDZIACH, zamiast ucięcia nożem.
Zgłoszenie z przeglądu mobilnego (2026-08-13): „promo strip ucina tekst
(»WA OD 89ZŁ«)". Pasek zapętla się poprawnie - to, co widać, to napis
w połowie wyjazdu za lewą krawędź, czyli normalna praca marquee. Ale
przy ostrej krawędzi „DARMOWA DOSTAWA OD 89ZŁ" ucięte na „WA OD 89ZŁ"
czyta się jak literówka albo błąd, a nie jak ruch.
Maska zamienia ucięcie w zanikanie: napis wchodzi i wychodzi, zamiast
pojawiać się i znikać w pół litery. Osiem procent szerokości - tyle,
żeby zdążyło zblednąć, i nie więcej, bo pasek ma 34 px wysokości
i nie ma czego chować.
`-webkit-` obok standardowego: Safari nadal potrzebuje prefiksu, a bez
niego maski po prostu nie ma - i to na telefonie, czyli tam, gdzie
zgłoszenie powstało. */
-webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.promo-track {
display: flex;
gap: 0;
white-space: nowrap;
animation: promo-scroll 30s linear infinite;
/* Ruch idzie na GPU i nie budzi układu strony przy każdej klatce.
Pasek chodzi bez przerwy przez cały czas wizyty, więc to jest jedyne
miejsce na stronie, gdzie ta podpowiedź naprawdę coś oszczędza. */
will-change: transform;
}
/* Kto prosi o mniej ruchu, dostaje nieruchomy pasek, a nie migający.
Napisy zostają czytelne - są trzy kopie, więc pierwsza wypełnia ekran. */
@media (prefers-reduced-motion: reduce) {
.promo-track { animation: none; }
}
.promo-item {
font-family: var(--font-heading);
font-size: 12px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
/* KOŚĆ, NIE POMARAŃCZ - audyt pulpitu: „nad foldem masz jednocześnie pasek,
CTA, ceny, badge »Bestseller« i przycisk pomocy. Za dużo iskier naraz;
zostaw pomarańcz dla CTA i badge, pasek daj w bieli/bone z jednym
akcentem".
Ten pasek chodzi BEZ PRZERWY przez całą wizytę. Kolor akcentu, który się
rusza i nigdy nie znika, jest najgorszym możliwym miejscem na akcent:
przyciąga oko w kółko, a nie mówi nic, czego nie powiedziałby spokojnie.
Jeden akcent zostaje - w kropkach rozdzielających. Tyle wystarczy, żeby
pasek należał do marki, a nie konkurował z przyciskiem pod spodem. */
color: var(--color-bone-2);
padding: 0 28px;
position: relative;
}
.promo-item::before {
content: "·";
position: absolute; left: -3px;
color: var(--color-brand-orange);
}
/* Pauza przy najechaniu - żeby dało się przeczytać komunikat, który akurat
przejeżdża. Bez tego jedyną drogą jest czekanie na kolejne okrążenie. */
.promo:hover .promo-track,
.promo:focus-within .promo-track { animation-play-state: paused; }
/* DOKŁADNIE JEDNA TRZECIA, a nie 33,333%.
W `header.php` pasek jest wypisany TRZY RAZY, więc przesunięcie o jedną
kopię wraca dokładnie w to samo miejsce i pętla jest niewidoczna. Wpisane
ręcznie „33.333%" to o 0,001% za mało: przy każdym obiegu zostawał ułamek
piksela, który po kilku minutach zbierał się w widoczne szarpnięcie.
`calc()` liczy to bez zaokrąglania. */
@keyframes promo-scroll {
from { transform: translateX(0); }
to { transform: translateX(calc(-100% / 3)); }
}
/* --- Header --------------------------------------------------------------- */
.header {
position: sticky; top: 0; z-index: 50;
/* Kurczenie przy przewijaniu - klasę nadaje `egotape.js`. Nagłówek NIE
znika: znikający zabiera ze sobą koszyk i wyszukiwarkę akurat wtedy,
gdy człowiek przegląda produkty i najczęściej ich potrzebuje. */
transition: padding .2s var(--ease, ease);
background: rgba(11,11,11,.94);
/* Safari do 17 zna tylko wersję z przedrostkiem (audyt iOS 2026-09-26). */
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--border-default);
}
/* =========================================================================
NAGŁÓWEK ZMNIEJSZA SIĘ PRZY PRZEWIJANIU
Na górze strony pełny rozmiar - tam jest miejsce i to pierwsze wrażenie.
Po przewinięciu kurczy się: niższy pasek i mniejsze logo, ale wszystkie
przyciski zostają na miejscu i klikalne.
Dlaczego kurczenie, a nie chowanie: znikający nagłówek zabiera koszyk
i wyszukiwarkę dokładnie wtedy, gdy człowiek przegląda produkty - czyli
wtedy, gdy najczęściej ich szuka. Odzyskane piksele nie są tego warte.
========================================================================= */
.header.header-maly .header-inner { padding-top: 6px; padding-bottom: 6px; }
/* Skurczone logo to UŁAMEK ustawionej wysokości, nie własna liczba.
Wcześniej stało tu 26 px na sztywno. Odkąd wysokość logo jest suwakiem
w Personalizacji (2026-08-13, prośba właściciela), sztywna liczba
znaczyłaby, że przy większym logo nagłówek kurczy się mocniej, a przy
mniejszym - wcale albo w drugą stronę. Sześć dziesiątych trzyma tę samą
proporcję przy każdym ustawieniu. */
.header.header-maly .header-logo img {
height: calc(var(--et-logo-pc, 44px) * .6);
transition: height .2s var(--ease, ease);
}
.header .header-logo img { transition: height .2s var(--ease, ease); }
@media (prefers-reduced-motion: reduce) {
.header,
.header .header-logo img { transition: none; }
}
.header-inner {
width: min(100% - (var(--et-gutter, 24px) * 2), var(--et-container, 1320px));
max-width: none;
margin-inline: auto;
display: flex; align-items: center; gap: 28px;
padding: 14px 0;
}
/* Wysokość z Personalizacji - „Logo w nagłówku, komputer/telefon".
Szerokość zawsze `auto`: znak jest szeroki i niski, więc sterowanie
szerokością rozjeżdżałoby proporcje przy pierwszej zmianie pliku. */
/* ZNAK NIGDY SIE NIE KURCZY.
`.header-logo` jest elementem flex, wiec przy ciasnym naglowku oddawal
szerokosc sasiadom - a poniewaz wysokosc jest narzucona, obrazek nie
zmniejszal sie, tylko SPLASZCZAL. Zmierzone u zalogowanego na pulpicie
(dochodzi przycisk narzedzi): 250 px zamiast 292 przy tej samej wysokosci,
czyli znak zwezony o 14%. Na oko wyglada to jak inna wersja logo. */
.header-logo { flex: 0 0 auto; }
.header-logo img { height: var(--et-logo-pc, 44px); width: auto; display: block; }
/* GÓRNE MENU ZAWSZE W JEDNYM WIERSZU (2026-09-26, właściciel: „ma być
zawsze w jednej linii, jeśli występuje, odpowiednio skalowany bez
ucinania tekstu”).
Rano audyt naprawiał ikony wypchnięte za ekran (sześć pozycji to 815 px,
przy 1280 px koszyk stał na 1300-1340) i dołożył `flex-wrap` jako
zabezpieczenie - u zalogowanego (przycisk narzędzi, +54 px) menu spadło
do DRUGIEGO WIERSZA. Drugiego wiersza nie ma nigdy: pismo, rozstrzelenie
i odstępy mnożą się przez `--et-nav-fit` (1 = pełny rozmiar), a funkcja
„MENU W JEDNYM WIERSZU” w `egotape.js` zmniejsza je płynnie, aż rząd się
zmieści - także przy szerszym piśmie innego systemu. Wartości niżej to
punkt startu przed JS (bez mrugnięcia przy wczytaniu): zmierzone w
Chromium i WebKit, z zapasem. Poniżej 1280 px menu jest warstwą
(reguły „MENU JAKO WARSTWA DO 1279 PX” niżej). */
.header-nav { display: flex; margin-left: 8px; min-width: 0; --et-nav-fit: 1; }
.header-nav ul {
display: flex; flex-wrap: nowrap;
gap: calc(28px * var(--et-nav-fit));
list-style: none; margin: 0; padding: 0;
}
/* Pozycje menu nigdy nie łamią się na dwie linie: przy ciasnym nagłówku
element flex kurczy się i zawija tekst, co wygląda na usterkę. */
.header-nav a { white-space: nowrap; }
.header-nav a {
font-family: var(--font-heading);
font-size: calc(14px * var(--et-nav-fit)); font-weight: 500;
letter-spacing: calc(.08em * var(--et-nav-fit)); text-transform: uppercase;
color: var(--fg-default);
border-bottom: 2px solid transparent;
padding-bottom: 2px;
transition: color .2s var(--ease), border-color .2s var(--ease);
}
.header-nav .current-menu-item > a { color: var(--color-brand-orange); border-color: var(--color-brand-orange); }
@media (hover: hover) and (pointer: fine) {
.header-nav a:hover { color: var(--color-brand-orange); border-color: var(--color-brand-orange); }
}
/* Punkt startu przed JS. Bez przycisku narzędzi rząd w pełnym rozmiarze
mieści się od ok. 1367 px; z nim (`:has`) - od ok. 1421 px. */
@media (min-width: 1280px) and (max-width: 1439px) {
.header-inner { gap: 20px; }
.header-nav { margin-left: 0; --et-nav-fit: .86; }
.header-inner:has(.et-tools-toggle) .header-nav { --et-nav-fit: .8; }
}
/* Od 1440 px nagłówek ma już stałą szerokość kontenera, więc szerszy ekran
nie daje menu więcej miejsca - z przyciskiem narzędzi brakuje 15 px. */
@media (min-width: 1440px) {
.header-inner:has(.et-tools-toggle) .header-nav { --et-nav-fit: .92; }
}
/* --- Narzędzia: pas pod nagłówkiem ------------------------------------- */
/* Ten sam wzorzec co pasek wyszukiwania: pełna szerokość pod nagłówkiem,
a nie panel przyklejony do ikony. Panel wchodził na menu i nie miał
miejsca na opis obok logo. */
.et-tools-toggle[aria-expanded="true"] { color: var(--color-brand-orange); }
/* Wejście w rozwijanym menu - tylko na telefonie. Na desktopie mamy ikonę,
a pozycja tekstowa rozpychała tam nawigację do dwóch linii. */
.et-tools-mobile { display: none; }
.tools-bar {
position: relative;
border-top: 1px solid var(--border-default);
background: var(--color-ink-2);
animation: etToolsIn .18s var(--ease);
}
.tools-bar[hidden] { display: none; }
@keyframes etToolsIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.tools-bar { animation: none; }
}
.tools-bar-inner { max-width: 1280px; margin: 0 auto; padding: 14px 24px 18px; }
.tools-bar-head {
font-family: var(--font-heading);
font-size: 11px; font-weight: 600; letter-spacing: .18em;
text-transform: uppercase; color: var(--fg-faint);
margin: 0 0 10px;
}
/* auto-fill z górnym ograniczeniem: jedno narzędzie nie rozciąga się na
całą szerokość ekranu, a kolejne ustawią się obok bez zmian w kodzie. */
.tools-bar ul {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(260px, 380px));
}
.tool-card {
display: flex; align-items: center; gap: 16px;
padding: 12px 16px;
background: var(--bg-page);
border: 1px solid var(--border-default);
border-radius: var(--radius-3);
text-decoration: none; color: var(--fg-default);
transition: border-color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease);
}
.tool-card:focus-visible {
border-color: var(--color-brand-orange);
background: var(--bg-surface);
transform: translateY(-2px);
}
@media (hover: hover) and (pointer: fine) {
.tool-card:hover {
border-color: var(--color-brand-orange);
background: var(--bg-surface);
transform: translateY(-2px);
}
}
.tool-logo { width: 116px; height: auto; flex: none; display: block; }
.tool-text { display: block; min-width: 0; }
.tool-name {
display: block;
font-family: var(--font-heading);
font-size: 14px; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {
.tool-card:hover .tool-name { color: var(--color-brand-orange); }
}
.tool-desc {
display: block; margin-top: 3px;
font-size: 12px; line-height: 1.35; color: var(--fg-muted);
}
@media (max-width: 768px) {
.tools-bar-inner { padding: 12px 20px 16px; }
.tools-bar ul { grid-template-columns: 1fr; }
.tool-logo { width: 92px; }
}
.header-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.icon-btn {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
background: transparent;
border: 1px solid var(--border-default);
border-radius: var(--radius-3);
color: var(--fg-default);
cursor: pointer;
transition: color .2s var(--ease), border-color .2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.icon-btn:hover { color: var(--color-brand-orange); border-color: var(--color-brand-orange); }
}
/* PUSTY KOSZYK NIE POKAZUJE ZERA - audyt pulpitu: „badge koszyka pokazuje
»0«, ukryj przy pustym koszyku".
`egotape_cart_count_html()` wypisywał atrybut `hidden` od zawsze i od
zawsze był on bezskuteczny: `display: inline-flex` niżej bije domyślne
`[hidden] { display: none }` z arkusza przeglądarki. Znacznik mówił
prawdę, arkusz go nie słuchał. */
.icon-btn .badge[hidden] { display: none; }
.icon-btn .badge {
position: absolute; top: -6px; right: -6px;
min-width: 18px; height: 18px;
padding: 0 5px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-brand-orange);
color: var(--color-ink-1);
font-family: var(--font-heading);
font-size: 11px; font-weight: 600;
border-radius: var(--radius-pill);
}
.et-nav-toggle { display: none; }
.search-bar {
position: relative;
border-top: 1px solid var(--border-default);
background: var(--color-ink-2);
}
.search-bar form {
max-width: 1280px; margin: 0 auto;
display: flex; align-items: center; gap: 16px;
padding: 14px 24px;
}
.search-bar input[type="search"] {
flex: 1;
min-width: 0;
background: transparent;
border: 0;
color: var(--fg-default);
font-family: var(--font-heading);
font-size: 20px;
text-transform: uppercase;
letter-spacing: .04em;
/* Pole wyszukiwania po iOS-owemu (audyt iOS 2026-09-26): bez tego Safari
rysuje je jako systemowe `searchfield`, a wypełnienie brało z arkusza
przeglądarki - na iPhonie 4/10 px, w Chrome 1/2 px, więc napis stał
w innym miejscu na każdym telefonie. */
-webkit-appearance: none;
appearance: none;
border-radius: 0;
padding: 6px 10px;
}
.search-bar input::placeholder { color: var(--fg-faint); }
.search-bar .close {
background: none; border: 0;
color: var(--fg-muted);
font-family: var(--font-heading);
font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
cursor: pointer;
/* Cel dotyku 44 px - napis 12 px dawał przycisk wysoki na 16 px. */
min-height: 44px;
padding: 0 8px;
}
@media (hover: hover) and (pointer: fine) {
.search-bar .close:hover { color: var(--color-brand-orange); }
}
/* --- Podpowiedzi wyszukiwania (AJAX) --------------------------------------- */
.et-search-suggestions {
position: absolute;
left: 0; right: 0; top: 100%;
z-index: 60;
max-width: 1280px; margin: 0 auto;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-top: none;
border-radius: 0 0 var(--radius-3) var(--radius-3);
box-shadow: 0 16px 30px rgba(0,0,0,.35);
/* `dvh` = wysokość widocznego okna. Safari liczy `vh` od okna BEZ pasków
narzędzi, więc 70vh sięgało pod pasek adresu; `vh` zostaje dla
przeglądarek sprzed `dvh`. */
max-height: 70vh;
max-height: 70dvh;
overflow-y: auto;
}
.et-search-suggestion {
display: flex; align-items: center; gap: 14px;
padding: 10px 24px;
color: var(--fg-default);
text-decoration: none;
border-bottom: 1px solid var(--border-default);
}
.et-search-suggestion:last-child { border-bottom: none; }
.et-search-suggestion.is-active {
background: var(--color-ink-3);
}
@media (hover: hover) and (pointer: fine) {
.et-search-suggestion:hover { background: var(--color-ink-3); }
}
.et-search-suggestion img {
width: 44px; height: 44px;
object-fit: cover;
border-radius: var(--radius-3);
background: #fff;
flex-shrink: 0;
}
.et-search-suggestion-info {
display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.et-search-suggestion-title {
font-family: var(--font-heading);
font-size: 13px; letter-spacing: .03em; text-transform: uppercase;
color: var(--color-bone-0);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.et-search-suggestion-price { font-size: 13px; color: var(--color-brand-orange); }
.et-search-see-all {
justify-content: center;
font-family: var(--font-heading);
font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
color: var(--fg-muted);
}
@media (hover: hover) and (pointer: fine) {
.et-search-see-all:hover { color: var(--color-brand-orange); }
}
.et-search-empty {
margin: 0; padding: 16px 24px;
color: var(--fg-muted); font-size: 14px;
}
@media (max-width: 640px) {
.et-search-suggestion { padding: 10px 16px; }
.et-search-empty { padding: 16px; }
}
/* --- Buttons -------------------------------------------------------------- */
.btn,
.button,
button[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font-heading);
font-size: 14px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
padding: 13px 24px;
/* Dolna granica celu dotyku (audyt D5/U9): ten sam przycisk mial 39-52 px
zaleznie od miejsca. 44 px to prog Apple; wysokosc zalezy odtad od tej
liczby, nie od wypelnienia i kroju. */
min-height: 44px;
border-radius: var(--radius-3);
border: 1px solid transparent;
background: var(--color-brand-orange);
color: var(--color-ink-1);
cursor: pointer;
line-height: 1;
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .1s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
background: var(--color-brand-orange-bright);
color: var(--color-ink-1);
}
}
/* Warianty .alt WooCommerce (Dodaj do koszyka, Kupuję i płacę) — nadpisanie fioletu */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce button.single_add_to_cart_button,
.woocommerce-checkout #place_order,
.wc-block-components-button:not(.is-link) {
background: var(--color-brand-orange) !important;
color: var(--color-ink-1) !important;
min-height: 44px;
border: 1px solid transparent;
font-family: var(--font-heading);
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
border-radius: var(--radius-3);
}
@media (hover: hover) and (pointer: fine) {
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce-checkout #place_order:hover,
.wc-block-components-button:not(.is-link):hover {
background: var(--color-brand-orange-bright) !important;
color: var(--color-ink-1) !important;
}
}
/* WYŁĄCZONY ZNACZY „JESZCZE NIEPEŁNY", NIE „ZEPSUTY" (2026-09-26).
Przy produkcie z wyborem kolorów przycisk czeka na komplet rolek. Szary
prostokąt z bladym napisem - a WooCommerce dokładał jeszcze `opacity: .5`
- czytał się jak awaria. Przerywana ramka to w motywie „do uzupełnienia",
tak jak puste sloty rolek; tak samo rysuje się wyłączony przycisk
konfiguratora i paska na dole (reguły przy `.et-builder-submit`). */
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled] {
background: transparent !important;
color: var(--fg-faint) !important;
border: 1px dashed var(--border-input);
opacity: 1;
}
.btn:active { background: var(--color-brand-orange-deep); transform: scale(.98); }
.btn-secondary { background: transparent; color: var(--color-bone-1); border-color: var(--border-input); }
@media (hover: hover) and (pointer: fine) {
.btn-secondary:hover { background: transparent; border-color: var(--color-brand-orange); color: var(--color-brand-orange); }
}
/* --- Hero ----------------------------------------------------------------- */
.hero {
display: grid;
grid-template-columns: minmax(0, var(--et-hero-left, 52%)) minmax(0, 1fr);
gap: var(--et-hero-gap, 20px);
/* TA SAMA SIATKA, CO KAŻDA INNA SEKCJA - audyt pulpitu (2026-08-13):
„nagłówek PANCERZ DLA zaczyna się ~30 px dalej w prawo niż TAŚMY
TRENINGOWE i lewa krawędź kart poniżej (...) foto hero kończy się przed
prawą krawędzią gridu".
Hero miało własne liczby: 1280 px szerokości i 24 px marginesu, podczas
gdy `.container` liczy się z `--et-container` (1320) i `--et-gutter`
(28). Przy ekranie 1440 px dawało to lewą krawędź na 104 px zamiast 88 -
szesnaście pikseli różnicy, do których dokładało się jeszcze 20 px
przesunięcia treści (niżej). Stąd te trzydzieści.
Osobne liczby nie miały uzasadnienia poza tym, że hero powstało wcześniej
niż zmienne kontenera. Teraz bierze te same, więc każda zmiana szerokości
strony w Personalizacji rusza hero razem z resztą - i lewa linia jest
jedna na całej stronie. Prawa krawędź zdjęcia dojeżdża tym samym do
krawędzi siatki. */
width: min(100% - (var(--et-gutter, 28px) * 2), var(--et-container, 1320px));
max-width: none;
margin-inline: auto;
padding: var(--et-space) 0;
background: var(--color-ink-1);
}
.hero-left { display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.hero-eyebrow {
font-family: var(--font-heading);
font-size: 12px; font-weight: 500;
letter-spacing: .12em; text-transform: uppercase;
color: var(--color-brand-orange);
}
/* NAPIS EGOTAPE NIE STOI JUŻ W HERO - ani na telefonie, ani na pulpicie.
Audyt telefonu (2026-08-13) zdjął go z ekranów wąskich. Audyt pulpitu tego
samego dnia dorzucił argument, którego wcześniej nie było: „wordmark
z przekreśleniem nad nagłówkiem czyta się wręcz jak SKREŚLONY TEKST".
To rozstrzyga. Przekreślenie jest częścią znaku marki i na pasku nawigacji
czyta się jako znak; postawione bezpośrednio nad zdaniem robi z tego zdania
coś wykreślonego. Duplikat osłabiał hierarchię, a ta interpretacja psuła
sam komunikat.
Element ZOSTAJE w szablonie, tylko schowany: `egotape.js` nadal pyta go
o szerokość i sięga po kolumnę dopiero, gdy jej nie dostanie, więc powrót
to skasowanie jednej linijki. */
.hero-strike { display: none; }
.hero-strike { max-width: 420px; }
.hero-strike img { width: 100%; height: auto; display: block; }
.hero-title { font-size: clamp(2.6rem, 5.4vw, 4.4rem); margin: 0; }
/* MIARA WIERSZA, NIE TWARDE PRZEŁAMY - audyt pulpitu: „wymuszone
w akapicie hero połamie się na innych szerokościach, zamień na max-width".
Przełamy są wpisane w Personalizacji pod jedną konkretną szerokość ekranu
i pod każdą inną wypadają w losowym miejscu - stąd wiersze-sieroty, które
audyt telefonu wytknął osobno. Ukrywamy je i zostawiamy przeglądarce to,
co robi dobrze: łamanie tekstu tam, gdzie kończy się miejsce.
65 znaków to miara, przy której oko trafia z końca wiersza na początek
następnego bez gubienia linijki. Treść w Personalizacji zostaje nietknięta
- właściciel może dalej pisać przełamy, po prostu przestały decydować
o wyglądzie. */
.hero-sub { max-width: 58ch; }
.hero-sub br { display: none; }
/* Cena pod claimem (audyt U5: pierwszy ekran telefonu nie mowil „za ile").
Mniejsza od leadu i bez pogrubienia - to informacja, nie drugi naglowek;
pomarancz robi z niej cene, tak jak przy produktach. Odstepy do sasiadow
daje `gap` kolumny, ten sam co dla leadu. Lamie sie naturalnie, gdy sie
nie miesci - nic nie jest ucinane. */
.hero-price {
margin: 0;
max-width: 58ch;
font-family: var(--font-heading);
font-size: 16px; font-weight: 400;
letter-spacing: .02em;
line-height: 1.4;
color: var(--color-brand-orange);
}
/* =========================================================================
OSOBNY OPIS NA TELEFON - tylko wtedy, gdy właściciel go napisze.
Zgłoszenie (2026-08-13): „na mobilce opis w hero nie podoba mi się
formatowanie, znaki nowej linii są w złym miejscu, chcę mieć nad tym
kontrolę (na PC to jest git)".
Sedno: przełamy wpisane pod szeroki ekran na telefonie wypadają w losowym
miejscu, a te dobre dla telefonu psułyby pulpit. Jedno pole nie może
obsłużyć dwóch szerokości - i żadna automatyka tego nie zgadnie, bo to
jest decyzja o rytmie zdania, nie o łamaniu tekstu.
Drugie pole w Personalizacji rozwiązuje to wprost. Puste znaczy „użyj
tego samego co na komputerze" i jest stanem domyślnym, więc dopóki
właściciel nic nie wpisze, w kodzie strony NIE MA drugiego akapitu -
`front-page.php` w ogóle go nie wypisuje. Żadnego powielonego tekstu.
W wersji na telefon przełamy SĄ honorowane: to jest cały powód, dla
którego to pole istnieje. */
.hero-sub-mobile { display: none; }
.hero-sub { color: var(--fg-muted); max-width: 54ch; margin: 0; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.hero-right {
border-radius: var(--radius-3);
/* WYSOKOŚĆ HERO Z PERSONALIZACJI - „Hero: wysokość, komputer (px)".
Ta jedna liczba rządzi całą sekcją, nie tylko zdjęciem: hero jest
siatką dwukolumnową, więc wiersz jest tak wysoki, jak najwyższa
z kolumn. Kolumna z tekstem ma `justify-content: center`, czyli treść
zostaje pośrodku niezależnie od tego, ile miejsca dostanie. Wystarczy
więc podnieść tę - i rośnie hero razem z galerią.
Dlatego suwak jest JEDEN, mimo że zgłoszenie mówiło o dwóch rzeczach
(„wysokość hero oraz tej galerii zdjęć obok"): dwa niezależne pola
dawałyby stany, w których mniejsza z liczb nie robi nic, i człowiek
ciągnąłby suwak bez żadnego skutku na ekranie.
Telefon ma własną regułę niżej i to ustawienie go nie dotyczy - tam
zdjęcie jest tłem pod tekstem, a nie sąsiednią kolumną. */
min-height: var(--et-hero-wysokosc-pc, 380px);
background:
radial-gradient(circle at 60% 40%, rgba(246,149,0,.16) 0%, transparent 60%),
var(--color-ink-2);
border: 1px solid var(--border-default);
}
/* --- Features ------------------------------------------------------------- */
/* =========================================================================
PASEK KORZYŚCI - przesuwająca się wstęga pod hero
Zastąpił siatkę czterech kafli (`.feature-grid`), która na telefonie
schodziła do jednej kolumny i zajmowała pół ekranu, żeby powiedzieć
cztery krótkie zdania. Treść pochodzi teraz z Personalizacji
(`inc/pasek-korzysci.php`).
Wstęga celowo NIE MA kontenera o stałej szerokości - jedzie przez całą
szerokość okna, bo to ona daje wrażenie ruchu. Ograniczenie jej do
kontenera zrobiłoby z niej pudełko z przewijanym tekstem.
========================================================================= */
.pasek-korzysci {
padding: 10px 0;
border-top: 1px solid var(--border-default);
border-bottom: 1px solid var(--border-default);
overflow: hidden;
/* Bez tego pasek rozpycha stronę w bok na wąskich ekranach. */
max-width: 100%;
}
.pasek-tor {
display: flex;
width: max-content;
animation: pasek-jazda var(--pasek-czas, 28s) linear infinite;
}
/* Zatrzymanie na najechaniu i na klawiaturze - żeby dało się przeczytać
pozycję, która akurat ucieka. Bez tego pasek jest ozdobą, a nie treścią. */
.pasek-korzysci:hover .pasek-tor,
.pasek-korzysci:focus-within .pasek-tor { animation-play-state: paused; }
.pasek-ciag { display: flex; flex: 0 0 auto; }
.pasek-poz {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 0 28px;
white-space: nowrap;
font-size: 14px;
line-height: 1.4;
}
/* Kropka rozdzielająca zamiast obramowań - przy przesuwaniu krawędzie
migotałyby na granicy pikseli. */
.pasek-poz::after {
content: "";
width: 4px;
height: 4px;
margin-left: 28px;
border-radius: 50%;
background: var(--border-default);
align-self: center;
}
.pasek-poz strong {
font-family: var(--font-heading);
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
font-size: 13px;
}
.pasek-opis { color: var(--fg-muted); }
@keyframes pasek-jazda {
from { transform: translateX(0); }
/* -50%, bo tor niesie DWIE kopie tej samej treści. Po przejechaniu
pierwszej druga stoi dokładnie tam, gdzie zaczynała pierwsza, więc
powrót do zera jest niewidoczny. */
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
/* Bez ruchu wstęga musi dać się przeczytać w całości, więc zawija się
do zwykłego wiersza i pokazuje jedną kopię. */
.pasek-tor { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
.pasek-ciag { flex-wrap: wrap; justify-content: center; }
.pasek-ciag[aria-hidden="true"] { display: none; }
.pasek-poz { white-space: normal; }
}
/* --- Section head ---------------------------------------------------------- */
.section-head { margin: 0 0 var(--et-odstep-naglowek-karty, 40px); }
.section-head .eyebrow {
font-family: var(--font-heading);
font-size: 12px; font-weight: 500;
letter-spacing: .12em; text-transform: uppercase;
color: var(--color-brand-orange);
margin-bottom: 10px;
}
.products-section { padding: var(--et-space) 0; }
/* Odstęp pod hero na dużych ekranach - osobne ustawienie w Personalizacji.
Dotyczy wyłącznie sekcji stojącej TUŻ pod hero; pozostałe sekcje dalej
biorą wspólny odstęp `--et-space`, bo to jedno miejsce na stronie, gdzie
przerwa decyduje o tym, czy widać towar. Telefon ma własną regułę wyżej
w tym pliku i tam wygrywa zapytanie o media. */
@media (min-width: 769px) {
.hero + section,
.hero + * > section:first-child { padding-top: var(--et-odstep-pod-hero-pc, 96px); }
}
/* --- WooCommerce: siatka produktów ---------------------------------------- */
.woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 0; padding: 0;
list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
position: relative;
width: auto !important;
margin: 0 !important;
float: none !important;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-3);
overflow: hidden;
box-shadow: var(--shadow-1);
transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
display: flex;
flex-direction: column;
}
/* Najechanie TYLKO tam, gdzie jest kursor. Na iPhonie `:hover` zostaje po
dotknięciu karty (zgłoszenie #4, 2026-09-26: po „Dodaj do koszyka” karta
została z pomarańczową ramką i cieniem do następnego dotknięcia). Tak samo
niżej: ramka, cień, krążek bóstwa i przycisk. */
@media (hover: hover) and (pointer: fine) {
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow-2); }
}
.product-tag,
.woocommerce span.onsale {
position: absolute; top: 14px; left: 14px; z-index: 3;
background: var(--color-brand-orange);
color: var(--color-ink-1);
font-family: var(--font-heading);
font-size: 11px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
padding: 5px 12px;
border-radius: var(--radius-pill);
min-height: 0; line-height: 1.4;
margin: 0;
}
.et-product-well {
position: relative;
aspect-ratio: 1 / 1;
display: block;
padding: 0;
/* CIEMNE TŁO POD GRAFIKĄ, nie białe.
Zgłoszenie z przeglądu mobilnego (2026-08-13): „zdjęcia produktów na
białym tle świecą w ciemnym UI, duże białe prostokąty rozbijają mrok
brandu". Białe pole zostało tu jako podkład pod grafiki
z przezroczystością - i pod nimi robiło dokładnie to, co pod zdjęciem
z białym tłem: świeciło. */
background: var(--color-ink-2);
overflow: hidden;
}
/* Wygaszenie krawędzi kadru siedzi w `.et-product-well::before` (szukaj
„Miękka krawędź białego kadru"). NIE dokładamy tu drugiej warstwy:
`::after` na tym elemencie jest już zajęty przez poświatę koloru bóstwa
i reguła z klasą `.has-talisman` i tak by wygrała - czyli powstałby kod,
który wygląda, jakby działał, a nie robi nic. */
.et-product-well a { display: block; width: 100%; height: 100%; }
.et-product-well img,
.woocommerce ul.products li.product .et-product-well a img {
width: 100%; height: 100%;
object-fit: cover;
margin: 0;
transition: filter .35s ease, transform .35s ease;
}
.et-hover-logo {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity .35s ease;
pointer-events: none;
z-index: 2;
}
.woocommerce ul.products li.product .et-product-well .et-hover-logo img,
.et-hover-logo img {
width: var(--et-hover-logo-size, 34%) !important;
height: var(--et-hover-logo-size, 34%) !important;
object-fit: contain;
margin: 0;
filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}
@media (hover: hover) and (pointer: fine) {
.woocommerce ul.products li.product:hover .et-product-well > a img,
.woocommerce ul.products li.product:hover .et-product-well > img {
filter: blur(9px) saturate(.8);
transform: scale(1.03);
}
.woocommerce ul.products li.product:hover .et-hover-logo { opacity: 1; }
}
@media (hover: none) {
.et-hover-logo { display: none !important; }
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--font-heading);
font-size: 15px; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
color: var(--color-bone-0);
padding: 16px 18px 0;
}
.woocommerce ul.products li.product .price {
font-family: var(--font-heading);
font-size: 17px; font-weight: 600;
color: var(--color-brand-orange) !important;
padding: 4px 18px 0;
}
.woocommerce ul.products li.product .price del { color: var(--fg-faint); opacity: 1; }
/* =========================================================================
JEDNA POMARAŃCZOWA ISKRA NA GRUPĘ - zgłoszenie z przeglądu mobilnego
(2026-08-13): „za dużo pomarańczu na raz. Karty produktu: cena
pomarańczowa ALBO przycisk, nie oba".
Policzone na jednym ekranie telefonu: pasek promo, główne CTA hero, ceny,
dwa razy „DODAJ DO KOSZYKA", plakietka i pływająca pomoc. Osiem plam tego
samego koloru, z których każda krzyczy równie głośno - czyli żadna nie
krzyczy. Kolor akcentu działa przez RZADKOŚĆ; użyty wszędzie przestaje być
akcentem i robi się tłem.
Zostawiamy CENĘ, a nie przycisk, i to jest wybór, nie moneta:
- cena jest w karcie informacją, po którą człowiek naprawdę sięga wzrokiem,
a przycisk i tak stoi zawsze w tym samym miejscu, więc nie musi się
szukać kolorem;
- w siatce dwóch kolumn na telefonie widać naraz cztery przyciski. Cztery
pomarańczowe prostokąty to była ta „ściana", o której mówi zgłoszenie;
- obrys zamiast wypełnienia nie odbiera przyciskowi klikalności: ma
ramkę, wersaliki i pełną szerokość karty, a przy dotknięciu i najechaniu
zapala się na pomarańczowo - czyli kolor wraca dokładnie wtedy, gdy
niesie informację („to jest to, co właśnie klikam").
NIE dotyczy strony produktu ani koszyka: tam „Dodaj do koszyka" jest
JEDYNĄ akcją na ekranie, więc żadnej ściany nie tworzy i zostaje pełne.
Selektor jest celowo ograniczony do `ul.products li.product`.
========================================================================= */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button.alt,
.woocommerce ul.products li.product .button.add_to_cart_button {
background: transparent !important;
color: var(--color-bone-1) !important;
border: 1px solid var(--border-strong) !important;
}
.woocommerce ul.products li.product .button:focus-visible {
background: var(--color-brand-orange) !important;
color: var(--color-ink-1) !important;
border-color: var(--color-brand-orange) !important;
}
/* Pomarańcz przy najechaniu tylko pod kursorem - na iPhonie przycisk
zostawał pomarańczowy po dotknięciu (przyklejony `:hover`, zgłoszenie #4). */
@media (hover: hover) and (pointer: fine) {
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button.alt:hover,
.woocommerce ul.products li.product .button.add_to_cart_button:hover {
background: var(--color-brand-orange) !important;
color: var(--color-ink-1) !important;
border-color: var(--color-brand-orange) !important;
}
}
/* =========================================================================
STANY PO „DODAJ DO KOSZYKA" - zgłoszenie #4 (iPhone, 2026-09-26).
WooCommerce po dotknięciu robi z przyciskiem trzy rzeczy i każda
rozjeżdżała kartę:
- `.loading`: przezroczystość .25 (cały przycisk jak wyłączony) i ikona
kręciołka z fontu WooCommerce wisząca 1em od prawej - NA napisie;
- `.added`: znaczek „✓" doklejony za napisem (12,5 px + margines .53em).
Przycisk ma stałą szerokość, a napis był wyśrodkowany i bez zawijania,
więc treść wylewała się na OBIE strony: zmierzone na 393 px napis
zaczynał się 5,6 px przed lewą krawędzią („ODAJ DO KOSZYKA");
- odnośnik „Zobacz koszyk" dopisany POD przyciskiem, krojem treści
(Inter 16 px, małe litery): karta rosła o 44 px, a przyciski sąsiednich
kart zjeżdżały do nowego dna (315 -> 336 px, zmierzone).
Teraz „Zobacz koszyk" ZAJMUJE MIEJSCE przycisku: to samo pudełko, te same
marginesy i wysokość, więc rząd kart się nie rusza. Znaczek „✓" i obrys
w kolorze marki mówią „dodane", napis - co dalej. Stan „zrobione" ma
prawo do koloru, bo mówi o skutku działania, a nie zachęca do niego.
Dodać drugą sztukę można w koszyku albo na karcie produktu. Fokus
z klawiatury przechodzi na odnośnik (`egotape.js`, „Po dodaniu z kafelka"). */
.woocommerce ul.products li.product .button.added:has(+ .added_to_cart) { display: none; }
.woocommerce ul.products li.product .added_to_cart {
align-self: stretch;
margin: 8px 18px 18px;
min-height: 44px;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 13px 24px;
border: 1px solid var(--color-brand-orange);
border-radius: var(--radius-3);
background: transparent;
color: var(--color-brand-orange);
font-family: var(--font-heading);
font-size: 14px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
line-height: 1;
text-align: center;
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.woocommerce ul.products li.product .added_to_cart:hover {
background: var(--color-brand-orange);
color: var(--color-ink-1);
}
}
.woocommerce ul.products li.product .added_to_cart:focus-visible {
background: var(--color-brand-orange);
color: var(--color-ink-1);
}
/* Dodane BEZ odnośnika - na stronie koszyka WooCommerce go nie dokłada
(„Nowe w sklepie" w pustym koszyku). Ten sam obrys i znaczek na samym
przycisku. */
.woocommerce ul.products li.product .button.added {
color: var(--color-brand-orange) !important;
border-color: var(--color-brand-orange) !important;
}
/* Znaczek „✓" rysowany ramką, nie znakiem z fontu: kolor bierze z napisu,
a przed napisem nie dokłada szerokości za tekstem (tam wylewał treść). */
.woocommerce ul.products li.product .button.added::after { content: none; }
.woocommerce ul.products li.product .button.added::before,
.woocommerce ul.products li.product .added_to_cart::before {
content: "";
flex: 0 0 auto;
width: .36em; height: .68em;
margin: -.2em .12em 0;
border: solid currentColor;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Ładowanie: napis znika na czas żądania (nazwę dla czytnika ekranu niesie
`aria-label`), a kręciołek stoi na środku zamiast na napisie. Bez
przezroczystości .25 z WooCommerce - przycisk pracuje, nie jest wyłączony. */
.woocommerce ul.products li.product .button.loading {
opacity: 1;
color: transparent !important;
}
.woocommerce ul.products li.product .button.loading::after {
content: "";
position: absolute; inset: 0;
width: 16px; height: 16px;
margin: auto;
border: 2px solid rgba(245, 241, 234, .25);
border-top-color: var(--color-bone-1);
border-radius: 50%;
animation: et-spin .6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.woocommerce ul.products li.product .button.loading::after { animation: none; }
}
.woocommerce ul.products li.product .button {
/* Odstęp nad przyciskiem 8 px, nie 14. Razem z zerowanym marginesem ceny
niżej daje 8 px przerwy zamiast 23 - ta sama wartość co na telefonie,
bo to ta sama karta, tylko szersza. */
margin: 8px 18px 18px;
/* Na pełną szerokość karty. Domyślnie przycisk był szeroki na tyle, ile
miał napisu (181 px przy 233 px dostępnych), więc lewa krawędź stała
równo z tytułem i ceną, a prawa urywała się w miejscu zależnym od
długości słowa. Przy czterech kartach obok siebie widać to od razu. */
align-self: stretch;
}
/* Cena niesie własny dolny margines z WooCommerce (0.5em). Odstęp pod nią
daje już margines przycisku albo wiersz oceny, więc ten drugi jest
zdublowany - i to on robił z 8 px przerwy 23 px. */
.woocommerce ul.products li.product .price { margin-bottom: 0; }
.woocommerce ul.products li.product .star-rating { margin: 6px 18px 0; }
/* PRZYCISKI RÓWNO U DOŁU, mimo różnej zawartości kart - audyt pulpitu:
„karty mają nierówną wysokość (gwiazdki tylko przy 2 produktach, badge
tylko przy niektórych)".
Rozwiązane przez DOSUNIĘCIE przycisku do dna karty, a nie przez
rezerwowanie miejsca na gwiazdki. Rezerwacja zostawiałaby pustą szparę pod
każdym produktem bez opinii - czyli wizualne „tu czegoś brakuje" przy
siedmiu z dziewięciu kart. Dosunięcie daje ten sam równy rząd przycisków,
a karty bez oceny są po prostu luźniejsze w środku.
`align-items: stretch` na siatce sprawia, że karty w rzędzie i tak mają
wspólną wysokość; brakowało tylko rozdania tej wysokości w środku karty.
CENA JEDZIE NA DÓŁ RAZEM Z PRZYCISKIEM (2026-09-26, zgłoszenia #4 i #7).
Dosunięty był sam przycisk, więc cena stała tam, gdzie kończył się tytuł:
w jednym rzędzie na 393 px 187 px od góry karty przy nazwie w jednym
wierszu i 210 px przy nazwie w dwóch. Teraz odnośnik produktu (zdjęcie,
nazwa, ocena, cena) wypełnia kartę, a cena ma `margin-top: auto` - wolne
miejsce ląduje między oceną a ceną, a cena i przycisk stoją w jednej
linii w całym rzędzie. Przerwa cena-przycisk jest wszędzie ta sama (8 px),
czyli znika też skutek uboczny opisany niżej przy „Przycisk zawsze przy
dnie kafelka". */
.woocommerce ul.products li.product { display: flex; flex-direction: column; }
/* `a.` w selektorze, bo WooCommerce ma `…li.product a.woocommerce-loop-
product__link { display: block }` - bez tego jego reguła wygrywała. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link .price { margin-top: auto; }
.woocommerce ul.products li.product .button { margin-top: 8px; }
/* =========================================================================
SIATKA PRODUKTÓW Z BLOKÓW WOOCOMMERCE - „Nowe w sklepie" w pustym koszyku
Zgłoszenie właściciela (2026-08-13): „w koszyku, jak nie ma produktów, to
PRZYCISKI produktów są inne - brzydkie".
Miał rację, i sprawa jest szersza niż przyciski. Pusty koszyk renderuje
blok `wp-block-woocommerce-product-new`, który NIE UŻYWA znaczników
`ul.products li.product` - ma własne klasy `wc-block-grid__*`. Cały
arkusz motywu mija się z nim co do jednej reguły, więc karty dostawały
wygląd domyślny bloków:
- przycisk: szaroniebieska pastylka `rgb(50,55,60)` - kolor, którego nie
ma w żadnej z palet tego sklepu,
- tytuł POMARAŃCZOWY, a cena szara - czyli dokładnie odwrotnie niż
w kartach motywu, gdzie pomarańcz należy do ceny,
- karta bez tła, bez ramki i bez zaokrąglenia, naga na czerni.
Zamiast przepisywać koszyk na klasyczne znaczniki (ryzyko przy każdej
aktualizacji WooCommerce), ubieramy blok w te same wartości, co karty
motywu. Jedno źródło kolorów - zmienne - więc zmiana palety rusza obie
siatki naraz.
========================================================================= */
/* JEDEN WIERSZ PRZESUWANY PALCEM - na komputerze TAK SAMO jak na telefonie.
Zgłoszenie właściciela: „powinno to być jednym wierszem zarówno na PC jak
i mobilce, oczywiście przesuwane w prawo/lewo".
To jest sekcja poboczna na pustym koszyku - propozycja, nie oferta.
Siatka zawijana w rzędy rozpychała ją na pół ekranu i kazała przewijać
stronę w dół, żeby dojść do stopki. Wiersz zajmuje stałą wysokość
niezależnie od liczby produktów, a to, że jest ich więcej, pokazuje
podglądem następnej karty - tak samo jak polecane na karcie produktu
i karuzela na stronie głównej. Jedno zachowanie w całym sklepie.
`!important` przy `display`, bo blok narzuca swój układ własnym arkuszem
- sprawdzone pomiarem: `gridTemplateColumns` liczyło się poprawnie przy
`display: block`, czyli reguła wyglądała na działającą i nie działała. */
.wc-block-grid__products {
display: flex !important;
flex-wrap: nowrap;
gap: 24px;
list-style: none;
margin: 0;
padding: 0 0 10px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--color-bone-3) transparent;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.wc-block-grid__product {
/* ZDJĘCIE OGRANICZENIA SZEROKOŚCI Z BLOKU - bez tego karty mają 60 px.
Blok układa produkty na `flex` i pilnuje liczby kolumn procentowym
`max-width` na karcie (przy czterech kolumnach - 25%). Kiedy pojemnik
staje się siatką, ten sam procent przestaje znaczyć „ćwiartka rzędu"
i zaczyna znaczyć „ćwiartka MOJEJ KOLUMNY" - czyli karta kurczy się do
jednej czwartej miejsca, które właśnie dostała. Efekt: słupki po 60 px
z napisami literа pod literą.
Kolumnami rządzi tutaj siatka, więc ograniczenie z bloku jest już tylko
przeszkodą. `!important`, bo reguła bloku też je ma. */
/* Szerokość karty liczona tak samo, jak w karuzeli na stronie głównej:
tyle kart, ile ustawione w Personalizacji, plus ułamek następnej.
`max-width` z bloku (procentowe, pilnujące jego własnych kolumn) musi
zejść, bo w wierszu przewijanym znaczyłoby ułamek ułamka. */
max-width: none !important;
flex: 0 0 calc(
(100% - (var(--et-slider-desktop, 4) - 1) * 24px)
/ (var(--et-slider-desktop, 4) + var(--et-slider-peek, 12) / 100)
);
scroll-snap-align: start;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-3);
overflow: hidden;
box-shadow: var(--shadow-1);
margin: 0;
padding: 0 0 18px;
display: flex;
flex-direction: column;
text-align: left;
}
/* ZDJĘCIE NA CAŁĄ RAMKĘ, z kadrowaniem i winietą - jak w kartach motywu.
Zgłoszenie: „zdjęcia nie są na całą ramkę". Blok stawiał je z
`object-fit: fill`, czyli ROZCIĄGAŁ do zadanego prostokąta zamiast
kadrować - przy zdjęciu o innych proporcjach niż kwadrat oznacza to
zniekształcony produkt, a przy kwadratowym białe pole dookoła rolki.
`cover` na kwadratowym kadrze robi to samo, co `.et-product-well`
w sklepie: wypełnia ramkę i przycina nadmiar. Winieta jest tą samą
warstwą co tam i z tego samego powodu - biel siedzi w plikach zdjęć
i bez wygaszenia krawędzi kończy się prostą linią na ciemnej karcie. */
.wc-block-grid__product-image {
margin: 0;
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--color-ink-2);
/* BLOK NA PEŁNĄ SZEROKOŚĆ, z `!important` - i to nie jest ostrożność
na wyrost.
Blok WooCommerce ustawia temu opakowaniu `display: inline-block`, czyli
szerokość DOPASOWANĄ DO TREŚCI. Przy takim układzie element bierze tyle,
ile potrzebuje, a nie tyle, ile dostaje - i jeśli wybrany przez
przeglądarkę wariant zdjęcia jest choćby o ułamek węższy od karty, po
prawej zostaje pasek tła. Po prawej, bo wiersz tekstu układa się od
lewej.
W przeglądarce testowej luka wynosiła zero na czterech szerokościach
telefonu (360, 390, 412, 430) - zgłoszenie z prawdziwego telefonu mówiło
co innego. Zamiast dobierać szerokość na oko, zdejmujemy sam mechanizm,
który jako jedyny mógł taką lukę stworzyć: `block` bierze całą dostępną
szerokość zawsze, niezależnie od tego, co jest w środku i jaki silnik
to liczy.
Przy okazji znika odstęp POD zdjęciem: element w linii siedzi na linii
pisma i zostawia pod sobą miejsce na ogonki liter. */
display: block !important;
width: 100% !important;
}
/* =========================================================================
ZDJĘCIE PRZYKLEJONE DO CZTERECH KRAWĘDZI KADRU - pozycjonowanie
bezwzględne zamiast szerokości procentowej.
ROZSTRZYGNIĘTE ZRZUTEM Z TELEFONU WŁAŚCICIELA (2026-08-13). Rozłożony na
piksele pokazał to, czego cztery moje pomiary w przeglądarce testowej nie
pokazały:
karta 1: karta 50-377, zdjęcie 50-365 -> 12 px tła po PRAWEJ
karta 2: karta 403-731, zdjęcie 416-731 -> 13 px tła po LEWEJ
Czyli zdjęcie jest o jakieś sześć pikseli CSS WĘŻSZE od karty i dosunięte
raz do lewej, raz do prawej. Naprzemienność, którą właściciel opisał
trzykrotnie i której nie umiałem odtworzyć.
Poprzednia poprawka poszerzała OPAKOWANIE (`calc(100% + 2px)`) i z tego
powodu nie mogła zadziałać: jeśli węższy jest sam obrazek, opakowanie może
być dowolnie szerokie, a tło i tak prześwituje. Naprawiałem nie ten
element.
`width: 100%` na obrazku też nie wystarcza, bo blok WooCommerce wypisuje
zdjęciom atrybuty `width`/`height`, `srcset` i `sizes`, a przeglądarka
dobiera wariant i wylicza z niego układ - z zaokrągleniem, które przy
szerokości ułamkowej karty wypada raz w jedną, raz w drugą stronę.
Pozycjonowanie bezwzględne wyjmuje obrazek z tego rachunku w całości: nie
ma już „ile procent czego", jest „przyklej się do czterech krawędzi
kadru i wystaw o piksel poza nie". `min-width`/`min-height` pilnują, żeby
wariant mniejszy od kadru został rozciągnięty, a nie zostawił marginesu.
Przy `object-fit: cover` nadmiar i tak jest przycinany, więc nic z tego,
co widać, nie ubywa.
========================================================================= */
.wc-block-grid__product-image img {
/* WYMIARY PODANE WPROST, nie przez `auto` z czterema krawędziami.
Pierwsza wersja tej reguły miała `inset: -1px` i `width: auto`, licząc
że obrazek rozciągnie się między krawędziami. Nie rozciągnął się:
obrazek jest elementem ZASTĘPOWANYM (ma własny rozmiar), a dla takiego
`width: auto` znaczy „weź swój rozmiar naturalny", nawet gdy podano
obie krawędzie poziome. Zmierzone: kadr 152 px, obrazek 300 px, czyli
jego własna szerokość - wylewał się poza kartę zamiast ją wypełnić.
Podanie szerokości i wysokości wprost zdejmuje tę niejednoznaczność:
procenty liczą się od kadru, a jeden piksel zapasu z każdej strony
wchodzi pod przycięcie. */
position: absolute !important;
top: -1px !important;
left: -1px !important;
right: auto !important;
bottom: auto !important;
width: calc(100% + 2px) !important;
height: calc(100% + 2px) !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
display: block;
object-fit: cover;
border-radius: 0;
}
.wc-block-grid__product-image::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background:
radial-gradient(118% 118% at 50% 46%, transparent 40%, rgba(11, 11, 11, .34) 76%, rgba(11, 11, 11, .74) 100%),
linear-gradient(to bottom, rgba(11, 11, 11, .30) 0%, transparent 18%);
}
/* WINIETA SŁABNIE NA MAŁEJ KARCIE.
Zgłoszenie: „na mobilce zdjęcia nadal nie są wypełnione do końca, po
prawej jest margines". Zmierzone na pikselach zrzutu (wiersz przez górną
część kadru, powiększenie 3x): jasny kadr biegnie od 3 do 422 px przy
szerokości 429 - czyli dochodzi do ramki po obu stronach, a różnica
lewa/prawa to jeden piksel CSS. Zdjęcie WYPEŁNIA ramkę.
Marginesem wydaje się przyciemnienie krawędzi, czyli ta winieta. Na karcie
pulpitu (330 px) rozkłada się na tyle miejsca, że czyta się jak światło
sceny; na karcie telefonu (142 px) ten sam procent to dwa razy węższy pas
przy krawędzi - i zamiast miękkiego wygaszenia widać ciemny brzeg. Że
bardziej po prawej, wynika z samego zdjęcia: produkt stoi lekko na lewo,
więc po prawej zostaje więcej bieli, na której przyciemnienie widać.
Na małych kartach zaczyna się więc później i kończy słabiej. Krawędź
nadal nie jest ostrą linią bieli, ale przestaje udawać margines. */
/* NA TELEFONIE WINIETY NIE MA WCALE.
Właściciel zgłaszał ciemną krawędź zdjęcia cztery razy z rzędu, za każdym
razem po innej poprawce. Nie udało mi się jej odtworzyć: pomiary
geometrii dawały zero luki na czterech szerokościach, a pomiar
wyrenderowanych pikseli - jasność krawędzi równą środkowi z dokładnością
do kilku punktów.
Skoro nie umiem wskazać przyczyny, zdejmuję JEDYNĄ rzecz, która na tych
kartach może w ogóle przyciemnić brzeg. To nie jest naprawa z diagnozy,
tylko usunięcie podejrzanego - i tak to trzeba czytać.
Koszt jest niewielki: winieta miała maskować twardą krawędź białego kadru
na ciemnej karcie i na dużych kartach nadal to robi. Na karcie o
szerokości 142 px różnica jest kosmetyczna, a pewność, że nic nie
przyciemnia zdjęcia, warta więcej.
Pulpit zostaje z winietą - tam właściciel napisał wprost, że jest dobrze,
a karta ma 330 px, czyli dwa razy więcej miejsca na jej rozłożenie. */
@media (max-width: 640px) {
.wc-block-grid__product-image::after { display: none; }
}
.wc-block-grid__product-title {
font-family: var(--font-heading);
font-size: 15px; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
/* KOŚĆ, nie pomarańcz - pomarańcz w karcie należy do ceny. Reguła jednej
iskry na grupę, ta sama co przy kartach w siatce motywu. */
color: var(--color-bone-0);
padding: 16px 18px 0;
margin: 0;
}
.wc-block-grid__product-price,
.wc-block-grid__product-price.price {
font-family: var(--font-heading);
font-size: 17px; font-weight: 600;
color: var(--color-brand-orange);
padding: 4px 18px 0;
margin: 0;
}
.wc-block-grid__product-add-to-cart {
/* Przycisk dosunięty do dna karty - karty w rzędzie mają wtedy rząd
przycisków na jednej linii, niezależnie od długości nazwy produktu. */
margin: 8px 18px 0 !important;
padding: 0;
display: flex;
margin-top: auto !important;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product .wp-block-button__link.add_to_cart_button {
/* Obrys, nie wypełnienie - dokładnie jak „Dodaj do koszyka" w siatce
motywu, i z tego samego powodu: kilka kart naraz na ekranie. */
width: 100%;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-heading);
font-size: 14px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
line-height: 1;
padding: 13px 24px;
border-radius: var(--radius-3);
background: transparent;
color: var(--color-bone-1);
border: 1px solid var(--border-strong);
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:focus-visible {
background: var(--color-brand-orange);
color: var(--color-ink-1);
border-color: var(--color-brand-orange);
}
/* Najechanie tylko pod kursorem - na dotyku przyklejało się po dotknięciu. */
@media (hover: hover) and (pointer: fine) {
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product .wp-block-button__link.add_to_cart_button:hover {
background: var(--color-brand-orange);
color: var(--color-ink-1);
border-color: var(--color-brand-orange);
}
}
/* Odnośnik „Zobacz koszyk", który blok dokłada po dodaniu produktu. */
.wc-block-grid__product .added_to_cart {
display: block;
margin: 8px 18px 0;
font-family: var(--font-heading);
font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
color: var(--color-brand-orange);
}
/* Na telefonie pismo mniejsze i ciaśniejsze marginesy; liczbą kolumn rządzi
`auto-fill` wyżej i przy wąskim pojemniku koszyka schodzi do jednej. */
@media (max-width: 640px) {
.wc-block-grid__products { gap: 14px; }
/* BEZ OBRAMOWANIA NA TELEFONIE - druga możliwa przyczyna „szerszej ramki
po prawej", wskazana przez właściciela i warta usunięcia niezależnie od
tego, czy to ona.
Karty mają szerokość UŁAMKOWĄ: przy ekranie 390 px wychodzi 142,22 px,
przy 412 - 151,98. Obramowanie o grubości 1 px przeglądarka musi
dociągnąć do pełnych pikseli ekranu i przy takich szerokościach jedna
krawędź bywa grubsza od drugiej. Na jasnym zdjęciu, które dochodzi
dokładnie do tej krawędzi, wygląda to jak margines po jednej stronie.
Karta bez obramowania nadal czyta się jako karta: jej tło (`#171717`)
odcina się od strony (`#0B0B0B`), a rogi są zaokrąglone. Znika za to
jedyny element, który mógł się w ten sposób rozjechać. Na pulpicie
obramowanie zostaje - tam karty są szersze, a właściciel napisał
wprost, że jest dobrze. */
.wc-block-grid__product { border: 0 !important; }
/* =====================================================================
ZDJĘCIE WYSTAJE O PIKSEL POZA KARTĘ - i to jest naprawa, nie sztuczka.
Zgłoszenie właściciela, trzecie podejście, tym razem z rozstrzygającym
szczegółem: „pierwsza karta ma margines po prawej, druga po lewej,
trzecia znów po prawej".
Naprzemienność jest podpisem ZAOKRĄGLANIA SUBPIKSELOWEGO. Karta ma
szerokość ułamkową - 142,22 px przy ekranie 390 - więc kolejne karty
w wierszu zaczynają się na 0, 156,22, 312,44, 468,66... czyli każda
w innym ułamku piksela. Przeglądarka maluje krawędzie na pełnych
pikselach ekranu, a `overflow: hidden` karty przycina zdjęcie w miejscu
wyliczonym z ułamka. Gdy zaokrąglenie wypada w drugą stronę niż
krawędź, między jasnym kadrem a ciemnym tłem karty zostaje włos tła -
raz po prawej, raz po lewej.
Dlatego POMIARY POKAZYWAŁY ZERO: geometria była poprawna co do
ułamka, a problem powstawał dopiero przy malowaniu. Odległości liczone
w `getBoundingClientRect()` tego nie widzą.
Rozwiązanie: zdjęcie jest o piksel szersze z każdej strony i wystaje
poza kartę, a karta je przycina. Wtedy w miejscu zaokrąglenia zawsze
jest ZDJĘCIE, nigdy tło - niezależnie od tego, w którą stronę wypadnie
ułamek. Kadr i tak jest przycinany (`object-fit: cover`), więc te dwa
piksele nic nie zabierają z tego, co widać.
===================================================================== */
.wc-block-grid__product-image {
width: calc(100% + 2px) !important;
margin-left: -1px !important;
}
.wc-block-grid__product {
flex-basis: calc(
(100% - (var(--et-slider-mobile, 2) - 1) * 14px)
/ (var(--et-slider-mobile, 2) + var(--et-slider-peek, 12) / 100)
) !important;
}
.wc-block-grid__product-title { font-size: 13px; padding: 12px 12px 0; }
.wc-block-grid__product-price,
.wc-block-grid__product-price.price { font-size: 15px; padding: 4px 12px 0; }
/* `auto` U GÓRY, nie 8 px - inaczej przyciski się rozjeżdżają.
Skrót `margin` ustawia wszystkie cztery strony, więc wpisany tu
`8px` kasował `margin-top: auto` z reguły bazowej - a to na nim stoi
dosunięcie przycisku do dna karty. Na telefonie nazwy produktów łamią
się na różną liczbę wierszy („Rodzanice - Miks kolorów" na trzy,
„Perun - Czerwony" na jeden), więc przyciski lądowały na trzech różnych
wysokościach w jednym rzędzie. Zmierzone: trzy różne dolne krawędzie
na cztery karty. */
/* ODDECH POD PRZYCISKIEM - karta traci na telefonie własne wypełnienie.
Reguła bazowa daje karcie `padding: 0 0 18px`, ale na wąskim ekranie
arkusz bloku ją nadpisuje i zmierzone wypełnienie wynosi zero. Przycisk
kończył się PIKSEL nad dolną krawędzią karty - wyglądał jak przyklejony
do ramki.
Odstęp wchodzi w margines przycisku, a nie w wypełnienie karty: karta ma
`overflow: hidden` pod zaokrąglone rogi, więc to margines jest tu
miejscem, które na pewno zadziała niezależnie od tego, co blok zrobi
z `padding`. */
.wc-block-grid__product-add-to-cart { margin: auto 12px 14px !important; }
/* NAPIS NIE ŁAMIE SIĘ W ŚRODKU SŁOWA.
Przy karcie 142 px na przycisk zostaje ~118 px, a „PERSONALIZUJ" pisane
wersalikami z rozstrzeleniem liter tam nie wchodzi. Blok dzielił je więc
w dowolnym miejscu - wychodziło „PERSONA / LIZUJ", co czyta się jak
usterka, a nie jak zawinięty tekst.
`word-break: keep-all` zabrania łamania wewnątrz wyrazu; wielowyrazowe
napisy („Skomponuj zestaw") dalej zawijają się na spacji, bo tam łamanie
jest naturalne. Do tego ciaśniejsze pismo i mniejsze wypełnienie boczne,
żeby najdłuższy pojedynczy wyraz w sklepie zmieścił się w wierszu. */
/* TRZY KLASY W SELEKTORZE, nie dwie - inaczej ta reguła nie działa.
Reguła bazowa wyżej ma w grupie selektor `.wc-block-grid__product
.wp-block-button__link.add_to_cart_button`, czyli TRZY klasy. Zapis
z dwiema przegrywał z nią specyficznością mimo że stoi niżej w pliku -
i to jest podstępne, bo wygląda na poprawną nadpiskę. Zmierzone na
żywej stronie: przycisk miał `font-size: 14px` i `padding: 13px 24px`,
czyli wartości bazowe, przy szerokości ekranu 390 px. */
.wc-block-grid__product .wp-block-button__link.add_to_cart_button,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
font-size: 11px;
letter-spacing: .03em;
padding: 12px 6px;
word-break: keep-all;
overflow-wrap: normal;
hyphens: none;
}
}
/* =========================================================================
POLE „KRAJ / REGION" W KASIE - jedyne białe pole na ciemnej stronie.
Znalezione audytem pokrycia (2026-08-13): przelot po stronach sklepu
z porównaniem każdego koloru WooCommerce z paletą motywu. To był jedyny
element w kasie, który z niej wypadał - i wypadał kompletnie: białe tło
pod ciemnoszarym tekstem `rgb(43,45,47)`, pośród ośmiu pól w kolorze
`#1F1F1F` z kremowym pismem.
PRZYCZYNA TO JEDNA LITERA. Cały styl kasy w tym motywie celuje w klasy
`wc-block-components-*`. To pole nazywa się `wc-blockS-components-select`
- inny, starszy prefiks, którego WooCommerce używa w kilku miejscach
obok nowego. Selektory motywu mijały je co do znaku, więc zostawało
z wyglądem domyślnym bloków, czyli jasnym.
Wartości przepisane z pola tekstowego obok (zmierzone: tło `#1F1F1F`,
pismo `#F5F1EA`, ramka `#2A2A2A`, zaokrąglenie 8 px), żeby oba pola
w tym samym wierszu formularza wyglądały jak jedno rozwiązanie, a nie
dwa. Przez zmienne, więc zmiana palety rusza je razem.
========================================================================= */
.wc-blocks-components-select__container {
background: var(--bg-input) !important;
border: 1px solid var(--border-default) !important;
border-radius: var(--radius-3) !important;
}
.wc-blocks-components-select__select {
background: transparent !important;
color: var(--fg-default) !important;
border: 0 !important;
border-radius: var(--radius-3) !important;
}
/* Lista rozwijana jest rysowana przez system, nie przez stronę - kolor
pozycji ustawia przeglądarka. Podajemy jawnie tło, bo bez niego część
przeglądarek dziedziczy przezroczystość i pozycje robią się nieczytelne. */
.wc-blocks-components-select__select option {
background: var(--color-ink-2);
color: var(--fg-default);
}
.wc-blocks-components-select__label {
color: var(--fg-muted) !important;
}
/* Strzałka rozwijania - domyślnie ciemna, czyli niewidoczna na ciemnym. */
.wc-blocks-components-select__expand { fill: var(--fg-muted) !important; }
/* =========================================================================
LISTY ROZWIJANE W FORMULARZACH WOOCOMMERCE - `select`, nie `input`.
Znalezione audytem pokrycia: pole „Twój pas w BJJ" przy rejestracji miało
BIAŁE tło i obcą ramkę `rgba(32,7,7,.8)`, stojąc pod trzema ciemnymi
polami tekstowymi w tym samym formularzu.
Przyczyna jest pouczająca: pole ma klasę `woocommerce-Input input-text`,
czyli dokładnie tę samą co pola tekstowe obok - ale reguły motywu były
pisane jako `input.woocommerce-Input`, z nazwą znacznika. `select` z tą
samą klasą przechodził obok nich niezauważony.
Stąd selektory BEZ nazwy znacznika. Domyślna strzałka też schodzi:
przeglądarka rysuje ją w kolorze tekstu systemowego, więc na ciemnym tle
znikała - podajemy własną, tę samą co w kasie.
========================================================================= */
.woocommerce select.woocommerce-Input,
.woocommerce select.input-text,
.woocommerce-page select.woocommerce-Input,
.woocommerce form .form-row select,
/* Pas i belki mają klasę `input-text` jak pola tekstowe, a woocommerce.css
daje `.woocommerce form .form-row .input-text` (0,3,1) wypełnienie 8 px:
lista miała 38 px wysokości, a napis wchodził pod strzałkę. Ten selektor
(0,3,2) oddaje jej wymiary z tej reguły. */
.woocommerce form .form-row select.input-text {
width: 100%;
/* `!important` na trzech własnościach koloru: białe tło i obca ramka idą
z arkusza WooCommerce, który ładuje się PO motywie. Sam selektor
pasował (sprawdzone `matches()` na żywej stronie), a mimo to pole
zostawało białe - przegrywała kolejność, nie zapis. */
background-color: var(--bg-input) !important;
color: var(--fg-default) !important;
border: 1px solid var(--border-input) !important;
border-radius: var(--radius-3);
padding: 12px 40px 12px 14px;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.4;
appearance: none;
-webkit-appearance: none;
/* Strzałka jako tło - `appearance: none` zabiera systemową, a bez żadnej
pole wygląda jak zwykły napis i nikt nie wie, że da się je rozwinąć. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B8AE9E' stroke-width='2'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
}
.woocommerce select.woocommerce-Input option,
.woocommerce form .form-row select option {
background: var(--color-ink-2);
color: var(--fg-default);
}
/* Bez `outline: none` (audyt D15): pierscien fokusu z `:focus-visible` u gory
pliku dziala sam, a zmiana koloru obrysu jest tylko dodatkiem. */
.woocommerce select.woocommerce-Input:focus,
.woocommerce form .form-row select:focus {
border-color: var(--color-brand-orange);
}
/* =========================================================================
RAMKA FORMULARZY LOGOWANIA I REJESTRACJI - lawendowa, z domyślnego
arkusza WooCommerce (`rgb(207,200,216)`), na czarnej stronie widoczna
jako jasny prostokąt wokół pól.
Znalezione tym samym audytem. Same POLA w środku były już ubrane
(`#1F1F1F` z ramką `#2A2A2A`) - nie zauważył tego nikt, bo ramka jest
cienka, a wygląda po prostu jak element cudzego projektu.
========================================================================= */
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,
.woocommerce form.woocommerce-form-coupon,
.woocommerce form.checkout_coupon,
.woocommerce form.lost_reset_password {
border: 1px solid var(--border-default);
border-radius: var(--radius-3);
background: var(--bg-surface);
}
/* Formularz „Zapomniane hasło" i ustawiania nowego hasła (ta sama klasa
`lost_reset_password`). Ramkę dostał wyżej razem z logowaniem, ale odstęp
w środku WooCommerce daje tylko logowaniu i rejestracji - tu tekst, pole
i przycisk stały 1 px od krawędzi („rozjechane, za blisko granic",
zgłoszenie właściciela 2026-09-27). Odstęp jak w logowaniu: 20 px,
na telefonie 16 px. Szerokość jak kolumna logowania: jedno pole na całą
szerokość komputera (1320 px) wyglądało jak pasek, nie jak formularz. */
.woocommerce form.lost_reset_password { padding: 20px; max-width: 652px; }
@media (max-width: 768px) {
.woocommerce form.lost_reset_password { padding: 16px; }
}
/* --- WooCommerce: strona produktu ----------------------------------------- */
.woo-main { padding-top: 40px; }
.woocommerce .woocommerce-breadcrumb {
font-family: var(--font-heading);
font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
color: var(--fg-faint);
margin-bottom: 32px;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--fg-muted); }
@media (hover: hover) and (pointer: fine) {
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--color-brand-orange); }
}
/* Logowanie: „Nie pamietasz hasla?" mialo 20 px wysokosci, checkbox 13 px,
„Pokaz haslo" 22 px (ikona WooCommerce to `::before` 22 px - zostaje,
rosnie pole przycisku; pole hasla dostaje wiecej miejsca po prawej). */
.woocommerce form .show-password-input { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; right: .2em; }
.woocommerce form .password-input input[type="password"] { padding-right: 3rem; }
.woocommerce-LostPassword a { display: inline-block; padding: 12px 0; }
.woocommerce-form__input-checkbox { width: 18px; height: 18px; vertical-align: middle; accent-color: var(--color-brand-orange); }
/* Breadcrumb na zwykłych stronach/wpisach (poza sklepem — tam jest już
powyższy .woocommerce-breadcrumb z rdzenia WooCommerce). */
.breadcrumb {
font-family: var(--font-heading);
font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
color: var(--fg-faint);
margin-bottom: 32px;
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin: 0 8px; color: var(--fg-faint); }
.breadcrumb a { color: var(--fg-muted); }
@media (hover: hover) and (pointer: fine) {
.breadcrumb a:hover { color: var(--color-brand-orange); }
}
.woocommerce div.product { background: transparent; }
.woocommerce div.product div.images {
background: transparent;
border: none;
padding: 0;
}
/* =========================================================================
GALERIA PRODUKTU - ZDJĘCIE WYPEŁNIA POLE, BEZ RAMEK
Zgłoszenie właściciela: „są jakieś ramki i zdjęcia nachodzą na siebie
w podglądzie". Zmierzone w przeglądarce - dwie różne przyczyny, obie
wyglądające jak ramka:
1. Pojemnik miał `padding: 6%` na białym tle, czyli około 38 px białej
obwódki dookoła zdjęcia przy szerokości 634 px. To ona wyglądała jak
ramka i to przez nią zdjęcie nie wypełniało pola galerii.
2. Miniatury miały `border: 1px` KAŻDA i stykały się bez odstępu
(60 → 218 → 377 przy szerokości 158), więc sąsiadujące krawędzie
zlewały się w ciągłe pasy - stąd wrażenie, że podglądy nachodzą
na siebie.
Czego NIE było, choć tak wyglądało: suwak galerii działa poprawnie,
zdjęcia główne stoją obok siebie i nie zachodzą na siebie ani o piksel,
konsola jest czysta.
========================================================================= */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
background: #FFFFFF;
border-radius: var(--radius-3);
/* Bez wewnętrznego odstępu - zdjęcie ma wypełnić całe pole. Zaokrąglenie
rogów trzyma `overflow`, bo obrazek sięga teraz krawędzi. */
padding: 0;
overflow: hidden;
}
/* POWIĘKSZENIE ZDJĘCIA NAD WSZYSTKIM (audyt iOS 2026-09-26).
Okno PhotoSwipe (lupa na zdjęciu) ma z-index 1500, a pasek „Dodaj do
koszyka" na telefonie 2147483000 - musi stać nad sekcjami z `.et-grain`.
Przy otwartym zdjęciu pasek zasłaniał jego dół i zbierał dotknięcia
(zmierzone na 393 px: `elementFromPoint` w pasie 603-659 zwracał przycisk
paska, nie okno). Okno pełnoekranowe idzie nad pasek. */
.pswp { z-index: 2147483001; }
/* PRZESKOK UKLADU PRZY STARCIE GALERII (audyt R10: CLS 0,2-0,4 na pudelku).
Zmierzone na osi czasu (390 px, 4G): flexslider najpierw daje wrapperowi
`width: 400%`, a slajdom szerokosc nadaje dopiero po `load`. W miedzyczasie
slajd jest tak szeroki jak wrapper, zdjecie z `width: 100%` roslo do
1336 px i spychalo `.summary` o 1340 px w dol - a potem z powrotem.
Dopoki slajd nie ma wlasnego `style`, dostaje 1/4 wrappera, czyli
dokladnie szerokosc galerii, i `float: left` (to samo, co za chwile wpisze
flexslider) - bez niego slajdy o szerokosci 25 % staly jako bloki jeden pod
drugim. Po nadaniu stylu regula przestaje pasowac. */
.woocommerce-product-gallery__wrapper[style*="400%"] > .woocommerce-product-gallery__image:not([style]) { width: 25%; float: left; display: block; }
/* Dwa mniejsze przeskoki (po 0,08) zostawaly po powyzszym: przed startem
slidera WooCommerce pokazuje 2. zdjecie jako pasek 25 % szerokosci pod
pierwszym, a po starcie ten pasek znika i w jego miejsce wchodza miniatury
(`.flex-control-thumbs`, 72-104 px + 12 px odstepu). Chowamy pasek od razu
i rezerwujemy pod miniatury dokladnie tyle, ile zajma - tylko gdy zdjec
jest wiecej niz jedno i tylko dopoki miniatur jeszcze nie ma. Slajdy 2+
sa schowane, DOPOKI wrapper nie dostanie szerokosci procentowej: flexslider
nadaje slajdom `style` (334 px, float) chwile PRZED `width: 400%` wrappera
i przez ok. 0,5 s lezaly jeden pod drugim (zmierzone na osi czasu). `!important`
przebija wpisane `display: block`. Zmierzone: CLS pudelka 0,396 -> 0 (390 px, 4G). */
.woocommerce-product-gallery__wrapper:not([style*="%"]) > .woocommerce-product-gallery__image:nth-child(n+2) { display: none !important; }
.woocommerce div.product div.images.woocommerce-product-gallery:has(.woocommerce-product-gallery__image:nth-child(2)):not(:has(.flex-control-thumbs)) { padding-bottom: calc(clamp(72px, 15%, 104px) + 12px); }
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
/* `cover`, a nie `fill`: zdjęcie o innych proporcjach niż kwadratowe pole
byłoby przy `fill` ROZCIĄGNIĘTE, i to bez żadnego ostrzeżenia. */
object-fit: cover;
width: 100%;
height: 100%;
display: block;
border-radius: 0;
}
.woocommerce div.product div.images .flex-control-thumbs {
/* Odstęp między podglądami zamiast stykających się krawędzi. */
display: flex;
/* ZAWIJAMY do kolejnych rzędów. Kolejne zdjęcia produktu mają dokładać
kwadraciki POD spodem, a nie wypychać rząd poza kadr.
Uwaga dla czytającego: zawijanie działa poprawnie WYŁĄCZNIE dlatego,
że podglądy mają stały rozmiar (`flex: 0 0 auto` niżej). Przy
`flex: 1 1 0` dwa pierwsze rozdymały się do połowy szerokości pola,
a trzeci spadał sam do drugiego rzędu. */
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
padding: 0;
}
.woocommerce div.product div.images .flex-control-thumbs li {
/* STAŁY, NIEWIELKI ROZMIAR - podgląd ma być podglądem.
Rozciąganie ich po równo na szerokość pola dawało przy dwóch zdjęciach
dwa kafle po 312 px, czyli prawie tak duże jak zdjęcie główne. Liczba
zdjęć bywa różna dla różnych produktów, więc rozmiar nie może od niej
zależeć. */
flex: 0 0 auto;
width: clamp(72px, 15%, 104px);
margin: 0;
float: none;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
border-radius: var(--radius-3);
/* BEZ OBRAMOWANIA. Wybrany podgląd poznaje się po pełnej jasności,
a nie po ramce - ramka przy stykających się kafelkach dawała pasy. */
border: 0;
opacity: .55;
object-fit: cover;
width: 100%;
aspect-ratio: 1;
display: block;
transition: opacity .2s var(--ease);
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.woocommerce div.product div.images .flex-control-thumbs li img:hover { opacity: 1; }
}
/* Lupa galerii: 36 px z WooCommerce, cel dotyku 44 px. `content-box` +
wypelnienie 4 px powieksza pole, `background-clip` zostawia biale kolo
w dawnym rozmiarze; ikona (pseudoelementy WooCommerce) przesunieta o te 4 px. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { padding: 4px; background-clip: content-box; }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before { left: 13px; top: 13px; }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after { left: 26px; top: 23px; }
.woocommerce div.product .product_title {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: .04em;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
font-family: var(--font-heading);
font-size: 26px; font-weight: 600;
color: var(--color-brand-orange);
}
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--fg-muted); }
.woocommerce div.product form.cart { margin: 24px 0; display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.woocommerce div.product form.cart div.quantity .qty {
background: var(--bg-input);
border: 1px solid var(--border-input);
border-radius: var(--radius-3);
color: var(--fg-default);
height: 46px;
width: 72px;
font-family: var(--font-heading);
font-size: 16px; /* bylo 13,33 px z arkusza przegladarki - zoom na iOS */
/* Wypełnienie z arkusza przeglądarki było inne na każdym telefonie:
iPhone 3,2/8 px, Chrome 1/2 px - cyfra stała w innym miejscu pola
(audyt iOS 2026-09-26). */
padding: 0 10px;
}
/* Produkt sprzedawany pojedynczo (subskrypcja) ma zamiast pola ilości ukryte
pole i etykietę dla czytników. Pusty `div.quantity` (0x0) był jednak
elementem flex: margines 4 px z WooCommerce i odstęp 12 px przesuwały
przycisk zakupu - na 393 px stał na x=44 zamiast na linii kolumny 28. */
.woocommerce div.product form.cart div.quantity:not(:has(input:not([type="hidden"]))) { display: none; }
.woocommerce div.product form.cart .button { height: 46px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
padding: 0; margin: 48px 0 0;
border-bottom: 1px solid var(--border-default);
display: flex; gap: 4px;
/* Cztery zakładki (opis, opinie, dostawa, bezpieczeństwo produktu) nie
mieszczą się w 390 px, a WooCommerce dokłada `overflow: hidden` -
bez zawijania czwarta leżała poza ekranem i była nieosiągalna
(audyt D1, GPSR jest wymagane prawem). */
flex-wrap: wrap;
overflow: visible;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--border-default); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: transparent;
border: 0; border-radius: 0;
margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-family: var(--font-heading);
font-size: 13px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
color: var(--fg-muted);
padding: 12px 18px;
border-bottom: 2px solid transparent;
}
/* Aktywna zakładka musi zdjąć BIAŁE TŁO z woocommerce.css.
Reguła motywu wyżej zeruje tło na `li`, ale WooCommerce maluje
`li.active` - jedna klasa więcej, więc wygrywa specyficznością i na
ciemnej stronie zostawał biały prostokąt z pomarańczowym napisem
(kontrast 2,28 - poniżej progu czytelności). Dlatego `li.active`
trzeba wyzerować osobno, a nie liczyć na regułę dla `li`. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
background: transparent;
border-bottom-color: transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--color-brand-orange);
border-bottom-color: var(--color-brand-orange);
}
/* ZAKŁADKI NA TELEFONIE: RÓWNA SIATKA DWÓCH KOLUMN (zgłoszenie #9).
W jednym rzędzie cztery zakładki mieszczą się dopiero od ok. 760 px.
Zawijane jak tekst dawały na iPhonie 393 px trzy nierówne rzędy, każdy
napis wcięty o 34 px (16 px `padding` na `li` z woocommerce.css + 18 px
na `a`), a podkreślenie aktywnej wystawało po 18 px z obu stron napisu
i wisiało między rzędami.
Przewijany pas odrzucony z tego samego powodu co w nawigacji konta:
czwarta zakładka („Bezpieczeństwo produktu”, wymagana prawem - audyt D1)
stałaby za krawędzią ekranu ucięta w pół słowa, a to czyta się jak
usterka, nie jak zachęta do przesunięcia.
Siatka 2 × 2 mieści wszystko od 320 px: każda zakładka to równa komórka
z własną kreską u dołu, aktywna ma pod całą komórką kreskę pomarańczową,
napis stoi na środku - nic nie jest wcięte ani przesunięte. Za długi napis
łamie się na dwa wyważone wiersze („Bezpieczeństwo / produktu”) zamiast
wychodzić poza komórkę. Nieparzysta liczba zakładek (np. trzy) - ostatnia
bierze cały rząd, bez pustej dziury. */
@media (max-width: 767px) {
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
border-bottom: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { display: flex; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 8px 6px;
text-align: center;
line-height: 1.25;
text-wrap: balance;
border-bottom: 1px solid var(--border-default);
}
/* Druga kreska cieniem, nie grubszą ramką - komórki nie skaczą o 1 px. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
border-bottom-color: var(--color-brand-orange);
box-shadow: inset 0 -1px 0 var(--color-brand-orange);
}
}
.woocommerce div.product .woocommerce-tabs .panel { margin-top: 24px; color: var(--fg-muted); }
.related.products > h2,
.upsells.products > h2 { margin-top: 72px; }
/* --- WooCommerce: koszyk / checkout ---------------------------------------- */
.woocommerce table.shop_table {
border: 1px solid var(--border-default);
border-radius: var(--radius-3);
border-collapse: separate;
background: var(--bg-surface);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: var(--border-default) !important; color: var(--fg-default); }
.woocommerce table.shop_table th {
font-family: var(--font-heading);
font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
color: var(--fg-muted);
}
.woocommerce a.remove { color: var(--fg-muted) !important; }
/* BEZ zapytania o kursor, inaczej niż reszta najechań (audyt iOS 2026-09-26):
ta reguła GASI czerwone kółko z białym krzyżykiem z `woocommerce.css`
(`a.remove:hover`), które na iPhonie przykleiłoby się po dotknięciu. */
.woocommerce a.remove:hover { color: var(--color-danger) !important; background: transparent; }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce form.checkout .woocommerce-billing-fields,
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
background: var(--bg-surface);
border-radius: var(--radius-3);
}
.woocommerce-checkout #payment div.payment_box { background: var(--color-ink-3); color: var(--fg-muted); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--color-ink-3); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--border-default); }
/* Formularze
BEZ `select` i BEZ skrótu `background:`. Ta reguła stoi w pliku po regule
list rozwijanych wyżej i ma tę samą szczegółowość, więc skrót zerował
tamtej strzałkę-obrazek (`background-image`), a `padding: 12px 14px`
zabierał 40 px, które tamta zostawia na strzałkę. Każda lista
`.woocommerce form .form-row select` w sklepie wyglądała przez to jak
zwykłe pole tekstowe, bez znaku, że da się ją rozwinąć - „Twój pas
w BJJ” przy rejestracji i w „Szczegółach konta” (2026-09-26). Listy mają
wymiary i kolory w swojej regule, tu nie potrzebują niczego. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single,
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea {
background-color: var(--bg-input);
border: 1px solid var(--border-input);
border-radius: var(--radius-3);
color: var(--fg-default);
padding: 12px 14px;
font-family: var(--font-body);
font-size: 16px;
}
.woocommerce form .form-row input.input-text:focus,
input:focus, textarea:focus {
border-color: var(--color-brand-orange);
}
.woocommerce form .form-row label { color: var(--fg-muted); font-size: 14px; }
/* Komunikaty */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
background: var(--bg-surface);
color: var(--fg-default);
border-top-color: var(--color-brand-orange);
border-radius: var(--radius-3);
}
.woocommerce-error { border-top-color: var(--color-danger); }
.woocommerce-message::before { color: var(--color-success); }
.woocommerce-info::before { color: var(--color-info); }
/*
* WooCommerce daje przyciskowi w komunikacie `float: right` i nie ma dla
* niego żadnej reguły na wąskie ekrany — na telefonie tekst oblewał przycisk
* i całość się rozjeżdżała. Odpinamy float zamiast przestawiać komunikat na
* flex: `::after` w rdzeniu to clearfix (`display: table`), który jako
* element flex dokładałby pusty odstęp.
*/
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
float: none;
display: inline-block;
vertical-align: middle;
margin-left: 12px;
}
@media (max-width: 560px) {
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button { display: block; width: fit-content; margin: 12px 0 0; }
}
/*
* TE SAME REGUŁY RAZ JESZCZE, Z OPAKOWANIEM `.woocommerce` W SELEKTORZE.
*
* Powyższe nie działały tam, gdzie są najbardziej potrzebne - na stronie
* konta. `woocommerce-layout.css` niesie `.woocommerce .woocommerce-info
* .button { float: right }`, czyli TRZY klasy, a reguła wyżej ma dwie
* i przegrywa niezależnie od kolejności plików. Na stronach bez opakowania
* `.woocommerce` tamta wersja działała i dlatego usterki nikt nie zauważył.
*
* Jak to wyglądało na telefonie: przycisk odpływał w prawo, a tekst oblewał
* go wąską kolumną i łamał się w środku wyrazu („Potwie" / „rdź").
*
* Komunikat staje się kolumną, a przycisk dostaje `order: 2`, bo
* w znaczniku WooCommerce stoi PRZED tekstem - bez tego wylądowałby nad
* komunikatem, który ma tłumaczyć, po co ten przycisk.
*
* `::after` to clearfix rdzenia (`display: table`); w kolumnie flex byłby
* pustym elementem dokładającym odstęp, więc go wyłączamy. `::before`
* (ikona) jest pozycjonowany bezwzględnie, więc elementem flex nie zostaje
* i zostaje nietknięty.
*/
@media (max-width: 560px) {
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
display: flex;
flex-direction: column;
align-items: stretch;
}
.woocommerce .woocommerce-message::after,
.woocommerce .woocommerce-info::after,
.woocommerce .woocommerce-error::after { display: none; }
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button {
float: none;
order: 2;
width: 100%;
margin: 12px 0 0;
justify-content: center;
}
}
/* --- About ----------------------------------------------------------------- */
.about { padding: var(--et-space) 0; border-top: 1px solid var(--border-default); background: var(--color-ink-1); }
.about-inner {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: 64px;
align-items: center;
}
.about img.mark { width: 100%; max-width: 360px; margin: 0 auto; display: block; }
.about-copy h2 { margin-bottom: 24px; }
.about-copy h3 {
font-family: var(--font-heading);
font-size: 16px; font-weight: 600;
letter-spacing: .08em;
margin: 28px 0 8px;
}
.about-copy p { color: var(--fg-muted); margin: 0 0 12px; }
/* --- Wpisy / strony --------------------------------------------------------- */
.entry { max-width: 760px; margin: 0 auto 48px; }
.entry-title a { color: var(--color-bone-0); }
.entry-content {
color: var(--fg-muted);
/* Słowo dłuższe niż kolumna łamie się na jej krawędzi, zamiast wyjść poza
ramkę i ekran (audyt iOS 2026-09-26): wykropkowane pola formularza
odstąpienia na „Zwroty i reklamacje" miały 498 px w kolumnie 287 px,
to samo grozi adresom i linkom wklejonym w edytorze. `break-word`, nie
`anywhere` - nie zmienia szerokości tabel i kolumn liczonej z treści. */
overflow-wrap: break-word;
}
.entry-content a { color: var(--color-brand-orange); }
.entry-content h2, .entry-content h3 { margin-top: 1.4em; }
/* NAGŁÓWKI ARTYKUŁU: NIGDY JUSTOWANE, ZAWSZE ZE ZBALANSOWANYMI WIERSZAMI.
Treść artykułów przychodzi z edytora owinięta w `
`, co dziedziczyły także nagłówki - dwuwierszowy tytuł miał
pierwszy wiersz rozciągnięty na całą kolumnę, z dziurami między wyrazami
(zgłoszenie właściciela 2026-09-23, `/dlaczego-tejpowac/`). Reguła postawiona
na samym nagłówku wygrywa z wartością dziedziczoną po rodzicu, więc żadne
`!important` nie jest tu potrzebne.
`text-wrap: balance` wyrównuje długość wierszy i przy okazji sam łamie
tytuły po dwukropku, bo to właśnie tam wiersze wychodzą najrówniejsze.
Zmierzone na tej stronie, 390 px:
przed: „Kompleksowe wsparcie: Metoda" / „Podwójnego X-Tapingu"
po: „Kompleksowe wsparcie:" / „Metoda Podwójnego X-Tapingu"
Dlatego NIE wstawiamy twardych ` ` do treści: krótki tytuł, który mieści
się w jednym wierszu („Metoda Ochronna: „Buddy Taping""), zostaje w jednym,
a nie dostaje łamania na siłę. */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
text-align: left;
text-wrap: balance;
}
@media (max-width: 640px) {
/* SKALA NAGŁÓWKÓW NA TELEFONIE.
`h2` z reguły bazowej ma dół `clamp()` na 1.9rem (30,4 px). Przy kolumnie
334 px pytanie „Jak profesjonalnie stabilizować palce?" miało wtedy 442 px
i łamało się na dwa wiersze.
Sam stały rozmiar nie wystarczy, bo kolumna zwęża się razem z ekranem:
21,6 px mieści to pytanie na 390 px (313 px w kolumnie 334), ale już nie
na 360 px (kolumna 304). Stąd człon `vw`: wysokość pisma idzie za
szerokością kolumny, a `clamp()` trzyma ją między 16 a 21,6 px.
`h3` skaluje się tak samo, żeby hierarchia nie odwróciła się na wąskim
ekranie i żeby balans dalej łamał tytuły po dwukropku. */
.entry-content h2 { font-size: clamp(1rem, calc(6.3vw - 3.5px), 1.35rem); }
.entry-content h3 { font-size: clamp(.9rem, calc(5.35vw - 3px), 1.15rem); }
/* PODZIAŁ TYTUŁU DOKŁADNIE PO DWUKROPKU.
Obie części (`inc/typografia.php`) stają się `inline-block`, czyli
nierozrywalnymi kawałkami: mieszczą się obok siebie - tytuł zostaje
w jednym wierszu; nie mieszczą - druga schodzi w całości niżej, więc
podział wypada po dwukropku. Na szerokim ekranie oba `span`-y są zwykłym
tekstem i nie zmieniają niczego. */
.entry-content h2 .et-wstep,
.entry-content h2 .et-reszta,
.entry-content h3 .et-wstep,
.entry-content h3 .et-reszta { display: inline-block; }
/* Tekst wyrównany do lewej: w kolumnie 334 px justowanie bez dzielenia
wyrazów (a polszczyzna dzieli się u nas `hyphens: manual`) zostawia rzeki
białych dziur. Na szerokim ekranie zostaje tak, jak ustawił autor. */
.entry-content p,
.entry-content li { text-align: left; }
}
/* --- Film z YouTube: fasada do kliknięcia (2026-09-27) ----------------------
Decyzja właściciela: film „w trybie bez ciasteczek, ładowany dopiero po
kliknięciu”. Znaczniki robi `inc/youtube-facade.php` (każda ramka YouTube
w treści), ramkę youtube-nocookie wstawia `egotape.js` po kliknięciu.
Pudełko ma proporcje 16:9 z `aspect-ratio` i ZOSTAJE po kliknięciu -
ramka wchodzi w to samo miejsce, więc treść pod filmem nie skacze.
Wcześniej ramka 720x405 na telefonie ściskała się do 356x405 (szerokość
z `max-width: 100%`, wysokość z atrybutu) i film miał czarne pasy.
Wszystko jest w jednym `