/**
 * Bricks base layout - fundament ukladu natywnych elementow Bricks.
 *
 * Odtwarza reguly, ktore do 2026-07-12 dostarczal ACSS (automatic.css). Wbrew
 * pierwotnemu zalozeniu ACSS nie byl u nas wylacznie frameworkiem zmiennych:
 * stylowal takze strukture Bricks (flex/gap sekcji, boczny padding, centrowanie).
 * Wylaczenie pluginu zabralo ten fundament, wiec zyje on teraz tutaj - juz na
 * zmiennych AT / --mito-*.
 *
 * Selektory celowo w :where() (specyficznosc 0), zeby klasy BEM i custom CSS
 * elementow nadpisywaly je bez walki o wage - dokladnie tak, jak robil to ACSS.
 *
 * Zrodlo regul: automatic.css 5715-5735 oraz 596-599 (wersja sprzed migracji).
 *
 * @author lukuro
 */

/* Sekcja: kolumna, wysrodkowana, odstep miedzy kontenerami */
section:where(:not(.bricks-shape-divider)) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--at-container-gap);
}

/* Sekcja najwyzszego poziomu: padding pionowy i boczny (dawny --gutter) */
:where(section:not(section section)) {
    padding-block: var(--at-section-padding-block--s);
    padding-inline: var(--at-gutter);
}

/* Bezposrednie dzieci sekcji: kolumna, odstep miedzy blokami tresci */
section > div:where(:not(.bricks-shape-divider)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--at-content-gap);
}

/* Natywne kontenery Bricks */
:where(.brxe-block),
:where(.brxe-div) {
    gap: var(--at-content-gap);
}

/* Siatki: wlasny odstep */
section > div:where([class*="grid--"]),
:where([class*="grid--"]) {
    gap: var(--at-grid-gap);
}

/* Normalizacja marginesow i typografia bazowa siedza w `@layer lukuro.compat` (od 1.8.0).
   Poza warstwa przykrywaly arkusze modulow pakietu, ktore od wydania z warstwami kaskady
   zyja w `@layer lukuro.modules`: panel szkolen tracil odstepy miedzy tytulem a linia
   informacji, a tytul lekcji bral rozmiar h1 zamiast rozmiaru z modulu (zgloszenie
   wlasciciela 2026-10-08). W warstwie nadal poprawiaja domyslne Bricksa, a modul i wlasny
   CSS z buildera maja ostatnie slowo. */
@layer lukuro.compat {

    /* Normalizacja marginesow tekstu (Bricks/WP dokladaja wlasne) */
    body:where(:not(.block-editor-writing-flow, .editor-styles-wrapper)) :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {
        margin-block: 0;
    }
}

/* ---------- Odstepy tresci redakcyjnej ---------- */
/* Regula wyzej zeruje marginesy wszedzie, bo uklady z buildera stoja na `gap`. ACSS
   przywracal je tam, gdzie tresc pisze redaktor (element Rich Text i tresc wpisu spoza
   buildera), a ta czesc przy migracji nie zostala odtworzona: akapity, listy i naglowki
   w zakladkach produktu zlaly sie w jeden blok. Zrodlo: automatic.css, blok "smart
   spacing" dla `.brxe-text` i `.brxe-post-content`; wartosci zmierzone na produkcji
   2026-10-08 (akapit 1em, naglowek 1.2em, lista 1em z wcieciem 2em, punkt 0.5em).

   Selektory i waga jak w ACSS (jedna klasa), zeby wlasny CSS klientki przykrywal je
   tak samo jak dotad. Odstep to margines GORNY nastepnika, wiec pierwszy element nie
   odsuwa sie od krawedzi kontenera. */
:root {
    --mito-flow--paragraph:   1em;
    --mito-flow--heading:     1.2em;
    --mito-flow--list:        var(--mito-flow--paragraph);
    --mito-flow--block:       var(--mito-flow--paragraph);
    --mito-flow--list-indent: 2em;
    --mito-flow--list-item:   0.5em;
    --mito-flow--nested-list-indent: 1em;
    --mito-flow--figcaption:  0.5em;
}

.brxe-text > * + *,
.brxe-post-content:where(:not([data-source="bricks"])) > * + * {
    margin-block-start: var(--mito-flow--paragraph);
    margin-block-end: 0;
}

