/*

ΠΑΡΑΤΗΡΗΣΕΙΣ:

- carousel breakpoints --> να μπουν breakpoints
- products carousel breakpoints --> χρειαζόμαστε περισσότερα και το ένα επαναλαμβάνεται
- σε όλα τα modules να υπάρχει πεδίο για προσθήκη κλάσης css από τον διαχειριστή


*/



/*
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
/* !SECTION */
/* SECTION COMMON
VVV
VVV
VVV
VVV
VVV
VVV
VVV
*/




/*    -->                                                                                                                                      COMMON > VARIABLES
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


/*    -->                                                                         COMMON > VARIABLES > DIMENSIONS
[2]   =========================================================================================================== */



body {
    /* 		--minicart-width: 635px; */
    --maxContainerWidth: 1650px;
    /* 		--headerHeight: 90px; */
    --defaultPadding: 15px;
    --calculatedPadding: max(var(--defaultPadding), calc((100vw - var(--maxContainerWidth)) / 2));
    --calculatedPaddingFollowUs: max(50px, calc((100vw - var(--maxContainerWidth)) / 2));

    --spaceForSocials: 50px;

    --topBarHeight: 44px;
    --headerHeight: 88px;


    /* 		--menuPadding: 60px; */
    /* 		--headerItemsDistance: 43px; */
}

@media(max-width: 990px) {
    body {
        --spaceForSocials: var(--calculatedPadding);
    }
}


/*    -->                                                                                                                                          COMMON > LAYOUT
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

@media(max-width: 768px) {
    body {
        overflow-X: hidden;
    }
}

/*    -->                                                                   COMMON > LAYOUT > HORIZONTAL PADDINGS
[2]   =========================================================================================================== */


/*    -->  COMMON > LAYOUT > HORIZONTAL PADDINGS > HOME AND FOOTER                            
[3]   ------------------------------------------------------------- */

@media(max-width: 1200px) {

    #common-home #content>.grid>div>div,
    footer>.container,
    #information-information,
    #content>div>div {
        padding: 0px;
        width: 100%;
    }

    #common-home #content>div>div,
    footer>.container,
    #information-information #content {
        padding-inline: var(--spaceForSocials) var(--calculatedPadding) !important;
    }

}



/*    -->                                          COMMON > LAYOUT > HIDE ELEMENTS AROUND THE PAGE SITUATIONALLY
[2]   =========================================================================================================== */

/*    -->     COMMON > LAYOUT > HIDE ELEMENTS AROUND THE PAGE SITUATIONALLY > SOCIALS ON THE SIDE                                           
[3]   ------------------------------------------------------------- */

@media(max-width: 990px) {
    html:has(.mega_menu_wrapper:not([style*="display: none"])) :is(.socials_on_the_side, .mfilter-free-button) {
        opacity: 0;
        visibility: hidden !important;
    }

    .search_enabled :is(.mfilter-free-button) {
        opacity: 0;
        visibility: hidden !important;
    }
}


/*    -->                                                                                                                                     COMMON > FOR MODULES
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/*    -->                                                                         COMMON > FOR MODULES > CAROUSEL
[2]   =========================================================================================================== */

/*    -->               COMMON > FOR MODULES > CAROUSEL > NAVIGATION                        
[3]   ------------------------------------------------------------- */

@media(max-width: 1200px) {

    .carousel-navigation {
        right: 0px
    }

    #common-home .swiper-container {
        padding-bottom: 0px !important;
    }

}

/*    -->                                                                         COMMON > FOR MODULES > BANNERS
[2]   =========================================================================================================== */

@media(max-width: 768px) {
    .banner-module .swiper-pagination {
        position: relative;
        margin-top: 10px !important;
    }
}

/*    -->                                                              COMMON > FOR MODULES > PRODUCTS CAROUSEL
[2]   =========================================================================================================== */


@media(max-width: 1200px) {
    .products-carousel {
        margin-bottom: 0px !important;
    }
}

@media(max-width: 1024px) {
    .products-carousel .swiper-container {
        padding-bottom: 0px !important
    }
}

/*    -->      COMMON > FOR MODULES > PRODUCTS CAROUSEL > NAVIGATION                        
[3]   ------------------------------------------------------------- */

@media(max-width: 768px) {

    div[id*="products-carousel"] .carousel-navigation {
        width: fit-content;
        margin-inline: auto;
        top: 10px;
        right: 50%;
        transform: translateX(50%);
        position: absolute !important;
    }


    div[id*="products-carousel"] {
        padding-top: 50px
    }

}

/*    -->                                                                    COMMON > FOR MODULES > PRODUCTS TABS
[2]   =========================================================================================================== */

@media(max-width: 1200px) {

    #common-home #content>div>div .product-tabs-module nav+div {
        padding-bottom: 0px !important;
    }

    #common-home #content>div>div .product-tabs-module>div>div>div {
        padding-top: 0px !important;
    }

}

