/*
Theme Name: Frost Child
Template: frost
*/

/* Globalny box-sizing - kluczowy dla poprawnego działania paddingów */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    /* 8px Grid System */
    --grid-8: 8px;
    --grid-16: 16px;
    --grid-24: 24px;
    --grid-32: 32px;
    --grid-40: 40px;
    --grid-48: 48px;
    --grid-64: 64px;
    --grid-96: 96px;

    --section-v-padding-desktop: var(--grid-96);
    --section-v-padding-mobile: var(--grid-48);
    --container-gutter-desktop: var(--grid-40);
    --container-gutter-mobile: var(--grid-24);

    --wp--style--root--padding-left: var(--container-gutter-desktop);
    --wp--style--root--padding-right: var(--container-gutter-desktop);

    /* Responsive section spacing - używany przez bloki */
    --section-spacing: var(--section-v-padding-mobile);
}

@media (min-width: 992px) {
    :root {
        --section-spacing: var(--section-v-padding-desktop);
    }
}

/* 1. Usuwamy blokady sticky i marginesy domyślne */
.wp-site-blocks, 
body, 
html {
    overflow: visible !important;
    margin: 0 !important;
    gap: 0 !important; /* Dodaj to, aby usunąć odstępy między blokami najwyższego poziomu */
}

/* Globalny padding na głównym kontenerze strony */
.wp-site-blocks {
    padding-top: 90px !important;
    padding-left: var(--wp--style--root--padding-left) !important;
    padding-right: var(--wp--style--root--padding-right) !important;
    display: flex;
    flex-direction: column;
}

@media (min-width: 1025px) {
    .wp-site-blocks {
        padding-top: 110px !important;
    }
}

html, body, button, a {
    touch-action: manipulation;
}

/* Detale stopki Bling Bling Garage */

/* Kontener główny stopki */
.bbg-footer-fixed {
    padding-top: 80px !important;
    padding-bottom: 40px !important;
    /* Usunięto padding: 80px 0 40px 0 !important; */
    background-color: #fff;
    color: #000;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Dodaj nową klasę kontenera (identyczną jak .header-container): */
.footer-inner-container {
    max-width: 1600px;
    margin: 0 auto;
    /* Usunięto padding: 0 var(--container-gutter-mobile); */
    width: 100%;
}

/* Górna i dolna belka - flex */
.footer-top-bar, .footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #888;
    margin-bottom: 60px;
}

.footer-bottom-bar {
    margin-bottom: 0;
    margin-top: 20px;
}

/* Kolor pomarańczowy */
.orange-text, .col-label {
    color: var(--wp--preset--color--accent);
    font-weight: bold;
}

/* Główna siatka - to naprawia układ Desktop */
.footer-main-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr; /* Pierwsza kolumna szersza */
    gap: 40px;
    align-items: start;
}

/* Logo w stopce */
.footer-hero-logo {
    margin-bottom: 40px;
}

.footer-hero-logo .wp-block-site-logo img,
.footer-hero-logo img {
    max-width: 150px; /* Dostosuj szerokość logo do potrzeb */
    height: auto;
    display: block;
}

.footer-hero-logo .wp-block-site-logo {
    line-height: 0;
}

/* Hero text */
.hero-title p {
    font-size: 36px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    margin: 0 0 20px 0 !important;
    color: #000;
}

.hero-desc p {
    font-size: 14px;
    text-transform: none; /* Opis małymi literami zgodnie ze wzorem */
    color: #666;
    letter-spacing: normal;
    max-width: 300px;
}

/* Kolumny z linkami */
.col-label {
    display: block;
    margin-bottom: 30px;
    font-size: 12px;
}

.col-content p {
    font-size: 13px !important;
    line-height: 1.8 !important;
    margin-bottom: 20px !important;
}

