/* =========================================================
   ZieloneDrzewko.pl 2.31 - GLOBAL LAYOUT / RESPONSIVE FIX
   Jedna os szerokosci, brak poziomego overflow i prawych szczelin.
   Ladowany jako ostatni arkusz CSS.
========================================================= */

:root {
    --zd-layout-max: 1540px;
    --zd-layout-gutter: 32px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

body {
    position: relative;
    min-width: 0;
}

img,
picture,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

img,
picture,
video,
canvas {
    height: auto;
}

/* Glowny obszar nie ogranicza juz szerokich modulow do starego 1280px. */
.main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible;
}

.main > * {
    min-width: 0;
}

/* Jeden wspolny kontener dla wszystkich najwazniejszych sekcji home. */
.zd-graphic-slider,
.home-value-section,
.home-categories-v228,
.premium-section,
.home-editorial-section,
.newsletter-clean,
.home-seo-modern {
    position: relative;
    left: auto !important;
    right: auto !important;
    width: min(var(--zd-layout-max), calc(100% - var(--zd-layout-gutter))) !important;
    max-width: var(--zd-layout-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
}

/* Te moduly sa juz wewnatrz szerokiego kontenera - nie moga drugi raz uciekac do 100vw. */
.home-feature-strip,
.home-category-shortcuts {
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
}

/* Starsze sekcje full-bleed nie uzywaja juz ujemnych marginesow viewportu. */
.premium-blog-home,
.blog-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Naglowek i stopka zawsze mieszcza sie w viewport. */
.shop-header,
.shop-header--market,
.shop-header--market .top-trust-bar,
.shop-header--market .category-menu,
.site-footer-like-screen,
.shop-footer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.shop-header--market .header-inner,
.shop-header--market .top-trust-inner,
.site-footer-like-screen .footer-container {
    width: min(var(--zd-layout-max), calc(100% - var(--zd-layout-gutter))) !important;
    max-width: var(--zd-layout-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Menu kategorii moze przewijac sie wewnatrz, ale nigdy nie poszerza dokumentu. */
.shop-header--market .category-menu {
    overflow: hidden;
}

.shop-header--market .menu-inner {
    max-width: var(--zd-layout-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overscroll-behavior-inline: contain;
}

/* Elementy formularzy i siatek nie moga wymuszac szerokosci ponad rodzica. */
.main input,
.main select,
.main textarea,
.main button,
.main form,
.main table,
.main pre,
.main code {
    max-width: 100%;
}

.premium-product-grid,
.home-categories-v228-grid,
.home-category-shortcuts-grid,
.home-editorial-grid,
.home-seo-modern-grid,
.newsletter-clean-inner,
.home-feature-strip {
    min-width: 0;
}

.premium-product-card,
.home-category-v228-card,
.home-category-shortcut-item,
.home-editorial-card,
.home-feature-strip-item {
    min-width: 0;
    max-width: 100%;
}

/* Dlugie adresy i teksty nie rozpychaja layoutu na telefonie. */
.main p,
.main a,
.main span,
.main strong,
.main h1,
.main h2,
.main h3,
.main h4 {
    overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
    :root {
        --zd-layout-gutter: 28px;
    }

    .zd-graphic-slider,
    .home-value-section,
    .home-categories-v228,
    .premium-section,
    .home-editorial-section,
    .newsletter-clean,
    .home-seo-modern {
        width: min(var(--zd-layout-max), calc(100% - var(--zd-layout-gutter))) !important;
    }
}

@media (max-width: 760px) {
    :root {
        --zd-layout-gutter: 20px;
    }

    .main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .shop-header--market .header-inner,
    .shop-header--market .top-trust-inner,
    .site-footer-like-screen .footer-container,
    .zd-graphic-slider,
    .home-value-section,
    .home-categories-v228,
    .premium-section,
    .home-editorial-section,
    .newsletter-clean,
    .home-seo-modern {
        width: calc(100% - var(--zd-layout-gutter)) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .home-feature-strip,
    .home-category-shortcuts {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    :root {
        --zd-layout-gutter: 16px;
    }

    .shop-header--market .header-inner,
    .shop-header--market .top-trust-inner,
    .site-footer-like-screen .footer-container,
    .zd-graphic-slider,
    .home-value-section,
    .home-categories-v228,
    .premium-section,
    .home-editorial-section,
    .newsletter-clean,
    .home-seo-modern {
        width: calc(100% - var(--zd-layout-gutter)) !important;
    }
}