@media(max-width: 1024px) {

    .product-tabs-module nav {
        display: flex;
        flex-direction: row !important;
        align-items: center;
        gap: 20px;
        justify-content: center;
        margin-bottom: 0px;
        padding-inline: 0px;
    }

    .product-tabs-module nav+div {
        padding: 0px
    }

    .product-tabs-module nav>button {
        width: fit-content !important;
        font-weight: bold;
        line-height: normal;
        height: fit-content;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        padding: 7px 10px !important;
    }

    .product-tabs-module>div {
        gap: 0px !important;
    }

    .product-tabs-module>div>div {
        margin: 0px !important;
    }

    .product-tabs-module .products-carousel {
        padding-top: 0px !important;
    }

    .product-tabs-module .text-left {
        padding-top: 0px
    }

    .product-tabs-module .text-left h2 {
        margin-bottom: 20px
    }

}


@media(max-width: 768px) {
    .product-tabs-module>div>div:nth-child(1)>div {
        padding-top: 0px !important;
    }
}




/*
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
/* !SECTION */
/* SECTION HEADER
VVV
VVV
VVV
VVV
VVV
VVV
VVV
*/


/*    -->                                                                                                                                             HEADER > BUILD BOTTOM BAR
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.header-icons #search-toggle {
    order: -1;
}

@media(min-width: 768px) {
    #mobile_bottom_bar {
        display: none !important;
    }
}

#mobile_bottom_bar {
    position: fixed;
    bottom: 0px;
    display: flex;
    background: white;
    z-index: 50;
    height: 40px;
    width: 100%;
    display: flex;
    border-top: 1px solid #ccc;
    transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
}

#mobile_bottom_bar>div:not(:last-child) {
    border-right: 1px solid #ccc;
}

#mobile_bottom_bar>div {
    width: 100%;

}

#mobile_bottom_bar>div>a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scrolling-down #mobile_bottom_bar {
    transform: translateY(100%) !important;
}


/*    -->                                                                                                                                     HEADER > TOGGLE ON SCROLL
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

@media(max-width: 768px) {

    header {
        position: fixed !important;
        top: var(--topBarHeight) !important;
        left: 0px !important;
        width: 100%;
        transition: all .2s;
        height: var(--headerHeight) !important;
        -webkit-transition: all .2s;
        -moz-transition: all .2s;
        -ms-transition: all .2s;
        -o-transition: all .2s;
    }

    html.scrolled header {
        top: 0px !important;
    }

    html.scrolling-down header {
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
    }

    /*    -->                                                        HEADER > TOGGLE ON SCROLL > MAKE SPACE FOR FIXED HEADER                                      
    [2]   =========================================================================================================== */


    header~div:has(#content),
    header~div:has(nav),
    header~div:has(>div>h1),
    header~div:has(.page-title-box) {
        margin-top: calc(var(--headerHeight)) !important;
    }

    /*    -->           HEADER > TOGGLE ON SCROLL > MAKE SPACE FOR FIXED HEADER > EXCEPTIONS                                     
    [3]   ------------------------------------------------------------- */

    #header~div:has(>div>h1)~div:has(#content),
    #header~div:has(nav)~div:has(>div>h1),
    #header~div:has(nav)~div:has(#content),
    #header~.page-title-box~div:has(#content),
    #header~.page-title-box~div:has(nav) {
        margin-top: 0px !important;
    }
}


/*    -->                                                                                                                                     HEADER > EXTRA BUTTONS
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.extra-about-menu a span {
    white-space: nowrap;
}

/*    -->                                                                                                                                     HEADER > MENU BUTTON
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/*    -->                                                                             HEADER > MENU BUTTON > TEXT
[2]   =========================================================================================================== */

button.menu-button>span {
    text-align: left;
    line-height: normal;
}

@media(max-width: 768px) {
    button.menu-button>span {
        display: none;
    }
}

