/* ============================================
   ROOFRACK.PL - GLOWNY ARKUSZ CSS
   ============================================ */


/* ============================================
   1. STYLE OGOLNE
   ============================================ */

table {
    max-width: 100%;
}

.single_col h1 {
    font-size: 20px;
}

iframe {
    max-width: 100% !important;
}


/* ============================================
   2. MENU - PRZEWIJANIE KATEGORII
   ============================================ */

.sub_menu .wrapper_full .left {
    height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(33, 27, 92, 0.18) transparent;
}

/* Chrome, Edge, Safari */

.sub_menu .wrapper_full .left::-webkit-scrollbar {
    width: 5px;
}

.sub_menu .wrapper_full .left::-webkit-scrollbar-track {
    background: transparent;
}

.sub_menu .wrapper_full .left::-webkit-scrollbar-thumb {
    background: rgba(33, 27, 92, 0.18);
    border-radius: 999px;
}

.sub_menu .wrapper_full .left::-webkit-scrollbar-thumb:hover {
    background: rgba(33, 27, 92, 0.35);
}

.sub_menu .wrapper_full .left::-webkit-scrollbar-button {
    display: none;
}


/* ============================================
   3. KONFIGURATOR - PELNY PODGLAD
   ============================================ */

.configurator_section .conf_box:has(.conf_expanded)
> .conf_full_preview {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    position: absolute;
    inset: 0;
    z-index: 99999;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 16px;
    overflow: hidden;
    max-height: 800px;
}


/* ============================================
   4. POLA WYBORU
   ============================================ */

.dropdown_item {
    position: relative;
    min-width: 280px;
    height: 64px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #eceaf0;
    border-radius: 14px;
    cursor: pointer;
}

.dropdown_item strong {
    font-size: 12px;
    font-weight: 600;
    color: #25204f;
}

.dropdown_item .selected_value {
    font-size: 12px;
    color: #77738a;
}

.dropdown_popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: auto;
    box-sizing: border-box;
    padding: 10px;
    background: #fff;
    border: 1px solid #eceaf0;
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(25, 20, 55, 0.12);
    z-index: 1000;
    cursor: default;
}


/* ============================================
   5. WYSZUKIWANIE
   ============================================ */

.input_advanced_search {
    box-sizing: border-box;
    display: block;
    width: 90%;
    height: 38px;
    padding: 0 12px;
    margin-bottom: 7px;
    border: 1px solid #dedce6;
    border-radius: 8px;
    outline: none;
    font-size: 13px;
    color: #25204f;
    background: #fafafa;
}

.input_advanced_search:focus {
    border-color: #ff7900;
    box-shadow: 0 0 0 2px rgba(255, 121, 0, 0.10);
}


/* ============================================
   6. LISTY ROZWIJANE
   ============================================ */

.dropdown_list {
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: none;
}

.dropdown_list::-webkit-scrollbar {
    display: none;
}

.option_item:hover {
    background: #fff3e8;
    color: #f57400;
}


/* ============================================
   7. SLIDER PRODUKTOW
   ============================================ */

#products_slider_init {
    display: flex;
    gap: 24px;
    width: 100%;
    overflow-x: auto;
}

#products_slider_init > :first-child {
    margin-left: auto;
}

#products_slider_init > :last-child {
    margin-right: auto;
}


/* ============================================
   8. LOGO PRODUCENTA
   ============================================ */

.single_product_section .product_box .right
.brand_block img {
    width: 110px;
    max-width: 100%;
}


/* ============================================
   9. KONFIGURATOR MOBILNY
   Formularz pod aktywna kategoria
   Tylko ekrany do 880px
   ============================================ */

