/*
Theme Name: Sklep — motyw potomny Storefront
Theme URI: https://monaltro.pl
Description: Motyw potomny Storefronta dla instancji sklepów projektu e-commerce. Kolory pochodzą z pliku instancji (zmienne BRAND_*) i są wstrzykiwane jako zmienne CSS przez functions.php — ten arkusz nie zawiera żadnej wartości konkretnej marki.
Author: Monaltro
Template: storefront
Version: 1.0
Text Domain: ecom-storefront
*/

/* ---------------------------------------------------------------------------
   Typografia
   Kroje strony firmowej, serwowane z własnego katalogu (fonts/*.woff2).
   Hostowanie u siebie nie jest tu preferencją, tylko warunkiem: nagłówek CSP
   instancji ma font-src 'self', więc font z CDN Google zostaje odcięty i sklep
   spada na krój systemowy. Rejestracja @font-face: functions.php.
   --------------------------------------------------------------------------- */

body,
button,
input,
select,
textarea {
    font-family: var(--sklep-font-sans);
}

body {
    background-color: var(--sklep-bg);
    color: var(--sklep-fg);
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.site-title a,
.widget-title,
.woocommerce-loop-product__title,
.entry-title {
    color: var(--sklep-fg);
    font-family: var(--sklep-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.18;
}

/* Mikroetykieta: wersaliki w kroju maszynowym z rozstrzeleniem. Ten sam element
   prowadzi sekcje na stronie firmowej i na okładkach e-booków. */
.sklep-nadtytul {
    color: var(--sklep-accent-text);
    font-family: var(--sklep-font-mono);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    margin: 0 0 0.6em;
    text-transform: uppercase;
}

.sklep-naglowek {
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    margin: 0 0 1.2em;
}

/* Wyróżniony fragment nagłówka — kursywa w akcencie, nigdy podkreślenie.
   Zapis w treści: |fragment w kreskach| (patrz inc/strona-glowna.php). */
.sklep-akcent {
    color: var(--sklep-accent);
    font-style: italic;
}

/* Tekst drugorzędny — opisy, metadane, nagłówki kolumn */
.woocommerce-breadcrumb,
.product_meta,
.posted_in,
.woocommerce-result-count,
.site-footer .widget_text {
    color: var(--sklep-fg-dim);
}

/* ---------------------------------------------------------------------------
   Akcent i odnośniki
   Dwa tokeny akcentu, nie jeden: --sklep-accent dla dużych elementów i teł,
   --sklep-accent-text dla tekstu poniżej 18 px. Marka bywa jasna i ten sam
   odcień, który przechodzi kontrast 3:1 jako duży napis, wykłada się na
   4.5:1 wymaganym dla zwykłego tekstu.
   --------------------------------------------------------------------------- */

a {
    color: var(--sklep-accent-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover,
a:focus {
    color: var(--sklep-accent);
}

/* Widoczny fokus klawiaturowy — Storefront domyślnie daje ledwie widoczny */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
    outline: 3px solid var(--sklep-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Nagłówek strony
   --------------------------------------------------------------------------- */

.site-header {
    background-color: var(--sklep-bg);
    border-bottom: 1px solid var(--sklep-line);
    padding-top: 1.4em;
    padding-bottom: 1.4em;
}

/* --- Znak sklepu: lockup poziomy ------------------------------------------
   Sygnet + logotyp adresowy + podpis. Ten sam układ i te same wartości
   typograficzne co logotyp strony firmowej: Fraunces w wersji ZMIENNEJ,
   grubość 500, tracking -0.02em, 28 px na telefonie i 32 px od tabletu w górę.
   Grubości 500 nie ma w statycznym Fraunces72pt, którym złożona jest reszta
   nagłówków — stąd osobna zmienna --sklep-font-znak (patrz functions.php).
   Markup buduje inc/znak.php; w tym arkuszu nie ma żadnej nazwy własnej. */

.site-header .sklep-lockup {
    align-items: center;
    display: inline-flex;
    gap: 0.75rem;
    text-decoration: none;
}

.sklep-sygnet {
    display: block;
    flex: 0 0 auto;
    overflow: visible;
}

/* Trzy ściany sześcianu = trzy wartości z palety. Prawa ściana to ten sam
   kolor co lewa, przygaszony — bryła czyta się jako trójwymiarowa bez
   ani jednego gradientu. */
.sklep-sygnet__gora  { fill: var(--sklep-accent); }
.sklep-sygnet__lewo  { fill: var(--sklep-fg); }
.sklep-sygnet__prawo { fill: var(--sklep-fg); opacity: 0.55; }

.sklep-lockup__tekst {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Storefront nadaje .site-title własny rozmiar i marginesy — zerujemy je tutaj,
   bo o wielkości logotypu decyduje wzorzec marki, a nie motyw nadrzędny. */
.site-header .site-title.sklep-znak {
    font-family: var(--sklep-font-znak);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
    text-transform: none;
}

@media (min-width: 768px) {
    .site-header .site-title.sklep-znak {
        font-size: 32px;
    }
}

.sklep-znak__rdzen {
    color: var(--sklep-fg);
}

/* Kropka kursywą i lżejsza — ta sama figura co w logotypie firmowym.
   Fraunces zmienne nie ma osobnego kroju kursywy, więc przeglądarka pochyla
   go sama; dokładnie tak samo dzieje się na stronie firmowej. */
.sklep-znak__kropka {
    color: var(--sklep-fg);
    font-style: italic;
    font-weight: 400;
}

.sklep-znak__akcent {
    color: var(--sklep-accent);
}

.site-header .sklep-lockup:hover .sklep-znak__rdzen {
    color: var(--sklep-accent);
}

/* Podpis w kroju maszynowym, wersalikami — mikroetykieta, nie zdanie. */
.site-header .site-description,
.sklep-lockup__podpis {
    color: var(--sklep-fg-dim);
    display: block;
    font-family: var(--sklep-font-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.22em;
    line-height: 1.4;
    margin: 0;
    text-transform: uppercase;
}

.storefront-primary-navigation {
    background-color: transparent;
}

.main-navigation ul li a {
    color: var(--sklep-fg);
    font-weight: 500;
}

.main-navigation ul li:hover > a,
.main-navigation ul li.current-menu-item > a {
    color: var(--sklep-accent-text);
}

/* ---------------------------------------------------------------------------
   Przyciski
   --------------------------------------------------------------------------- */

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: var(--sklep-accent);
    color: var(--sklep-on-accent);
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.7em 1.3em;
    transition: background-color 0.15s ease-in-out;
}

button:hover,
.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: var(--sklep-accent-text);
    color: var(--sklep-on-accent);
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: var(--sklep-secondary);
    color: var(--sklep-on-accent);
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background-color: var(--sklep-fg);
    color: var(--sklep-on-accent);
}

/* ---------------------------------------------------------------------------
   Produkty
   --------------------------------------------------------------------------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.05em;
    font-weight: 600;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--sklep-fg);
    font-weight: 700;
}

/* Obniżka: cena aktualna ma dominować — spójnie z paskiem sticky add-to-cart
   Storefronta (przekreślona wyciszona, bieżąca pogrubiona). Bez tych reguł
   Storefront nadaje `ins` wagę 600 (reguła `mark,ins`), przez co przy
   pogrubionym całym `p.price` cena promocyjna wychodziła CIEŃSZA od
   przekreślonej regularnej (zgłoszenie operatora 2026-08-30). */
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
    font-weight: 400;
    opacity: 0.55;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
    font-weight: 700;
}

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
    background-color: var(--sklep-accent);
    color: var(--sklep-on-accent);
    border-radius: 999px;
    font-weight: 600;
    min-height: auto;
    min-width: auto;
    line-height: 1;
    padding: 0.45em 0.9em;
}

.woocommerce ul.products li.product a img {
    border-radius: 8px;
}

/* Pola formularzy — koszyk, zamówienie, formularz odstąpienia */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
    background-color: #fff;
    border: 1px solid var(--sklep-line);
    border-radius: 6px;
    color: var(--sklep-fg);
    padding: 0.6em 0.75em;
}

/* ---------------------------------------------------------------------------
   Komunikaty WooCommerce
   --------------------------------------------------------------------------- */

/* Storefront wylicza kolor tekstu komunikatów z palety przycisków, a nie z tła
   samego komunikatu. Przy jasnym przycisku daje to biały tekst na białym tle —
   komunikat „Nie znaleziono produktów" znika, choć jest w kodzie strony.
   Ustawiamy wszystkie trzy warstwy jawnie, zamiast liczyć na wyliczenie. */
/* Podwojona klasa podnosi specyficzność do 0-2-0. Storefront ustawia tu biel
   regułą, którą zwykłe .woocommerce-info przegrywa; to tańsze niż !important
   i nie blokuje dalszych nadpisań. */
.woocommerce-message.woocommerce-message,
.woocommerce-info.woocommerce-info,
.woocommerce-error.woocommerce-error {
    background-color: #fff;
    color: var(--sklep-fg);
    border-top: none;
    border-left: 4px solid var(--sklep-accent);
    border-radius: 6px;
    /* Storefront pozycjonuje ikonę w ::before wewnątrz lewego marginesu.
       Nasza krawędź zabiera jej część, więc tekst trzeba odsunąć — inaczej
       ikona nachodzi na pierwszą literę. */
    padding-left: 3.2em;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
    color: var(--sklep-accent-text);
}

.woocommerce-error {
    border-left-color: #b3261e;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--sklep-accent);
}

.woocommerce-error::before {
    color: #b3261e;
}

/* ---------------------------------------------------------------------------
   Stopka — odwrócona kolorystyka, jak sekcja ciemna na stronie firmowej
   --------------------------------------------------------------------------- */

.site-footer {
    background-color: var(--sklep-bg-dark);
    color: var(--sklep-footer-text);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer .widget-title {
    color: var(--sklep-footer-heading);
}

/* Specyficzność wyrównana do reguły Storefronta
   `.site-footer a:not(.button):not(.components-button)` — 0-3-1. Sam selektor
   `.site-footer a` ma 0-1-1 i przegrywa, a wtedy odnośniki stopki biorą
   fabryczny kolor motywu nadrzędnego (#333333) zamiast palety instancji:
   ciemna szarość na niemal czarnym tle, czyli praktycznie niewidoczne.
   Wystąpienie później w arkuszu NIE wystarcza — trzeba dorównać selektorem. */
.site-footer a:not(.button):not(.components-button) {
    color: var(--sklep-footer-link);
    text-decoration: none;
}

.site-footer a:not(.button):not(.components-button):hover,
.site-footer a:not(.button):not(.components-button):focus-visible {
    color: var(--sklep-accent);
}

/* Ikony kanałów społecznych są wyjątkiem od reguły wyżej i muszą tu zostać.
   Na hoverze ich kwadrat WYPEŁNIA SIĘ akcentem, więc kontur w kolorze akcentu
   zlewa się z tłem i symbol znika — zostaje sam kolorowy kwadracik. Reguła
   `.sklep-stopka__social a:hover` (0-3-1 razem z .site-footer) przegrywała
   z regułą wyżej (0-4-1); wystąpienie później w arkuszu NIE wystarcza, trzeba
   dorównać selektorem. Zmierzone 2026-08-28 przez CSS.getMatchedStylesForNode:
   stroke ścieżki i background-color obie wychodziły rgb(197, 80, 46). */
.site-footer .sklep-stopka__social a:not(.button):hover,
.site-footer .sklep-stopka__social a:not(.button):focus-visible {
    color: var(--sklep-on-accent);
}

/* --- Stopka rozbudowana ---------------------------------------------------
   Wielki logotyp, cztery kolumny, nota z oznaczeniem przedsiębiorcy. Ten sam
   układ co stopka strony firmowej. Markup: inc/stopka.php.
   --------------------------------------------------------------------------- */

/* Odstępy nad i pod stopką bierze na siebie ten blok, a nie motyw nadrzędny:
   Storefront daje 25,9 px u góry i 59,3 px u dołu, przez co pod notą prawną
   zostawał pas martwego miejsca dwa razy szerszy niż na stronie firmowej.
   Wartości jak w stopce firmowej: 40/40 na telefonie, 60/30 od tabletu w górę. */
.site-footer {
    padding-bottom: 0;
    padding-top: 0;
}

.sklep-stopka {
    /* Jednostka kontenerowa dla logotypu niżej — 1cqw to 1% szerokości TEJ
       kolumny, a nie okna. Bez tego napis liczony z vw wychodziłby poza
       węższy kontener sklepu (1064 px wobec 1376 px strony firmowej). */
    container-type: inline-size;
    padding: 2.5rem 0;
}

@media (min-width: 768px) {
    .sklep-stopka {
        padding: 3.75rem 0 1.875rem;
    }
}

/* Logotyp na całą szerokość kolumny. Rozmiar płynny, bo napis ma dociągać do
   krawędzi zarówno na telefonie, jak i na monitorze — sztywna wartość albo
   zostawiałaby pustkę, albo wypychała napis poza kadr.

   Człon `clamp(2.75rem, 14vw, 16.25rem)` jest PRZEPISANY ZE STRONY FIRMOWEJ
   (44 px / 14vw / 260 px) — dzięki temu przy tej samej szerokości okna napis
   ma dokładnie ten sam rozmiar w pikselach co na monaltro.pl. Poprzednie
   13vw/11rem dawało napis mniejszy o 7% na telefonie i o 32% na monitorze.

   Człon `19cqw` to hamulec: kontener stopki sklepu ma 1064 px, a firmowej
   1376 px, więc od ok. 1430 px szerokości okna wartość firmowa nie zmieściłaby
   się w kadrze. 19% szerokości kolumny zostawia napisowi ~96% miejsca — tyle
   samo, ile zajmuje na stronie firmowej przy jej własnym kontenerze.
   Znak dłuższy niż „monaltro.pl" nie wyleci poza kadr, tylko złamie się
   na dwa wiersze (patrz word-break niżej). */
.sklep-stopka__znak {
    font-family: var(--sklep-font-znak);
    font-size: min(clamp(2.75rem, 14vw, 16.25rem), 19cqw);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 0.85;
    margin: 0 0 clamp(2.5rem, 8vw, 5rem);
    overflow-wrap: break-word;
    word-break: break-word;
}

.sklep-stopka__znak .sklep-znak__rdzen,
.sklep-stopka__znak .sklep-znak__kropka {
    color: var(--sklep-footer-heading);
}

.sklep-stopka__znak .sklep-znak__kropka {
    font-style: italic;
    font-weight: 300;
}

.sklep-stopka__znak .sklep-znak__akcent {
    color: var(--sklep-accent);
}

.sklep-stopka__siatka {
    /* Kolor krawędzi liczony z koloru nagłówków stopki, a nie wpisany na sztywno —
       przy innej palecie linia sama zostaje o ton jaśniejsza od tła. */
    border-top: 1px solid color-mix(in srgb, var(--sklep-footer-heading) 20%, transparent);
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 2rem;
}

@media (min-width: 768px) {
    .sklep-stopka__siatka {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.sklep-stopka__etykieta {
    color: var(--sklep-footer-heading);
    font-family: var(--sklep-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5;
    margin: 0 0 0.75rem;
    opacity: 0.5;
    text-transform: uppercase;
}

.sklep-stopka__tresc {
    color: var(--sklep-footer-text);
    font-size: 0.875rem;
    /* 1.625 (22,75 px przy 14 px) — interlinia bloku adresowego strony firmowej. */
    line-height: 1.625;
}

/* Odnośniki w kolumnach układają się w listę, nie w akapit — każdy w swoim
   wierszu, bez podpunktów. */
.sklep-stopka__tresc a {
    display: block;
    /* Wiersz odnośnika ma 24 px jak na stronie firmowej: 20 px interlinii
       plus 2 px odstępu z każdej strony. Odnośniki mają ciaśniejszą interlinię
       niż otaczający je tekst — tam wiersze łamią się w akapicie, tu każdy
       odnośnik jest osobnym wierszem listy. */
    line-height: 1.42857;
    padding: 0.125rem 0;
}

.sklep-stopka__wizytowka {
    align-items: center;
    display: inline-flex !important;
    gap: 0.375rem;
    margin-top: 0.625rem;
}

.sklep-stopka__social {
    display: flex;
    flex-wrap: wrap;
    /* Kwadrat 36 px i odstęp 4 px, a nie 38/8 jak na stronie firmowej:
       kolumna stopki sklepu ma 242 px (ćwiartka .col-full = 1148 px), a strona
       firmowa operuje na kontenerze 1440 px. Przy wartościach firmowych szósta
       ikona spadała do drugiego wiersza. 6×36 + 5×4 = 236 px. */
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sklep-stopka__social a {
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--sklep-footer-heading) 30%, transparent);
    color: var(--sklep-footer-heading);
    display: inline-flex !important;
    height: 36px;
    justify-content: center;
    padding: 0;
    width: 36px;
}

.sklep-stopka__social a:hover,
.sklep-stopka__social a:focus-visible {
    background-color: var(--sklep-accent);
    border-color: var(--sklep-accent);
    color: var(--sklep-on-accent);
}

/* --- Znaki płatności ------------------------------------------------------
   Pas między siatką kolumn a notą prawną. Świadome odstępstwo od stopki strony
   firmowej: witryna firmowa nie sprzedaje, więc nie ma czego tu deklarować.
   Wchodzi POD kolumny, żeby czwórka kolumn została identyczna co do piksela.

   Wysokość znaku 28 px dobrana do sąsiedniego tekstu 14 px. Znak zostaje
   plikiem SVG w oryginalnych barwach — nie przekolorowujemy cudzego znaku
   towarowego pod paletę sklepu. Zmierzony kontrast na tle stopki: czerwień
   3,66:1, szarość 8,60:1, oba powyżej progu 3:1 dla grafiki.
   --------------------------------------------------------------------------- */

.sklep-stopka__platnosci {
    margin-top: 2.5rem;
}

.sklep-stopka__platnosci-rzad {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
}

/* Storefront narzuca obrazkom `height: auto` — nadpisujemy klasą (0-1-0 wobec
   0-0-1), a atrybut height="28" w znaczniku zostaje jako zapas, gdyby arkusz
   nie doszedł. */
.sklep-stopka__znak-platnosci {
    display: block;
    height: 28px;
    width: auto;
}

.sklep-stopka__platnosci-nota {
    color: var(--sklep-footer-text);
    font-size: 0.875rem;
    line-height: 1.625;
    opacity: 0.75;
}

/* Nota zamykająca: oznaczenie przedsiębiorcy. Świadomie drobna i przygaszona —
   ma być zawsze dostępna, a nie konkurować z treścią sklepu. */
.sklep-stopka__nota {
    color: var(--sklep-footer-text);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--sklep-font-mono);
    font-size: 10px;
    gap: 0.75rem;
    justify-content: space-between;
    line-height: 1.5;
    margin-top: 2.5rem;
    opacity: 0.5;
}

/* ---------------------------------------------------------------------------
   Formularz odstąpienia od umowy (mu-plugin 020-odstapienie.php)
   --------------------------------------------------------------------------- */

.sklep-odst-form {
    background-color: #fff;
    border: 1px solid var(--sklep-line);
    border-radius: 10px;
    padding: 1.5em;
    max-width: 44em;
}

.sklep-odst-form fieldset {
    border: 1px solid var(--sklep-line);
    border-radius: 8px;
    margin: 1em 0;
    padding: 1em 1.2em;
}

.sklep-odst-form legend {
    padding: 0 0.4em;
}

.sklep-odst-form label {
    font-weight: 500;
}

.sklep-odst-form input[type="text"],
.sklep-odst-form input[type="email"],
.sklep-odst-form textarea {
    max-width: 100%;
    width: 26em;
}

/* Komunikaty formularza — muszą się wyróżniać, bo niosą skutek prawny.
   Selektor celowo związany z własną klasą, nie z samym [role="alert"]:
   ten drugi łapie także komunikaty WooCommerce w całym sklepie i dokleja
   im obcy styl (a pustym kontenerom — widoczną ramkę znikąd). */
.sklep-odst-komunikat[role="alert"] {
    border-left: 4px solid var(--sklep-accent);
    padding-left: 0.9em;
}

.sklep-odst-komunikat[role="status"] {
    background-color: #fff;
    border: 1px solid var(--sklep-line);
    border-left: 4px solid var(--sklep-accent);
    border-radius: 8px;
    padding: 1.2em 1.4em;
}

/* ---------------------------------------------------------------------------
   Urządzenia mobilne
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .site-header {
        padding-top: 1em;
        padding-bottom: 1em;
    }

    .sklep-odst-form {
        padding: 1.1em;
    }

    .sklep-odst-form input[type="text"],
    .sklep-odst-form input[type="email"],
    .sklep-odst-form textarea {
        width: 100%;
    }
}

/* ===========================================================================
   SEKCJE STRONY GŁÓWNEJ
   Renderowane przez inc/strona-glowna.php na haku storefront_before_content,
   czyli PRZED kontenerem #content. Dlatego pas tła idzie na pełną szerokość
   okna, a treść zostaje w kolumnie .col-full — jak sekcje na stronie firmowej.
   =========================================================================== */

.sklep-sekcja {
    padding: 3.2rem 0;
}

.sklep-sekcja > .col-full {
    /* .col-full Storefronta ma własny padding poziomy; pionowy zerujemy,
       żeby odstęp sekcji brał się z jednego miejsca. */
    padding-top: 0;
    padding-bottom: 0;
}

/* --- Hero ---------------------------------------------------------------- */

.sklep-hero {
    border-bottom: 1px solid var(--sklep-line);
    padding: 3.6rem 0 3.8rem;
}

.sklep-hero__siatka {
    align-items: center;
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.sklep-hero__siatka--sam-tekst {
    grid-template-columns: minmax(0, 1fr);
    max-width: 44rem;
}

.sklep-hero__tytul {
    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
    margin: 0 0 0.7em;
}

.sklep-hero__opis {
    color: var(--sklep-fg-dim);
    font-size: 1.08rem;
    margin: 0 0 1.8em;
    max-width: 34em;
}

.sklep-hero__akcje {
    margin: 0;
}

/* Półka: okładki trzech najnowszych produktów, lekko nachodzące na siebie.
   Kąty są nieduże celowo — mocniejszy obrót zaczyna wyglądać jak makieta
   z banku zdjęć, a nie jak część tej identyfikacji. */
.sklep-polka {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

.sklep-polka__poz {
    display: block;
    flex: 0 0 auto;
    transition: transform 0.18s ease-out;
    width: 40%;
}

/* Bez własnej ramki: okładka ma ciemne tło i sama tworzy krawędź. Ramka CSS
   dokładałaby drugą linię wokół i całość czytałaby się jak obraz w antyramie,
   a nie jak książka. Zostaje cień i wąski grzbiet z samej grafiki. */
.sklep-polka__poz img {
    border-radius: 3px;
    box-shadow: 0 18px 38px -16px rgba(24, 21, 15, 0.55);
    display: block;
    height: auto;
    width: 100%;
}

/* Zachodzenie dobrane tak, żeby tytuły bocznych okładek zostały czytelne —
   przy większym środkowa zasłaniała pierwsze słowo sąsiadów i półka zamieniała
   się w plamę. */
.sklep-polka__poz:nth-child(1) { transform: rotate(-5deg) translateY(0.9rem); z-index: 1; }
.sklep-polka__poz:nth-child(2) { margin: 0 -5%; transform: translateY(-1rem); z-index: 3; }
.sklep-polka__poz:nth-child(3) { transform: rotate(5deg) translateY(0.9rem); z-index: 2; }

.sklep-polka__poz:hover { transform: translateY(-1.6rem) rotate(0deg); z-index: 4; }

/* --- Pas zaufania -------------------------------------------------------- */

/* Odwrócona kolorystyka jak stopka i ciemna sekcja strony firmowej. Pas jest
   niski celowo: to nie sekcja marketingowa, tylko cztery odpowiedzi na pytania,
   które klient sklepu cyfrowego zadaje przed kliknięciem „kup”. */
.sklep-zaufanie {
    background-color: var(--sklep-secondary);
    color: var(--sklep-footer-text);
    padding: 2rem 0;
}

.sklep-zaufanie__lista {
    display: grid;
    gap: 1.6rem 2.4rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.sklep-zaufanie__lista li {
    margin: 0;
}

.sklep-zaufanie__lista strong {
    color: var(--sklep-footer-heading);
    display: block;
    font-family: var(--sklep-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    margin-bottom: 0.35em;
    text-transform: uppercase;
}

.sklep-zaufanie__lista span {
    display: block;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* --- Kafle kategorii ----------------------------------------------------- */

.sklep-kategorie {
    border-bottom: 1px solid var(--sklep-line);
}

.sklep-kafle {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Liczba kolumn z liczby kafli — klasę nadaje inc/strona-glowna.php. */
.sklep-kafle--kol-1 { grid-template-columns: minmax(0, 1fr); }
.sklep-kafle--kol-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sklep-kafle--kol-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sklep-kafle--kol-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sklep-kafle {
    /* Siatka włosowa zamiast odstępów: karty stykają się krawędziami i dzielą
       jedną linię, jak tabela dyscyplin na stronie firmowej. */
    border-left: 1px solid var(--sklep-line);
    border-top: 1px solid var(--sklep-line);
}

.sklep-kafel {
    border-bottom: 1px solid var(--sklep-line);
    border-right: 1px solid var(--sklep-line);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 9.5rem;
    padding: 1.5rem 1.6rem;
    text-decoration: none;
    transition: background-color 0.15s ease-out;
}

a.sklep-kafel:hover,
a.sklep-kafel:focus {
    background-color: #ffffff80;
}

.sklep-kafel__nr {
    color: var(--sklep-accent);
    font-family: var(--sklep-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sklep-kafel__nazwa {
    color: var(--sklep-fg);
    font-family: var(--sklep-font-display);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: auto;
}

.sklep-kafel__licznik {
    color: var(--sklep-fg-dim);
    font-size: 0.88rem;
}

.sklep-kafel--wkrotce {
    background-color: #ffffff40;
}

.sklep-kafel--wkrotce .sklep-kafel__nazwa {
    color: var(--sklep-fg-dim);
    font-size: 1.05rem;
}

/* --- Nagłówek katalogu --------------------------------------------------- */

.sklep-katalog-naglowek {
    margin: 0.5rem 0 1.8rem;
}

.sklep-katalog-naglowek .sklep-naglowek {
    margin-bottom: 0.4em;
}

/* --- Pas wezwania do kontaktu -------------------------------------------- */

.sklep-cta {
    background-color: var(--sklep-accent);
    color: var(--sklep-on-accent);
    padding: 3.4rem 0;
    text-align: center;
}

.sklep-cta__tytul {
    color: var(--sklep-on-accent);
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    margin: 0 0 0.4em;
}

.sklep-cta__tytul .sklep-akcent {
    color: var(--sklep-on-accent);
}

.sklep-cta__opis {
    margin: 0 auto 1.6em;
    max-width: 34em;
    opacity: 0.92;
    /* Wyrównanie długości wierszy — bez tego ostatni wiersz potrafi zostać
       z samym „do 17:00." (zgłoszenie operatora 2026-08-30). W przeglądarkach
       bez text-wrap: balance łamanie zostaje po staremu. */
    text-wrap: balance;
}

/* Przycisk na tle akcentu musi zmienić kierunek kontrastu — akcent na akcencie
   byłby niewidoczny. */
.sklep-cta .button.sklep-cta__przycisk,
.woocommerce .sklep-cta a.button.sklep-cta__przycisk {
    background-color: var(--sklep-bg);
    color: var(--sklep-accent-text);
}

.sklep-cta .button.sklep-cta__przycisk:hover,
.woocommerce .sklep-cta a.button.sklep-cta__przycisk:hover {
    background-color: var(--sklep-on-accent);
    color: var(--sklep-fg);
}

/* ===========================================================================
   POZYCJE DEMONSTRACYJNE (mu-plugin 070-produkty-demo.php)
   =========================================================================== */

.sklep-demo-plakietka {
    background-color: var(--sklep-secondary);
    border-radius: 999px;
    color: #fff;
    font-family: var(--sklep-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    line-height: 1;
    padding: 0.45em 0.9em;
    position: absolute;
    right: 0.6rem;
    text-transform: uppercase;
    top: 0.6rem;
    z-index: 2;
}

.woocommerce ul.products li.product,
.woocommerce div.product .woocommerce-product-gallery {
    position: relative;
}

/* Galeria produktu: flexslider układa slajdy obok siebie i przy więcej niż
   jednym obrazku sąsiedni wystaje poza kolumnę — na karcie e-booka widać było
   ścięte okładki przyklejone do krawędzi ekranu. */
.woocommerce div.product .woocommerce-product-gallery {
    overflow: hidden;
}

.sklep-demo-plakietka--karta {
    left: 0.6rem;
    right: auto;
}

.sklep-demo-etykieta {
    color: var(--sklep-fg-dim);
    display: inline-block;
    font-family: var(--sklep-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    margin-top: 0.6em;
    text-transform: uppercase;
}

.sklep-demo-info {
    background-color: #ffffff90;
    border-left: 4px solid var(--sklep-secondary);
    color: var(--sklep-fg);
    margin: 1em 0 1.4em;
    padding: 0.9em 1.1em;
}

/* Nota o wymogu konta (mu-plugin 100). Ten sam format co informacja o zapowiedzi,
   bo obie mówią to samo w sensie funkcjonalnym: „zanim klikniesz, wiedz o czymś".
   Różny wygląd sugerowałby różną wagę i kazał czytać uważniej jedną z nich. */
.sklep-konto-nota {
    background-color: #ffffff90;
    border-left: 4px solid var(--sklep-secondary);
    color: var(--sklep-fg);
    font-size: 0.95em;
    margin: 1em 0 1.4em;
    padding: 0.9em 1.1em;
}

/* ===========================================================================
   KARTY PRODUKTÓW — dociągnięcie do siatki włosowej
   =========================================================================== */

.woocommerce ul.products li.product {
    border: 1px solid var(--sklep-line);
    border-radius: 10px;
    padding: 1rem 1rem 1.2rem;
    text-align: left;
    transition: box-shadow 0.15s ease-out;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 10px 26px -14px rgba(24, 21, 15, 0.45);
}

.woocommerce ul.products li.product a img {
    margin-bottom: 0.9em;
}

.woocommerce ul.products li.product .price {
    display: block;
    font-family: var(--sklep-font-mono);
    font-size: 1rem;
    margin-bottom: 0.6em;
}

/* ===========================================================================
   STOPKA — czytelność odnośników
   =========================================================================== */

/* Storefront wypisuje odnośnik polityki prywatności w .site-info własną regułą
   o wyższej specyficzności niż `.site-footer a`, i barwi go kolorem tekstu
   treści (ciemnym) — na ciemnym tle stopki link stawał się praktycznie
   niewidoczny. To nie jest kosmetyka: polityka prywatności musi być łatwo
   dostępna, a nie „technicznie obecna”. Ustawiamy jawnie wszystkie warianty.  */
/* Reguła, z którą trzeba wygrać, brzmi `.site-footer a:not(.button):not(.components-button)`
   — specyficzność 0-3-1. Nasze selektory muszą ją co najmniej wyrównać, inaczej
   przegrywają mimo późniejszej pozycji w arkuszu. Stąd `:not(.button)`. */
.site-footer .site-info a:not(.button),
.site-footer .site-info a:not(.button):visited,
.site-footer a.privacy-policy-link:not(.button),
.site-footer a.privacy-policy-link:not(.button):visited,
.site-footer .storefront-handheld-footer-bar a:not(.button) {
    color: var(--sklep-footer-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-footer .site-info a:not(.button):hover,
.site-footer a.privacy-policy-link:not(.button):hover,
.site-footer .site-info a:not(.button):focus,
.site-footer a.privacy-policy-link:not(.button):focus {
    color: var(--sklep-bg);
}

/* Oznaczenie sprzedawcy zostaje w stopce samo (odnośnik do polityki
   prywatności zdjęty w functions.php — ta sama strona jest już w pasku
   dokumentów i w menu). Jedna linia wyrównana do lewej wyglądała jak resztka
   po usuniętym elemencie, dlatego środek. */
.site-footer .site-info {
    color: var(--sklep-footer-text);
    font-size: 0.92rem;
    text-align: center;
}

/* ===========================================================================
   PASEK DOKUMENTÓW (mu-plugin 040-linki-prawne.php)
   =========================================================================== */

.sklep-dokumenty {
    border-top: 1px solid var(--sklep-line);
    font-size: 0.92rem;
}

/* ===========================================================================
   URZĄDZENIA MOBILNE — sekcje strony głównej
   =========================================================================== */

@media (max-width: 980px) {
    .sklep-zaufanie__lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Klasa `--kol-N` z PHP dotyczy szerokiego ekranu; tutaj musi ustąpić,
       stąd powtórzony selektor podnoszący specyficzność do 0-2-0. */
    .sklep-kafle.sklep-kafle {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .sklep-sekcja {
        padding: 2.2rem 0;
    }
    .sklep-hero {
        padding: 2.4rem 0 2.6rem;
    }
    .sklep-hero__siatka {
        gap: 2.2rem;
        grid-template-columns: minmax(0, 1fr);
    }
    /* Na wąskim ekranie półka idzie POD tekst — okładki nad hasłem zabierają
       cały pierwszy ekran i klient nie wie, na co patrzy. */
    .sklep-hero__grafika {
        order: 2;
        /* Obrót powiększa prostokąt otaczający, więc przy 390 px skrajne okładki
           wychodziły poza ekran i były ucięte pionową krawędzią. Kadr obcina
           tylko nadmiar, a wewnętrzny odstęp zostawia miejsce na cień. */
        overflow: hidden;
        padding: 0 0 1.5rem;
    }
    .sklep-polka {
        max-width: 100%;
    }
    .sklep-polka__poz {
        width: 33%;
    }
    .sklep-polka__poz:nth-child(2) {
        margin: 0 -3%;
    }
    .sklep-zaufanie__lista,
    .sklep-kafle.sklep-kafle {
        grid-template-columns: minmax(0, 1fr);
    }
    .sklep-kafel {
        min-height: 0;
        padding: 1.1rem 1.2rem;
    }
    .sklep-kafel__nazwa {
        margin-top: 0.2rem;
    }
}

/* ===========================================================================
   STRONA KONTAKTU
   Skrót [sklep_kontakt] (inc/kontakt.php). Układ i typografia jak na stronie
   firmowej: po lewej kanały bezpośrednie i mapa, po prawej formularz w ramce.
   Ani jednej wartości marki — treść przychodzi z theme_mods instancji.
   =========================================================================== */

.sklep-kontakt {
    margin: 0 0 2.5rem;
}

.sklep-kontakt__tytul {
    font-size: clamp(2rem, 5.4vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 2.2rem;
}

.sklep-kontakt__siatka {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .sklep-kontakt__siatka {
        gap: 3.5rem;
        /* Formularz szerszy od kolumny kontaktowej: to on jest tu robotą do
           wykonania, dane bezpośrednie są alternatywą. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    }
}

/* --- Kolumna lewa: kanały bezpośrednie ------------------------------------ */

.sklep-kontakt__kanaly {
    font-family: var(--sklep-font-display);
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 1.4rem;
}

/* Selektor celowo złożony (0-3-1). Kanały bezpośrednie mają być czarne i bez
   podkreślenia, jak na stronie firmowej, a Storefront podkreśla odnośniki
   w treści wpisu regułą, którą samo `.sklep-kontakt__kanaly a` przegrywa. */
.sklep-kontakt .sklep-kontakt__kanaly a {
    color: var(--sklep-fg);
    display: block;
    text-decoration: none;
    /* Adres poczty bywa dłuższy niż kolumna — łamiemy go, zamiast pozwolić
       mu rozepchnąć siatkę i wywołać poziomy pasek przewijania. */
    overflow-wrap: anywhere;
}

.sklep-kontakt .sklep-kontakt__kanaly a:hover,
.sklep-kontakt .sklep-kontakt__kanaly a:focus-visible {
    color: var(--sklep-accent);
}

.sklep-kontakt__telefon {
    font-style: italic;
}

.sklep-kontakt .sklep-kontakt__whatsapp {
    align-items: center;
    display: inline-flex;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

/* Znak WhatsAppa w barwie serwisu — jedyny kolor w tym arkuszu spoza palety
   instancji, bo to cudzy znak towarowy, a nie element identyfikacji sklepu. */
.sklep-kontakt__whatsapp svg {
    color: #25d366;
    flex: 0 0 auto;
}

.sklep-kontakt__adres {
    color: var(--sklep-fg-dim);
    font-family: var(--sklep-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    line-height: 1.8;
    margin: 0 0 1.4rem;
    text-transform: uppercase;
}

.sklep-kontakt__mapa {
    border: 1px solid var(--sklep-line);
    display: block;
    line-height: 0;
    overflow: hidden;
    position: relative;
}

.sklep-kontakt__mapa img {
    display: block;
    height: auto;
    width: 100%;
}

.sklep-kontakt__mapa-etykieta {
    background-color: var(--sklep-fg);
    bottom: 10px;
    color: var(--sklep-bg);
    font-family: var(--sklep-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 6px 10px;
    position: absolute;
    right: 10px;
    text-transform: uppercase;
}

/* --- Kolumna prawa: formularz -------------------------------------------- */

.sklep-kontakt__prawa {
    border: 1px solid var(--sklep-line);
    border-radius: 10px;
    padding: clamp(1.3rem, 3vw, 2.2rem);
}

.sklep-kontakt__wstep {
    color: var(--sklep-fg-dim);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 1.6rem;
}

.sklep-kontakt__form {
    display: grid;
    gap: 1.2rem;
}

.sklep-kontakt__form label {
    display: block;
}

.sklep-kontakt__etykieta {
    color: var(--sklep-fg-dim);
    display: block;
    font-family: var(--sklep-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.sklep-kontakt__etykieta b {
    color: var(--sklep-accent-text);
}

/* Pola bez ramki, z samą linią pod spodem — ta sama figura co na stronie
   firmowej. Nadpisujemy globalny styl pól sklepu (biała ramka, zaokrąglenie),
   bo tam chodzi o kasę, a tu o formularz redakcyjny. */
.sklep-kontakt__form input[type="text"],
.sklep-kontakt__form input[type="email"],
.sklep-kontakt__form textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--sklep-fg);
    border-radius: 0;
    color: var(--sklep-fg);
    font-family: var(--sklep-font-display);
    font-size: 1.05rem;
    padding: 0.6rem 0;
    width: 100%;
}

.sklep-kontakt__form textarea {
    resize: vertical;
}

.sklep-kontakt__form input:focus,
.sklep-kontakt__form textarea:focus {
    border-bottom-color: var(--sklep-accent);
    outline: none;
}

/* Storefront maluje każdy <fieldset> na jasnoszaro i obudowuje ramką — w tym
   formularzu wyglądałoby to jak wydzielone okienko w środku okienka. */
.sklep-kontakt .sklep-kontakt__tematy {
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
}

.sklep-kontakt__tematy legend {
    padding: 0;
}

.sklep-kontakt__chipy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sklep-kontakt__chip input {
    /* Poza kadrem, nie `display:none` — pole ukryte tym drugim wypada
       z kolejności tabulacji i wyboru nie da się zrobić z klawiatury. */
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.sklep-kontakt__chip span {
    border: 1px solid var(--sklep-fg);
    cursor: pointer;
    display: inline-block;
    font-family: var(--sklep-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 8px 14px;
    text-transform: uppercase;
}

.sklep-kontakt__chip input:checked + span {
    background-color: var(--sklep-fg);
    color: var(--sklep-bg);
}

.sklep-kontakt__chip input:focus-visible + span {
    outline: 3px solid var(--sklep-accent);
    outline-offset: 2px;
}

/* Selektor złożony celowo: regula `.sklep-kontakt__form label {display:block}`
   kilka linii wyżej ma wyższą specyficzność i spłaszczyłaby ten wiersz —
   pole zgody skleiłoby się z tekstem klauzuli. */
.sklep-kontakt__form .sklep-kontakt__zgoda {
    align-items: flex-start;
    color: var(--sklep-fg-dim);
    display: flex;
    font-size: 0.82rem;
    gap: 0.7rem;
    line-height: 1.5;
}

/* Pole zgody rysujemy sami: natywny kwadracik ma 13 px i przy 16-pikselowym
   tekście wygląda na wyłączony. Rozmiar i kolor z palety, nie z systemu. */
.sklep-kontakt .sklep-kontakt__zgoda input {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--sklep-fg);
    border-radius: 3px;
    cursor: pointer;
    flex: 0 0 auto;
    height: 18px;
    margin: 0.2rem 0 0;
    padding: 0;
    position: relative;
    width: 18px;
}

.sklep-kontakt .sklep-kontakt__zgoda input:checked {
    background-color: var(--sklep-accent);
    border-color: var(--sklep-accent);
}

.sklep-kontakt .sklep-kontakt__zgoda input:checked::after {
    color: var(--sklep-on-accent);
    content: '✓';
    font-size: 12px;
    font-weight: 700;
    left: 50%;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -55%);
}

.sklep-kontakt .sklep-kontakt__zgoda input:focus-visible {
    outline: 3px solid var(--sklep-accent);
    outline-offset: 2px;
}

.sklep-kontakt__gwiazdka {
    color: var(--sklep-fg-dim);
    font-family: var(--sklep-font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    margin: -0.5rem 0 0;
}

/* Pułapka na roboty — poza kadrem, nie `display:none`. */
.sklep-kontakt__pulapka {
    height: 1px;
    left: -9999px;
    position: absolute;
    width: 1px;
}

.sklep-kontakt__form button[type="submit"] {
    justify-self: start;
}

.sklep-kontakt__ok {
    border-left: 4px solid var(--sklep-accent);
    padding-left: 1rem;
}

.sklep-kontakt__ok-tresc {
    font-family: var(--sklep-font-display);
    font-size: 1.3rem;
    margin: 0;
}