/*    -->                                                                                                                                       HEADER > MEGA MENU
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

@media(max-width: 990px) {
    .mega_menu_wrapper .level_1 {
        min-width: 250px !important;
        padding-inline: 10px
    }

    .mega_menu_wrapper .level_2 .subcategories,
    .mega_menu_wrapper .level_2 .brands {
        padding-inline: 0px
    }

    .mega_menu_wrapper .level_2>div .image {
        display: none;
    }

}


.mega_menu_wrapper .level_2 .parent_category,
.mega_menu_wrapper .level_1 .extra_links {
    display: none;
    overflow: auto;
}


@media(max-width: 768px) {

    .mega_menu_wrapper {
        height: calc(100vh - 88px) !important;
    }

    .mega_menu_wrapper .level_2>div {
        flex-direction: column;
        gap: 18px
    }

    .mega_menu_wrapper .level_2>div :is(.brands, .subcategories) h3+div {
        overflow: hidden;
        padding: 0px
    }

    .mega_menu_wrapper .level_2>div :is(.brands, .subcategories) h3 {
        padding: 0px !important;
        margin: 0px;
        margin-bottom: 3px
    }

    .mega_menu_wrapper .level_2>div :is(.brands, .subcategories)>div {
        /* overflow: auto !important; */
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .mega_menu_wrapper .level_2>div :is(.brands, .subcategories) h3+div>div>a {
        padding: 4px 0px;
        background: white;
    }

    .mega_menu_wrapper .level_2>div .separator {
        display: none;
    }

    .mega_menu_wrapper .level_2>div :is(.brands, .subcategories) h3+div>div {
        gap: 5px;
        margin: 0px
    }

    header .menu_button {
        order: -99 !important;
        margin: 0px !important;
    }

    header .logo {
        margin-right: auto
    }


    html:has(.mega_menu_wrapper:not([style*="display: none"])),
    html:has(.mega_menu_wrapper:not([style*="display: none"])) body {
        overflow: hidden !important;
        overflow-y: hidden !important;
    }

    .mega_menu_wrapper .level_1 {
        overflow: auto !important;
        padding-block: 10px !important;
        height: calc(100vh - 132px) !important;
    }

    .scrolled .mega_menu_wrapper .level_1 {
        height: calc(100vh - 132px + var(--topBarHeight)) !important
    }

    .mega_menu_wrapper .level_1>div>div>a {
        padding-block: 9px
    }

    .mega_menu_wrapper .level_2>div :is(.brands, .subcategories) {
        overflow: hidden;
        padding: 0px
    }

    .mega_menu_wrapper>div {
        position: relative;
    }

    .mega_menu_wrapper :is(.level_1, .level_2) {
        width: 100%;
    }

    .mega_menu_wrapper .level_1 {
        z-index: 1;
        position: relative;
    }

    .mega_menu_wrapper .level_2 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 9;
        background: white;
        transition: all .3s;
        transform: translateX(-100%);
    }

    .mega_menu_wrapper .level_2.subcategories_enabled {
        transform: translateX(0px);
    }

    .level_2 .close_button {
        display: block !important;
        z-index: 10001;
        background: white;
        border: 1px solid #bbb;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        top: 0px;
        transform: translateY(-50%);
    }

    .mega_menu_wrapper .level_2 .parent_category {
        font-size: 14px;
        font-weight: 700;
        color: var(--primary-color) !important;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.2em * 2);
        line-height: 1.2em;

        height: 34px !important;
    }

    .mega_menu_wrapper .level_2 h3 {
        font-size: 14px !important;
        text-transform: uppercase
    }

    .extra-brands-menu,
    .extra-about-menu {
        display: none;
    }

    .mega_menu_wrapper .level_1 .extra_links {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .extra_links {
        border-top: 1px solid #ccc;
        padding: 25px 15px;
        margin-top: 20px
    }


    /* HEIGHTS */

    .mega_menu_wrapper .level_2>div :is(.brands, .subcategories) {
        flex: 0 0 auto;
        padding: 0px !important;
    }

    .mega_menu_wrapper .level_2>div .subcategories {
        flex: 1 1 auto !important;
    }

    .mega_menu_wrapper .level_2>div :is(.brands, .subcategories) h3+div {
        overflow: auto;
        flex: 1 1 auto;
    }

    .mega_menu_wrapper .level_2>div .subcategories h3+div {
        height: 100% !important;
    }

    .mega_menu_wrapper .level_2>div .brands h3+div {
        max-height: calc((100vh - var(--topBarHeight) - var(--headerHeight) - 50px) / 2 - 105px);
    }


}


/*    -->                                                                                                                                       HEADER > TOP BAR      
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */



@media (min-width: 1500px) {
    #top>.container>div .marquee-content {
        display: none;
    }
}

@media (max-width: 1499px) {

    #top>.container>div.marquee-active {
        overflow: hidden;
        white-space: nowrap;
        position: relative;
    }

    #top>.container>div.marquee-active {
        display: flex;
        align-items: center;
    }

    #top>.container>div.marquee-active .marquee-content {
        display: flex;
        align-items: center;
        white-space: nowrap;
        color: white;
        font-size: 13px;
        text-transform: uppercase;
        animation: marquee 16s linear infinite;
        -webkit-animation: marquee 16s linear infinite;
        cursor: default;
    }

    @keyframes marquee {
        0% {
            transform: translateX(0);
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
        }

        100% {
            transform: translateX(-33.33%);
        }
    }

    /* Pause animation on hover */
    #top>.container>div.marquee-active:hover .marquee-content,
    #top>.container>div.marquee-active .marquee-content:hover {
        animation-play-state: paused !important;
        -webkit-animation-play-state: paused !important;
    }

    /* Hide original paragraphs when marquee is active */
    #top>.container>div.marquee-active>.flex {
        display: none;
    }

}

/*    -->                                                                                                                                       HEADER > SEARCH     
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

#search-toggle,
#search_contents {
    display: none;
}

@media(max-width: 990px) {
    header #search {
        display: none;
    }

    header #search-toggle,
    #search_contents {
        display: block;
    }
}

/*    -->                                                                  HEADER > SEARCH > SEARCH TOGGLE BUTTON                       
[2]   =========================================================================================================== */

#search {
    width: fit-content !important;
}

#search-toggle {
    display: none;
}

@media (max-width: 990px) {
    header #search {
        display: none;
    }

    header #search-toggle {
        display: block;
    }
}


/*    -->                                                                HEADER > SEARCH > SEARCH MODAL CONTAINER                   
[2]   =========================================================================================================== */