.col-content small {
    color: #999;
    font-size: 10px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

.social-link:hover {
    color: var(--wp--preset--color--accent);
}

/* Linia oddzielająca */
.footer-line {
    border: 0;
    border-top: 1px solid #eee;
    margin: 60px 0 20px 0;
}

/* Responsywność dla mobile */
@media (max-width: 768px) {
    .footer-main-grid {
        grid-template-columns: 1fr;
    }
    .footer-top-bar, .footer-bottom-bar {
        flex-direction: column;
        gap: 10px;
    }
    .footer-hero-logo {
        margin-bottom: 25px;
    }
    .footer-hero-logo img {
        max-width: 120px;
    }
}

/* --- KLASY POMOCNICZE WIDOCZNOŚCI --- */
.desktop-only { display: none !important; }
.mobile-only { display: flex !important; }

@media (min-width: 1025px) {
    .desktop-only { display: flex !important; }
    .mobile-only { display: none !important; }
}

/* --- NAGŁÓWEK BAZA (Mobile: biały od początku) --- */
.site-header-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    padding-top: var(--grid-16) !important;
    padding-bottom: var(--grid-16) !important;
    /* Usunięto padding: var(--grid-16) var(--container-gutter-mobile); */
    background-color: #fff !important; /* Biały na starcie dla mobile */
    transition: all 0.4s ease;
}

/* Stan po scrollu (Solidny biały dla wszystkich) */
.site-header-fixed.is-scrolled {
    background-color: #fff !important; /* Zmieniono z #000 */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 8px !important; /* Zmieniono z var(--wp--style--root--padding-left) */
    padding-right: 8px !important; /* Zmieniono z var(--wp--style--root--padding-right) */
    box-shadow: none;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

/* Hamburger - domyśjnnie czarny dla białego tła mobile */
.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px 0;
    margin: 0;
}

.hamburger span {
    width: 25px;
    height: 2px;
    background: #000 !important; /* Czarny hamburger na białym tle */
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.4s ease;
}

/* Animacja hamburger → X */
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Ikona telefonu - domyślnie czarna dla białego tła mobile */
.header-phone-link {
    display: flex;
    align-items: center;
    color: #000 !important;
    transition: all 0.4s ease;
}

.header-phone-link svg {
    stroke: currentColor;
}

.header-phone-link:hover {
    transform: scale(1.1);
}

/* Zmiana kolorów ikon na czarne po scrollu (gdy tło pozostaje białe) */
.site-header-fixed.is-scrolled .hamburger span {
    background: #000 !important; /* Zmieniono z #fff */
}

.site-header-fixed.is-scrolled .header-phone-link {
    color: #000 !important; /* Zmieniono z #fff */
}

/* Przycisk CTA (Pełny czerwony) */
.header-btn, .header-cta-btn {
    background-color: var(--wp--preset--color--accent); /* Użycie koloru z theme.json */
    color: #fff !important;
    padding: 12px 28px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    transition: all 0.3s ease;
    letter-spacing: 0.05em;
    white-space: nowrap;
    display: inline-block;
    border: none; /* Usunięcie ewentualnych obramowań */
}

.header-btn:hover, .header-cta-btn:hover {
    background-color: var(--wp--preset--color--accent);
    filter: brightness(0.85); /* Delikatne przyciemnienie na hover zamiast sztywnego koloru */
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 40, 0, 0.3); /* Dopasowanie cienia do koloru accent */
}