.brxe-text > * + :where(h1, h2, h3, h4, h5, h6),
.brxe-post-content:where(:not([data-source="bricks"])) > * + :where(h1, h2, h3, h4, h5, h6) {
    margin-block-start: var(--mito-flow--heading);
    margin-block-end: 0;
}

.brxe-text > :is(* + ul, * + ol),
.brxe-post-content:where(:not([data-source="bricks"])) > :is(* + ul, * + ol) {
    margin-block: var(--mito-flow--list);
}

.brxe-text > :is(ul, ol),
.brxe-post-content:where(:not([data-source="bricks"])) > :is(ul, ol) {
    padding-inline-start: var(--mito-flow--list-indent);
}

.brxe-text > ul * + li,
.brxe-text > ol * + li,
.brxe-post-content:where(:not([data-source="bricks"])) > ul * + li,
.brxe-post-content:where(:not([data-source="bricks"])) > ol * + li {
    margin-block-start: var(--mito-flow--list-item);
    margin-block-end: 0;
}

.brxe-text > :is(ul, ol) :is(ul, ol),
.brxe-post-content:where(:not([data-source="bricks"])) > :is(ul, ol) :is(ul, ol) {
    margin-block: var(--mito-flow--list-item);
    padding-inline-start: var(--mito-flow--nested-list-indent);
}

.brxe-text > :is(ul, ol) :is(ul, ol) li,
.brxe-post-content:where(:not([data-source="bricks"])) > :is(ul, ol) :is(ul, ol) li {
    margin-block-start: var(--mito-flow--list-item);
}

.brxe-text > * + figure,
.brxe-text > * + picture,
.brxe-text > * + blockquote:where(:not(figure > blockquote)),
.brxe-post-content:where(:not([data-source="bricks"])) > * + figure,
.brxe-post-content:where(:not([data-source="bricks"])) > * + picture,
.brxe-post-content:where(:not([data-source="bricks"])) > * + blockquote:where(:not(figure > blockquote)) {
    margin-block: var(--mito-flow--block);
}

.brxe-text figcaption,
.brxe-post-content:where(:not([data-source="bricks"])) figcaption {
    margin-block: var(--mito-flow--figcaption);
}

.brxe-text > blockquote * + *,
.brxe-post-content:where(:not([data-source="bricks"])) > blockquote * + * {
    margin-block-start: var(--mito-flow--paragraph);
    margin-block-end: 0;
}

/* Lista, cytat i rycina nosza wlasny margines dolny, wiec nastepnik nie doklada gornego
   (inaczej odstep by sie podwoil). Naglowek po liscie zachowuje swoj: ma osobny token. */
.brxe-text > :is(figure, blockquote, ul, ol) + *,
.brxe-post-content:where(:not([data-source="bricks"])) > :is(figure, blockquote, ul, ol) + * {
    --mito-flow--paragraph: 0;
}