@media(max-width: 990px) {



    #search_contents {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(255, 255, 255, 0.95);
        z-index: 9999;
        padding: 0 20px;
        overflow: auto;
        transition: all 0.3s;
        opacity: 0;
        visibility: hidden;
    }

    #search_contents.search_enabled,
    .search_enabled #search_contents {
        opacity: 1;
        visibility: visible;
    }

    html.search_enabled {
        overflow: hidden !important;
    }

    /* Close Button */
    #search_contents .close_button {
        position: absolute;
        top: 35px;
        right: 35px;
        cursor: pointer;
    }

    #search_contents .close_button svg {
        width: 20px;
        height: 20px;
    }

    /*    -->                                                                       HEADER > SEARCH > SEARCH INPUT BAR      
    [2]   =========================================================================================================== */

    #search {
        width: 100% !important;
        max-width: 1110px !important;
        margin: 100px auto 0 !important;
    }

    #search_contents #search {
        /* border: 1px solid #ccc; */
        width: fit-content !important;
    }

    #search_contents #search>input {
        border: 1px solid blakc !important;
    }

    #search .input-lg,
    #search .input-group-btn,
    #search .btn.btn-default.btn-lg {
        background: none !important;
    }

    #search .input-lg {
        height: 55px;
        line-height: normal;
        font-size: 25px !important;
        padding-left: 25px;
        border-bottom: 1px solid var(--accent_1) !important;
        color: var(--accent_1);
        font-weight: bold;
        font-style: italic;
    }

    #search .btn.btn-default.btn-lg {
        height: 55px;
        width: 100%;
        border-bottom: 1px solid var(--accent_1) !important;
    }

    #search .btn-lg svg {
        width: 30px !important;
        height: 30px !important;
    }

    #search .input-group-btn {
        width: 55px;
    }

    /*    -->                                                                       HEADER > SEARCH > SEARCH RESULTS CONTAINER                     
    [2]   =========================================================================================================== */

    .live-search-div {
        position: relative !important;
        width: 100% !important;
        max-width: 1110px !important;
        margin: 27px auto 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: 0 5px 40px -5px rgba(0, 0, 0, 0.2) !important;
        transform: none !important;
        left: 0 !important;
        top: 0 !important;
    }

    .live-search-div ul {
        display: flex !important;
        flex-wrap: wrap !important;
        align-content: space-between !important;
        padding: 5px !important;
        background: white;
    }

    .live-search-div ul li {
        display: flex !important;
        flex: 1 1 200px !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 5px !important;
        border: 1px solid #c8c8c8 !important;
        background: #f6f6f6 !important;
        transition: all 0.12s;
    }

    .live-search-div ul li:hover {
        border-color: #000 !important;
    }

    .live-search-div ul li a {
        display: flex !important;
        flex-direction: column !important;
    }

    .live-search-div ul li>a *:not(img) {
        width: 100% !important;
        max-width: 150px !important;
        text-align: center !important;
    }

    .live-search-div ul li .product-name {
        font-weight: normal !important;
        line-height: normal !important;
    }

    .live-search-div ul li .product-price {
        width: 100% !important;
        font-size: 15px !important;
        text-align: left !important;
    }

    .live-search-div ul li .product-price .special {
        color: #999 !important;
    }

    /* View All Results Link */
    .live-search-div .result-text {
        position: relative !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        font-weight: bold;
        text-transform: uppercase;
        background: var(--accent_1) !important;
    }

    .live-search-div .view-all-results {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
        height: 100%;
    }

}

/*    -->                                                                       HEADER > SEARCH > SMALL SCREEN                    
[2]   =========================================================================================================== */

@media (max-width: 615px) {
    .live-search-div ul li {
        flex: unset !important;
        width: 50% !important;
        margin: 0 !important;
    }
}


/*    -->                                                                                                                                     HEADER > CART BUTTON
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/*    -->                                                                       HEADER > CART BUTTON > CONTENT BADGE                       
[2]   =========================================================================================================== */

@media(max-width: 650px) {
    #cart-button>span {
        position: absolute;
        top: 0px !important;
        transform: translateY(-100%);
        right: -10px
    }
}


/*
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
/* !SECTION */
/* SECTION FOOTER
VVV
VVV
VVV
VVV
VVV
VVV
VVV
*/

footer {
    z-index: 1;
}

@media(max-width: 990px) {
    footer .newsletter_section form>div:not(.accept_terms_section) {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }


}

@media(max-width: 500px) {
    .copyright_and_credits_section>div:last-child span {
        display: flex;
        flex-direction: column;
        gap: 10px
    }
}

/*    -->                                                                                                                             FOOTER > SOCIALS ON THE SIDE
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

@media(max-width: 990px) {

    footer>.container {
        display: flex;
        flex-direction: column;
    }

    footer .copyright_and_credits_section {
        order: 99
    }

    footer>.container .socials_on_the_side {
        position: relative;
        order: 98;
        display: flex;
        flex-direction: column;
        transform: none;
        width: 100%;
        margin-block: 10px 10px;
        gap: 10px;

        border-top: 1px solid rgb(229 231 235) !important;
        padding-top: 25px;
    }

    footer>.container .socials_on_the_side>* {
        position: relative;
        margin: 0px;
        transform: none;

    }

    footer>.container .socials_on_the_side>div {
        display: flex;
        transform: none;
        flex-direction: row;
        align-items: center !important;
        gap: 15px;
        margin-top: 0px !important;
    }

    footer>.container .socials_on_the_side>div>a {
        margin: 0px !important;
        width: 30px;
    }

}

/*
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
/* !SECTION */
/* SECTION HOME
VVV
VVV
VVV
VVV
VVV
VVV
VVV
*/

