/* =====================================================
   Apex Peptides Lab
   woocommerce.css
   Elementy dokładane przez WooCommerce (siatka katalogu,
   koszyk, płatność, konto klienta, formularze) sprowadzone
   do stylistyki z projektu statycznego — ta sama ciemna
   paleta, te same zaokrąglenia, ten sam pomarańczowy akcent.

   Zmienne (--bg, --card, --accent...) pochodzą ze style.css.
   ===================================================== */

/* ==========================================
   SIATKA KATALOGU

   Arkusz woocommerce-layout uklada karty na float
   (li.product ma width:22.05% i margin), co kloci sie z gridem
   z naszego style.css. Nie wypisujemy tego arkusza z kolejki -
   dawaloby to za duzo skutkow ubocznych w koszyku, checkoucie
   i na telefonie - tylko przykrywamy kolidujace reguly.

   Selektory ponizej maja wyzsza swoistosc niz WooCommerce:
   .products-grid dokladany jest do <ul> przez filtr
   woocommerce_product_loop_start (patrz inc/woocommerce.php),
   wiec daje nam czwarta klase w selektorze.

   Sam grid (display i liczba kolumn) pochodzi ze style.css -
   z .products-grid, #all-products-grid i #featured-products-grid.
========================================== */

.woocommerce ul.products.products-grid,
.woocommerce-page ul.products.products-grid,
ul.products.products-grid {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce ul.products.products-grid::before,
.woocommerce ul.products.products-grid::after,
.woocommerce-page ul.products.products-grid::before,
.woocommerce-page ul.products.products-grid::after {
    content: none;
}

.woocommerce ul.products.products-grid li.product,
.woocommerce-page ul.products.products-grid li.product,
ul.products.products-grid li.product {
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
    clear: none;
}

.woocommerce ul.products.products-grid li.product.first,
.woocommerce ul.products.products-grid li.product.last,
.woocommerce-page ul.products.products-grid li.product.first,
.woocommerce-page ul.products.products-grid li.product.last {
    clear: none;
}

/* WooCommerce nadaje nazwie i cenie wlasne odstepy i wyrownanie
   do srodka regula
     .woocommerce ul.products li.product h3 { padding: .5em 0 }
   Poziomy odstep spada wtedy do zera i nazwa produktu dotyka
   krawedzi karty. Przywracamy odstepy z projektu. */
.woocommerce ul.products.products-grid li.product h3,
.woocommerce ul.products.products-grid li.product .price {
    text-align: left;
    margin: 0;
}

.woocommerce ul.products.products-grid li.product h3 {
    padding: 24px 24px 8px;
    font-size: 1.4rem;
}


/* ==========================================
   ZDJECIE NA KARCIE PRODUKTU

   WooCommerce narzuca regule
     .woocommerce ul.products li.product a img { width:100%; height:auto }
   o wyzszej swoistosci niz .product-card-media img ze style.css.
   Skutek: zdjecia o innej proporcji niz kwadrat wylewaja sie poza
   kwadratowe pole karty.

   Ponizsze selektory maja swoistosc wieksza od WooCommerce, wiec
   przywracaja dokladnie to, co bylo w projekcie statycznym:
   kwadratowe pole, cale zdjecie zmieszczone w srodku.
========================================== */

.woocommerce ul.products li.product a.product-card-media img,
.product-card .product-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 22px;
    box-sizing: border-box;
    object-fit: contain;
    box-shadow: none;
}


/* ==========================================
   CALA KARTA KLIKALNA

   Wczesniej odnosnik obejmowal wylacznie zdjecie - nazwa, opis
   i cena byly zwyklym tekstem. Karta wygladala na interaktywna,
   a reagowala tylko w jednym miejscu.

   Odnosnik z nazwy produktu rozciaga sie teraz na cale kafelko
   przez ::after. Lista wariantow i przycisk koszyka leza nad nim,
   wiec dalej dzialaja po swojemu.
========================================== */

.product-card {
    position: relative;
}

.product-card h3 .product-card-link {
    color: inherit;
    text-decoration: none;
}

.product-card h3 .product-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Elementy, ktore musza pozostac samodzielne. */
.product-card .variant-select,
.product-card .apex-karta-zakup,
.product-card .apex-do-koszyka,
.product-card .product-card-media {
    position: relative;
    z-index: 2;
}

/* Nazwa produktu nie zmienia koloru pod kursorem — klient nie chce
   podswietlania kafelkow (09.09). Cala karta pozostaje klikalna. */

/* ==========================================
   PRZYCISK "DODAJ DO KOSZYKA"
   Odpowiednik .product-card button z projektu.
========================================== */

/* ==========================================
   WYBOR LICZBY SZTUK NA KARCIE

   Do 09.09 z listy dalo sie dodac tylko jedna sztuke. Teraz nad
   przyciskiem stoi to samo pole ilosci co w koszyku - minus i plus
   dokleja mu app.js, wiec wyglada i dziala wszedzie tak samo.

   Calosc jest formularzem, bo bez JavaScriptu samo pole niczego by
   nie przeslalo. Odstepy trzyma formularz, nie przycisk - inaczej
   pole i przycisk rozjezdzalyby sie przy roznych szerokosciach kart.
========================================== */

.apex-tylko-czytnik {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.product-card .apex-karta-zakup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0 24px 24px;
}

.product-card .apex-ilosc-karta {
    float: none;
    margin: 0;
}

.product-card .apex-ilosc-karta .apex-ilosc {
    background: var(--card);
}

.product-card .apex-do-koszyka {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 320px;
    margin: 0;
    border: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    padding: 14px 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #111;
    font-weight: 700;
    text-decoration: none;
    transition: .3s;
}

.product-card .apex-do-koszyka:hover {
    transform: translateY(-2px);
    color: #111;
}

.product-card .apex-do-koszyka.loading {
    opacity: .6;
    pointer-events: none;
}





/* Przycisk ma miescic sie w jednej linii - przy waskich kartach
   katalogu "Dodaj do koszyka" lamalo sie na dwa albo trzy wiersze. */
.product-card .apex-do-koszyka {
    white-space: nowrap;
}


/* "ZOBACZ KOSZYK" JAKO PRAWDZIWY PRZYCISK

   Link, ktory WooCommerce dokleja po dodaniu do koszyka, byl zwyklym
   napisem - wygladal jak zepsuty przycisk i nie dawal zadnego sygnalu,
   ze cokolwiek sie stalo. Klient dodal szesc produktow, zanim zauwazyl
   licznik w naglowku (uwaga z 06.09, wieczor).

   Teraz to obrys w kolorze marki, w tym samym rytmie co "Dodaj do
   koszyka". Pojawia sie dopiero po dodaniu, wiec karty w siatce nie
   zmieniaja wysokosci przed pierwszym kliknieciem. */

.product-card a.added_to_cart,
.woocommerce .product-card a.added_to_cart,
.woocommerce ul.products li.product a.added_to_cart {
    display: block;
    margin: 0 24px 24px;
    padding: 11px 16px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: transparent;
    color: var(--accent);
    font-weight: 700;
    font-size: .9rem;
    text-align: center;
    text-decoration: none;
    transition: background .2s, color .2s;
    position: relative;
    z-index: 2;
}

.product-card a.added_to_cart:hover,
.woocommerce .product-card a.added_to_cart:hover {
    background: var(--accent);
    color: #111;
}


/* Zakres cen produktu wariantowego mieści się w jednej linii. */
.product-card strong .woocommerce-Price-amount {
    white-space: nowrap;
}

.product-card del {
    opacity: .55;
    font-size: .8em;
    margin-right: 6px;
}