@layer lukuro.compat {

    /* ---------- Typografia bazowa ---------- */
    /* Rowniez to dostarczal ACSS (automatic-bricks.css 251-280). Bez tego naglowki
       spadaja na domyslny bold przegladarki zamiast firmowej wagi 500. */

    /* Oba tokeny wskazuja na palete AT, wiec odwracaja sie razem z motywem:
       tekst na jasny teal (--at-primary-d-5 lustruje sie), tlo na grafit (--at-white). */
    body {
        color: var(--mito-color-text, color-mix(in srgb, var(--at-primary-d-5, #022931) 80%, transparent));
        background-color: var(--mito-color-bg, #ffffff);
    }

    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        color: var(--at-primary-d-5);
        line-height: var(--mito-heading--line-height);
        font-weight: var(--mito-heading--weight);
        text-wrap: pretty;
    }

    h1, .h1 { font-size: var(--at-heading--l); }
    h2, .h2 { font-size: var(--at-heading--m); }
    h3, .h3 { font-size: var(--at-heading--s); }
    h4, .h4 { font-size: var(--at-heading--xs); }
    h5, .h5 { font-size: var(--at-heading--2xs); }
    h6, .h6 { font-size: var(--at-text--xs); }
}

/* ==========================================================================
   Domyslne ACSS dla elementow natywnych - w warstwie `lukuro.compat`

   Trzy reguly nizej ACSS nakladal na KAZDY element danego typu. Odtworzone bez warstwy
   przykrylyby arkusze modulow pakietu (`@layer lukuro.modules`), bo regula spoza warstw
   wygrywa z kazda warstwa niezaleznie od wagi selektora: nawigacja kategorii i awatary
   opinii przejelyby kolor linku i radius zdjecia. `lukuro.compat` to warstwa pakietu
   na zgodnosc z ACSS: stoi nad `bricks` (wiec poprawia domyslne Bricksa) i pod
   `lukuro.base` / `lukuro.modules` (wiec modul zawsze ma ostatnie slowo). Wlasny CSS
   klientki z buildera jest poza warstwami i przykrywa je tak jak dotad.
   Kolejnosc warstw drukuje pakiet (`#lukuro-layer-order`), tu jej nie deklarujemy.
   ========================================================================== */
@layer lukuro.compat {

    /* Zdjecia: ACSS zaokraglal kazdy obraz poza naglowkiem (`--radius` = 20px), wiec
       szablony z buildera nie ustawialy radiusu same. Po migracji zdjecia w tresci,
       kartach kategorii i sekcjach landingow zostaly z ostrymi rogami. */
    :where(img):not(header img),
    :where(figure:not(figure:has(img))) {
        border-radius: var(--at-radius--m);
    }

    /* Linki: Bricks daje `currentcolor`, kolor marki dokladal ACSS (`--link-color`).
       Bez tego linki w tresci, ikony naglowka i licznik opinii przy produkcie zlaly sie
       z tekstem. Przyciski ACSS (`btn--*`) wylaczone jak w zrodle. */
    body a:where(:not([class*="btn--"])) {
        color: var(--at-primary);
        transition: background 0.3s ease-in-out, color 0.3s ease-in-out, border 0.3s ease-in-out;
    }

    body a:where(:not([class*="btn--"])):hover {
        color: var(--at-primary-l-1);
    }

    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
        font-weight: inherit;
        text-decoration: inherit;
        color: currentcolor;
    }

    /* Interlinia: ACSS liczyl ja z wysokosci malej litery (`--text-line-height`,
       calc(8px + 2.2ex)) na `body` oraz osobno na akapitach i punktach list. Wartosc
       z `body` dziedziczy sie jako DLUGOSC, nie mnoznik, wiec drobny tekst (stopka,
       okruszki, metki kart) ma wiecej swiatla niz przy bricksowym 1.7, a duzy mniej.
       Elementy z wlasna interlinia (naglowki, przyciski, moduly pakietu) jej nie biora. */
    body {
        line-height: calc(8px + 2.2ex);
    }

    /* Rozmiar bazowy: ACSS ustawial `--text-m` (plynnie 15 -> 16 px), po migracji zostalo
       bricksowe 15 px. Decyzja wlasciciela 2026-10-08: skala AT, czyli `--at-text--m`
       (stale 15,47 px), a nie przeniesiony clamp ACSS. */
    body {
        font-size: var(--at-text--m);
    }

    p, li {
        line-height: calc(8px + 2.2ex);
    }

    /* Pola formularzy i przyciski: ACSS kazal im dziedziczyc cala czcionke (`font: inherit`),
       wiec interlinia pola rowna sie interlinii tekstu. Bez tego wraca bricksowe
       `line-height: 40px` i pole z wlasnym paddingiem z buildera rosnie: w zamowieniu
       z 56 px do 70 px (zgloszenie wlasciciela 2026-10-08). */
    input, button, textarea, select {
        font: inherit;
    }
}

/* ---------- Przyciski z klas ACSS (`btn--*`) ---------- */
/* ACSS stylowal kazdy element z klasa `btn--*`: czcionka `--text-m`, interlinia 1, bez
   odstepu liter, minimalna szerokosc 10rem i obramowanie 1 px w kolorze tla. Po migracji
   klasa zostala bez regul i przycisk wzial domyslne Bricksa (`.bricks-button.lg` 1.1em,
   interlinia tekstu, `letter-spacing: .5px`): "Zamow teraz" w hero urosl z 43,6 do 53,1 px
   (zgloszenie wlasciciela 2026-10-08). Inwentarz danych Bricksa: w uzyciu jest wylacznie
   `btn--primary`, na dwoch przyciskach komponentow (klasy projektu `hero-slide__button`
   i `inner-alpha__button`); padding i wage daje im styl motywu z buildera, wiec tu ich nie ma.

   Obie klasy projektu stoja w selektorze obok `btn--*`, bo lokal nie ma juz klas ACSS
   w danych (R31) i nie drukuje `btn--primary`, a produkcja po oknie nadal ja drukuje.
   Bez tego lokal i produkcja wygladalyby roznie, a przycisk na "O nas" na lokalu traci tlo.

   Rozmiar czcionki to przeniesiony `--text-m` ACSS (plynnie 15 -> 16 px), nie `--at-text--m`:
   wysokosc przycisku ma sie zgadzac z produkcja na obu szerokosciach. */
@layer lukuro.compat {

    [class*="btn--"]:where(:not(.btn--none, .wp-block-button)),
    .hero-slide__button,
    .inner-alpha__button {
        min-inline-size: 10rem;
        font-size: clamp(0.9375rem, calc(0.0994035785vw + 0.9151341948rem), 1rem);
        line-height: 1;
        letter-spacing: 0;
        text-decoration: none;
        border-width: 1px;
        border-style: solid;
    }

    .btn--primary,
    .hero-slide__button,
    .inner-alpha__button {
        color: var(--at-white);
        background-color: var(--at-primary);
        border-color: var(--at-primary);
    }

    .btn--primary:hover,
    .hero-slide__button:hover,
    .inner-alpha__button:hover {
        border-color: var(--at-primary-l-1);
    }
}

/* ---------- Reguly z "Custom CSS" panelu ACSS ---------- */
/* Klientka trzymala je w ustawieniach ACSS (plik automatic-custom-css.css, drukowany
   inline), wiec zniknely razem z wtyczka, a skan danych Bricksa ich nie widzial.
   Poza warstwa, bo to klasy projektu: musza przykryc typografie bazowa wyzej. */
.lede {
    color: color-mix(in srgb, var(--at-neutral-d-5) 80%, transparent);
}

.section-heading {
    font-size: var(--at-heading--m);
}

/* ---------- Checkout: odstep miedzy wierszami formularza ---------- */
/* Regula z checkout.css monolitu (produkcja), ktorej modul `checkout` pakietu nie niesie:
   bez niej pola formularza stoja jedno na drugim. Zgloszone do pakietu jako [FW-CHK-ROW];
   po poprawce w module ten blok mozna usunac. */
.woocommerce-checkout .form-row {
    margin-bottom: 15px;
}

/* Wiersz "Stworzyc konto?" stoi w grupie przelacznikow na `gap`: modul zeruje mu margines,
   ale z warstwy, wiec regula wyzej by go przykryla. */
.woocommerce-checkout .form-row.create-account {
    margin-bottom: 0;
}

/* ---------- Checkout: odstep miedzy metodami wysylki ---------- */
/* Zyczenie wlasciciela z odbioru proby 2026-10-08: "odrobine wiekszy odstep". Wlasny CSS
   z buildera daje punktom listy `margin-bottom: 8px !important`; margines gorny nastepnika
   doklada 3 px bez walki z tamta deklaracja, razem 11 px (pierwsza wersja, 14 px, byla
   wg wlasciciela za duza). */
@layer lukuro.compat {

    .woocommerce-checkout #shipping_method li + li {
        margin-top: 3px;
    }
}

/* ---------- Komunikaty koszyka i kasy na malych telefonach ---------- */
/* Zyczenie wlasciciela z odbioru proby 2026-10-08: tekst na pelna szerokosc, przycisk pod
   nim. Bricks uklada komunikat w wiersz (tekst obok przycisku), co na 390 px lamie tekst
   w waska kolumne. Prog 478 px to bricksowy "telefon pionowo". */
@layer lukuro.compat {

    @media (max-width: 478px) {
        .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info) {
            flex-direction: column;
            align-items: stretch;
            gap: var(--at-space--xs);
        }

        .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info) a.button {
            float: none;
            width: 100%;
            margin-left: 0;
        }
    }
}