/* --- UKŁAD DESKTOP (1025px+) --- */
@media (min-width: 1025px) {
    .site-header-fixed {
        background-color: transparent !important; /* Przezroczysty na desktopie w stanie zero */
    }

    /* Na desktopie przy przezroczystym tle chcemy czarne ikony */
    .site-header-fixed:not(.is-scrolled) .hamburger span {
        background: #000 !important;
    }
    
    .site-header-fixed:not(.is-scrolled) .header-phone-link {
        color: #000 !important;
    }

    .header-container {
        position: relative;
        z-index: 1;
    }

    /* Czarny "ucięty" pasek dla menu i przycisku - USUNIĘTY */
    .header-container::before {
        display: none; /* Usuwa czarny pasek tła za menu */
    }

    /* Gdy przewinięte: cały pasek biały, ucięty pasek znika */
    .site-header-fixed.is-scrolled {
        background-color: #fff !important; /* Zmieniono z #000 */
    }

    .site-header-fixed.is-scrolled .header-container::before {
        opacity: 0;
        visibility: hidden;
    }

    .header-left { flex: 0 0 auto; position: relative; z-index: 2; }
    .header-center { 
        flex: 1; 
        display: flex;
        justify-content: flex-end; 
        padding-right: 30px; /* Zmniejszony odstęp od przycisku */
    }
    .header-right { flex: 0 0 auto; display: flex; }

    /* Stylizacja menu desktopowego */
    .header-center .wp-block-navigation__container,
    .header-center ul {
        list-style: none;
        display: flex;
        gap: 25px; /* Odstępy między linkami jak na screenie */
        margin: 0;
        padding: 0;
    }

    .header-center .wp-block-navigation-item__content,
    .header-center ul li a {
        color: #000 !important; /* Czarny kolor linków na start */
        text-decoration: none;
        font-size: 13px !important; /* Nieco mniejszy font */
        font-weight: 600 !important;
        text-transform: uppercase;
        transition: color 0.3s;
        letter-spacing: 0.05em;
    }

    /* Dodaj regułę dla stanu po scrollu, aby linki były widoczne na białym tle */
    .site-header-fixed.is-scrolled .header-center .wp-block-navigation-item__content,
    .site-header-fixed.is-scrolled .header-center ul li a {
        color: #000 !important; /* Zmieniono z #fff */
    }

    .header-center .wp-block-navigation-item__content:hover,
    .header-center ul li a:hover {
        color: var(--wp--preset--color--accent) !important;
    }

    /* Korekta rozmiaru logo na desktopie */
    .header-left .wp-block-site-logo img {
        width: 120px !important;
        height: auto !important;
    }
}

/* --- UKŁAD MOBILE (do 1024px) --- */
@media (max-width: 1024px) {
    
    .header-left, .header-right { flex: 1; display: flex; }
    .header-center { 
        flex: 2; 
        display: flex; 
        justify-content: center; 
    }
    .header-right { justify-content: flex-end; }
    
    .header-left .wp-block-site-logo img,
    .header-center .wp-block-site-logo img {
        width: 80px !important; /* Mobile */
        height: auto !important;
    }
}

/* --- MOBILE DROPDOWN MENU --- */
.mobile-dropdown-menu {
    position: fixed;
    top: 70px; /* fallback - nadpisywane przez JS */
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 9998;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    padding: 8px 0 24px;
}
.mobile-dropdown-menu.active {
    transform: translateY(0);
}

@media (min-width: 1025px) {
    .mobile-dropdown-menu {
        display: none !important;
    }
}
.menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.45); z-index: 9997; opacity: 0; visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    backdrop-filter: blur(2px);
}
.menu-overlay.active { opacity: 1; visibility: visible; }

/* Stylizacja nawigacji w stopce - poprawka */
.col-content .wp-block-navigation {
    padding: 0;
}

/* Obsługa wielu list ul (jeśli wystąpią) */
.col-content .wp-block-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.col-content .wp-block-navigation-item {
    margin: 0 !important;
    padding: 0 !important;
}

.col-content .wp-block-navigation-item__content.wp-block-navigation-item__content {
    font-size: 13px !important;
    line-height: 1.8 !important;
    text-decoration: none;
    color: inherit;
    padding: 0 !important;
    display: inline-block;
    transition: color 0.2s ease;
    text-transform: uppercase;
}

/* Zapewnienie, że label wewnątrz linku dziedziczy style */
.col-content .wp-block-navigation-item__label {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-transform: inherit;
}

.col-content .wp-block-navigation-item__content:hover,
.col-content .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
    color: var(--wp--preset--color--accent);
}

/* 1. Sztywny rozmiar logo - baza */
.header-left .wp-block-site-logo img,
.header-center .wp-block-site-logo img {
    object-fit: contain !important; /* Zapobiega zniekształceniu logo */
    transition: all 0.4s ease;
}

/* --- STICKY LOGO SWAP --- */
.logo-sticky {
    display: none;
    height: 40px;
    width: auto;
    object-fit: contain;
    transition: all 0.4s ease;
}

.is-scrolled .logo-default { display: none; }
.is-scrolled .logo-sticky  { display: block; }

@media (min-width: 1025px) {
    .logo-sticky { height: 50px; }
}
/* --- END STICKY LOGO SWAP --- */