/* ==========================================
   KARTA PRODUKTU (strona pojedynczego produktu)
========================================== */

.woocommerce div.product {
    color: var(--text);
}

.woocommerce div.product .product_title {
    font-size: 2.2rem;
    margin: 0 0 14px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--accent);
    font-size: 1.8rem;
    font-weight: 700;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--muted);
}

.woocommerce div.product div.images img {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg);
}

.woocommerce div.product form.cart div.quantity {
    margin-right: 12px;
}

.woocommerce-tabs .panel {
    color: var(--muted);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: var(--card);
    border-color: var(--border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--text);
}

/* ==========================================
   PRZYCISK SPECYFIKACJI
   Odsyla do dwustronicowej karty PDF produktu.
========================================== */

.apex-specyfikacja {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 0;
    padding: 13px 22px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    transition: .25s;
}

.apex-specyfikacja:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

.apex-specyfikacja .ikona {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--accent);
}

/* ==========================================
   FORMULARZE, POLA, PRZYCISKI
========================================== */

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.woocommerce .select2-container .select2-selection--single {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    font: inherit;
    height: auto;
}

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
    outline: none;
    border-color: var(--accent);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--text);
    line-height: normal;
    padding: 0;
}

.woocommerce label {
    color: var(--muted);
    font-weight: 600;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #111;
    font-weight: 700;
    border-radius: 999px;
    padding: 14px 26px;
    transition: .3s;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    color: #111;
    transform: translateY(-2px);
}

.woocommerce a.button.wc-backward {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

/* ==========================================
   KOSZYK
========================================== */

.woocommerce table.shop_table {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-collapse: separate;
    color: var(--text);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border-color: var(--border);
    color: var(--text);
}

.woocommerce table.shop_table td.product-name a {
    color: var(--text);
}

.woocommerce table.shop_table img {
    border-radius: 10px;
    background: var(--bg);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
    color: var(--text);
}

.woocommerce .cart-collaterals .cart_totals {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
}

.woocommerce a.remove {
    color: var(--accent) !important;
}

.woocommerce a.remove:hover {
    background: var(--accent);
    color: #111 !important;
}

/* ==========================================
   MINIATURY W KOSZYKU

   Odwzorowanie .cart-row img z projektu statycznego:
   70x70, cale zdjecie w srodku, ciemne tlo.

   WooCommerce wymusza td.product-thumbnail img { width: 32px },
   przez co pionowe zdjecia produktow rozciagaly sie w paski.
========================================== */

.woocommerce table.shop_table td.product-thumbnail img,
.woocommerce-page table.shop_table td.product-thumbnail img,
.woocommerce table.cart td.product-thumbnail img {
    width: 70px;
    height: 70px;
    max-width: none;
    padding: 6px;
    box-sizing: border-box;
    object-fit: contain;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: none;
}

.woocommerce table.shop_table td.product-thumbnail {
    width: 86px;
}

/* Na telefonie WooCommerce chowa kolumne ze zdjeciem
   (shop_table_responsive nadaje jej display:none).
   W projekcie statycznym zdjecie w koszyku bylo widoczne
   takze na malym ekranie - przywracamy je, wysrodkowane
   i nieco wieksze, bo miejsca jest wtedy wiecej. */
@media (max-width: 768px) {

    .woocommerce table.shop_table_responsive tr td.product-thumbnail,
    .woocommerce-page table.shop_table_responsive tr td.product-thumbnail {
        display: block;
        width: auto;
        text-align: center;
        padding: 14px 0 4px;
        border-bottom: 0;
    }

    .woocommerce table.shop_table_responsive tr td.product-thumbnail::before,
    .woocommerce-page table.shop_table_responsive tr td.product-thumbnail::before {
        content: none;
    }

    .woocommerce table.shop_table td.product-thumbnail img,
    .woocommerce-page table.shop_table td.product-thumbnail img {
        width: 96px;
        height: 96px;
        margin: 0 auto;
    }

}

/* ==========================================
   PŁATNOŚĆ (CHECKOUT)
========================================== */

.woocommerce-checkout #payment {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom-color: var(--border);
}

.woocommerce-checkout #payment div.payment_box {
    background: var(--bg2);
    color: var(--muted);
}

.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--bg2);
}

.woocommerce-checkout #payment ul.payment_methods li label {
    color: var(--text);
}

/* ==========================================
   KOMUNIKATY
========================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
    background: var(--card);
    color: var(--text);
    border-top-color: var(--accent);
    border-radius: 12px;
}

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

/* ==========================================
   KONTO KLIENTA
========================================== */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 14px 18px;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: var(--bg2);
    color: var(--accent);
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
}

/* ==========================================
   SORTOWANIE I LICZNIK WYNIKÓW
========================================== */

.woocommerce .woocommerce-result-count {
    color: var(--muted);
}

.woocommerce .woocommerce-ordering select {
    background: var(--bg);
    color: var(--text);
}

/* ==========================================
   ROZBUDOWANA KARTA PRODUKTU

   Sekcje jedna pod druga zamiast zakladek: opis, dane techniczne,
   dokumentacja, zastrzezenie. Jeden uklad na kazdym urzadzeniu.
========================================== */

.produkt-szczegoly {
    clear: both;
    /* Ten sam rytm co reszta projektu — patrz skala w naglowek.css.
       Klient prosil o zmniejszenie i ujednolicenie odstepow wszedzie. */
    margin-top: var(--przerwa-bloku, 22px);
    display: grid;
    gap: var(--przerwa-bloku, 22px);
}

.produkt-sekcja {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
}

.produkt-sekcja h2 {
    margin: 0 0 18px;
    font-size: 1.5rem;
    color: var(--text);
}

.produkt-tresc {
    color: var(--muted);
    line-height: 1.7;
}

/* --- tabela danych technicznych --- */

.produkt-dane {
    width: 100%;
    border-collapse: collapse;
}

.produkt-dane tr {
    border-bottom: 1px solid var(--border);
}

.produkt-dane tr:last-child {
    border-bottom: 0;
}

.produkt-dane th,
.produkt-dane td {
    padding: 13px 0;
    text-align: left;
    vertical-align: top;
    font-size: .95rem;
}

.produkt-dane th {
    width: 38%;
    padding-right: 20px;
    color: var(--muted);
    font-weight: 600;
}

.produkt-dane td {
    color: var(--text);
    font-weight: 600;
}

.produkt-zrodlo {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.6;
}

/* --- zastrzezenie prawne --- */

.produkt-zastrzezenie {
    background: var(--bg2);
    border-color: rgba(255, 138, 0, .25);
}

.produkt-zastrzezenie p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.65;
}

.produkt-zastrzezenie strong {
    color: var(--text);
}

/* --- przypomnienie widoczne tylko dla obslugi sklepu --- */

.produkt-do-uzupelnienia {
    border-style: dashed;
    border-color: rgba(255, 138, 0, .45);
}

.produkt-do-uzupelnienia p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.6;
}

.produkt-do-uzupelnienia a {
    color: var(--accent);
}

@media (max-width: 768px) {

    .produkt-szczegoly {
        margin-top: var(--przerwa-bloku, 18px);
        gap: var(--przerwa-bloku, 18px);
    }

    .produkt-sekcja {
        padding: 22px;
    }

    .produkt-dane th {
        width: 45%;
        padding-right: 12px;
        font-size: .85rem;
    }

    .produkt-dane td {
        font-size: .85rem;
    }

}

/* ==========================================
   KARTA W KATALOGU — UWAGI KLIENTA Z 02.09

   1. Pod nazwa kazdego produktu gramatura albo lista rozwijana.
   2. Ten sam podpis pod kazdym produktem.
   3. Nazwa produktu wszedzie biala.
   4. Mniejszy odstep miedzy podpisem a cena.
========================================== */