/*    -->                                                                                                                                         HOME > DISTANCES
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

@media(max-width: 1200px) {

    #common-home #content>div>div .carousel_categories {
        margin-top: 60px !important;
    }

    #common-home #content>div>div .banner-module {
        margin-top: 60px !important
    }

    #common-home #content>div>div .product-tabs-module {
        margin-top: 50px !important;
    }

    html:has(#common-home) footer {
        margin-top: 80px !important
    }

}

/*    -->                                                                                                                                         HOME > SLIDESHOW
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/*    -->                                                                           HOME > SLIDESHOW > LAYOUT
[2]   =========================================================================================================== */

@media(max-width: 1200px) {
    #common-home #content>div>div:has(.slideshow) {
        padding-inline: 0px !important
    }
}

/*    -->                                                                           HOME > SLIDESHOW > NAVIGATION
[2]   =========================================================================================================== */

@media(max-width: 1200px) {
    #content .slideshow .swiper-pager>div {
        width: 35px !important;
        height: 35px !important;
        padding: 5px
    }
}

.slideshow .swiper-pagination {
    display: none;
}

@media(max-width: 990px) {

    .slideshow .swiper-pagination {
        position: relative !important;
        bottom: 0px;
        margin-top: 10px;
        display: block;
    }

    .slideshow .swiper-pager {
        display: none;
    }

}



/*    -->                                                                                                                             HOME > CAROUSEL CATEGORIES
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/*    -->                                                                         HOME > CAROUSEL CATEGORIES > NAVIGATION                     
[2]   =========================================================================================================== */

@media(max-width: 1200px) {

    .carousel_categories .carousel-navigation {
        top: 0px;
        top: 27px
    }

}

@media(max-width: 768px) {

    .carousel_categories .carousel-navigation {
        width: fit-content;
        margin-inline: auto;
        bottom: unset !important;
        top: 85px !important;
        right: 50%;
        transform: translateX(50%);
        position: absolute !important;

    }

    #carousel_categories {
        padding-top: 50px
    }

}

/*    -->                                                                                                                             HOME > BANNER & PRODUCT TABS
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

@media(max-width: 768px) {
    .banner-and-tabs img {
        width: 100% !important;
    }
}

/*    -->                                                                                                                              HOME > MANUFACTUER CAROUSEL
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

@media(max-width: 1200px) {
    .homepage-tabs-2 {
        padding: 50px 30px !important;
    }
}

@media(max-width: 1024px) {
    .homepage-tabs-2 nav {
        margin-block: 30px
    }
}

/*
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
/* !SECTION */
/* SECTION CATEGORY-LIKE PAGES
VVV
VVV
VVV
VVV
VVV
VVV
VVV
*/

/*    -->                                                                                                                             CATEGORY-LIKE PAGES > LAYOUT
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */





/*    -->                                                           CATEGORY-LIKE PAGES > LAYOUT > HORIZONTAL PADDINGS
[2]   =========================================================================================================== */