/* Nawigacja w mobile dropdown */
.mobile-dropdown-menu .wp-block-navigation__container {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mobile-dropdown-menu .wp-block-navigation-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.mobile-dropdown-menu .wp-block-navigation-item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.mobile-dropdown-menu .wp-block-navigation-item__content {
    display: flex !important;
    align-items: center;
    color: #111 !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 16px 24px !important;
    transition: color 0.2s ease, background 0.2s ease;
    position: relative;
}

.mobile-dropdown-menu .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--accent) !important;
    background: rgba(0, 0, 0, 0.02);
}

/* --- DROPDOWN DESKTOP --- */
@media (min-width: 1025px) {
    /* Rodzic z submenu */
    .header-center .wp-block-navigation-item.wp-block-navigation-submenu,
    .header-center .wp-block-navigation-item.has-child {
        position: relative;
    }

    /* Ukryj domyślny toggle WP */
    .header-center .wp-block-navigation-submenu__toggle {
        display: none !important;
    }

    /* Kontener submenus - ukryty domyślnie */
    .header-center .wp-block-navigation__submenu-container {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        min-width: 220px !important;
        background-color: #ffffff !important;
        color: #111 !important;
        box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
        border-top: 3px solid var(--wp--preset--color--accent) !important;
        /* padding-top tworzy wizualny odstęp, ale myszka może po nim przejechać */
        padding: 8px 0 0 !important;
        list-style: none !important;
        margin: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
        z-index: 10000 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Pokaż na hover */
    .header-center .wp-block-navigation-item.wp-block-navigation-submenu:hover
    > .wp-block-navigation__submenu-container,
    .header-center .wp-block-navigation-item.has-child:hover
    > .wp-block-navigation__submenu-container {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Strzałka przy rodzicu */
    .header-center .wp-block-navigation-submenu > .wp-block-navigation-item__content::after,
    .header-center .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
        content: '▾';
        font-size: 10px;
        margin-left: 4px;
        vertical-align: middle;
        opacity: 0.5;
    }

    /* Linki w submenu */
    .header-center .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        display: block !important;
        padding: 10px 20px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-align: left !important;
        white-space: nowrap !important;
        color: #111111 !important;
        background-color: transparent !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    .header-center .wp-block-navigation__submenu-container
    .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
        border-bottom: none !important;
    }

    .header-center .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover {
        color: var(--wp--preset--color--accent) !important;
        background-color: rgba(0,0,0,0.03) !important;
        padding-left: 26px !important;
    }
}

/* --- MOBILE: ukryj podmenu w dropdown całkowicie --- */
.mobile-dropdown-menu .wp-block-navigation__submenu-container,
.mobile-dropdown-menu .wp-block-navigation-submenu__toggle {
    display: none !important;
}

/* Globalny styl H2 - ujednolicenie */
h2, 
.wp-block-heading h2,
[class*="__main-title"],
[class*="-main-title"],
[class*="__title"] {
    font-family: var(--wp--preset--font-family--oswald), sans-serif !important;
    font-size: clamp(2.5rem, 6vw, 5rem) !important;
    font-weight: 500 !important; /* Zmieniono z 600 */
    text-transform: uppercase !important;
    line-height: 1.1 !important; /* Lekko zwiększona interlinia dla lepszej czytelności przy 600 */
    letter-spacing: -0.02em !important; /* Mniejszy ujemny rozstaw dla lżejszki czcionki */
    margin-bottom: var(--grid-32) !important;
    display: block;
}

/* Usuwamy wizualne podziały wewnątrz H2 */
h2 span, 
h2 strong,
[class*="__title-light"],
[class*="-title-light"],
[class*="__title-bold"],
[class*="-title-bold"] {
    font-weight: 500 !important; /* Zmieniono z 600 */
    display: inline !important; /* Powrót do tekstu w jednej linii, jeśli nie ma potrzeby łamania */
}

h1, h3, h4, h5, h6 {
    line-height: 1.2 !important;
}

/* Wymuszenie małych tytułów w siatce produktów */
.woo-product-grid .woo-product-grid__title {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.4 !important;
    font-family: sans-serif !important;
}