.product-card h3,
.product-card h3 .product-card-link {
    color: var(--text);
}

.product-card-gramatura {
    color: var(--muted);
    font-weight: 700;
    letter-spacing: .5px;
}

/* Podpis i gramatura to jeden blok informacji — cena idzie tuz pod nim. */
.product-card p {
    flex: none;
    margin: 0;
}

.product-card .product-card-gramatura {
    padding-top: 4px;
}

.product-card strong {
    padding-top: 10px;
    margin-top: auto;
}


/* ==========================================
   FAQ NA PODSTRONIE

   Pytania w rozwijanych przyciskach, jak na stronie glownej.
   Naglowki dzialow rozdzielaja liste na sekcje.
========================================== */

.legal-content .faq-dzial {
    margin: 28px 0 12px;
    font-size: 1.05rem;
    letter-spacing: 2px;
    color: var(--accent);
}

.legal-content .faq-dzial:first-child {
    margin-top: 0;
}

.legal-content .faq-pozycja {
    margin-bottom: 12px;
}

.legal-content .faq-odpowiedz > *:last-child {
    margin-bottom: 0;
}

/* ==========================================
   UWAGI KLIENTA Z 06.09
========================================== */

/* Nazwa pomocnicza — mniejszy czlon nazwy, jak na etykiecie fiolki.
   Nazwa glowna zostaje bez zmian. */

/* Czlon pomocniczy idzie POD nazwa glowna, tak jak na etykiecie fiolki
   ("HGH FRAG" duzo, "176-191" mniejsze pod spodem). Pierwsza wersja
   stawiala go w tej samej linii - uwaga klienta z 06.09. */

.product-card h3 .product-card-link {
    display: block;
}

.nazwa-pomocnicza {
    display: block;
    margin-top: 2px;
    font-size: .72em;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .04em;
    color: var(--muted);
    white-space: nowrap;
}

.product_title .nazwa-pomocnicza {
    margin-top: 6px;
    font-size: .5em;
}

/* Pole gramatury — uwaga klienta z 10.09: szara ramka w jednej linii
   z nazwa i podpisem nad nia, a napis w srodku odsuniety od krawedzi
   o 1–2 mm. 8 px to okolo 1,5 mm na ekranie telefonu.

   Wersja z 02.09 robila odwrotnie: ramke zostawiala na miejscu,
   a napis dosuwala do linii tekstu paddingiem 2 px — i napis dotykal
   krawedzi. Ramka i tak stoi w linii (ten sam margines 24 px co nazwa
   i podpis), wiec wystarczy oddac napisowi odstep. */

.product-card .variant-select,
#featured-products-grid .product-card .variant-select {
    padding-left: 8px;
    text-indent: 0;
}

/* ==========================================
   STOPKA BLIZEJ TRESCI

   Miedzy ostatnia sekcja a stopka robil sie odstep z dwoch czesci:
   dol sekcji plus gora stopki. Ta sama zasada co przy sasiadujacych
   sekcjach — liczy sie jeden odstep.
========================================== */

.footer {
    padding-top: var(--przerwa-bloku, 22px);
}

/* ==========================================
   BANER ZGODY NA COOKIES

   Na telefonie przyciski byly przyklejone do lewej krawedzi -
   uwaga klienta z 06.09. Teraz zajmuja cala szerokosc panelu,
   a napisy sa wysrodkowane.
========================================== */

.cookie-banner-actions button {
    text-align: center;
    justify-content: center;
}

@media (max-width: 768px) {

    /* Przyciski maja z responsive.css szerokosc 100% i max-width 320 px.
       Przy szerszym panelu zostawaly przez to przy lewej krawedzi -
       wystarczy wysrodkowac je w kontenerze, zamiast rozciagac. */

    .cookie-banner-actions {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

}

/* ==========================================
   KOMUNIKAT "DODANO DO KOSZYKA"

   Sam przycisk "Zobacz koszyk" pojawia sie nisko, przy karcie,
   i przy dlugiej liscie latwo go przeoczyc. Krotki komunikat pod
   naglowkiem mowi wprost, ze cos sie stalo, i kieruje wzrok tam,
   gdzie jest koszyk. Znika sam po dwoch sekundach - nie trzeba
   go zamykac i niczego nie zaslania na dluzej.
========================================== */

.apex-komunikat {
    position: fixed;
    top: 84px;
    left: 50%;
    z-index: 1400;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 32px);
    padding: 12px 20px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--card);
    color: var(--text);
    font-weight: 700;
    box-shadow: var(--shadow);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-10px);
    transition: opacity .2s ease, transform .2s ease;
}

.apex-komunikat.widoczny {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.apex-komunikat .ikona {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--accent);
}

/* Licznik koszyka mrugnieciem potwierdza, ze przybylo. */

@keyframes apex-puls {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.16); }
    100% { transform: scale(1); }
}

.header-actions [data-cart-count].apex-puls {
    animation: apex-puls .45s ease;
}

@media (prefers-reduced-motion: reduce) {

    .apex-komunikat {
        transition: none;
    }

    .header-actions [data-cart-count].apex-puls {
        animation: none;
    }

}

/* ==========================================
   PRZYCISKI WYSRODKOWANE - RESZTA MIEJSC

   Przyciski maja z responsive.css szerokosc 100% i max-width 320 px.
   Wszedzie tam, gdzie kontener ich nie srodkuje, zostawaly przy lewej
   krawedzi. Klient znalazl "Wszystko" pod FAQ; audyt pokazal jeszcze
   przycisk specyfikacji, formularz kontaktowy i okno ustawien cookies.
========================================== */

.faq-wszystko {
    text-align: center;
}

/* Przycisk specyfikacji jest inline-flex, wiec same marginesy auto go
   nie wysrodkuja - musi byc elementem blokowym o szerokosci tresci. */

.produkt-sekcja .apex-specyfikacja {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

@media (max-width: 768px) {

    /* naglowek.css laduje sie po tym pliku i ma tam justify-self: start,
       wiec potrzebny mocniejszy zapis. */

    .kontakt-formularz .formularz-kontaktowy button {
        justify-self: center;
    }

    /* Dwa przyciski obok siebie nie miescily sie w oknie ustawien -
       pierwszy wychodzil 13 px poza obrys. Na waskim ekranie ida
       jeden pod drugim. */

    .cookie-panel-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .cookie-panel-actions button {
        width: 100%;
    }

    /* Na stronie produktu przycisk zakupu konczyl sie w polowie
       szerokosci. Teraz wypelnia to, co zostaje po polu z iloscia. */

    .woocommerce div.product form.cart {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }

    .woocommerce div.product form.cart .quantity {
        flex: none;
        margin: 0;
    }

    .woocommerce div.product form.cart .single_add_to_cart_button {
        flex: 1;
        margin: 0;
        min-width: 0;
    }

}

/* ==========================================
   JEDNA CENA NA KARCIE PRODUKTU

   Przy produkcie z wariantami WooCommerce pokazuje dwie ceny naraz:
   swoja w podsumowaniu (najnizsza z wariantow) i druga, ktora dokleja
   pod lista rozmiarow po wybraniu wariantu. Klient widzial to jako
   podwojna cene (09.09).

   Zostaje jedna — ta w podsumowaniu — a app.js podmienia jej tresc
   przy kazdej zmianie rozmiaru. Dzieki temu cena zawsze odpowiada
   temu, co klient wlozy do koszyka.
========================================== */

.woocommerce div.product .woocommerce-variation-price,
.woocommerce div.product .woocommerce-variation-availability {
    display: none;
}

/* ==========================================
   ILOSC: PRZYCISKI MINUS I PLUS

   Wpisywanie liczby z klawiatury na telefonie jest niewygodne —
   trzeba trafic w male pole i wywolac klawiature numeryczna.
   Standard w sklepach to dwa przyciski po bokach. Pole zostaje,
   bo przy wiekszych zamowieniach szybciej wpisac liczbe recznie.
========================================== */

.apex-ilosc {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg);
}