/* ---------- Checkout: waga naglowkow formularza ---------- */
/* Modul `checkout` pakietu ustawia naglowkowi "Dane do wysylki" wage z `--heading-font-weight`,
   a mapa ACSS->AT pakietu podaje tam 700. W tym projekcie naglowki maja wage firmowa 500
   (na produkcji 500, po migracji 700 - zgloszenie wlasciciela 2026-10-08). Mapa siedzi
   w `@layer lukuro.compat`, wiec deklaracja spoza warstwy ja przykrywa; ten sam token czyta
   naglowek w module kodow rabatowych. */
:root {
    --heading-font-weight: var(--mito-heading--weight, 500);
}

/* ---------- Oplac zamowienie: tabela pozycji ---------- */
/* Szablon "Moje konto - Platnosc" (klasy `payment*`). Wlasny CSS klasy `payment__order`
   robi z wiersza pozycji flex i ukrywa naglowek tabeli, ale selektorem tabeli z kasy
   (`.woocommerce-checkout-review-order-table`), ktorej ten widok nie ma: tu jest gola
   `.shop_table`. Naglowek i stopka zostawaly wierszami tabeli, a wiersz-flex zapadal sie
   w pierwsza kolumne (493 z 808 px), wiec ceny nie staly pod soba (zgloszenie wlasciciela
   2026-10-08). Tabela w tym widoku jest ukladem blokowym: kazdy wiersz ma pelna szerokosc,
   nazwa po lewej, kwota po prawej - tak jak zaklada CSS klasy. */
