/* =========================================================================
   Barek Ogrodowy — globalne style i mini-reset
   --------------------------------------------------------------------
   Scoped do klas .barek-* żeby nie kolidować z motywem Divi. Odwołania
   tylko do tokenów z variables.css.
   ========================================================================= */

/* ---------- Box-sizing tylko dla naszych komponentów ---------- */
[class^="barek-"],
[class*=" barek-"] {
    box-sizing: border-box;
}

[class^="barek-"] *,
[class*=" barek-"] * {
    box-sizing: inherit;
}

/* ---------- Domyślny rozmiar treści ----------
   Każdy komponent `.barek-*` startuje z bazowych 18 px. Sekcje mogą
   nadpisywać dla nagłówków, eyebrow'ów, captions itp., ale "zwykła
   treść" zawsze jest 18 px. Wartość: var(--barek-text-base). */
[class^="barek-"],
[class*=" barek-"] {
    font-size: var(--barek-text-base);
}

/* ---------- Reset Divi wrappers wokół naszych shortcode'ów ----------
   Divi (Theme Builder + Page Builder) opakowuje każdy moduł Code/Text
   w stack: .et_pb_section > .et_pb_row > .et_pb_column > .et_pb_module.
   Każdy z tych wrapperów ma domyślny padding/margin (~50/27/30 px).
   Między sekcjami sumuje się to do ~200 px białej przestrzeni.

   Zerujemy padding/margin Divi'owych wrapperów gdy wewnątrz jest nasza
   sekcja (.barek-*) — nasze sekcje same kontrolują swój `section-py`.

   Wymaga :has() — Chrome 105+, Safari 15.4+, Firefox 121+. Starsze
   przeglądarki dostają domyślne padding'i Divi (degradacja akceptowalna). */
.et_pb_section:has([class^="barek-"]),
.et_pb_section:has([class*=" barek-"]) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.et_pb_row:has([class^="barek-"]),
.et_pb_row:has([class*=" barek-"]) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Divi ogranicza row do ~80% szerokości — nasze sekcje są full-bleed */
    width: 100% !important;
    max-width: 100% !important;
}

.et_pb_module:has([class^="barek-"]),
.et_pb_module:has([class*=" barek-"]) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ---------- Reset list dla naszych komponentów ----------
   Divi nadpisuje list-style: disc na ul, dlatego !important.
   Wszystkie listy w komponentach wtyczki mają być bez kropek/marginesów. */
ul[class^="barek-"],
ul[class*=" barek-"],
ol[class^="barek-"],
ol[class*=" barek-"] {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul[class^="barek-"] li,
ul[class*=" barek-"] li,
ol[class^="barek-"] li,
ol[class*=" barek-"] li {
    list-style: none !important;
    margin: 0;
    padding: 0;
    background: none;
}

ul[class^="barek-"] li::before,
ul[class*=" barek-"] li::before,
ol[class^="barek-"] li::before,
ol[class*=" barek-"] li::before {
    content: none !important;
    display: none !important;
}

/* ---------- Anchor scrollowanie ----------
   - scroll-padding-top: offset o wysokość headera, żeby sekcje nie chowały się pod menu
   - scroll-behavior: smooth — natywny scroll po cross-page navigation
     (np. powrót z /koszyk/ na /#kontakt) bez dodatkowego JS */
html {
    scroll-padding-top: var(--barek-header-height-scrolled);
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ---------- Pomocnicze klasy globalne ---------- */

/* Body przy otwartym mobile menu nie scrolluje */
body.barek-no-scroll {
    overflow: hidden;
}

/* Visually hidden — dla aria labels */
.barek-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   COMMON CONTAINER — wszystkie `*__inner` mają tę samą szerokość
   --------------------------------------------------------------------
   Jednolita szerokość kontenera, marginesy i padding dla CAŁEGO projektu.
   Jeśli dodajesz nową sekcję (np. `.barek-foo__inner`), dopisz ją do listy
   selektorów poniżej — automatycznie dostanie max-width 1400 px i padding
   boczny dostosowany do breakpointa.

   Pliki sekcji (header.css, footer.css, …) NIE definiują już `max-width` /
   `margin: 0 auto` / `padding: 0 var(--barek-container-px)` na `__inner`.
   Tu jest jedno, wspólne źródło prawdy.

   Sekcje tekstowe (FAQ, Contact) mogą dodatkowo ograniczyć szerokość
   wewnętrznych elementów (`__list`, `__items`, `__header`) dla czytelności
   — patrz pliki tych sekcji.
   ========================================================================= */

.barek-header__inner,
.barek-footer__inner,
.barek-contact__inner,
.barek-faq__inner,
.barek-hero__inner,
.barek-about__inner,
.barek-product__inner,
.barek-cart__inner,
.barek-checkout-page__inner {
    max-width: var(--barek-container-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--barek-container-px);
    padding-right: var(--barek-container-px);
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .barek-header__inner,
    .barek-footer__inner,
    .barek-contact__inner,
    .barek-faq__inner,
    .barek-hero__inner,
    .barek-product__inner,
    .barek-cart__inner,
    .barek-checkout-page__inner {
        padding-left: var(--barek-container-px-tablet);
        padding-right: var(--barek-container-px-tablet);
    }
}

@media (max-width: 640px) {
    .barek-header__inner,
    .barek-footer__inner,
    .barek-contact__inner,
    .barek-faq__inner,
    .barek-hero__inner,
    .barek-product__inner,
    .barek-cart__inner,
    .barek-checkout-page__inner {
        padding-left: var(--barek-container-px-mobile);
        padding-right: var(--barek-container-px-mobile);
    }
}