.apex-ilosc .apex-ilosc-przycisk {
    width: 42px;
    min-width: 42px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.apex-ilosc .apex-ilosc-przycisk:hover:not(:disabled),
.apex-ilosc .apex-ilosc-przycisk:focus-visible:not(:disabled) {
    background: var(--accent);
    color: #111;
}

.apex-ilosc .apex-ilosc-przycisk:disabled {
    opacity: .35;
    cursor: default;
}

.apex-ilosc input.qty {
    width: 52px;
    min-width: 52px;
    border: 0;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    text-align: center;
    font-weight: 700;
    padding: 10px 2px;
    -moz-appearance: textfield;
}

.apex-ilosc input.qty::-webkit-outer-spin-button,
.apex-ilosc input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* W tabeli koszyka pole jest wezsze — wiersz musi zmiescic sie
   na telefonie razem z miniatura i cena. */

.woocommerce-cart-form .apex-ilosc .apex-ilosc-przycisk {
    width: 34px;
    min-width: 34px;
    font-size: 1.05rem;
}

.woocommerce-cart-form .apex-ilosc input.qty {
    width: 40px;
    min-width: 40px;
    padding: 8px 2px;
}

/* ==========================================
   PUNKT ODBIORU PRZY PLATNOSCI
========================================== */

.apex-punkt-odbioru[hidden] {
    display: none !important;
}

/* Dopisek "(opcjonalne)" myli, bo przy metodach punktowych pole jest
   wymagane. Zastepuje go gwiazdka dokladana przez app.js. */

.apex-punkt-odbioru .optional {
    display: none;
}

.apex-punkt-odbioru .apex-wymagane {
    color: var(--accent);
    text-decoration: none;
    margin-left: 4px;
}

.apex-punkt-odbioru .description,
.apex-punkt-odbioru span.description {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: .82rem;
}

.apex-punkt-zamowienie {
    margin-top: 12px;
}

/* ==========================================
   POTWIERDZENIE WIEKU I PRZEZNACZENIA
   (ten sam wyglad ma potwierdzenie adresu — inc/adres.php)

   Zgoda stoi tuz nad przyciskiem zakupu, obok akceptacji regulaminu.
   Ma byc czytelna, a nie schowana drobnym drukiem — to jedyne miejsce,
   w ktorym kupujacy potwierdza, czym sa te produkty.
========================================== */

.apex-zgoda-wiek,
.apex-potwierdzenie-adresu {
    display: block;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

.apex-zgoda-wiek label,
.apex-potwierdzenie-adresu label {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: start;
    margin: 0;
    cursor: pointer;
}

.apex-zgoda-wiek input[type="checkbox"],
.apex-potwierdzenie-adresu input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--accent);
    flex: none;
}

.apex-zgoda-wiek-tresc,
.apex-potwierdzenie-adresu-tresc {
    color: var(--text);
    font-size: .88rem;
    line-height: 1.5;
}

.apex-zgoda-wiek .required,
.apex-potwierdzenie-adresu .required {
    color: var(--accent);
    text-decoration: none;
}

/* ==========================================
   DANE DO FAKTURY
========================================== */

/* Checkbox „Dane do faktury" (rejestracja i konto) i „Faktura do
   zamówienia" (płatność) — ten sam wygląd wszędzie. */

.apex-faktura-przelacznik[hidden],
.apex-widget-faktury[hidden],
.apex-faktura-podglad[hidden],
.apex-faktura-potwierdzona[hidden] {
    display: none !important;
}

.apex-faktura-przelacznik label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.apex-faktura-przelacznik input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
    flex: none;
}

.apex-dane-firmy {
    margin: 24px 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}

.apex-dane-firmy legend {
    padding: 0 8px;
    color: var(--accent);
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ==========================================
   WIDGET FAKTURY: NIP -> ZWERYFIKUJ -> ZATWIERDŹ/ANULUJ (11.09 wieczór)

   Ten sam znacznik w rejestracji i w „Moje konto" (inc/faktura.php).
   Bez ręcznej edycji pól — tylko podgląd i decyzja.
========================================== */

.apex-widget-faktury {
    margin-top: 14px;
}

.apex-pole-nip label {
    display: block;
    margin-bottom: 6px;
}

.apex-faktura-podglad {
    margin-top: 10px;
    padding: 14px 16px;
    background: rgba(255, 138, 0, .08);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
}

.apex-faktura-podglad-tresc {
    margin: 0;
    line-height: 1.5;
}

.apex-faktura-podglad-przyciski {
    display: flex;
    gap: 10px;
    margin: 12px 0 0;
}

.apex-faktura-podglad-przyciski .button {
    margin: 0;
}

.apex-faktura-podglad-przyciski .apex-faktura-anuluj {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
}

.apex-nip-uwaga {
    color: var(--muted);
    font-size: .85rem;
}

.apex-nip-potwierdzenie {
    display: inline-block;
    margin-top: 4px;
    color: var(--accent);
}

/* Stan „dane już zatwierdzone" w Moje konto. */

.apex-faktura-potwierdzona {
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.apex-faktura-potwierdzona p {
    margin: 0 0 12px;
    line-height: 1.5;
}

.apex-faktura-potwierdzona .button {
    margin: 0;
}

/* Checkbox faktury na stronie płatności — pod „Uwagi do zamówienia". */

.apex-faktura-zamowienie {
    margin-top: var(--przerwa-mala, 12px);
}

.apex-nip-zamowienie {
    margin-top: 8px;
}


/* ==========================================
   WYCZYSC CALY KOSZYK

   Krok odwracalny, ale kasujacy caly koszyk - wiec obrys zamiast
   wypelnienia. Ma byc widoczny, ale nie ma konkurowac wzrokiem
   z "Przejdz do platnosci".
========================================== */

.woocommerce .cart .actions .apex-wyczysc-koszyk,
.apex-wyczysc-koszyk {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted, var(--text));
}

.woocommerce .cart .actions .apex-wyczysc-koszyk:hover,
.apex-wyczysc-koszyk:hover {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}

/* ==========================================
   KARTA PRODUKTU — UWAGI KLIENTA Z 10.09

   Karta z sekcji „Top 3 Apex" jest teraz wszedzie: w katalogu
   i na stronie produktu (inc/karta.php). Do tego dwie zmiany:

   1. Cena i liczba sztuk w jednym wierszu — cena po lewej,
      sterowanie iloscia po prawej. Przycisk zakupu pod spodem.
   2. Sterowanie iloscia o polowe mniejsze (powierzchnia).
========================================== */

/* Karta jest kontenerem: rozmiar sterowania iloscia zalezy od
   szerokosci samej karty, a nie ekranu. Ta sama karta bywa waska
   (trzy w rzedzie na komputerze) i szeroka (jedna na telefonie),
   a liczy sie miejsce obok ceny. */

.product-card {
    container-type: inline-size;
    container-name: karta;
}

/* Cena z iloscia i przycisk trzymaja sie dolu karty — w rzedzie kart
   przyciski stoja na jednej wysokosci, nawet gdy nazwy maja rozna
   dlugosc. Wczesniej te role pelnila sama cena. */

.product-card .apex-karta-zakup {
    align-items: stretch;
    gap: 14px;
    margin: auto 24px 24px;
    padding-top: 16px;
}

.product-card .apex-cena-ilosc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
}

