/* ΠΑΡΑΤΗΡΗΣΕΙΣ: - carousel breakpoints --> να μπουν breakpoints - products carousel breakpoints --> χρειαζόμαστε περισσότερα και το ένα επαναλαμβάνεται - σε όλα τα modules να υπάρχει πεδίο για προσθήκη κλάσης css από τον διαχειριστή */ /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION COMMON VVV VVV VVV VVV VVV VVV VVV */ /* --> COMMON > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 768px) { body { overflow-X: hidden; } } /* --> 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; display: none !important; } #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; flex-wrap: nowrap; overflow: auto !important; /* border: 1px solid red; */ max-width: 100%; } .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; white-space: nowrap } .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; } } /* --> COMMON > TITLES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1200px) { .title_section>p { font-size: 15px } .title_section>h2 { font-size: 35px } } @media(max-width: 1024px) { .title_section>p { font-size: 15px } .title_section>h2 { font-size: 30px } } @media(max-width: 768px) { .title_section>p { font-size: 14px } /* .title_section>h2 { font-size: 25px } */ } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION HEADER VVV VVV VVV VVV VVV VVV VVV */ @media(max-width: 1200px) and (min-width: 1051px) { .menu_button { flex-wrap: wrap; justify-content: flex-start; gap: 15px 15px; } #header .logo { margin-top: 30px; margin-right: 30px; } .menu_button :is(.extra-menu-item, .extra-contact-menu) { margin: 0px !important } .menu_button>div>button>span, .extra-menu-item>a>span, .extra-contact-menu>a>span { font-size: 12px !important; line-height: 1.2 } } @media(max-width: 1050px) { header .menu_button .extra-menu-item { display: none; } header .extra-contact-menu { display: none; } button.menu-button>span { display: none !important; } html.main_menu_open, html.main_menu_open body { overflow: hidden !important; } } /* --> 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, html.scrolling-down .language-floating-wrapper { 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] =========================================================================================================== */ html:not(.transparent_header_enabled) header~div:has(#content), html:not(.transparent_header_enabled) header~div:has(nav), html:not(.transparent_header_enabled) header~div:has(>div>h1), html:not(.transparent_header_enabled) 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 { overflow: auto; } @media(max-width: 1050px) { /* .mega_menu_wrapper { height: calc(100vh - var(--headerHeight)) !important; padding-bottom: 0px } .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 { 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 div[class*="level"] { overflow: auto !important; padding-block: 10px !important; height: calc(100vh - 132px) !important; } .scrolled .mega_menu_wrapper div[class*="level"] { 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; overflow: visible !important; } .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); overflow: visible !important; } .mega_menu_wrapper .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%); position: relative !important; transform: none !important; top: unset !important; left: unset !important; right: unset !important; float: right !important; margin-left: auto; } .mega_menu_wrapper .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 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 > MEGA MENU > UPDATE FOR VERSION WITH IMAGE ON LEFT [2] =========================================================================================================== */ @media(max-width: 1200px) { .mega_menu_wrapper .image { display: none } } @media(max-width: 1200px) and (min-width: 1051px) { header .mega_menu_wrapper { padding: 20px 10px !important; } header .mega_menu_wrapper .level_1, header .mega_menu_wrapper .level_2 :is(.subcategories, .third_level) { padding-inline: 15px !important; } header .mega_menu_wrapper .level_1 { width: calc(1 * (100% / 3)) !important; min-width: unset; } header .mega_menu_wrapper .level_2 { width: calc(2 * (100% / 3)) !important; min-width: unset; } header .mega_menu_wrapper .level_2 .subcategories { width: 50% !important; } header .mega_menu_wrapper .level_2 .third_level { width: 50% !important; } .mega_menu_wrapper .separator { display: none !important; } } /* --> 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: 1500px) { 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: 1500px) { header #search { display: none; } header #search-toggle { display: block; } } /* --> HEADER > SEARCH > SEARCH MODAL CONTAINER [2] =========================================================================================================== */ @media(max-width: 1500px) { #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 RESPONSIVE HEADER #2 VVV VVV VVV VVV VVV VVV VVV */ @media(max-width: 1050px) { /* --> RESPONSIVE HEADER > CART BUTTON [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #cart-button { flex-direction: row-reverse !important; } #cart-button>span { transform: translateY(-15px); margin: 0px; width: 25px; height: 25px; padding: 0px; display: flex; color: black; background: #eae4e4 !important; justify-content: center; align-items: center; } /* --> RESPONSIVE HEADER > MENU BUTTON [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .menu-button>div { background: none !important; display: flex; flex-direction: column; gap: 6px !important; box-shadow: none !important; } html:not(.transparent_header_enabled) .menu-button>div, html:not(.transparent_header_enabled) .menu-button>div * { filter: brightness(0) !important; -webkit-filter: brightness(0) !important; } html.scrolled_past_header .menu-button>div, html.scrolled_past_header .menu-button>div * { filter: brightness(0) !important; } .menu-button>div>div { width: 36px; transform: none !important; } .menu-button>div:after { content: "MENU"; color: white; font-size: 12px; font-weight: 500; } /* --> RESPONSIVE HEADER > GET RID OF DESKTOP ELEMENTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ nav#top>.language-floating-wrapper, .header-icons :is(#search-toggle, .mobile_movement) { display: none !important; } /* --> RESPONSIVE HEADER > MOBILE MENU WRAPPER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .mega_menu_wrapper { top: 0px !important; height: 100% !important; position: fixed !important; padding-inline: 25px; overflow: auto; border: none !important; } .mega_menu_wrapper i { display: block !important; } .level_1, .subcategories, .third_level { padding: 0px !important; } .mega_menu_wrapper .separator { display: none !important; } .third_level>div { border: none !important; } /* --> RESPONSIVE HEADER > MOBILE MENU WRAPPER > OPEN ANIMATION [2] =========================================================================================================== */ .mega_menu_wrapper { width: 420px !important; max-width: 100% !important; left: 0px !important; transform: none !important; transform: translateX(-100%) !important; opacity: 1 !important; transition: all .3s; display: block !important; } html:after { content: ""; background: rgba(0, 0, 0, .6); width: 100%; height: 100%; position: fixed !important; top: 0px; left: 0px; z-index: 1; visibility: hidden; opacity: 0; transition: all .3s; } html.main_menu_open .mega_menu_wrapper { transform: translateX(0px) !important; } html.main_menu_open:after { visibility: visible; opacity: 1; } /* --> RESPONSIVE HEADER > MOBILE MENU WRAPPER > CLOSE BUTTON [2] =========================================================================================================== */ .mega_menu_wrapper .close_mobile_menu { background: none !important; } .mega_menu_wrapper .close_mobile_menu svg { width: 32px; height: 32px; } /* --> RESPONSIVE HEADER > MOBILE MENU WRAPPER > LEVELS [2] =========================================================================================================== */ .mega_menu_wrapper .level_1 { width: 100% !important; min-width: 100% !important } .level_1, .level_2 .subcategories, .level_2 .third_level { padding-top: 30px !important; } /* --> RESPONSIVE HEADER > MOBILE MENU WRAPPER > LEVELS > 2&3 COLOR EXCEPTIONS [3] ------------------------------------------------------------- */ .mega_menu_wrapper .level_1 { background: none !important; } .mega_menu_wrapper:is(.level_0_enabled, .level_1_enabled) { background: #fff; } .mega_menu_wrapper:is(.level_2_enabled, .level_3_enabled) { background: #000 } .mega_menu_wrapper:is(.level_2_enabled, .level_3_enabled) .flex-1 a, .mega_menu_wrapper:is(.level_2_enabled, .level_3_enabled) .flex-1 a span { color: white !important } .mega_menu_wrapper:is(.level_2_enabled, .level_3_enabled) h3 button img { filter: brightness(0) invert(1) } .mega_menu_wrapper:is(.level_2_enabled, .level_3_enabled) h3 { border-color: rgba(255, 255, 255, .48); } .mega_menu_wrapper:is(.level_2_enabled, .level_3_enabled) .flex-1 a i { color: #333; } /* --> RESPONSIVE HEADER > MOBILE MENU HEADER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> RESPONSIVE HEADER > MOBILE MENU HEADER > LANGUAGE [2] =========================================================================================================== */ .mobile_menu_header .language_dropdown_mobile { margin-top: -56px; width: fit-content; } .mobile_menu_header .language_dropdown_mobile>div { position: absolute; width: 80px; background: white !important; z-index: 1; } .mobile_menu_header .language_dropdown_mobile>button { background: none; padding: 0px; width: 45px } .mobile_menu_header .language_dropdown_mobile>button>div>img, .mobile_menu_header .language_dropdown_mobile form button img { display: none !important; } .mobile_menu_header .language_dropdown_mobile>button>div>span, .mobile_menu_header .language_dropdown_mobile form button span { color: black !important; filter: brightness(0) !important; } /* --> RESPONSIVE HEADER > MOBILE MENU HEADER > SEARCH [2] =========================================================================================================== */ .mobile_menu_header #search { display: block !important; margin-top: 0px !important; width: fit-content !important; max-width: 100% !important; margin-block: 50px !important; } html body header .mobile_menu_header #search input, html body header .mobile_menu_header #search input::placeholder, html body header .mobile_menu_header #search button { color: black !important; border-color: black !important; font-weight: 500 !important; } html body header .mobile_menu_header #search input { width: 100% !important; padding-bottom: 6px; } html body header .mobile_menu_header #search input+button { padding-right: 10px; padding-bottom: 5px; } html body header .mobile_menu_header i { display: block !important; } /* --> RESPONSIVE HEADER > MOBILE MENU HEADER > SECONDARY HEADER LINKS [2] =========================================================================================================== */ .mobile_menu_header .secondary_header_links { margin-bottom: 22px; padding-block: 6px; height: 57px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } /* --> RESPONSIVE HEADER > MOBILE MENU HEADER > SECONDARY HEADER LINKS > ACCOUNT [3] ------------------------------------------------------------- */ .account_dropdown.mobile_movement .bg-generic a { color: white; padding-block: 7px; } .account_dropdown.mobile_movement>div { margin-right: -15px; width: 250px; border: 1px solid #ccc } .mobile_movement>div>div span { font-size: 13px; line-height: normal } .mobile_movement>div>div .eye-icon-btn { display: none !important; } /* if not logged in */ html.guest_customer .mobile_menu_header .account_dropdown>div { left: 50% !important; transform: translateX(-50%); width: fit-content } html.guest_customer .mobile_menu_header .account_dropdown>div a { color: white !important; } /* --> RESPONSIVE HEADER > MOBILE MENU CONTENTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> RESPONSIVE HEADER > MOBILE MENU CONTENTS > TITLES [2] =========================================================================================================== */ .mega_menu_wrapper a:has(h3) { padding: 0px !important; margin-bottom: 0px !important; } .mega_menu_wrapper h3 { font-size: 18px; text-transform: uppercase; border-bottom: 1px solid #9B9B9B; padding-bottom: 10px; display: flex; align-items: center; margin-bottom: 20px; } .mega_menu_wrapper h3, .mega_menu_wrapper h3 span, .mega_menu_wrapper a:has(h3) { text-decoration: none !important; } .mega_menu_wrapper h3, .mega_menu_wrapper h3 span { color: var(--primary-color) !important; } .mega_menu_wrapper h3 button { height: 30px } .mega_menu_wrapper h3 button img { transform: rotate(180deg); filter: brightness(0); width: 26px; margin-right: 5px } /* --> RESPONSIVE HEADER > MOBILE MENU CONTENTS > ITEMS [2] =========================================================================================================== */ .mega_menu_wrapper .flex-1 a { padding-block: 13px; color: black; } .mega_menu_wrapper .flex-1 a i { color: #ccc; display: none !important; } .mega_menu_wrapper .extra_links a { margin: 0px !important; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !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: 768px) { footer>.container { --calculatedPadding: 40px !important; } } @media(max-width: 500px) { .copyright_and_credits_section>div:last-child span { display: flex; flex-direction: column; gap: 10px } } /* --> FOOTER > COLUMNS AS ACCORDION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(min-width: 769px) { .footer-accordion-item h3 { cursor: default; } .footer-accordion-item h3 i { display: none } } @media(max-width: 768px) { footer .footer_columns_container { gap: 20px } .footer-accordion-item .footer-accordion-content { max-height: 0px; padding-inline: 15px } .footer-accordion-item h3 { border-bottom: 1px solid rgba(255, 255, 255, .29); padding: 0px 15px 10px; font-size: 18px; } html:is(.common-home, .home) .footer-accordion-item h3 { border-color: rgba(255, 255, 255, .29); } } /* --> FOOTER > SOCIALS ON THE SIDE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1725px) { footer>.container { display: flex; flex-direction: column; } footer .copyright_and_credits_section { order: 99 } footer .grid { padding-bottom: 20px; } footer>.container .socials_on_the_side { position: relative; order: 98; display: flex; flex-direction: column; transform: none; width: 100%; margin-block: 0px 10px; gap: 10px; /* border-top: 1px solid rgba(229, 231, 235, .4) !important; */ /* padding-top: 25px; */ transform: none !important; margin: 0px !important; top: 0px; bottom: 0px; padding-bottom: 50px; } 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; } } @media(max-width: 768px) { footer>.container .socials_on_the_side>div { gap: 30px; } footer>.container .socials_on_the_side { align-items: flex-start; padding-left: 15px } .socials_on_the_side :is(h3, i) { color: white; } .socials_on_the_side a i { font-size: 26px; } footer>.container .socials_on_the_side>* { font-size: 18px; font-weight: 500 } footer>.container .socials_on_the_side h3 { margin-bottom: 10px; margin-top: 30px } html:not(:has(#common-home)) footer>.container .socials_on_the_side * { color: black; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !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 } } */ @media(max-width: 1200px) { #common-home #content>.grid { gap: 100px; } } @media(max-width: 1024px) { #common-home #content>.grid { gap: 80px; } } @media(max-width: 768px) { #common-home .swiper-pagination { display: none !important } #common-home .text_cta_banner { margin-top: 0px; } #common-home .carousel_categories { padding-top: 0px } #common-home #content>.grid>div>div { padding-top: 0px !important; padding-bottom: 0px !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 > ITEMS PER ROW [2] =========================================================================================================== */ @media(max-width: 1200px) { #content #product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media(max-width: 768px) { #content #product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media(max-width: 500px) { #content #product-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } } /* --> 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 > INTRO SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1200px) { .intro_wrapper { height: 300px } .intro_wrapper img { object-fit: cover !important; height: 100% !important; width: 100% !important; aspect-ratio: unset !important; max-width: unset !important } } @media(min-width: 769px) { #product-category .intro_wrapper_for_mobile { display: none !important; } } @media(max-width: 768px) { #product-category .intro_wrapper .title_section { display: none !important; } } /* --> 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 } } @media(max-width: 1024px) { :is(#product-category, #product-special, #product-manufacturer-info, #product-search) .control_row { display: flex; flex-direction: column } #mfilter-content-container .pagination_container_top { display: none !important; } } /* --> 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)); } } @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)); } } @media(max-width: 768px) { :is(#product-category, #product-special, #product-manufacturer-info, #product-search) #product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media(max-width: 450px) { :is(#product-category, #product-special, #product-manufacturer-info, #product-search) #product-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } } /* --> 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; } } /* --> CATEGORY-LIKE PAGES (update #2) > CONTROLS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(min-width: 1025px) { /* --> CATEGORY-LIKE PAGES (update #2) > CONTROLS > ITEMS PER ROW [2] =========================================================================================================== */ .filters_toggle_n_grid_layout_for_mobile { display: none; } } @media(max-width: 1024px) { /* --> CATEGORY-LIKE PAGES (update #2) > CONTROLS > LAYOUT GET RID OF EMPTY SPACE [2] =========================================================================================================== */ :is(#product-category, #product-special, #product-manufacturer-info, #product-search) #content>.grid { display: none !important; } :is(#product-category, #product-special, #product-manufacturer-info, #product-search)>div:has(#content) { gap: 0px } .horizontal-filters { height: 0px; margin: 0px !important; padding: 0px !important; } /* --> CATEGORY-LIKE PAGES (update #2) > CONTROLS > ITEMS PER ROW FOR MOBILE [2] =========================================================================================================== */ .grid_layout_for_desktop { display: none !important; } body:has(#product-category, #product-special, #product-manufacturer-info, #product-search) { overflow: visible !important; } .filters_toggle_n_grid_layout_for_mobile { display: flex; align-items: center; margin-inline: auto; width: 100%; justify-content: space-between; background: white; border-bottom: 1px solid #E5E5E5; padding-bottom: 7px; padding-top: 7px; margin-bottom: 25px; z-index: 1 !important; position: sticky; top: 0px; height: 50px; } .filters_toggle_n_grid_layout_for_mobile .grid_layout_buttons_for_mobile { gap: 0px; } .filters_toggle_n_grid_layout_for_mobile .grid_layout_buttons>button { width: fit-content !important; padding-inline: 10px } /* --> CATEGORY-LIKE PAGES (update #2) > CONTROLS > FILTERS TOGGLE [2] =========================================================================================================== */ .mfilter-free-button { opacity: 0; visibility: hidden; } html:has(.mfilter-free-container-opening, .mfilter-free-container-opened) .mfilter-free-button { opacity: 1 !important; visibility: visible !important; } .filters_toggle_n_grid_layout_for_mobile .filters_toggle_for_mobile { cursor: pointer; display: flex; align-items: center; gap: 10px; } .filters_toggle_n_grid_layout_for_mobile .filters_toggle_for_mobile span { cursor: pointer; font-size: 15px; color: #000; font-weight: 500 !important; line-height: normal; text-transform: uppercase; } .filters_toggle_n_grid_layout_for_mobile .filters_toggle_for_mobile img { height: 17px } /* --> CATEGORY-LIKE PAGES (update #2) > CONTROLS > CONTROL ROW [2] =========================================================================================================== */ #mfilter-content-container .control_row>div:first-child { display: flex !important; flex-direction: row; } html:has(#product-category, #product-special, #product-manufacturer-info, #product-search) .control_row>div:first-child { width: 100% !important; display: flex; justify-content: space-between !important; } html:has(#product-category, #product-special, #product-manufacturer-info, #product-search) .control_row>div button { padding: 0px !important; outline: none !important; border: none !important; } .control_row>div>div:first-child>div { left: 0px !important; right: unset !important; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CATEGORY - ONLY SUBCATEGORIES (CUSTOM TEMPLATE) VVV VVV VVV VVV VVV VVV VVV */ /* --> RESPONSIVE > TOP CATEGORY PAGE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1250px) { .categories_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media(max-width: 1200px) { .categories_grid { gap: 40px 20px; } } @media(max-width: 1024px) { .categories_grid { gap: 20px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media(max-width: 768px) { .categories_grid>a div { font-size: 18px; line-height: normal } } @media(max-width: 475px) { .categories_grid { grid-template-columns: 1fr !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 > DISTANCES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1200px) { .attributes_and_files_wrapper { padding-block: 50px !important; margin-top: 100px } .extra_products_section { margin-top: 50px !important; } #product-product .files_section { padding-top: 50px !important } } @media(max-width: 768px) { .extra_products_section { margin-top: 80px !important; } } /* --> PRODUCT PAGE > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-product { padding-inline: 0px; } /* --> PRODUCT PAGE > GALLERY [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1300px) { .product-images .swiper-pager>div { width: 35px !important; height: 35px !important; padding: 5px } } @media(max-width: 768px) { #product-product .current_image { position: relative; margin-top: -3rem; width: 100vw; margin-left: 50%; transform: translateX(-50%); } /* #product-product #product-images .swiper-slide { border: 1px solid #ccc; } */ #product-product #product-images .mobile-thumbnail.selected_image { opacity: 1; border: 1px solid red; } #product-product #product-images .mobile-thumbnail:not(.selected_image) { border: 1px solid #ccc; } #product-product .share_functionality_wrapper { display: none; } #product-product .current_image .share_functionality_wrapper { position: absolute; top: 30px; right: 15px; display: block; } } /* --> PRODUCT PAGE > MAIN INFO [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1024px) { #product-product #content .top_row { gap: 30px } main_info_container { padding: 30px 0px !important; } } @media(max-width: 768px) { #product-product .main_info_wrapper { margin-top: 0px !important; padding-top: 0px !important; } #product-product #content .top_row { display: flex !important; flex-direction: column !important; gap: 0px } .discounts_section .pricing_text_section { margin-top: 10px; margin-bottom: -1.5rem } #product-product .files_section .links_wrapper { margin-bottom: 70px !important; } #product-product .files_section .links_wrapper>a { width: 100%; background: white; } } @media(max-width: 700px) { #product-product .primary_info { display: flex; flex-direction: column; gap: 25px; margin-top: 30px; padding-bottom: 20px; } .prior_to_cart { flex-wrap: wrap; gap: 10px 0px; margin-bottom: 20px } /* .prior_to_cart>.compare_and_wishlist_container { width: 100%; } */ } @media(max-width: 1200px) { .discounts_section, .warehouse_stock_section, .buttons_and_inputs_section { padding-inline: 0px } .discounts_section>.grid { flex-direction: column; display: flex; } .buttons_and_inputs_section { flex-direction: column !important; gap: 0px; } .buttons_and_inputs_section .prior_to_cart { align-items: center; display: flex; } .buttons_and_inputs_section .compare_and_wishlist_container { padding-top: 0px } } @media(max-width: 400px) { .buttons_and_inputs_section .prior_to_cart { display: flex; flex-direction: column; gap: 25px } .buttons_and_inputs_section .prior_to_cart .compare_and_wishlist_container { width: 100% !important; justify-content: space-between } } /* --> PRODUCT PAGE > EXTRA PRODUCTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1200px) { .related-products { flex-direction: column } .extra_products_section.related-products>div, .extra_products_section.related-products>.related-products-swiper, .extra_products_section.related-products>.title_section { width: 100% !important; } } /* --> 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%; } .attributes_and_files_wrapper>div { width: 100% !important } /* .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; } }