/* Globalne wymuszenie marginesów wewnętrznych dla wszystkich kontenerów treści */
.footer-inner-container,
[class*="__container"],
[class*="__grid"],
.about-page-editor,
.wp-block-group__inner-container,
.is-layout-constrained > :not(.alignfull),
.wp-block-columns:not(.alignfull) {
    padding-left: var(--wp--style--root--padding-left) !important;
    padding-right: var(--wp--style--root--padding-right) !important;
}

/* Obsługa bloków Align Full - tło do krawędzi, treść z paddingiem */
.alignfull {
    /* Wyciągamy blok poza padding rodzica (.wp-site-blocks) */
    margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
    margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
    width: calc(100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right)) !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Jeśli wewnątrz bloku Align Full jest kontener, musi on odzyskać padding */
.alignfull > [class*="__container"],
.alignfull > [class*="__grid"],
.alignfull > .wp-block-group__inner-container,
.alignfull > .wp-block-columns {
    padding-left: var(--wp--style--root--padding-left) !important;
    padding-right: var(--wp--style--root--padding-right) !important;
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- MARGINESY MOBILNE (Ujednolicenie) --- */
@media (max-width: 767px) {
    :root {
        --wp--style--root--padding-left: 15px !important;
        --wp--style--root--padding-right: 15px !important;
        --container-gutter-mobile: 15px !important;
    }

    /* Wymuszamy padding na body, aby nawet bloki bez kontenerów mary odstęp */
    body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Specyficzna poprawka dla nagłówka, który jest fixed */
    .site-header-fixed {
        width: 100% !important;
        left: 0 !important;
    }
}

.site-header-fixed, 
footer {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Wymuszenie widoczności i pełnej szerokości galerii WooCommerce */
.woocommerce-product-gallery {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 100% !important; /* Wymuszenie 100% szerokości kontenera */
    float: none !important; /* Usunięcie floatów Woo */
}

.woocommerce-product-gallery__wrapper {
    position: relative !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-product-gallery__image {
    position: relative !important;
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    float: none !important; /* Kluczowe: usunięcie floata z pojedynczego zdjęcia */
    display: block !important;
}

/* Wymuszenie, aby link i obrazek zajmowały całą dostępną przestrzeń */
.woocommerce-product-gallery__image a {
    display: block !important;
    width: 100% !important;
}

.woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-width: 100% !important;
}

/* Ukrycie przycisku lupy, jeśli nachodzi na design (opcjonalnie) */
.woocommerce-product-gallery__trigger {
    display: none !important;
}

/* Karuzela mobilna dla sekcji Cennika */
/* Carousel styles moved to plugin block CSS */

/* Karuzela mobilna dla sekcji Studio (Image Carousel One) */
@media (max-width: 767px) {
    .studio-section {
        overflow: hidden !important;
    }

    .studio-section__header-box {
        padding: 0 20px !important;
    }

    .studio-section__grid {
        display: flex !important; /* Wymuszenie Flexbox */
        flex-direction: row !important; /* Wymuszenie układu poziomego */
        flex-wrap: nowrap !important; /* Zakaz zawijania do nowej linii */
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        
        /* Resetowanie układu Grid, jeśli był zdefiniowany */
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }

    .studio-section__grid::-webkit-scrollbar {
        display: none !important;
    }

    .studio-section__grid-item {
        flex: 0 0 100% !important; /* Każdy element zajmuje 100% szerokości */
        min-width: 100% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        
        /* KLUCZOWE: Resetowanie pozycji Grid dla klas item-hero, item-tall itp. */
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .studio-section__img {
        width: 100% !important;
        height: 450px !important; /* Możesz dostosować wysokość zdjęcia na mobile */
        object-fit: cover !important;
        display: block !important;
    }

    .studio-section__progress-container {
        display: block !important;
        height: 2px;
        background: #eee;
        margin: 50px 20px 40px !important;
        position: relative;
    }

    .studio-section__progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--wp--preset--color--accent);
        width: 25%;
        transition: width 0.2s ease-out;
    }
}

/* Ukrywamy pasek postępu na desktopie */
.studio-section__progress-container {
    display: none;
}

/* Karuzela mobilna dla sekcji USP */
@media (max-width: 767px) {
    .usp-section {
        overflow: hidden !important;
    }

    .usp-section__container {
        display: block !important; /* Zmiana z flex na block */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .usp-section__sidebar {
        padding: 0 20px !important;
        margin-bottom: 40px !important;
    }

    .usp-section__cards {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        scrollbar-width: none !important;
    }

    .usp-section__cards::-webkit-scrollbar {
        display: none !important;
    }

    .usp-section__card {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        padding: 40px 20px !important;
        border-right: none !important; /* Usuwamy pionowe linie podziału na mobile */
        border-bottom: 1px solid #eee; /* Opcjonalna linia oddzielająca slajdy wizualnie */
    }

    .usp-section__progress-container {
        display: block !important;
        height: 2px;
        background: #eee;
        margin: 30px 20px 40px !important;
        position: relative;
    }

    .usp-section__progress-bar,
    .usp-section__progress-container .studio-section__progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--wp--preset--color--accent);
        width: 25%;
        transition: width 0.2s ease-out;
    }
}