@media screen and (max-width: 880px) {

    /* Glowny kontener */

    .configurator_section .conf_box {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    /* Kategorie jako osobne elementy */

    .configurator_section .conf_box > .left {
        display: contents !important;
    }

    /* Przyciski kategorii */

    .configurator_section .conf_box > .left > a {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    /* Bagaznik bazowy */

    .configurator_section .conf_box > .left
    > a:nth-of-type(1) {
        order: 10 !important;
    }

    /* Box dachowy */

    .configurator_section .conf_box > .left
    > a:nth-of-type(2) {
        order: 20 !important;
    }

    /* Lancuchy sniegowe */

    .configurator_section .conf_box > .left
    > a:nth-of-type(3) {
        order: 30 !important;
    }

    /* Torby samochodowe */

    .configurator_section .conf_box > .left
    > a:nth-of-type(4) {
        order: 40 !important;
    }

    /* Formularz */

    .configurator_section .conf_box > .center {
        order: 15 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Formularz pod pierwsza kategoria */

    .configurator_section .conf_box:has(
        > .left > a:nth-of-type(1).current
    ) > .center {
        order: 15 !important;
    }

    /* Formularz pod BOX DACHOWY */

    .configurator_section .conf_box:has(
        > .left > a:nth-of-type(2).current
    ) > .center {
        order: 25 !important;
    }

    /* Formularz pod LANCUCHY */

    .configurator_section .conf_box:has(
        > .left > a:nth-of-type(3).current
    ) > .center {
        order: 35 !important;
    }

    /* Formularz pod TORBY */

    .configurator_section .conf_box:has(
        > .left > a:nth-of-type(4).current
    ) > .center {
        order: 45 !important;
    }

    /* Brak aktywnej kategorii - ukryj formularz */

    .configurator_section .conf_box:not(
        :has(> .left > a.current)
    ) > .center {
        display: none !important;
    }

    /* Aktywna kategoria - pokaz formularz */

    .configurator_section .conf_box:has(
        > .left > a.current
    ) > .center {
        display: block !important;
    }

    /* Zdjecie samochodu pod kategoriami */

    .configurator_section .conf_box > .right {
        order: 100 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

}

/* KONIEC STYLOW MOBILNYCH */


/* ============================================
   10. KOSZYK - UKRYWANIE ELEMENTOW
   Desktop + Mobile
   ============================================ */

/* Banery promocyjne */

body:has(.cart_section) .roofrack-promos {
    display: none !important;
}

/* Menu kategorii */

body:has(.cart_section)
header.noveo_header.bottom_header {
    display: none !important;
}

/* Pasek "Rozwin wyszukiwarke" */

body:has(.cart_section) .show_hide_conf {
    display: none !important;
}

/* Kontener bezposrednio zawierajacy pasek */

body:has(.cart_section)
.sticky-top div:has(> .show_hide_conf) {
    display: none !important;
}

/* Konfigurator - tylko na stronie koszyka */

body:has(.cart_section) .configurator_section {
    display: none !important;
}


/* MAGAZYNY - 6 WIDOCZNYCH */

.single_product_section .product_box .right
.product_group.cities > .single_city:nth-child(n+7) {
    display: none;
}

/* Napis pokaz wiecej */
.single_product_section .product_box .right
.product_group.cities::after {
    content: "Pokaż więcej ▼";
    grid-column: 1 / -1;
    justify-self: center;
    padding: 9px 18px;
    margin-top: 10px;
    color: #30206d;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Rozwiniecie po najechaniu */
.single_product_section .product_box .right
.product_group.cities:hover > .single_city:nth-child(n+7) {
    display: flex;
}

/* Zmiana napisu */
.single_product_section .product_box .right
.product_group.cities:hover::after {
    content: "Pokaż mniej ▲";
    color: #ff851b;
    border-color: #ff851b;
}


/* GPSR – rozwijane dane producenta */
.single_product_section .product_box .left p.left_note {
    cursor: pointer;
    display: table;
    font-weight: 600;
}

/* Strzałka */
.single_product_section .product_box .left p.left_note::after {
    content: " ▼";
    font-size: 10px;
    margin-left: 6px;
}

/* Domyślnie ukryte dane */
.single_product_section .product_box .left p.left_note + p {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* Rozwinięcie po najechaniu */
.single_product_section .product_box .left p.left_note:hover + p,
.single_product_section .product_box .left p.left_note + p:hover {
    max-height: 300px;
    opacity: 1;
}



/* ROOFRACK.PL - MENU MOBILNE */
@media screen and (max-width: 1024px) {

    /* Początkowo ukryj listę kategorii */
    .mobile_menu_panel
    .bottom_area.scroll_area
    > .single_tab.parent_menu {
        display: none !important;
    }

    /* Rozwijaj wyłącznie po wybraniu
       "Wszystkie kategorie" */
    .mobile_menu_panel
    .bottom_area.scroll_area:
    has(> a.single_tab:focus:
    has(img[src*="all-category.svg"]))
    > .single_tab.parent_menu {
        display: flex !important;
    }

}


/* ROOFRACK.PL - UKRYCIE STRZALEK W POROWNYWARCE */
/* Komputery, tablety i telefony */

.compare_box .single_product .slider_box .controls {
    display: none !important;
}


/* ROOFRACK.PL - ZAMKNIJ POROWNYWARKE */
/* Wysrodkowanie i odstep 30px */

.compare_section .wrapper > button.noveo_btn {
    display: flex !important;
    width: fit-content !important;
    max-width: 100%;
    margin: 30px auto 0 !important;
    align-items: center;
    justify-content: center;
    text-align: center;
}


/* ROOFRACK.PL - BEZPIECZNY TRYB WCAG */

/* Wyrazny fokus klawiatury */
html.a11y-visual :focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: 3px !important;
}

/* Czytelne pola formularzy */
html.a11y-visual input::placeholder,
html.a11y-visual textarea::placeholder {
    color: #444 !important;
    opacity: 1 !important;
}

/* Kontrast na fioletowym panelu produktu */
html.a11y-visual
.products_loop_section
.products_box
.single_item .absolute .data,
html.a11y-visual
.products_loop_section
.products_box
.single_item .absolute .data * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

/* Bez zmiany ukladu i rozmiaru
   elementow na karcie produktu */



/* =========================================
   ROOFRACK.PL - PASEK FILTROW PRODUKTOW
   ========================================= */

/* Obnizenie calego paska o 20px */
.page_hero_section .bottom_box {
    margin-top: 20px !important;
}

/* Uklad filtrow */
.page_hero_section
.bottom_box .single_col.right {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* 1. Tylko dostepne */
.page_hero_section
.bottom_box .single_col.right
> div:nth-child(2) {
    order: 1 !important;
}

/* 2. Produktow na stronie */
.page_hero_section
.bottom_box .single_col.right
> div:nth-child(1) {
    order: 2 !important;
}

/* 3. Sortowanie */
.page_hero_section
.bottom_box .single_col.right
> div:nth-child(3) {
    order: 3 !important;
}


/* ==========================================
   ROOFRACK.PL - FILTRY MOBILNE
   ========================================== */

@media only screen and (max-width: 650px) {

    /* 1. Ukrycie gornej sciezki kategorii */
    .noveo-category-header__breadcrumbs {
        display: none !important;
    }

    /* 2. Uklad filtrow na telefonie */
    .page_hero_section .bottom_box
    .single_col.right {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 10px !important;
        box-sizing: border-box;
    }

    /* 3. Tylko dostepne - pierwsze */
    .page_hero_section .bottom_box
    .single_col.right > div:nth-child(2) {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        box-sizing: border-box;
    }

    /* 4. Produktow na stronie - drugie */
    .page_hero_section .bottom_box
    .single_col.right > div:nth-child(1) {
        order: 2 !important;
    }

    /* 5. Sortowanie - trzecie */
    .page_hero_section .bottom_box
    .single_col.right > div:nth-child(3) {
        order: 3 !important;
    }

    /* 6. Oba pola na pelna szerokosc */
    .page_hero_section .bottom_box
    .single_col.right > .dropdown_item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        box-sizing: border-box;
    }

    /* 7. Rozciagniecie zawartosci pol */
    .page_hero_section .bottom_box
    .single_col.right > .dropdown_item
    > :first-child {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

}


/* ==========================================
   ROOFRACK.PL - KONFIGURATOR MOBILNY
   ZDJECIE SAMOCHODU NAD WYBOREM
   ========================================== */

@media screen and (max-width: 880px) {

    /* Zdjecie samochodu na samej gorze */
    .configurator_section
    .conf_box > .right {
        order: -10 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 15px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Kontener aktywnego zdjecia */
    .configurator_section
    .conf_box > .right .group.show {
        width: 100%;
        text-align: center;
    }

    /* Rozmiar i proporcje samochodu */
    .configurator_section
    .conf_box > .right .group.show img {
        display: block;
        width: auto !important;
        max-width: 100% !important;
        max-height: 190px !important;
        height: auto !important;
        object-fit: contain;
        margin: 0 auto !important;
    }

}

/* ==========================================
   ROOFRACK.PL - LOKALIZACJE MOBILNE
   WYRODKOWANIE
   ========================================== */

@media only screen and (max-width: 768px) {

    /* sam box */
    .locations_box {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* tresc wewnatrz */
    .locations_box h1,
    .locations_box h2,
    .locations_box h3,
    .locations_box h4,
    .locations_box h5,
    .locations_box h6,
    .locations_box p,
    .locations_box a,
    .locations_box span,
    .locations_box li {
        text-align: center !important;
    }

    /* jezeli sa ikony z tekstem w wierszu */
    .locations_box .single_contact,
    .locations_box .contact_item,
    .locations_box .item {
        justify-content: center !important;
        text-align: center !important;
    }
}


/* ==========================================
   ROOFRACK.PL - CENTROWANIE MENU MOBILNEGO
   ========================================== */

@media screen and (max-width: 768px) {

    /* Kontener menu */
    .mobile_menu_panel .bottom_area.scroll_area {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Wycentrowanie pozycji menu */
    .mobile_menu_panel
    .bottom_area.scroll_area
    > .single_tab {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        min-height: 48px;
        gap: 10px;
        box-sizing: border-box;
    }

    /* Wysrodkowanie napisow */
    .mobile_menu_panel
    .bottom_area.scroll_area
    > .single_tab a,
    .mobile_menu_panel
    .bottom_area.scroll_area
    > .single_tab span {
        text-align: center !important;
    }

    /* Czytelne napisy */
    .mobile_menu_panel
    .bottom_area.scroll_area
    > .single_tab {
        line-height: 1.5 !important;
    }

}



/* ==========================================
   ROOFRACK.PL - KONFIGURATOR MOBILNY
   USUNIECIE PUSTEJ PRZESTRZENI
   ========================================== */

@media screen and (max-width: 880px) {

    /* Sekcja konfiguratora */
    .configurator_section {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Glowny kontener */
    .configurator_section > .wrapper {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Usuniecie odstepu nad zawartoscia */
    .configurator_section .conf_box {
        padding-top: 0 !important;
        margin-top: 0 !important;
        row-gap: 0 !important;
    }

    /* Zdjecie samochodu */
    .configurator_section .conf_box > .right {
        order: -10 !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }

    /* Aktywna grafika */
    .configurator_section
    .right .group.show {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Bez pustych odstepow nad zdjeciem */
    .configurator_section
    .right .group.show img {
        display: block;
        margin: 0 auto !important;
    }

}


/* ==========================================
   ROOFRACK.PL - PRZYCISKI KONFIGURATORA
   PRZYWROCENIE WYGLADU MOBILNEGO
   ========================================== */

@media screen and (max-width: 880px) {

    /* Wszystkie przyciski kategorii */
    .configurator_section
    .conf_box > .left > a {
        background: #ffffff !important;
        border: 1px solid #d8d8e0 !important;
        border-radius: 12px !important;
        box-shadow: none !important;

        color: #211b5c !important;

        display: flex !important;
        align-items: center !important;
        gap: 12px;

        min-height: 48px;
        padding: 10px 14px !important;
        margin-bottom: 8px !important;

        box-sizing: border-box;
    }

    /* Aktywnie wybrana kategoria */
    .configurator_section
    .conf_box > .left > a.current,
    .configurator_section
    .conf_box > .left > a.active {
        background: #ffffff !important;
        border: 1px solid #ff891f !important;
    }

    /* Podswietlenie po najechaniu */
    .configurator_section
    .conf_box > .left > a:hover {
        border-color: #ff891f !important;
    }

}


/* ==========================================
   ROOFRACK.PL - WYBRANY BOX MOBILNIE
   ========================================== */

@media screen and (max-width: 650px) {

    /* Naglowek: Wybrany boks */
    .configurator_section
    .conf_expanded_side_buttons h2 {
        font-size: 17px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        color: #211b5c !important;
        margin: 0 0 12px !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    /* Nazwa wybranego boxu */
    .configurator_section
    .conf_expanded_side_buttons h2 a {
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
        color: #211b5c !important;
        text-decoration: none !important;
        overflow-wrap: anywhere;
    }

    /* Podkreslenie po najechaniu lub fokusie */
    .configurator_section
    .conf_expanded_side_buttons h2 a:hover,
    .configurator_section
    .conf_expanded_side_buttons h2 a:focus-visible {
        text-decoration: underline !important;
    }

}


/* ROOFRACK.PL - ODSTEP POD PRZYCISKIEM */
/* Tylko urzadzenia mobilne */

@media screen and (max-width: 880px) {

    .configurator_section
    .conf_box .submit_item {
        margin-bottom: 10px !important;
    }

}


/* ROOFRACK.PL - ODSTEP POD POKAZ WIECEJ */
/* Tylko telefony i mniejsze tablety */

@media screen and (max-width: 880px) {

    .configurator_section
    .conf_expanded_products
    .conf_expanded_dots {
        margin-bottom: 10px !important;
    }

}


/* MOBILE - PARAMETRY PRODUKTU W JEDNEJ LINII */
@media (max-width: 767px) {

    .single_product_section .product_box .right
    .product_group.meta_table > p.single_param {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100%;
        margin: 0;
        padding: 10px 0;
    }

    /* Nazwa parametru po lewej */
    .single_product_section .product_box .right
    .product_group.meta_table > p.single_param > strong {
        display: inline-block !important;
        width: auto !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        white-space: nowrap;
        text-align: left;
    }

    /* Wartosc parametru po prawej */
    .single_product_section .product_box .right
    .product_group.meta_table > p.single_param > span {
        display: inline-block !important;
        width: auto !important;
        flex: 0 1 auto !important;
        margin: 0 0 0 auto !important;
        text-align: right !important;
        white-space: nowrap;
        min-width: 0;
    }
}

/* Konfigurator - tytuł wybranego boxu */
.conf_expanded_side_buttons h2 {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #211c57 !important;
    margin: 0 0 12px !important;
}

/* Nazwa wybranego produktu */
.conf_expanded_side_buttons h2 a {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
}

/* Efekt po najechaniu */
.conf_expanded_side_buttons h2 a:hover {
    color: #f58220 !important;
}

/* Telefony */
@media (max-width: 767px) {
    .conf_expanded_side_buttons h2 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }
}