.product-card .apex-cena-ilosc strong {
    display: block;
    margin: 0;
    padding: 0;
}

/* Zawsze do prawej — takze gdy przy bardzo dlugiej cenie pole
   zejdzie pod nia, zamiast wyjsc poza karte. */

.product-card .apex-cena-ilosc .apex-ilosc-karta {
    margin: 0 0 0 auto;
}

.product-card .apex-do-koszyka {
    max-width: none;
}

/* Sterowanie iloscia rozdmuchiwala stara regula .product-card button
   z projektu statycznego: 24 px marginesu po obu stronach i pod kazdym
   przyciskiem minus i plus, do tego wlasny padding. Stad 256 x 74 px
   na telefonie. Zerujemy to i ustawiamy rozmiar wprost.

   Polowa powierzchni tego, co widzial klient:
     karta waska (komputer, trzy w rzedzie)   146 x 48 px
     karta szeroka (telefon, tablet)          182 x 52 px
   Waska wersja jest domyslna: przegladarka, ktora nie zna zapytan
   o kontener, dostaje rozmiar mieszczacy sie w kazdej karcie. */

.product-card .apex-ilosc {
    height: 48px;
    background: var(--card);
}

.product-card .apex-ilosc .apex-ilosc-przycisk {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-width: 48px;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-size: 1.2rem;
    transform: none;
}

.product-card .apex-ilosc .apex-ilosc-przycisk:hover {
    transform: none;
}

.product-card .apex-ilosc input.qty {
    width: 48px;
    min-width: 48px;
    height: auto;
    margin: 0;
    padding: 0 2px;
    font-size: 1rem;
    line-height: 1;
}

@container karta (min-width: 350px) {

    .product-card .apex-ilosc {
        height: 52px;
    }

    .product-card .apex-ilosc .apex-ilosc-przycisk,
    .product-card .apex-ilosc input.qty {
        width: 60px;
        min-width: 60px;
    }

}

/* Nazwa na stronie produktu jest naglowkiem h1 (glowny naglowek
   strony), ale ma wygladac jak nazwa na karcie w katalogu — takze na
   telefonie. Tam katalog tez ma 1,4 rem: zmniejszenie z responsive.css
   przegrywa z mocniejsza regula WooCommerce dla ul.products h3. */

.product-card h1.product-card-nazwa {
    margin: 0;
    padding: 24px 24px 8px;
    font-size: 1.4rem;
    color: var(--text);
}


/* ==========================================
   STRONA PRODUKTU — TA SAMA KARTA (10.09)

   Komputer: karta po lewej, w szerokosci karty z „Top 3", obok
   dane techniczne i dokumentacja, a podobne produkty pod spodem
   na cala szerokosc. Telefon i tablet: wszystko jedno pod drugim.
========================================== */

body.single-product div.product {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--przerwa-bloku, 22px) 30px;
    align-items: start;
}

body.single-product div.product > div.summary {
    float: none;
    width: auto;
    margin: 0;
}

body.single-product div.product > .produkt-szczegoly {
    margin-top: 0;
    clear: none;
}

body.single-product div.product > section.related,
body.single-product div.product > section.up-sells {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {

    body.single-product div.product {
        grid-template-columns: minmax(0, 1fr);
    }

    body.single-product div.product > div.summary {
        width: 100%;
        max-width: 420px;
        justify-self: center;
    }

}

/* ==========================================
   PODSUMOWANIE KOSZYKA — MAKIETA KLIENTA (10.09)

   Tytul, pod nim ramka z wierszami rozdzielonymi liniami (kwota,
   przesylka, lacznie), na dole przycisk na cala szerokosc. Etykiety
   z dwukropkiem, przesylka jako lista opcji pod wlasna etykieta.

   WooCommerce sklada to jako tabele, a na telefonie dodatkowo chowa
   naglowki wierszy i dokleja etykiety z atrybutu data-title. Zamiast
   przepisywac jego szablon — i pilnowac go przy kazdej aktualizacji
   WooCommerce — przestawiamy uklad samym CSS.
========================================== */

.woocommerce .cart-collaterals .cart_totals {
    padding: 28px 20px;
}

.woocommerce .cart_totals h2 {
    margin: 0 0 18px;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text);
}

.woocommerce .cart_totals table.shop_table,
.woocommerce .cart_totals table.shop_table tbody {
    display: block;
    width: 100%;
    margin: 0;
}

.woocommerce .cart_totals table.shop_table {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    overflow: hidden;
}

.woocommerce .cart_totals table.shop_table tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
}

.woocommerce .cart_totals table.shop_table tr + tr {
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.4;
}

.woocommerce .cart_totals table.shop_table th {
    font-weight: 700;
    text-align: left;
}

.woocommerce .cart_totals table.shop_table th::after {
    content: ":";
}

.woocommerce .cart_totals table.shop_table td {
    font-weight: 400;
    text-align: right;
}

/* Etykiety, ktore WooCommerce dokleja na telefonie z data-title —
   mamy wlasne w naglowkach wierszy. */

.woocommerce .cart_totals table.shop_table td::before {
    content: none;
    display: none;
}

.woocommerce .cart_totals table.shop_table .woocommerce-Price-amount {
    font-weight: inherit;
}

.woocommerce .cart_totals table.shop_table tr.order-total td,
.woocommerce .cart_totals table.shop_table tr.order-total strong {
    font-weight: 800;
}

/* Przesylka: etykieta nad lista opcji, nie obok. */

.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals {
    display: block;
}

.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
    margin-top: 10px;
    text-align: left !important;
}

.woocommerce .cart_totals ul#shipping_method {
    margin: 0;
    padding: 0;
    text-align: left;
}

.woocommerce .cart_totals ul#shipping_method li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 7px 0;
    line-height: 1.4;
}

.woocommerce .cart_totals ul#shipping_method li label {
    display: block;
    margin: 0;
    color: var(--muted);
    font-weight: 500;
    cursor: pointer;
}

/* Cena przewoznika w tym samym stylu co jego nazwa, jak na makiecie.
   WooCommerce pogrubia ja regula z identyfikatorem (#shipping_method),
   silniejsza od zwyklych klas — stad identyfikator i tutaj. */

.woocommerce .cart_totals ul#shipping_method li label .amount {
    color: inherit;
    font-weight: inherit;
}

/* Kolka wyboru rysujemy sami, zeby wygladaly tak samo na kazdym
   telefonie — natywne wygladaja inaczej na iPhonie i na Androidzie.
   Niebieski zaznaczenia jest wprost z makiety klienta. */

.woocommerce .cart_totals ul#shipping_method li input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid #c9ccd2;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.woocommerce .cart_totals ul#shipping_method li input[type="radio"]:checked {
    border: 2px solid #1a73e8;
    background: #1a73e8;
    box-shadow: inset 0 0 0 3px #fff;
}

.woocommerce .cart_totals ul#shipping_method li input[type="radio"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Kalkulatora wysylki i dopisku o adresie nie ma na makiecie. Sklep
   wysyla tylko po Polsce, a punkt odbioru albo adres klient i tak
   podaje przy zamowieniu. */

.woocommerce .cart_totals .woocommerce-shipping-destination,
.woocommerce .cart_totals .woocommerce-shipping-calculator {
    display: none;
}

.woocommerce .cart_totals .wc-proceed-to-checkout {
    padding: 16px 0 0;
}

.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 15px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #111;
    font-size: 1.1rem;
    font-weight: 800;
    text-align: center;
}