/* Ukrywamy pasek postępu na desktopie */
.usp-section__progress-container {
    display: none;
}

/* Karuzela mobilna dla sekcji Gallery Carousel */
@media (max-width: 767px) {
    .gallery-carousel {
        overflow: hidden !important;
    }
    .gallery-carousel__track {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        scrollbar-width: none !important;
    }
    .gallery-carousel__track::-webkit-scrollbar {
        display: none !important;
    }
    .gallery-carousel__item {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        scroll-snap-align: start !important;
        padding: 0 !important;
    }
    .gallery-carousel__progress-container {
        display: block !important;
        height: 2px;
        background: #eee;
        margin: 30px 20px 40px !important;
        position: relative;
    }
    .gallery-carousel__progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--wp--preset--color--accent);
        width: 25%;
        transition: width 0.2s ease-out;
    }
}

/* Karuzela mobilna dla sekcji Reviews Carousel */
@media (max-width: 767px) {
    .reviews-carousel {
        overflow: hidden !important;
    }
    .reviews-carousel__scroll-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        scrollbar-width: none !important;
    }
    .reviews-carousel__scroll-wrapper::-webkit-scrollbar {
        display: none !important;
    }
    .reviews-carousel__card {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        scroll-snap-align: start !important;
        padding: 40px 20px !important;
    }
    .reviews-carousel__progress-container {
        display: block !important;
        height: 2px;
        background: #eee;
        margin: 30px 20px 40px !important;
        position: relative;
    }
    .reviews-carousel__progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--wp--preset--color--accent);
        width: 25%;
        transition: width 0.2s ease-out;
    }
}

/* Karuzela mobilna dla sekcji Values Section */
@media (max-width: 767px) {
    .values-section {
        overflow: hidden !important;
    }
    .values-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        scrollbar-width: none !important;
    }
    .values-grid::-webkit-scrollbar {
        display: none !important;
    }
    .value-item {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        scroll-snap-align: start !important;
        padding: 40px 20px !important;
    }
    .about-us-values__progress-container {
        display: block !important;
        height: 2px;
        background: #eee;
        margin: 30px 20px 40px !important;
        position: relative;
    }
    .about-us-values__progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--wp--preset--color--accent);
        width: 25%;
        transition: width 0.2s ease-out;
    }
}

/* Karuzela mobilna dla sekcji Contact Page Branches */
@media (max-width: 767px) {
    .contact-page__branches {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        scrollbar-width: none !important;
    }
    .contact-page__branches::-webkit-scrollbar {
        display: none !important;
    }
    .contact-page__branch-card {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        scroll-snap-align: start !important;
        padding: 40px 20px !important;
    }
    .contact-page__progress-container {
        display: block !important;
        height: 2px;
        background: #eee;
        margin: 30px 20px 40px !important;
        position: relative;
    }
    .contact-page__progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--wp--preset--color--accent);
        width: 25%;
        transition: width 0.2s ease-out;
    }
}

/* Karuzela mobilna dla sekcji CTA Section */
@media (max-width: 767px) {
    .cta-section__progress-container {
        display: block !important;
        height: 2px;
        background: #eee;
        margin: 30px 20px 40px !important;
        position: relative;
    }
    .cta-section__progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--wp--preset--color--accent);
        width: 25%;
        transition: width 0.2s ease-out;
    }
}