.woocommerce-order-pay .payment__order .shop_table,
.woocommerce-order-pay .payment__order .shop_table tbody,
.woocommerce-order-pay .payment__order .shop_table tfoot {
    display: block;
    width: 100%;
}

.woocommerce-order-pay .payment__order .shop_table thead {
    display: none;
}

.woocommerce-order-pay .payment__order .shop_table tfoot tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--at-space--xs);
}

.woocommerce-order-pay .payment__order .shop_table tfoot td {
    text-align: right;
}

/* Kwota pozycji w tej samej kolumnie co sumy, takze ponizej 992 px, gdzie CSS klasy
   zeruje jej margines (stad `!important`: tamta deklaracja tez go ma). */
.woocommerce-order-pay .payment__order .shop_table tbody .product-subtotal {
    margin-left: auto !important;
    text-align: right;
}

/* ---------- Moje konto: zwinieta nawigacja ---------- */
/* Wlasny CSS z buildera (klasa `.my-account-section`) daje nawigacji `min-width: 220px`.
   Modul `my-account` pakietu zeruje ja dla nawigacji zwijanej, ale od wydania z warstwami
   kaskady robi to z `@layer lukuro.modules`, a regula z buildera jest poza warstwami
   i wygrywa: zwinieta szyna miala 220 px zamiast 64 px. Ta sama deklaracja co w module,
   tylko poza warstwa. Zgloszone do pakietu jako [FW-NAV-RAIL]. */
.my-account-section nav.woocommerce-MyAccount-navigation.lukuro-account-nav--rail-enabled:not(.is-collapsed) {
    min-width: 0;
}

/* ---------- Naglowek: przelacznik trybu ciemnego ukryty ---------- */
/* Decyzja wlasciciela 2026-10-08: tryb ciemny nie wchodzi w okno S7, wiec przelacznik
   z naglowka (element Advanced Themera) nie ma byc widoczny. Sam element zostaje
   w szablonie; po decyzji o trybie ciemnym wystarczy usunac ten blok. */
header .brxe-brxc-darkmode-toggle {
    display: none;
}

/* ---------- Opinie: gwiazdki obok plakietki na malych telefonach ---------- */
/* Odbior powtorki proby 2026-10-08: na 390 px plakietka "Zweryfikowany zakup" (167 px),
   odstep kolumn (12,8 px) i gwiazdki (98 px) daja 277,8 px przy 277 px miejsca, wiec
   gwiazdki spadaly do osobnego wiersza; na produkcji stoja w jednym wierszu z plakietka.
   Mniejszy odstep kolumn przywraca jeden wiersz. Prog 478 px jak przy komunikatach. */
@media (max-width: 478px) {
    .lukuro-review-header {
        column-gap: 8px;
    }
}