/* ==========================================
   KATALOG — KAFELKI OBOK SIEBIE (10.09, poprawka)

   Klient doprecyzował: karta ma wszędzie wyglądać tak samo, ale
   wygląd to nie rozmiar. W katalogu wracają małe kafelki obok
   siebie — ta sama karta, tylko pomniejszona. „Top 3" i strona
   produktu zostają bez zmian.

   W kafelku o szerokości ok. 150 px cena i sterowanie ilością nie
   mieszczą się w jednym wierszu w rozmiarze, w który da się trafić
   palcem. Ilość schodzi więc pod cenę i zostaje przy prawej krawędzi
   — ten sam układ, który karta przyjmuje zawsze, gdy brakuje miejsca.
========================================== */

.woocommerce #all-products-grid li.product a.product-card-media img,
#all-products-grid .product-card .product-card-media img {
    padding: 12px;
}

.woocommerce #all-products-grid li.product h3,
#all-products-grid .product-card h3 {
    padding: 12px 14px 2px;
    font-size: .95rem;
}

#all-products-grid .product-card p {
    padding: 0 14px;
    font-size: .78rem;
}

#all-products-grid .product-card .variant-select {
    margin: 6px 14px 0;
    padding: 7px 10px 7px 8px;
    font-size: .78rem;
}

#all-products-grid .product-card .apex-karta-zakup {
    gap: 8px;
    margin: auto 14px 14px;
    padding-top: 10px;
}

#all-products-grid .product-card .apex-cena-ilosc {
    gap: 6px 8px;
}

#all-products-grid .product-card .apex-cena-ilosc strong {
    font-size: 1rem;
}

#all-products-grid .product-card .apex-ilosc {
    height: 34px;
}

#all-products-grid .product-card .apex-ilosc .apex-ilosc-przycisk {
    width: 34px;
    min-width: 34px;
    font-size: 1.05rem;
}

#all-products-grid .product-card .apex-ilosc input.qty {
    width: 42px;
    min-width: 42px;
    font-size: .9rem;
}

/* „Dodaj do koszyka" ma się zmieścić w jednej linii w wąskim kafelku. */

#all-products-grid .product-card .apex-do-koszyka {
    padding: 9px 10px;
    font-size: .72rem;
    letter-spacing: -.01em;
}

#all-products-grid .product-card a.added_to_cart,
.woocommerce #all-products-grid .product-card a.added_to_cart {
    margin: 0;
    padding: 8px 10px;
    font-size: .78rem;
}

/* ==========================================
   KUPON W RAMCE — MAKIETA KLIENTA (11.09)

   Ramka z polem na kod, przyciskiem „Zastosuj" i podpisem „Wpisz kod"
   pod polem. Tak samo w koszyku i na stronie płatności.

   Na stronie płatności pole jest widoczne od razu — w miejscu, które
   klient zaznaczył na makiecie, między „Masz kupon?" a danymi
   rozliczeniowymi. WooCommerce chowa je atrybutem style="display:none"
   i pokazuje dopiero po kliknięciu; !important wygrywa z tym atrybutem.
   Kliknięcie „Kliknij tutaj…" przenosi teraz kursor do pola (app.js).

   Przy okazji koniec z przyciskiem wystającym z ramki (28 px na
   telefonie): pole i przycisk stoją w siatce, a nie obok siebie
   na procentach szerokości.
========================================== */

.woocommerce form.checkout_coupon,
.woocommerce-cart .woocommerce .cart .actions .coupon {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px 12px;
    margin: 0 0 var(--przerwa-bloku, 22px);
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 12px;
    background: transparent;
    text-align: left;
}

.woocommerce form.checkout_coupon .form-row-first,
.woocommerce form.checkout_coupon .form-row-last {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

.woocommerce form.checkout_coupon .clear {
    display: none;
}

.woocommerce form.checkout_coupon input.input-text,
.woocommerce-cart .woocommerce .cart .actions .coupon input.input-text {
    float: none;
    width: 100%;
    height: 42px;
    margin: 0;
    box-sizing: border-box;
}

/* Podpis pod polem (uwaga klienta z 11.09): „Wpisz kod" nie mówiło,
   o jaki kod chodzi. „Wpisz kod rabatowy" już się nie mieści w jednej
   linijce, więc słowo „Wpisz" przeniosło się do samego pola jako
   podpowiedź (placeholder — tekst „Coupon code" na „Wpisz" zamienia
   inc/zamowienie.php), a pod polem zostaje sama treść: „kod rabatowy". */

.woocommerce form.checkout_coupon .form-row-first::after,
.woocommerce-cart .woocommerce .cart .actions .coupon::after {
    content: "kod rabatowy";
    display: block;
    color: var(--muted);
    font-size: .85rem;
}

.woocommerce form.checkout_coupon .form-row-first::after {
    margin-top: 6px;
}

.woocommerce form.checkout_coupon button.button,
.woocommerce-cart .woocommerce .cart .actions .coupon button.button {
    height: 42px;
    margin: 0;
    padding: 0 24px;
    white-space: nowrap;
}

/* Na stronie płatności ramka stoi tuż pod „Masz kupon?". */

.woocommerce-form-coupon-toggle .woocommerce-info {
    margin-bottom: 12px;
}

/* ==========================================
   LOGOWANIE PRZY PŁATNOŚCI — POLA W JEDNEJ LINII (11.09)

   Etykieta „Nazwa użytkownika lub adres e-mail" łamała się na dwie
   linie, „Hasło" nie — i pole hasła wisiało wyżej niż pole loginu.
   Pola stoją teraz w siatce wyrównanej do dołu, więc ich dolne
   krawędzie zawsze są w jednej linii, niezależnie od długości etykiet.
========================================== */

.woocommerce form.woocommerce-form-login {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 20px;
    align-items: end;
}

.woocommerce form.woocommerce-form-login > * {
    grid-column: 1 / -1;
}

.woocommerce form.woocommerce-form-login > .form-row-first,
.woocommerce form.woocommerce-form-login > .form-row-last {
    float: none;
    width: auto;
}

.woocommerce form.woocommerce-form-login > .form-row-first {
    grid-column: 1;
}

.woocommerce form.woocommerce-form-login > .form-row-last {
    grid-column: 2;
}

.woocommerce form.woocommerce-form-login > .clear {
    display: none;
}

@media (max-width: 600px) {

    .woocommerce form.woocommerce-form-login > .form-row-first,
    .woocommerce form.woocommerce-form-login > .form-row-last {
        grid-column: 1 / -1;
    }

}

/* ==========================================
   PODSUMOWANIE ZAMÓWIENIA — TRZY KOLUMNY (11.09)

   Produkt, cena jednostkowa, kwota łączna — szablon
   woocommerce/checkout/review-order.php. Kwota łączna pogrubiona,
   jak na makiecie; kolumny kwot rozdzielone liniami.
========================================== */

.woocommerce-checkout-review-order-table.apex-podsumowanie th.product-price,
.woocommerce-checkout-review-order-table.apex-podsumowanie th.product-total,
.woocommerce-checkout-review-order-table.apex-podsumowanie td.product-price,
.woocommerce-checkout-review-order-table.apex-podsumowanie td.product-total {
    border-left: 1px solid var(--border);
}

.woocommerce-checkout-review-order-table.apex-podsumowanie thead th.product-price,
.woocommerce-checkout-review-order-table.apex-podsumowanie thead th.product-total {
    width: 26%;
    font-size: .85rem;
    line-height: 1.3;
}

.woocommerce-checkout-review-order-table.apex-podsumowanie td.product-total,
.woocommerce-checkout-review-order-table.apex-podsumowanie tr.cart-subtotal td,
.woocommerce-checkout-review-order-table.apex-podsumowanie tr.order-total td {
    font-weight: 700;
}

/* Kółka wyboru przewoźnika jak w podsumowaniu koszyka. */

.woocommerce-checkout-review-order-table ul#shipping_method {
    margin: 0;
    padding: 0;
    text-align: left;
}