@media(max-width: 1024px) {

    :is(#product-category, #product-special, #product-manufacturer-info, #product-search) #content,
    :is(#product-category, #product-special, #product-manufacturer-info, #product-search) .col-left-container {
        padding-inline: var(--spaceForSocials) var(--calculatedPadding);
    }


}



/*    -->                                                           CATEGORY-LIKE PAGES > LAYOUT > LEFT CONTAINER
[2]   =========================================================================================================== */


:is(#product-category, #product-special, #product-manufacturer-info, #product-search) .col-left-container {
    min-width: 430px
}

/*    -->                                                                                                                      CATEGORY-LIKE PAGES > TITLE SECTION
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


@media(max-width: 1024px) {
    :is(#product-category, #product-special, #product-manufacturer-info, #product-search) .col-left-container {
        width: 100%;
        min-width: 100%;
        height: fit-content;
        padding-block: 30px;
    }

    :is(#product-category, #product-special, #product-manufacturer-info, #product-search) .col-left-container h1 {
        margin-block: 0px;
    }

}

/*    -->                                                                                                                        CATEGORY-LIKE PAGES > CONTROL ROW
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

@media(max-width: 1350px) {

    :is(#product-category, #product-special, #product-manufacturer-info, #product-search) .control_row {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 35px !important;
    }

    :is(#product-category, #product-special, #product-manufacturer-info, #product-search) .control_row>div,
    :is(#product-category, #product-special, #product-manufacturer-info, #product-search) .control_row>div ul {
        padding-block: 0px;
        margin-block: 0px
    }

}

/*    -->                                                       CATEGORY-LIKE PAGES > CONTROL ROW > ITEMS PER ROW
[2]   =========================================================================================================== */

@media(max-width: 1350px) {
    :is(#product-category, #product-special, #product-manufacturer-info, #product-search) .items_per_row_wrapper {
        display: none !important;
    }
}

/*    -->                                                         CATEGORY-LIKE PAGES > CONTROL ROW > PAGINATION
[2]   =========================================================================================================== */

/*    -->      CATEGORY-LIKE PAGES > CONTROL ROW > PAGINATION > TOP                                       
[3]   ------------------------------------------------------------- */

@media(max-width: 990px) {
    :is(#product-category, #product-special, #product-manufacturer-info, #product-search) .pagination {}
}

/*    -->   CATEGORY-LIKE PAGES > CONTROL ROW > PAGINATION > BOTTOM                                       
[3]   ------------------------------------------------------------- */


@media(max-width: 1350px) {
    :is(#product-category, #product-special, #product-manufacturer-info, #product-search) .pagination_container_bottom {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-block: 50px 30px
    }


    .pagination>* {
        border: 1px solid #ddd !important;
    }

    :is(#product-category, #product-special, #product-manufacturer-info, #product-search) .pagination_container_bottom>div,
    :is(#product-category, #product-special, #product-manufacturer-info, #product-search) .pagination_container_bottom>div ul {
        margin: 0px;
        padding: 0px;
    }
}

/*    -->                                                                                                                       CATEGORY-LIKE PAGES > PRODUCT GRID
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

@media(max-width: 1350px) {
    :is(#product-category, #product-special, #product-manufacturer-info, #product-search) #product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media(max-width: 1200px) and (min-width: 1025px) {
    :is(#product-category, #product-special, #product-manufacturer-info, #product-search) #product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media(max-width: 768px) {
    :is(#product-category, #product-special, #product-manufacturer-info, #product-search) #product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media(max-width: 450px) {
    :is(#product-category, #product-special, #product-manufacturer-info, #product-search) #product-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

/*    -->            CATEGORY-LIKE PAGES > SIDEBAR > FILTERS                      
[3]   ------------------------------------------------------------- */

/*    -->                                                                                                                             CATEGORY-LIKE PAGES > FILTERS
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


@media(max-width: 1024px) {

    html:has(.mfilter-free-container-opened, .mfilter-free-container-opening) {
        overflow: hidden !important;
    }

    .filters_toggle {
        display: none !important;
    }



    .box-content.mfilter-content {
        padding-right: 0px !important;
    }

    .mfilter-box-1.mfilter-free-container,
    .mfilter-box-1.mfilter-free-container .scroll-wrapper {
        width: 280px !important;
        height: 100% !important;
    }

    .mfilter-free-container {
        margin-left: -290px;
        top: 0px !important;
    }

    .mfilter-free-button {
        margin: 10px 0 0 281px;
        left: 7px;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
    }

    .mfilter-box>.box-heading {
        margin-top: 20px !important;
        margin-inline: auto;
        width: fit-content;
        font-weight: bold;
        color: black;
        font-family: var(--font_2);
    }

    .scroll-wrapper>.scroll-content {
        overflow: auto !important;
        height: unset !important;
        min-height: unset !important
    }

    .box-content.mfilter-content {
        overflow: visible !important;
    }

    .mfilter-content>ul>li {
        margin-bottom: unset !important
    }

    .mfilter-free-button {
        border: 10px solid transparent !important;
        border-width: 8px 10px 4px 5px !important;
        background: white;
    }

    .mfilter-free-button {
        padding: 0px !important;
        width: fit-content !important;
        height: fit-content !important;
        margin: 0px !important;
        background: none !important;
    }

    html .mfilter-free-button::before {
        content: "" !important;
        width: 19px !important;
        border-width: 0px !important;
        height: 25px !important;
        display: block !important;
        background-repeat: no-repeat !important;
        background-size: 100% !important;
        transition: all 0.12s !important;
        margin-right: 12px;
        color: black;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0px !important;
        padding: 0px !important;

        filter: brightness(0) invert(100)
    }

    html:not(:has(.mfilter-free-container-opened)):not(:has(.mfilter-free-container-opening)) .mfilter-free-button::before {
        background-image: url("data:image/svg+xml,%3Csvg width='14px' height='18px' viewBox='0 0 14 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EGroup%3C/title%3E%3Cg id='PAGES' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='PRODUCT-LIST' transform='translate(-134.000000, -566.000000)' fill='%23000000' fill-rule='nonzero'%3E%3Cg id='Group' transform='translate(134.000000, 566.000000)'%3E%3Cpath d='M11.587105,0 C10.3883945,0 9.39393933,0.889565217 9.20773688,2.04965217 L0.386847193,2.04965217 C0.173307542,2.04965217 0,2.22495652 0,2.44095652 C0,2.65695652 0.173307542,2.83226087 0.386847193,2.83226087 L9.20773688,2.83226087 C9.39368143,3.99234783 10.3881366,4.88165217 11.587105,4.88165217 C12.9176015,4.88165217 14,3.78678261 14,2.44095652 C14.0002578,1.09486957 12.9176015,0 11.587105,0 Z M11.587105,3.57756522 C10.9676337,3.57756522 10.4634429,3.06782609 10.4634429,2.44121739 C10.4634429,1.8146087 10.9676337,1.3046087 11.587105,1.3046087 C12.2065763,1.3046087 12.7105093,1.8146087 12.7105093,2.44121739 C12.7105093,3.06782609 12.2065763,3.57756522 11.587105,3.57756522 Z' id='Shape'%3E%3C/path%3E%3Cpath d='M13.3555125,8.60869565 L9.54506764,8.60869565 C9.35912308,7.44834783 8.3646679,6.55904348 7.1656995,6.55904348 C5.966989,6.55904348 4.97279171,7.4486087 4.78658927,8.60869565 L0.386847193,8.60869565 C0.173307542,8.60869565 0,8.784 0,9 C0,9.216 0.173307542,9.39130435 0.386847193,9.39130435 L4.78658927,9.39130435 C4.97253382,10.5516522 5.966989,11.4409565 7.1656995,11.4409565 C8.36441,11.4409565 9.35886519,10.5513913 9.54506764,9.39130435 L13.3552546,9.39130435 C13.5687942,9.39130435 13.7421018,9.216 13.7421018,9 C13.7421018,8.784 13.5690521,8.60869565 13.3555125,8.60869565 Z M7.1659574,10.1366087 C6.54648609,10.1366087 6.04255315,9.6266087 6.04255315,9 C6.04255315,8.3733913 6.54648609,7.8633913 7.1659574,7.8633913 C7.74132812,7.8633913 8.21173431,8.30478261 8.27672464,8.86956522 C8.26228234,8.91052174 8.25299801,8.95408696 8.25299801,9 C8.25299801,9.04591304 8.26228234,9.08947826 8.27672464,9.13043478 C8.21173431,9.69521739 7.74132812,10.1366087 7.1659574,10.1366087 Z' id='Shape'%3E%3C/path%3E%3Cpath d='M13.3555125,15.1677391 L5.71347514,15.1677391 C5.52753059,14.0076522 4.53307541,13.1183478 3.3343649,13.1183478 C2.1356544,13.1183478 1.14119922,14.007913 0.95499677,15.1677391 L0.386847193,15.1677391 C0.173307542,15.1677391 0,15.3430435 0,15.5590435 C0,15.7750435 0.173307542,15.9503478 0.386847193,15.9503478 L0.95499677,15.9503478 C1.14094132,17.1106957 2.1353965,18 3.3343649,18 C4.53307541,18 5.52727269,17.1104348 5.71347514,15.9503478 L13.3555125,15.9503478 C13.5690521,15.9503478 13.7423597,15.7750435 13.7423597,15.5590435 C13.7423597,15.3430435 13.5690521,15.1677391 13.3555125,15.1677391 Z M3.3343649,16.6956522 C2.7148936,16.6956522 2.21070276,16.1856522 2.21070276,15.5590435 C2.21070276,14.9324348 2.7148936,14.4226957 3.3343649,14.4226957 C3.95383621,14.4226957 4.45776915,14.9324348 4.45776915,15.5590435 C4.45776915,16.1856522 3.95383621,16.6956522 3.3343649,16.6956522 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        background-position: -1px 1px;
        background-size: 20px 20px !important;
    }


    html:has(.mfilter-free-container-opened, .mfilter-free-container-opening) .mfilter-free-button::before {
        background-image: url("data:image/svg+xml,%3Csvg fill='%23000000' width='25px' height='25px' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.293,18.293,10.586,12,4.293,5.707A1,1,0,0,1,5.707,4.293L12,10.586l6.293-6.293a1,1,0,1,1,1.414,1.414L13.414,12l6.293,6.293a1,1,0,1,1-1.414,1.414L12,13.414,5.707,19.707a1,1,0,0,1-1.414-1.414Z'/%3E%3C/svg%3E");
        filter: invert(0);
    }


    /*    -->                               CATEGORY-LIKE PAGES (update) > FILTERS                 
[3]   ------------------------------------------------------------- */

    header::after {
        background: #000;
        content: "";
        position: fixed;
        top: 0px;
        right: 0px;
        width: 100vw;
        height: calc(100vh + 300px);
        z-index: 8;
    }


    header:after {
        visibility: hidden;
        opacity: 0;
        transition: all 0.4s;
    }

    /* --> CATEGORY-LIKE PAGES (update) > FILTERS > BUTTON */

    .mfilter-box-1 .mfilter-free-button {
        transition: all .4s ease;
        right: 0px;
        left: unset !important;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -ms-transition: all .4s ease;
        -o-transition: all .4s ease;
        box-shadow: 0 4px 19px -6px rgba(0, 0, 0, .5)
    }

    .mfilter-box-1 .mfilter-free-button {
        border-radius: 0px 20px 20px 0px;
        -webkit-border-radius: 0px 20px 20px 0px;
        -moz-border-radius: 0px 20px 20px 0px;
        -ms-border-radius: 0px 20px 20px 0px;
        -o-border-radius: 0px 20px 20px 0px;

        background-color: var(--primary-color);
        border-color: var(--primary-color);



    }

    .mfilter-free-container:is(.mfilter-free-container-opening, .mfilter-free-container-opened) .mfilter-free-button {
        top: 30px !important;
        background-color: white !important;
        border-color: white !important
    }

    .mfilter-free-container:is(.mfilter-free-container-opening, .mfilter-free-container-opened) .mfilter-free-button i {
        color: black !important;
    }

    .mfilter-free-container:is(.mfilter-free-container-closing, .mfilter-free-container-closed) .mfilter-free-button {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
    }

    /* --> CATEGORY-LIKE PAGES (update) > FILTERS > BACKDROP */


    html:has(.mfilter-free-container-opening),
    html:has(.mfilter-free-container-opened),
    html:has(.mfilter-free-container-closing) {
        overflow: hidden !important;
    }

    html:has(.mfilter-free-container-opening) header:after,
    html:has(.mfilter-free-container-opened) header:after {
        opacity: .5 !important;
        visibility: visible !important;
    }

    html:has(.mfilter-free-container-opening) .mfilter-box-1 .mfilter-free-button,
    html:has(.mfilter-free-container-opened) .mfilter-box-1 .mfilter-free-button {
        box-shadow: none
    }

    /* --> CATEGORY-LIKE PAGES (update) > FILTERS > CONTAINER */

    .mfilter-box-1.mfilter-free-container {
        top: 0px;
        width: calc(100vw - 40px) !important;
        margin-left: 0px !important;
        max-width: 400px
    }

    .mfilter-box-1.mfilter-free-container .scroll-wrapper {
        width: 100% !important;
    }

    .mfilter-free-container,
    .mfilter-free-container.mfilter-free-container-closing {
        margin-left: 0px !important;
        transform: translateX(-100%) !important;
        transition: all .4s !important;
        -webkit-transform: translateX(-100%) !important;
        -moz-transform: translateX(-100%) !important;
        -ms-transform: translateX(-100%) !important;
        -o-transform: translateX(-100%) !important;
    }

    .mfilter-free-container:is(.mfilter-free-container-opening, .mfilter-free-container-opened) {
        transform: translateX(0px) !important;
    }

}

/*
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
/* !SECTION */
/* SECTION PRODUCT PARTIAL
VVV
VVV
VVV
VVV
VVV
VVV
VVV
*/

/*    -->                                                                                                                                  PRODUCT PARTIAL > TITLE
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

@media(max-width: 1350px) {
    .product-partial-container div h4 a {
        font-size: 16px !important;
    }
}

/*
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
/* !SECTION */
/* SECTION PRODUCT PAGE
VVV
VVV
VVV
VVV
VVV
VVV
VVV
*/

/*    -->                                                                                                                                    PRODUCT PAGE > LAYOUT
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

#product-product {
    padding-inline: 0px;
}

#product-product #content>div:has(.product-images, .product-description),
#product-product #content .related-products,
#product-product #content .recently-viewed-products {
    padding-inline: var(--spaceForSocials) var(--calculatedPadding);
}

/*    -->                                                                                                                                   PRODUCT PAGE > GALLERY
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

@media(max-width: 1300px) {
    .product-images .swiper-pager>div {
        width: 35px !important;
        height: 35px !important;
        padding: 5px
    }
}

/*    -->                                                                                                                                 PRODUCT PAGE > MAIN INFO
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

@media(max-width: 1024px) {
    .main_info_container {
        padding: 30px 0px !important;

    }
}

@media(max-width: 600px) {
    .prior_to_cart {
        flex-wrap: wrap;
        gap: 10px 0px;
        margin-bottom: 20px
    }

    .prior_to_cart>.compare_and_wishlist_container {
        width: 100%;
    }
}

/*    -->                                                                                                                                 PRODUCT PAGE > EXTRA INFO
[1]   %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

@media(max-width: 1024px) {
    #product-product #content>div:has(.product-description) {
        padding-block: 30px
    }
}

/*    -->                                                                       COMMON > FOR MODULES > ATTRIBUTES
[2]   =========================================================================================================== */


@media(max-width: 1024px) {
    .product-attributes tbody {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
    }

    .product-attributes tr {
        display: flex;
        width: 100%;
    }

    .product-attributes tr td:first-child {
        width: 250px;
    }

    .product-attributes tr td:last-child {
        flex: 1 1 auto;
        width: 200px;
    }
}

@media(max-width: 600px) {
    .product-attributes tr {
        flex-direction: column;
        gap: 5px;
        padding-block: 10px;
    }

    .product-attributes tr td {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        flex: 1 0 100%;
        padding: 0px 7px !important;
    }
}

/*    -->                                                                       COMMON > FOR MODULES > ATTRIBUTES
[2]   =========================================================================================================== */

@media(max-width: 1200px) {

    #product-product .related-products .carousel-navigation,
    #product-product #content>div:has(.recently-viewed-products) .carousel-navigation {
        right: var(--defaultPadding);
        top: 30px
    }

}

/*
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
/* !SECTION */
/* SECTION MANUFACTURER PAGE
VVV
VVV
VVV
VVV
VVV
VVV
VVV
*/

#product-manufacturer {
    padding-inline: var(--spaceForSocials) var(--calculatedPadding);
}

/*
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
/* !SECTION */
/* SECTION CART PAGE
VVV
VVV
VVV
VVV
VVV
VVV
VVV
*/

#checkout-cart .recently-viewed-products,
#checkout-cart .recently-viewed-products>* {
    margin-inline: 0px !important;
    padding-inline: 0px !important;
    max-width: 100% !important;
}

/*
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
ΛΛΛ
/* !SECTION */
/* SECTION CHECKOUT PAGE
VVV
VVV
VVV
VVV
VVV
VVV
VVV
*/

@media(max-width: 1024px) {
    #checkout-content>.grid>div:nth-child(1) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #checkout-content>.grid>div:nth-child(1)>div:not(:last-child) {
        width: 100%;
        box-shadow: none;
        border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
        border-width: 1px;
    }

    #checkout-content>.grid>div:nth-child(1)>div:last-child {
        padding: 0px;
        box-shadow: none;
    }
}

@media(max-width: 550px) {
    #checkout-content>.grid>div:nth-child(1) {
        display: flex;
        flex-direction: column;
    }
}