.woocommerce-checkout-review-order-table ul#shipping_method li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 6px 0;
    line-height: 1.4;
}

.woocommerce-checkout-review-order-table ul#shipping_method li label {
    display: block;
    margin: 0;
    color: var(--muted);
    font-weight: 500;
    cursor: pointer;
}

.woocommerce-checkout-review-order-table ul#shipping_method li label .amount {
    color: inherit;
    font-weight: inherit;
}

.woocommerce-checkout-review-order-table ul#shipping_method li input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid #c9ccd2;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.woocommerce-checkout-review-order-table ul#shipping_method li input[type="radio"]:checked {
    border: 2px solid #1a73e8;
    background: #1a73e8;
    box-shadow: inset 0 0 0 3px #fff;
}

/* ==========================================
   PUNKT ODBIORU ZAMIAST ADRESU DO WYSYŁKI (11.09)

   Stoi tam, gdzie był „Adres do wysyłki" — pod adresem
   rozliczeniowym, w takiej samej ramce.
========================================== */

.apex-punkt-odbioru-blok {
    margin-top: var(--przerwa-bloku, 22px);
}

.apex-punkt-odbioru-blok .apex-punkt-opis {
    color: var(--muted);
}

/* ==========================================
   ZALOGOWANY NA TELEFONIE (11.09)

   Na komputerze obok ludzika stoi „Cześć, imię". Na telefonie ten
   napis się nie mieści, więc ludzik zamienia się w kółko z pierwszą
   literą imienia — tak jak u Google czy na Allegro. Od razu widać,
   że jesteś zalogowany i na kogo.
========================================== */

.header-actions .konto-inicjal {
    display: none;
}

@media (max-width: 600px) {

    .header-actions .btn-outline[data-logged-in] .ikona {
        display: none;
    }

    .header-actions .btn-outline[data-logged-in] .konto-inicjal {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--accent);
        color: #111;
        font-size: .85rem;
        font-weight: 800;
        line-height: 1;
    }

}

/* ==========================================
   LOGOWANIE PRZEZ GOOGLE I FACEBOOKA — MAKIETA (11.09)
========================================== */

.apex-logowanie-spolecznosciowe {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.apex-lub {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--muted);
    font-size: .85rem;
}

.apex-lub::before,
.apex-lub::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.apex-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 11px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
}

.apex-social--google {
    background: #fff;
    color: #1f1f1f;
    border-color: #dadce0;
}

.apex-social--facebook {
    background: #1877f2;
    color: #fff;
}

.apex-social-uwaga {
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    text-align: center;
    transition: color .2s;
}

.apex-social-uwaga.apex-social-klik {
    color: var(--accent);
}

/* ==========================================
   KUPON W KOSZYKU — STAŁE MIEJSCA W SIATCE (11.09)

   Etykieta „Kupon:" dla czytnika ekranu zajmowała w koszyku pierwszą
   komórkę siatki i przesuwała resztę: pole lądowało po prawej, a
   „Zastosuj" zgnieciony pod nim. Na stronie płatności etykieta siedzi
   w osobnym akapicie, dlatego tam wszystko stało dobrze. Etykieta
   wychodzi z siatki, a pole, przycisk i podpis dostają stałe miejsca.
========================================== */

.woocommerce-cart .woocommerce .cart .actions .coupon label {
    position: absolute;
}

.woocommerce-cart .woocommerce .cart .actions .coupon input.input-text {
    grid-column: 1;
    grid-row: 1;
}

.woocommerce-cart .woocommerce .cart .actions .coupon button.button {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    float: none;
}

.woocommerce-cart .woocommerce .cart .actions .coupon::after {
    grid-column: 1;
    grid-row: 2;
}

/* KWOTY W JEDNEJ LINII (uwaga klienta z 11.09). „1 854,00 zł" łamało
   się na telefonie na „1" i „854,00 zł". Kwoty nigdy się nie łamią;
   w wierszach sum kwota ma dwie kolumny (review-order.php), więc
   miejsca jest dość. Zamiast tego zawija się nazwa produktu.

   Wcześniej na wąskim telefonie stał tu stały układ tabeli
   z łamaniem w dowolnym miejscu — stąd „Cena jednostk-owa".
   Oba zdjęte: przy kwotach bez łamania tabela sama dzieli miejsce. */

.woocommerce-checkout-review-order-table.apex-podsumowanie td.product-price,
.woocommerce-checkout-review-order-table.apex-podsumowanie td.product-total,
.woocommerce-checkout-review-order-table.apex-podsumowanie tfoot .amount {
    white-space: nowrap;
}

.woocommerce-checkout-review-order-table.apex-podsumowanie tr.cart-subtotal td,
.woocommerce-checkout-review-order-table.apex-podsumowanie tr.cart-discount td,
.woocommerce-checkout-review-order-table.apex-podsumowanie tr.fee td,
.woocommerce-checkout-review-order-table.apex-podsumowanie tr.tax-rate td,
.woocommerce-checkout-review-order-table.apex-podsumowanie tr.tax-total td,
.woocommerce-checkout-review-order-table.apex-podsumowanie tr.order-total td {
    text-align: right;
}

@media (max-width: 480px) {

    .woocommerce table.shop_table.apex-podsumowanie th,
    .woocommerce table.shop_table.apex-podsumowanie td {
        padding: 10px 8px;
        font-size: .85rem;
    }

    .woocommerce table.shop_table.apex-podsumowanie thead th,
    .woocommerce table.shop_table.apex-podsumowanie thead th.product-price,
    .woocommerce table.shop_table.apex-podsumowanie thead th.product-total {
        font-size: .74rem;
    }

    .woocommerce table.shop_table.apex-podsumowanie td.product-name {
        overflow-wrap: break-word;
    }

}

/* Na najwęższych telefonach tabela wychodziła poza ramkę — węższe
   odstępy w komórkach oddają to miejsce.

   Selektory z „.woocommerce table.shop_table", bo reguły WooCommerce
   dla komórek są mocniejsze i zwykła klasa tabeli z nimi przegrywała. */

@media (max-width: 400px) {

    .woocommerce table.shop_table.apex-podsumowanie th,
    .woocommerce table.shop_table.apex-podsumowanie td {
        padding-left: 6px;
        padding-right: 6px;
    }

}

/* Najmniejsze telefony (320–360 px): kwoty bez łamania potrzebują
   miejsca, więc cała tabela schodzi o stopień niżej. */

@media (max-width: 360px) {

    .woocommerce table.shop_table.apex-podsumowanie th,
    .woocommerce table.shop_table.apex-podsumowanie td {
        font-size: .78rem;
    }

    .woocommerce table.shop_table.apex-podsumowanie thead th,
    .woocommerce table.shop_table.apex-podsumowanie thead th.product-price,
    .woocommerce table.shop_table.apex-podsumowanie thead th.product-total {
        font-size: .7rem;
    }

}

/* ==========================================
   POTWIERDZENIE ADRESU E-MAIL — PRZYPOMNIENIE (11.09)

   Wariant A: konto działa od razu, a to przypomnienie wisi na
   każdej zakładce „Moje konto", dopóki klient nie kliknie w link.
========================================== */

.woocommerce .woocommerce-info.apex-potwierdz-email {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
}

.woocommerce .woocommerce-info.apex-potwierdz-email p {
    flex: 1 1 280px;
    margin: 0;
}

.woocommerce .woocommerce-info.apex-potwierdz-email .apex-potwierdz-ponownie {
    flex: none;
    margin: 0;
    padding: 10px 20px;
    white-space: nowrap;
}

/* ==========================================
   LOGOWANIE PRZEZ GOOGLE I FACEBOOKA — PRAWDZIWE (11.09)

   Przycisk Google według wytycznych Google: białe tło, szara ramka
   #747775, napis #1F1F1F krojem Roboto Medium, kolorowe „G".
   Facebook: niebieski #1877F2 z białym „f".
========================================== */

a.apex-social {
    box-sizing: border-box;
    text-decoration: none;
}

.apex-social--google {
    border-color: #747775;
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 500;
}

a.apex-social--google:hover {
    background: #f2f2f2;
    color: #1f1f1f;
}

a.apex-social--facebook:hover {
    background: #166fe0;
    color: #fff;
}

.apex-social-zgoda {
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.45;
    text-align: center;
}

.apex-social-zgoda a {
    color: inherit;
    text-decoration: underline;
}

/* ==========================================
   BLOK DOSTAWY — POD WYBOREM PRZEWOŹNIKA (11.09)

   inc/wysylka.php. Punkt odbioru albo „Wysłać na inny adres?" —
   w ramce jak tabela zamówienia, tuż pod nią.
========================================== */

.apex-dostawa > .apex-punkt-odbioru,
.apex-dostawa > .woocommerce-shipping-fields {
    margin: 0 0 var(--przerwa-bloku, 22px);
    padding: 18px 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.apex-dostawa > .woocommerce-shipping-fields[hidden] {
    display: none !important;
}

.apex-punkt-odbioru[data-przewoznik="inpost"] .apex-dla-dpd,
.apex-punkt-odbioru[data-przewoznik="dpd"] .apex-dla-inpost,
.apex-punkt-odbioru[data-przewoznik=""] .apex-dla-dpd {
    display: none !important;
}

.apex-punkt-odbioru label abbr.required {
    color: var(--accent);
    text-decoration: none;
}

.apex-punkt-szukaj {
    position: relative;
}

.apex-punkt-szukaj input.input-text {
    width: 100%;
    box-sizing: border-box;
}

.apex-punkt-lista {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}

.apex-punkt-lista li {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    line-height: 1.35;
    cursor: pointer;
}

.apex-punkt-lista li strong {
    color: var(--text);
}

.apex-punkt-lista li span {
    color: var(--muted);
    font-size: .88rem;
}

.apex-punkt-lista li small {
    color: var(--muted);
    font-size: .78rem;
    opacity: .8;
}

.apex-punkt-lista li[role="option"]:hover,
.apex-punkt-lista li[aria-selected="true"] {
    background: rgba(255, 138, 0, .14);
}

.apex-punkt-lista li.apex-punkt-brak {
    color: var(--muted);
    font-size: .88rem;
    cursor: default;
}

.apex-punkt-wybrany {
    margin: 10px 0 0;
    padding: 10px 12px;
    background: rgba(255, 138, 0, .08);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    line-height: 1.45;
}

.apex-punkt-wybrany span {
    display: block;
    color: var(--muted);
    font-size: .85rem;
}

.apex-dostawa #ship-to-different-address {
    margin: 0;
    font-size: 1rem;
}

.apex-adres-podpowiedz {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: .85rem;
}

.apex-dostawa .shipping_address {
    margin-top: 14px;
}

/* ==========================================
   DANE FIRMY Z NIP-u (11.09) — inc/nip.php
========================================== */

.apex-nip-obudowa {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.apex-nip-obudowa input {
    flex: 1 1 auto;
    min-width: 0;
}

.woocommerce .apex-nip-obudowa .apex-nip-zweryfikuj {
    flex: none;
    margin: 0;
    padding: 0 16px;
    font-size: .85rem;
    white-space: nowrap;
}

.apex-nip-wynik {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: .85rem;
}

.apex-nip-wynik.apex-nip-blad {
    color: #ff7b7b;
}

/* ==========================================
   KOMUNIKATY NA STRONIE GŁÓWNEJ (11.09)

   „Zalogowano. Cześć, Anna!" — po zalogowaniu klient wraca
   na stronę główną (inc/logowanie.php).
========================================== */

.apex-powiadomienia {
    padding-top: 18px;
}

.apex-powiadomienia .woocommerce-message,
.apex-powiadomienia .woocommerce-info,
.apex-powiadomienia .woocommerce-error {
    margin: 0;
}

/* ==========================================
   DOKUMENTY DO POBRANIA (inc/dokumenty.php)
========================================== */

.apex-dokumenty-naglowek {
    margin: 0 0 14px;
    font-size: 18px;
}

.apex-prezenty {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.apex-dokumenty .apex-prezent {
    background: var(--card);
    border: 1px dashed var(--accent);
    border-radius: var(--radius);
    padding: 16px 18px;
}

.apex-dokumenty .apex-prezent p {
    margin: 0 0 6px;
    color: var(--text);
}

.apex-dokumenty .apex-prezent-tytul {
    font-weight: 700;
}

.apex-dokumenty .apex-prezent-opis,
.apex-dokumenty .apex-prezent-stan,
.apex-dokumenty .apex-prezent-data {
    color: var(--muted);
    font-size: 14px;
}

.apex-dokumenty .apex-prezent-kod strong {
    color: var(--accent);
    font-size: 20px;
    letter-spacing: .04em;
    user-select: all;
}

.apex-dokumenty .apex-prezent-kod span {
    margin-left: 6px;
    font-weight: 600;
}

.apex-dokumenty .apex-prezent-wykorzystany,
.apex-dokumenty .apex-prezent-wygasl,
.apex-dokumenty .apex-prezent-nieaktywny {
    border-style: solid;
    border-color: var(--border);
    opacity: .6;
}

.apex-dokumenty .apex-prezent-wykorzystany .apex-prezent-kod strong,
.apex-dokumenty .apex-prezent-wygasl .apex-prezent-kod strong,
.apex-dokumenty .apex-prezent-nieaktywny .apex-prezent-kod strong {
    color: var(--muted);
    text-decoration: line-through;
}

.woocommerce table.shop_table.apex-dokumenty-tabela td small {
    color: var(--muted);
}

.woocommerce table.shop_table.apex-dokumenty-tabela td:last-child {
    text-align: right;
    white-space: nowrap;
}

.apex-dokumenty .apex-dokumenty-pusto {
    color: var(--muted);
}

.apex-faktura-link {
    margin-top: 18px;
}

/* ==========================================
   STRONA „ZAMÓWIENIE PRZYJĘTE"

   Numer / data / razem / metoda płatności: na telefonie dwie
   równe kolumny, żeby kreski między nimi stały w jednej linii
   (WooCommerce układa je „na płynąco" i każdy wiersz ma kreskę
   gdzie indziej). Przyciski „Kopiuj" przy BLIK-u z odstępem.
========================================== */

.apex-blik-przyciski {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.apex-blik-przyciski .button {
    margin: 0;
}

@media (max-width: 768px) {

    .woocommerce ul.order_details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 18px;
    }

    .woocommerce ul.order_details::before,
    .woocommerce ul.order_details::after {
        display: none;
    }

    .woocommerce ul.order_details li {
        float: none;
        min-width: 0;
        margin: 0;
        padding: 0 12px;
        border-right-width: 0;
        overflow-wrap: anywhere;
    }

    /* Kreska (kolor i styl z WooCommerce) tylko po lewej kolumnie. */
    .woocommerce ul.order_details li:nth-child(odd) {
        padding-left: 0;
        border-right-width: 1px;
    }

    .woocommerce ul.order_details li:nth-child(odd):last-child {
        border-right-width: 0;
    }

}