/* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION COMMON VVV VVV VVV VVV VVV VVV VVV */ /* --> COMMON > lOGGED IN VS LOGGED OUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> COMMON > lOGGED IN VS LOGGED OUT > TOGGLE LINKS IN FOOTER AND SIDEBAR [2] =========================================================================================================== */ html:not(.logged_customer) :is(footer, #information-menu) li:has(a[href*="tropoi-apostolis.html"], a[href*="tropoi-paraggelias.html"], a[href*="oroi-epistrofon.html"], a[href*="tropoi-pliromis.html"], a[href*="delivery-information.html"], a[href*="tropoi-pliromis.html"], a[href*="oroi-epistrofon.html.html"]) { display: none !important; } /* --> COMMON > ACCESSIBILITY [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* #ac-menu .ac-menu-toggle { background: white !important; } */ #ac-menu { /* z-index: 999 !important; */ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2) !important; transition: all 0.3s !important; bottom: 0px !important; top: unset !important; transform: none !important; } #ac-menu .ac-menu-toggle { bottom: 43px !important; top: unset !important; transform: scale(.75); padding: 0px; transform-origin: right; border-radius: 100% 0 0 100% !important; overflow: hidden !important; background: white !important } #ac-menu.ac-menu-open .ac-menu-toggle { background: white !important; } @media(max-width: 1730px) { #ac-menu { box-shadow: none !important; } #ac-menu .ac-menu-toggle { background: transparent !important; } } /* --> COMMON > ACCESSIBILITY > MOVE TO RIGHT SIDE [2] =========================================================================================================== */ #ac-menu { left: unset !important; right: -180px !important; } #ac-menu .ac-menu-toggle { left: unset !important; right: 180px !important; } #ac-menu.ac-menu-open { right: 0px !important; } /* --> COMMON > VARIABLES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> COMMON > VARIABLES > SIZES & DIMENSIONS [2] =========================================================================================================== */ :root { /* --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; */ --topBarHeight: 0px; --headerHeight: 88px; /* --menuPadding: 60px; */ /* --headerItemsDistance: 43px; */ } @media(max-width: 990px) { :root { --spaceForSocials: var(--calculatedPadding); } } /* --> COMMON > VARIABLES > COLORS [2] =========================================================================================================== */ :root { --text-color: #888; --color_1: #e21d1a; } /* --> COMMON > VARIABLES > COLORS > ASSIGNMENT [3] ------------------------------------------------------------- */ :root { color: var(--text-color); } /* --> COMMON > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> COMMON > LAYOUT > HORIZONTAL PADDINGS [2] =========================================================================================================== */ .container { max-width: unset; } header .container { padding-inline: var(--calculatedPadding) !important; } #common-home #content>.grid>div>div, footer>.container, #information-information, #information-contact, #content>div, #product-category>div:has(#content)>div, #product-product #content>div { padding-inline: 0px !important; width: 100%; } #common-home #content>div, footer>.container, #information-information #content, #information-contact #content, #information-about-us #content, #information-careers #content, #product-product #content, .layout_category_only_subcategories #content, .breadcrumb_wrapper>div, :is(#product-category, #product-search)>div:has(#content), .pre_footer { padding-inline: var(--calculatedPadding) !important; max-width: 100% } /* @media(max-width: 1200px) { footer>.container, #information-information #content { padding-inline: var(--spaceForSocials) var(--calculatedPadding) !important; } } */ /* --> COMMON > LAYOUT > OVERFLOW PREVENTION & LAYOUT FIXES [2] =========================================================================================================== */ /* Prevent horizontal overflow globally */ html, body { /* overflow-x: hidden !important; */ max-width: 100vw !important; width: 100% !important; } /* Allow sticky positioning to work properly */ html { overflow-x: hidden; overflow-y: auto; } /* Ensure all containers respect viewport width */ * { box-sizing: border-box !important; } /* --> COMMON > TITLES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> COMMON > TITLES > FOR MODULES [2] =========================================================================================================== */ .title_section { margin-bottom: 30px; } .product-tabs-module .title_section { margin-bottom: 0px; } /* --> COMMON > TITLES > FOR MODULES > SUB [3] ------------------------------------------------------------- */ .title_section>p { text-transform: uppercase; letter-spacing: 1.8px; margin: 0px !important; padding: 0px !important; color: var(--text-color); font-size: 16px; } /* --> COMMON > TITLES > FOR MODULES > MAIN [3] ------------------------------------------------------------- */ .title_section>h2 { font-weight: 400; font-size: 40px; line-height: 1.35; margin: 0px !important; padding: 0px !important; margin-top: 5px !important; text-transform: uppercase; color: black; } /* --> COMMON > MODULES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> COMMON > MODULES > VIEW MORE BUTTON [2] =========================================================================================================== */ .view_more_button { text-transform: uppercase; text-decoration: underline; transition: all .15s; -webkit-transition: all .15s; -moz-transition: all .15s; -ms-transition: all .15s; -o-transition: all .15s; } .view_more_button:hover { color: black; } .view_more_button, .products-carousel .view_more_button, .banner-module.banner-accordion .mobile .extra_info .banner-link, .html_container .view_more_button, .text_cta_banner .left_side .view_more_button { display: flex; align-items: center; font-weight: 500; gap: 0px !important; color: #999; width: fit-content; margin-inline: auto } .view_more_button:hover, .products-carousel .view_more_button:hover, .banner-module.banner-accordion .mobile .extra_info .banner-link:hover, .html_container .view_more_button:hover, .text_cta_banner .left_side .view_more_button:hover { color: black; } .view_more_button img, .products-carousel .view_more_button img, .banner-module.banner-accordion .mobile .extra_info .banner-link img, .html_container .view_more_button img, .text_cta_banner .left_side .view_more_button img { width: 40px; margin-left: 10px } /* --> COMMON > MODULES > VIEW MORE BUTTON > RESPONSIVE [3] ------------------------------------------------------------- */ @media(max-width: 768px) { .view_more_button, .products-carousel .view_more_button, .banner-module.banner-accordion .mobile .extra_info .banner-link, .html_container .view_more_button, .text_cta_banner .left_side .view_more_button { text-decoration: none !important; display: flex !important; } } /* --> COMMON > MODULES > PRODUCT TABS [2] =========================================================================================================== */ .tab-content { width: 100% !important; } /* --> COMMON > MODULES > PRODUCT TABS > NAVIGATION BUTTONS [3] ------------------------------------------------------------- */ .product-tabs-module>div>div { margin-bottom: 0px; align-items: flex-end; } .product-tabs-module nav { display: flex; gap: 30px } .product-tabs-module nav button { border: None !important; padding: 0px; font-weight: 400; text-transform: uppercase; color: var(--text-color); font-size: 17px; } .product-tabs-module nav button.active_tab { color: black !important; font-weight: bold; } /* --> COMMON > MODULES > PRODUCT TABS > PRODUCTS WRAPPER [3] ------------------------------------------------------------- */ .product-tabs-module .tab-content { margin-top: 25px } /* --> COMMON > MODULES > HTML [2] =========================================================================================================== */ /* --> COMMON > MODULES > HTML > TEXT [3] ------------------------------------------------------------- */ .html_container .html_text { margin-top: 30px; line-height: 1.9; color: var(--text-color) !important; } .html_container .view_more_button { display: flex; align-items: center; gap: 15px; text-transform: uppercase; margin-top: 40px; font-weight: 500; } /* --> COMMON > MODULES > HTML > VIEW MORE BUTTON WITH ICON [3] ------------------------------------------------------------- */ .view_more_button img { width: 50px; filter: invert(18%) sepia(95%) saturate(7473%) hue-rotate(354deg) brightness(95%) contrast(121%); -webkit-filter: invert(18%) sepia(95%) saturate(7473%) hue-rotate(354deg) brightness(95%) contrast(121%); } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION HEADER VVV VVV VVV VVV VVV VVV VVV */ header { height: var(--headerHeight) !important; } /* --> HEADER > IF TRASPARENT HEADER IS ENABLED [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ header:after, header, header>div, html.transparent_header_enabled:not(.scrolled) header .logo, html:before, #search input, #search input::placeholder, #search button { transition: .4s !important; } html.transparent_header_enabled:not(.scrolled) header, html.transparent_header_enabled:not(.scrolled) header>div { background-color: transparent !important; } html.transparent_header_enabled header { position: fixed !important; width: 100%; } html.transparent_header_enabled:not(.scrolled) header:after { opacity: 0; } html:before { content: ""; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0)); height: 150px; width: 100%; position: fixed; top: 0px; left: 0px; z-index: 2; visibility: hidden; opacity: 0; } html.transparent_header_enabled:not(.scrolled):before { visibility: visible; opacity: 1; } html.transparent_header_enabled:not(.scrolled) #top:has(.language-floating-wrapper)>.language-floating-wrapper>.language-floating-inner :is(button, span) { color: white !important; } html.transparent_header_enabled:not(.scrolled) #top:has(.language-floating-wrapper)>.language-floating-wrapper>.language-floating-inner button.text-primary { color: var(--color_1) !important; } html.transparent_header_enabled:not(.scrolled) header .menu_button button span, html.transparent_header_enabled:not(.scrolled) header .extra-menu-item a span, html.transparent_header_enabled:not(.scrolled) header .extra-contact-menu a span { color: white !important; } /* html.transparent_header_enabled:not(.scrolled) header .logo { filter: invert(1) hue-rotate(180deg) contrast(1.1) brightness(1.1); -webkit-filter: invert(1) hue-rotate(180deg) contrast(1.1) brightness(1.1); } */ html.transparent_header_enabled:not(.scrolled) header #search input, html.transparent_header_enabled:not(.scrolled) header #search input::placeholder, html.transparent_header_enabled:not(.scrolled) header #search button { color: white; border-color: white; } html.transparent_header_enabled:not(.scrolled) header .header-icons>div svg { filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); } /* --> HEADER > HORIZONTAL LINE AT BOTTOM [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ header::after { content: ""; height: 1px; /* width: calc(100vw - 2 * var(--calculatedPadding) - 15px); */ left: var(--calculatedPadding); background: #e2e2e2; display: block; position: absolute; top: 100%; right: var(--calculatedPadding); } /* --> HEADER > TOP BAR [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #top>div { padding-inline: var(--calculatedPadding) !important; } /* --> HEADER > TOP BAR > IF LANGUAGE FLOATER IS ENABLED [2] =========================================================================================================== */ /* --> HEADER > TOP BAR > IF LANGUAGE FLOATER IS ENABLED > MANAGE TOP BAR [3] ------------------------------------------------------------- */ #top:has(.language-floating-wrapper) { width: fit-content; right: var(--calculatedPadding); padding: 0px; position: fixed; z-index: 51; background: none !important; } #top:has(.language-floating-wrapper)>.language-floating-wrapper { padding: 0px !important; } #top:has(.language-floating-wrapper)>.language-floating-wrapper>.language-floating-inner { padding: 0px; height: 35px; padding-top: 10px; display: flex; margin-bottom: -35px; border-radius: 0px; background: none !important; box-shadow: none !important; } #top:has(.language-floating-wrapper)>.language-floating-wrapper>.language-floating-inner :is(button, span) { color: var(--text-color); font-weight: 400; font-size: 14px !important; } #top:has(.language-floating-wrapper)>.language-floating-wrapper>.language-floating-inner button.text-primary { color: black !important; font-weight: bold } /* --> HEADER > TOP BAR > IF LANGUAGE FLOATER IS ENABLED > MANAGE CART DRAWER'S OVERLAP [3] ------------------------------------------------------------- */ html:has(.cart_drawer.opened) .language-floating-wrapper { opacity: 0 !important; transform: translateY(-100%) !important; } .language-floating-wrapper { transition: .3s; } /* --> HEADER > TOP BAR > IF LANGUAGE FLOATER IS ENABLED > MANAGE HEADER [3] ------------------------------------------------------------- */ body:has(.language-floating-wrapper) header>div { padding: 0px !important; /* height: 100px; */ display: flex; align-items: center; height: 100%; } @media(min-width: 1050px) { body:has(.language-floating-wrapper) header .container>div>*:not(.logo) { margin-top: 30px } } #search input, #search input::placeholder, #search button { background: none; } /* --> HEADER > SEARCH [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #search { transform: translateY(-5px); } #search input { font-weight: 500; border-color: #a9a9a9 } /* --> HEADER > MAIN MENU ITEMS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .menu_button>div>button>span, .extra-menu-item>a>span, .extra-contact-menu>a>span { font-size: 16px !important; font-weight: 500 !important; } /* --> HEADER > ICONS CONTAINER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ header .header-icons { gap: 10px !important } .header-icons>div>a[href*="lists"] svg { width: 27px; height: 27px } /* --> HEADER > CART DRAWER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .cart_drawer { z-index: 52; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION PRE-FOOTER VVV VVV VVV VVV VVV VVV VVV */ .pre_footer { display: flex; width: fit-content; max-width: 100%; margin: 150px auto 30px auto; gap: 90px } .pre_footer .newsletter_section .title_section { margin-bottom: 15px } .pre_footer .newsletter_section :is(#newsletter-email, button) { border: 1px solid #b4b4b4; transition: all .2s; color: black; height: 45px; display: flex; align-items: center; } .pre_footer .newsletter_section #newsletter-form>div { margin-bottom: 0px } .pre_footer .newsletter_section #newsletter-form>div button { padding-inline: 23px } .pre_footer .newsletter_section #newsletter-form>div button:hover { color: white !important; border-color: black !important; } .pre_footer .newsletter_section #newsletter-form>div #newsletter-email { padding-inline: 20px; width: 100%; max-width: 270px; } .pre_footer .newsletter_section #newsletter-form>div .accept_terms_section { margin-top: 0px !important; } /* --> PRE-FOOTER LOGO [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ html:not(.common-home):not(.home) .pre_footer .logo_section img { opacity: .1 } /* --> PRE-FOOTER > RESPONSIVE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width:1024px) { .pre_footer { gap: 30px } } @media(max-width: 768px) { .pre_footer { flex-direction: column; margin-bottom: 50px; } .pre_footer .newsletter_section #newsletter-form>div input#newsletter-email { max-width: unset !important; width: 100% !important; } .pre_footer .logo_section { width: 300px; max-width: 100%; margin-inline: auto; } .pre_footer .newsletter_section #newsletter-form>div button { padding-inline: 5px; width: 110px !important; text-align: center !important; justify-content: center; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION FOOTER VVV VVV VVV VVV VVV VVV VVV */ /* --> FOOTER > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ footer { padding-block: 0px 0px !important; background: white !important; } footer .grid { padding-block: 55px; margin-bottom: 0px; border-top: 15px solid #f3f3f3; /* border-bottom: 1px solid #bebebe; */ } /* --> FOOTER > EXCEPTIONS FOR DARK VERSION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ html:is(.common-home, .home) footer .grid>div * { color: white; } html:is(.common-home, .home) footer { background: black !important; } html:is(.common-home, .home) footer .grid { border: none !important; } /* --> FOOTER > GRID [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ footer .grid>div * { letter-spacing: normal; color: black; border-color: #ccc; } footer .grid>div>h3 { font-weight: 500; } footer .grid :is(p, li) { margin: 0px; margin-bottom: 14px !important } footer .grid :is(p, li, a) { line-height: normal; font-size: 14px } footer .grid ul>li:last-child { margin-bottom: 0px; } /* --> FOOTER > SOCIALS ON THE SIDE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(min-width: 1570px) { html:is(.home, .common-home):not(.scrolled) .socials_on_the_side :is(h3, i) { color: #fff !important; } } .socials_on_the_side :is(h3, i) { color: #888; transition: all .4s; -webkit-transition: all .4s; -moz-transition: all .4s; -ms-transition: all .4s; -o-transition: all .4s; } .socials_on_the_side { gap: 20px } .socials_on_the_side h3 { font-size: 16px; letter-spacing: 1.2px } .socials_on_the_side a i { font-size: 20px } .socials_on_the_side a i:hover { color: var(--primary-color); } /* --> FOOTER > COPYRIGHTS & CREDITS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ footer .copyright_and_credits_section { padding-block: 11px; background: white; border: none; box-shadow: var(--calculatedPadding) 0px white, calc(-1 * var(--calculatedPadding)) 0px white; border-top: 1px solid #bebebe; } .copyright_and_credits_section img { height: 25px } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION HOME VVV VVV VVV VVV VVV VVV VVV */ .homepage-tabs-2, .homepage-tabs-2>div.bg-white { background-color: #F2F2F2; } .homepage-tabs-2 { padding-bottom: 5rem; } .homepage-tabs-3 nav { margin-bottom: -65px; z-index: 2; position: relative; justify-content: flex-end; padding-right: 130px; } .carousel.swiper-viewport .swiper-slide.text-center { background: white; display: flex; justify-content: center; align-items: center; align-content: center; } /* --> HOME > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > LAYOUT > SECTION DISTANCING [2] =========================================================================================================== */ #common-home #content>.grid { display: flex; flex-direction: column; gap: 120px; } #common-home #content .grid { overflow: hidden; } /* --> HOME > SLIDESHOW [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .slideshow { width: 100vw !important; margin-left: 50%; transform: translateX(-50%); } /* --> HOME > SLIDESHOW > SCROLL DOWN BUTTON [2] =========================================================================================================== */ .slideshow:has(.scroll-down) { overflow: hidden; } .scroll-down { display: flex; gap: 20px; justify-content: center; align-content: center; align-items: center; color: #fff; font-size: 17px; font-weight: 500; cursor: pointer; position: absolute; right: 0px; top: calc(50%); z-index: 1; transform: rotate(-90deg) translateY(calc(-100% - 15px)); white-space: nowrap; transform-origin: top right; letter-spacing: 1.5px; } .scroll-down .decoration-line { width: 160px; height: 2px; background: var(--primary-color); display: block; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; } @media(max-width: 1024px) { .slideshow .scroll-down { display: none !important } } /* --> HOME > SLIDESHOW > NAVIGATION [2] =========================================================================================================== */ .slideshow .swiper-pager { display: none; } .slideshow .swiper-button-next { right: 30px } .slideshow .swiper-button-prev { left: 30px } /* --> HOME > TEXT CTA BANNER (html section) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .text_cta_banner { display: grid; grid-template-columns: 600px 1fr; gap: 60px; } .text_cta_banner .left_side {} .text_cta_banner .left_side .html-cta { display: flex; padding: 35px 40px !important; box-shadow: 0 4px 40px rgba(0, 0, 0, .14); width: max-content; gap: 50px; background: white; margin-top: 70px; max-width: calc(100vw - 70px); } .text_cta_banner .left_side .html-cta .item { display: flex; gap: 20px; align-items: center; } .text_cta_banner .left_side .view_more_button { width: fit-content; } .text_cta_banner .left_side .html-cta .item img { width: 45px; height: 45px; filter: invert(18%) sepia(95%) saturate(7473%) hue-rotate(354deg) brightness(95%) contrast(121%); } .text_cta_banner .left_side .html-cta .item div { font-size: 17px; line-height: 1.4; color: var(--text-color) !important; } .text_cta_banner .right_side { width: calc(100% + var(--calculatedPadding)); z-index: -1; position: relative; } .text_cta_banner .right_side img { width: 100%; } .text_cta_banner .right_side .html-image { height: 100%; display: block; } @media(min-width: 769px) { .text_cta_banner .right_side .html-image img { object-fit: cover; width: 100%; height: 100%; } } /* --> HOME > TEXT CTA BANNER (html section) > RESPONSIVE [2] =========================================================================================================== */ @media(max-width: 1100px) { .text_cta_banner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } } @media(max-width: 990px) { .text_cta_banner .left_side .html-cta .item { flex-direction: column; text-align: center; } .text_cta_banner .left_side .html-cta .item div { font-size: 16px } } @media(max-width: 768px) { .text_cta_banner { display: flex; flex-direction: column-reverse; } .text_cta_banner .left_side .html-cta { max-width: 100% !important; width: 100% !important; justify-content: space-between; padding: 20px !important; box-shadow: none; margin-top: 20px; } .text_cta_banner .right_side { width: 100% !important; } .text_cta_banner .left_side .view_more_button { margin-inline: auto !important; display: flex !important; float: none !important } } @media(max-width: 570px) { .text_cta_banner .left_side .html-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --> HOME > CATEGORIES CAROUSEL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > CATEGORIES CAROUSEL > SWIPER [2] =========================================================================================================== */ .carousel_categories .swiper-container, #carousel0.swiper-container { overflow: visible } /* --> HOME > CATEGORIES CAROUSEL > HIDE NAV [2] =========================================================================================================== */ .carousel_categories .carousel-navigation, .carousel .carousel-navigation { display: none } /* --> HOME > HORIZONTAL BANNER ACCORDION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .banner-module.banner-accordion { width: 100vw !important; margin-left: 50%; transform: translateX(-50%); } .banner-module.banner-accordion .desktop { display: flex; flex-wrap: nowrap; gap: 0px; } .banner-module.banner-accordion .desktop .banner-item { position: relative; overflow: hidden; } .banner-module.banner-accordion .desktop .banner-item:after { content: ""; width: 100%; height: 100%; z-index: 1; position: absolute; top: 0px; left: 0px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%) } .banner-module.banner-accordion .desktop .banner-item { flex: 1 1 auto; } .banner-module.banner-accordion .desktop .banner-item>div { color: white; } /* --> HOME > HORIZONTAL BANNER ACCORDION > IMAGE [2] =========================================================================================================== */ .banner-module.banner-accordion .desktop .banner-item .block { height: 100%; } .banner-module.banner-accordion .desktop .banner-item>img, .banner-module.banner-accordion .desktop .banner-item>.block img { object-fit: cover !important; object-position: left bottom; height: 100% !important; } /* --> HOME > HORIZONTAL BANNER ACCORDION > EXTRA INFO [2] =========================================================================================================== */ .banner-module.banner-accordion .desktop .banner-item .extra_info { position: absolute; bottom: 0px; padding: 0px 100px 35px 50px; max-width: 100%; width: 100%; display: flex; flex-direction: column; z-index: 2; transform: translateY(calc(100% - 55px)); } .banner-module.banner-accordion .desktop .banner-item .extra_info .banner-title { font-size: 22px; display: block !important; margin-bottom: 30px; white-space: nowrap; } .banner-module.banner-accordion .desktop .banner-item .extra_info .banner-description { font-size: 13px; line-height: 1.4; margin-top: 3px; opacity: 0; overflow: visible; } .banner-module.banner-accordion .desktop .banner-item .extra_info .banner-link { margin-top: 10px; font-weight: 500; font-size: 13px; display: flex; align-items: center; gap: 20px; } .banner-module.banner-accordion .desktop .banner-item .extra_info .banner-link img { height: 17px; } /* --> HOME > HORIZONTAL BANNER ACCORDION > HOVERS [2] =========================================================================================================== */ /* --> HOME > HORIZONTAL BANNER ACCORDION > HOVERS> SETUP [3] ------------------------------------------------------------- */ .banner-module.banner-accordion .desktop .banner-item { transition: all .3s; } .banner-module.banner-accordion .desktop .banner-item .extra_info, .banner-module.banner-accordion .desktop .banner-item .extra_info .banner-title, .banner-module.banner-accordion .desktop .banner-item .extra_info .banner-description { transition: all .2s } /* --> HOME > HORIZONTAL BANNER ACCORDION > HOVERS> EXECUTION [3] ------------------------------------------------------------- */ .banner-module.banner-accordion .desktop .banner-item:hover { transform: none; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; } .banner-module.banner-accordion .desktop .banner-item:hover .extra_info { transform: none; transition: all .3s .3s } .banner-module.banner-accordion .desktop .banner-item:hover .extra_info .banner-title { margin-bottom: 0px; } .banner-module.banner-accordion .desktop .banner-item:hover .extra_info .banner-description { opacity: 1; transition: all .3s .3s } .banner-module.banner-accordion .desktop .banner-item:hover { flex: 1 0 auto } /* --> HOME > HORIZONTAL BANNER ACCORDION > RESPONSIVE [2] =========================================================================================================== */ @media(max-width: 768px) { .banner-module.banner-accordion .desktop { display: none !important; } .banner-module.banner-accordion:has(.mobile) { width: 100% !important; margin: 0px !important; transform: none; padding: 0px !important; } .banner-module.banner-accordion .mobile .extra_info { margin-top: 20px } .banner-module.banner-accordion .mobile .extra_info .banner-title { font-size: 22px; display: block !important; white-space: nowrap; color: #444; } .banner-module.banner-accordion .mobile .extra_info .banner-description { font-size: 15px; line-height: 1.7; margin-top: 3px; overflow: visible; } .banner-module.banner-accordion .mobile .extra_info .banner-link { margin-top: 10px; /* font-weight: 500; */ /* font-size: 15px; */ /* display: flex; */ /* align-items: center; */ /* gap: 20px; */ /* color: #444 !important; */ /* display: flex; */ /* gap: 10px; */ /* width: fit-content; */ /* margin-left: auto; */ margin-right: 13%; } .banner-module.banner-accordion .mobile .extra_info .banner-link img { width: 45px !important; filter: invert(18%) sepia(95%) saturate(7473%) hue-rotate(354deg) brightness(95%) contrast(121%); -webkit-filter: invert(18%) sepia(95%) saturate(7473%) hue-rotate(354deg) brightness(95%) contrast(121%); } } /* --> HOME > VIDEO AND TEXT (html section) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .video_and_text { display: grid; grid-template-columns: 980px 1fr; gap: 95px; align-items: center } .video_and_text iframe.left_side { width: 100%; height: auto; aspect-ratio: 16/9 } /* --> HOME > VIDEO AND TEXT > RESPONSIVE [2] =========================================================================================================== */ @media(max-width: 1500px) { .video_and_text { gap: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: flex-start; } } @media(max-width: 990px) { .video_and_text { display: flex; flex-direction: column; } } /* --> HOME > TEXT LINKS BANNER (html section) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .text_links_banner { display: grid; grid-template-columns: 500px 1fr; gap: 100px; padding-left: 100px; } .text_links_banner .links_wrapper { display: flex; flex-direction: column; gap: 20px; margin-top: 40px } .text_links_banner .links_wrapper>a { border: 1px solid #eaeaea; height: 85px; padding-inline: 30px; justify-content: space-between; margin: 0px; transition: all .2s; text-decoration: none; color: black; font-weight: 400; font-size: 18px; text-transform: none; width: 100%; } .text_links_banner .links_wrapper>a:hover { background: #eaeaea } /* --> HOME > TEXT LINKS > RESPONSIVE [2] =========================================================================================================== */ @media(max-width: 1190px) { .text_links_banner { padding-left: 0px !important; gap: 30px } } @media(max-width: 990px) { .text_links_banner { display: flex; flex-direction: column-reverse; } } /* --> HOME > BLOG [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .latest-posts .swiper-viewport { margin-top: 40px; } .latest-posts .carousel-navigation { display: none !important; } :is(#latestblog, #blog-category) .caption { padding: 30px; width: 100%; margin-top: 0px; } :is(#latestblog, #blog-category) .image { margin-bottom: 0px !important; } :is(#latestblog, #blog-category) .caption .post-date { font-size: 16px; font-weight: 400; color: black; margin-bottom: 15px; } :is(#latestblog, #blog-category) .caption h4 a { font-size: 25px !important; font-weight: 400 !important; } :is(#latestblog, #blog-category) .caption p { font-size: unset !important; line-height: 2; color: unset; } .latest-posts { padding-block: 0px !important; } .latest-posts .title_and_link { display: flex; justify-content: space-between; } .latest-posts .title_and_link .title_section { margin-bottom: 0px } /* --> HOME > BLOG > RESPONSIVE [2] =========================================================================================================== */ @media(max-width: 550px) { .latest-posts .title_and_link { flex-direction: column; align-items: flex-start; gap: 30px } } /* --> HOME > BLOG > RESPONSIVE > VIEW MORE BUTTON PLACEMENT [3] ------------------------------------------------------------- */ @media(min-width: 769px) { #latestblog+.view_more_button { display: none !important; } .latest-posts .title_and_link .view_more_button { margin-right: 0px !important } } @media(max-width: 768px) { #latestblog+.view_more_button { display: flex !important; margin-top: 40px } .latest-posts .title_and_link .view_more_button { display: none !important; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CATEGORY - ONLY SUBCATEGORIES (CUSTOM TEMPLATE) VVV VVV VVV VVV VVV VVV VVV */ .layout_category_only_subcategories #content .title_section { margin-bottom: 15px; margin-top: 50px; } .layout_category_only_subcategories #content .title_section>* { text-align: center; width: 100%; } .layout_category_only_subcategories .category_description_text { text-align: center; font-size: 18px; text-transform: none; color: black; font-weight: 500; } .categories_grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px } .categories_grid>a { position: relative; } .categories_grid>a img { width: 100%; background: #eee } .categories_grid>a { overflow: hidden; } .categories_grid>a img { transition: all .2s; } .categories_grid>a:hover img { transform: scale(1.07); } .categories_grid>a div { font-size: 18px; font-family: var(--font_2); text-align: center; line-height: normal; position: absolute; bottom: 0px; width: 100%; text-transform: uppercase; font-weight: 500; color: white; padding: 0px 10px 17px; background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 33.33%); height: 100%; display: flex; align-items: flex-end; justify-content: center; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CATEGORY-LIKE VVV VVV VVV VVV VVV VVV VVV */ /* --> CATEGORY-LIKE > ITEMS PER ROW [2] =========================================================================================================== */ /* #content #product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } */ /* --> CATEGORY-LIKE > INTRO SECTION (IF INTRO BANNER) [2] =========================================================================================================== */ #product-category .intro_wrapper, .blogs-intro .intro_wrapper { position: relative; } #product-category .intro_wrapper .title_section { margin: 0px; position: absolute; top: 50%; transform: translateY(calc(-50% + var(--headerHeight) / 2)); left: var(--calculatedPadding); } .blogs-intro .intro_wrapper .title_section { margin: 0px; position: absolute; top: 50%; transform: translateY(calc(-50% + var(--headerHeight) / 2)); -webkit-transform: translateY(calc(-50% + var(--headerHeight) / 2)); -moz-transform: translateY(calc(-50% + var(--headerHeight) / 2)); -ms-transform: translateY(calc(-50% + var(--headerHeight) / 2)); -o-transform: translateY(calc(-50% + var(--headerHeight) / 2)); } #product-category .intro_wrapper .title_section>*, .blogs-intro .intro_wrapper .title_section>* { color: white !important; } @media(min-width: 1025px) { /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL [2] =========================================================================================================== */ /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL > GENERAL LAYOUT [3] ------------------------------------------------------------- */ html:has(.horizontal-filters) :is(#product-category, #product-search)>div:has(#content) { position: relative; gap: 0px; } html:has(.horizontal-filters) :is(#product-category, #product-search) .mfilter-box { position: relative; } html:has(.horizontal-filters) #mfilter-content-container { position: static !important; } html:has(.horizontal-filters) :is(#product-category, #product-search)>div:has(#content) .control_row { position: absolute; top: 16px; right: var(--calculatedPadding); } html:has(.horizontal-filters) :is(#product-category, #product-search)>div:has(#content) .control_row>div { padding-top: 0px !important; margin: 0px !important } /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL > GENERAL LAYOUT > FILTERS AND CONTROLS STICKY (+ js) */ .horizontal-filters { position: sticky !important; z-index: 1; top: var(--headerHeight) !important; background: white; padding-top: 20px !important; overflow: hidden; } .horizontal-filters { z-index: 1; background: white; overflow: visible; } .horizontal-filters>aside { padding-top: 20px !important } html:has(.horizontal-filters) .control_row { z-index: 2; padding-top: 20px; } .horizontal-filters>aside, #mfilter-content-container .control_row { background: white } .scrolled_past_horizontal_filters #mfilter-content-container .control_row { position: fixed !important; top: var(--headerHeight) !important; padding-top: 35px !important; } /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL > GENERAL LAYOUT > FILTERS WRAPPER */ html:has(.horizontal-filters) .breadcrumb_wrapper { margin-bottom: 40px !important } .horizontal-filters>* { width: 100% !important; min-width: 100% !important } .horizontal-filters .mfilter-content>ul { display: flex; flex-wrap: wrap; gap: 20px; } .horizontal-filters .mfilter-content>ul li { margin-bottom: 0px !important; } /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL > PAGINATION [3] ------------------------------------------------------------- */ .horizontal-filters .mfilter-box h3.box-heading { text-transform: uppercase; font-weight: 500 !important; } /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL > PAGINATION [3] ------------------------------------------------------------- */ html:has(.horizontal-filters) .pagination_container_top { display: none; } /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL > GET RID OF SUBCATEGORY SECTION [3] ------------------------------------------------------------- */ html:has(.horizontal-filters) #mfilter-content-container>div:not(.control_row, #product-grid, .pagination_container_bottom) { display: none } /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL > "SELECTED FILTERS" DISPLAY [3] ------------------------------------------------------------- */ html:has(.horizontal-filters) .mfilter-content { margin-top: 20px; } html:has(.horizontal-filters) .mfilter-content .mfilter-selected-filters { width: fit-content; margin-bottom: 20px; } html:has(.horizontal-filters) .mfilter-box .mfilter-selected-filters-cnt { display: flex; align-items: center; gap: 20px } html:has(.horizontal-filters) .mfilter-box .mfilter-selected-filters-cnt a { display: flex !important; justify-content: space-between; background-color: #FFFFFF; align-content: center; align-items: center; margin: 0px !important; gap: 0px; color: #444 !important; height: fit-content; border: none; font-size: 14px; padding: 0px } html:has(.horizontal-filters) .mfilter-box .mfilter-selected-filters-cnt a>span { padding: 0 !important; display: block !important; } html:has(.horizontal-filters) .mfilter-selected-filters-cnt::before { display: block; position: relative; color: #444 !important; margin: 0px !important; font-size: 14px; font-weight: 500; } html[lang="el"] .mfilter-selected-filters-cnt::before { content: "Έχετε επιλέξει"; } html[lang="en"] .mfilter-selected-filters-cnt::before { content: "Selected filters"; } /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL > INDIVIDUAL FILTER ENABLED FLAG [3] ------------------------------------------------------------- */ html:has(.horizontal-filters) .mfilter-filter-item { transition: all .14s; } html:has(.horizontal-filters) .mfilter-filter-item:not(:has(.active_filter_counter)) { opacity: .4; } /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL > INDIVIDUAL FILTER HEADING [3] ------------------------------------------------------------- */ html:has(.horizontal-filters) .mfilter-filter-item:hover, html:has(.horizontal-filters) .mfilter-filter-item:not(:has(.mfilter-collapsed)) { opacity: 1; } html:has(.horizontal-filters) .mfilter-heading-text { width: auto; margin: 0px !important } html:has(.horizontal-filters) .mfilter-filter-item .mfilter-heading { color: #000; font-weight: 400; font-size: 14px !important; line-height: 24px; text-transform: none; } html:has(.horizontal-filters) .mfilter-heading-text span { color: #444444; font-weight: 500; font-size: 14px; line-height: 24px; padding-right: 18px; padding-left: 5px; font-family: inherit !important } html:has(.horizontal-filters) .mfilter-heading-content { border-bottom: 1px solid #d8d8d8; border: 1px solid #444444; padding: 4px 5px !important } html:has(.horizontal-filters) .mfilter-head-icon { display: flex !important; align-items: center; justify-content: center; margin: 0px; } html:has(.horizontal-filters) .mfilter-head-icon::after { width: 15px !important; height: 15px !important; } /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL > INDIVIDUAL FILTER DROPDOWN [3] ------------------------------------------------------------- */ html:has(.horizontal-filters) .mfilter-heading-content { border-bottom: 1px solid #d8d8d8; border: 1px solid #444444; } html:has(.horizontal-filters) .mfilter-opts-container { margin-top: 5px; background: white; border: 1px solid #000 !important; padding: 5px; width: 320px; max-width: 320px; padding: 5px 10px !important; } html:has(.horizontal-filters) .mfilter-tb { display: block; max-width: 100%; } html:has(.horizontal-filters) .mfilter-tb-as-tr:not(.mfilter-hide) { display: block !important; max-width: 100% !important; word-wrap: anywhere; } html:has(.horizontal-filters) .mfilter-col-input+.mfilter-tb-as-td { padding-right: 20px !important; } html:has(.horizontal-filters) .mfilter-content-opts { position: absolute; z-index: 5; } /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL > REVEAL EFFECT [3] ------------------------------------------------------------- */ html:has(.horizontal-filters) .mfilter-content-opts { transition: all .4s; /* display: block !important; */ height: -webkit-fit-content !important; height: -moz-fit-content !important; height: fit-content !important; } html:has(.horizontal-filters) .mfilter-heading.mfilter-collapsed+.mfilter-content-opts { opacity: 0 !important; visibility: hidden !important; transform: translateY(10px) !important; } html:has(.horizontal-filters) .mfilter-heading:not(.mfilter-collapsed)+.mfilter-content-opts { opacity: 1; visibility: visible; transform: translateY(0px); } /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL > SHOW ACTIVE NUMBER [3] ------------------------------------------------------------- */ html:has(.horizontal-filters) .mfilter-heading-content { display: flex; align-items: center; gap: 10px } html:has(.horizontal-filters) .mfilter-heading-text { display: flex !important; align-items: center !important; gap: 5px !important; white-space: nowrap !important; } html:has(.horizontal-filters) .mfilter-heading-text span { padding-right: 0px } html:has(.horizontal-filters) .mfilter-heading-text .active_filter_counter { background: var(--primary-color) !important; width: 19px; height: 19px; display: flex; align-items: center; justify-content: center; padding: 0px; line-height: 1; color: white; border-radius: 100%; font-size: 12px } /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL > BUTTONS: RESET FILTERS & VIEW MORE CATEGORIES [3] ------------------------------------------------------------- */ html:has(.horizontal-filters) .mfilter-button-top { display: flex; gap: 50px; width: fit-content; font-size: 14px; position: absolute; top: 5px; left: 300px; padding: 0px !important; margin: 0px; } html:has(.horizontal-filters) .mfilter-button-top * { font-size: 14px !important; color: #444 !important; margin: 0px !important; line-height: normal; font-weight: bold !important } html:has(.horizontal-filters) .mfilter-button-reset .mfilter-reset-icon { width: 12px; height: 12px; margin-top: 2px !important } /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL > SHOW MORE FILTERS [3] ------------------------------------------------------------- */ /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL > SHOW MORE FILTERS > BUTTON */ html:has(.horizontal-filters) .mfilter-content .view_more_filters { display: none !important; font-size: 14px; color: #444; font-weight: 500; text-decoration: none !important; align-items: center; cursor: pointer; gap: 5px; margin-top: 4px; } html:has(.horizontal-filters) body.filters_in_multiple_lines .mfilter-content .view_more_filters { display: flex !important; margin-right: auto; } html:has(.horizontal-filters) .view_more_filters::after { line-height: 1; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.68037 10.369245' width='10px'%3E%3Cg xmlns='http://www.w3.org/2000/svg' transform='matrix(0 -1 1 0 -0 10.369245)'%3E%3Ctitle%3Earrow down black copy 5%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='FACTORY--Copy' transform='translate(-45.315385, -1140.159815)' stroke='%23000000' stroke-width='1.56923077'%3E%3Cg id='arrow-down-black-copy-5' transform='translate(50.500000, 1148.500000) rotate(90.000000) translate(-50.500000, -1148.500000) translate(42.944444, 1144.100000)'%3E%3Cpolyline id='Path' points='15.1111111 0 7.5567363 8.8 0 0'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); transform: translateY(-2px); transition: all .12s; } html:has(.horizontal-filters) body.more_filters_visible .view_more_filters:after { transform: rotate(180deg); } /* --> CATEGORY-LIKE > FILTERS: HORIZONTAL > SHOW MORE FILTERS > EXPAND FILTERS */ html:has(.horizontal-filters) .mfilter-content ul { max-height: 35px; transition: all .4s; overflow: hidden; } html:has(.horizontal-filters) body.more_filters_visible .mfilter-content ul { max-height: 2000px !important; overflow: visible; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION SEARCH PAGE VVV VVV VVV VVV VVV VVV VVV */ #product-search .search-form-container { display: block !important; background: #eee; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION PRODUCT PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> PRODUCT PAGE > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-product #content>div { margin-inline: auto; } /* --> PRODUCT PAGE > TOP SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > TOP SECTION > LAYOUT [2] =========================================================================================================== */ #product-product .top_row { align-items: flex-start; gap: 100px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } #product-product .top_row>div { width: 100%; } .discounts_section>.grid { gap: 15px; } .discounts_section, .warehouse_stock_section, .buttons_and_inputs_section { padding-inline: 30px } /* --> PRODUCT PAGE > TOP SECTION > GALLERY SECTION [2] =========================================================================================================== */ /* --> PRODUCT PAGE > GALLERY SECTION > SLIDES [3] ------------------------------------------------------------- */ @media(min-width: 768px) { #product-images .swiper-slide { width: 100% !important; } } /* --> PRODUCT PAGE > GALLERY SECTION > TURN CAROUSEL INTO LIST (FOR DESKTOP) [3] ------------------------------------------------------------- */ #product-product #product-images, #product-product .product-images { position: relative !important; } @media(min-width: 768px) { #product-images .swiper-wrapper { transform: translate3d(0px, 0, 0) !important; flex-wrap: wrap; } #product-images .swiper-wrapper .swiper-slide-duplicate { display: none !important; } #product-images~.swiper-pagination, #product-images~.swiper-pager { display: none !important; } } /* --> PRODUCT PAGE > TOP SECTION > MAIN INFO [2] =========================================================================================================== */ .main_info_wrapper { position: sticky; top: calc(var(--headerHeight) + 50px); /* margin-top: 20px; */ } .main_info_wrapper .main_info_container { /* padding: 0px !important; */ } /* --> PRODUCT PAGE > TOP SECTION > MAIN INFO > SHARE SECTION [3] ------------------------------------------------------------- */ .share_functionality_wrapper { margin-bottom: 45px; } .share_module_container { width: 263px; position: absolute; right: 0px; top: 100%; transform: translateY(5px); padding-top: 15px; transition: all 0.2s; opacity: 0; visibility: hidden; margin-bottom: 42px !important; } .ss-box { padding: 7px; box-sizing: content-box; background: #eee; position: relative; box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3); } .ss-box::after { content: ""; width: 0; height: 0; border-width: 15px 15px 0px 15px; border-color: #eee transparent transparent transparent; border-style: solid; position: absolute; bottom: 100%; right: 6px; transform: rotate(180deg); } .share_section .title { display: inline-block; padding: 0px 0px 0px; position: relative !important; display: flex; align-items: center; font-weight: 600; cursor: default; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-left: auto; } .share_section .title>svg { margin-right: 8px; color: black !important; } .share_section .title:hover .share_module_container { opacity: 1; visibility: visible; transform: translateY(0px); } /* --> PRODUCT PAGE > TOP SECTION > MAIN INFO > MAIN TITLE [3] ------------------------------------------------------------- */ #product-product .main_info_container h1 { font-size: 22px; font-weight: 500; line-height: 1.3; color: #151515; } /* --> PRODUCT PAGE > TOP SECTION > MAIN INFO > DESCRIPTION [3] ------------------------------------------------------------- */ #product-product .main_info_container .product_description { margin-top: 15px } /* --> PRODUCT PAGE > TOP SECTION > MAIN INFO > PRIMARY INFO [3] ------------------------------------------------------------- */ #product-product .primary_info { padding-bottom: 0px; border: none; } #product-product .primary_info *, .replaced_products_info div { font-size: 16px; text-transform: uppercase; color: #888; line-height: 1.4 !important; } #product-product .primary_info>div { dipslay: flex; align-items: center; } #product-product .primary_info .attributes_and_files_button fa { font-weight: normal !important; } #product-product .primary_info .attributes_and_files_button { display: flex; align-items: center; gap: 10px; transition: all .12s; cursor: pointer; } .attributes_and_files_button:hover { color: black !important; } /* --> PRODUCT PAGE > TOP SECTION > MAIN INFO > OPTIONS SECTION [3] ------------------------------------------------------------- */ .product-product .options_wrapper { padding-bottom: 15px } .product-product .options_wrapper h3 { display: none } .product-product .options_wrapper label { color: #888; font-weight: normal !important; } .product-product .options_wrapper select { border: 1px solid black; border-radius: 0px; background: white; height: 45px; color: black; font-weight: 500; } .product-product .options_wrapper .options_parent { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; } .product-product .options_wrapper .options_parent>div { margin: 0px !important; flex: 1 1 300px; } .product_configuration_wrapper select { background: white; border-radius: 0; padding: 12px 10px; font-weight: 400; color: black !important; } /* --> PRODUCT PAGE > TOP SECTION > MAIN INFO > DISCOUNTS SECTION [3] ------------------------------------------------------------- */ .discounts_section .price_section *, .discounts_section .right_side h3 { font-size: 15px; font-weight: 500; line-height: normal } .discounts_section .right_side h3 { margin-bottom: 10px } .discount_label { margin-left: 20px; margin-right: auto; } .discounts_section .price_section .line-through { font-size: 12px !important; font-weight: normal !important } .discounts_section .pricing_text_section, .discounts_section .right_side p { color: var(--primary-text) !important; } .discounts_section .right_side * { font-size: 13px; } .discounts_section .right_side :is(td, th) { font-size: 15px; } .discounts_section .right_side td { font-size: 15px } /* --> PRODUCT PAGE > TOP SECTION > MAIN INFO > DISCOUNTS SECTION > TABLE */ .discounts_section .right_side * { font-size: 13px; } .discounts_section .right_side :is(td, th) { font-size: 15px; } .discounts_section .right_side td { font-size: 15px } /* --> PRODUCT PAGE > TOP SECTION > MAIN INFO > WAREHOUSE STOCK STATUSES [3] ------------------------------------------------------------- */ .warehouse_stock_section { border-top: 1px solid #e9e9e9; padding-top: 20px; } .warehouse_stock_section .title { font-size: 16px; font-weight: 500; color: black; text-transform: uppercase; margin-bottom: 7px } .warehouse_stock_section .stores { display: flex; flex-direction: column; gap: 2px } .warehouse_stock_section .stores .store { display: flex; } .warehouse_stock_section .stores .store .label { width: 150px; text-transform: uppercase; font-weight: 500; font-size: 16px; display: flex; ; align-items: center; gap: 10px } .warehouse_stock_section .stores .store .label:before { content: ""; width: 10px; height: 10px; background: #eee; border-radius: 100%; display: block; } .warehouse_stock_section .stores .store.stock_full .label:before, .warehouse_stock_section .stores .store.stock_7 .label:before { background: #3ea60f; } .warehouse_stock_section .stores .store.stock_mid .label:before, .warehouse_stock_section .stores .store.stock_9 .label:before { background: #f8b10f; } .warehouse_stock_section .stores .store.stock_empty .label:before, .warehouse_stock_section .stores .store.stock_8 .label:before { background: #c70000; } .warehouse_stock_section .stores .store .value { font-size: 16px; } .warehouse_stock_section.warehouse_stock_simple .store .label { width: 18px; min-width: 18px; } .warehouse_stock_section.warehouse_stock_simple .title { display: none; } /* --> PRODUCT PAGE > TOP SECTION > MAIN INFO > BUTTONS AND INPUTS [3] ------------------------------------------------------------- */ .buttons_and_inputs_section { display: flex; gap: 50px } /* --> PRODUCT PAGE > TOP SECTION > MAIN INFO > BUTTONS AND INPUTS > PRIOR TO CART */ .buttons_and_inputs_section .prior_to_cart { display: flex; flex-direction: row-reverse; gap: 50px; align-items: flex-start; padding-top: 12px } /* --> PRODUCT PAGE > TOP SECTION > MAIN INFO > BUTTONS AND INPUTS > PRIOR TO CART > COMPARE AND WISHLIST */ .buttons_and_inputs_section .compare_and_wishlist_container { display: flex; gap: 25px; padding-top: 5px } .buttons_and_inputs_section input[onclick*="compare"] { width: 28px; height: 28px; } .buttons_and_inputs_section button[onclick*="wishlist"] svg { width: 28px; height: 28px; filter: brightness(0); opacity: .7 } /* --> PRODUCT PAGE > TOP SECTION > MAIN INFO > BUTTONS AND INPUTS > PRIOR TO CART > QUANTITY AND MOQ */ .buttons_and_inputs_section .quantity_and_moq_container { display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px } .buttons_and_inputs_section .quantity_and_moq_container .moq_container { color: #888 } /* --> PRODUCT PAGE > TOP SECTION > MAIN INFO > BUTTONS AND INPUTS > CART BUTTON */ #button-cart { background: black !important; border-radius: 0px; height: fit-content; padding: 15px 10px !important; font-weight: 500; font-size: 16px; transition: all .3s; border: 1px solid black; text-transform: uppercase; line-height: normal; } #button-cart:hover { background: white !important; color: black !important; } /* --> PRODUCT PAGE > ATTRIBUTES AND FILES SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .attributes_and_files_wrapper { display: flex; align-items: flex-start; gap: 20px; justify-content: space-between; margin-top: 100px; background: #f7f7f7; padding-block: 120px 50px !important; box-shadow: var(--calculatedPadding) 0px #f7f7f7, calc(-1 * var(--calculatedPadding)) 0px #f7f7f7; } @media(min-width: 1025px) { .attributes_and_files_wrapper .title_section h2 { min-height: 110px; } } /* --> PRODUCT PAGE > ATTRIBUTES AND FILES SECTION > ATTRIBUTES SECTION [2] =========================================================================================================== */ #product-product .product-attributes { flex: 0 1 700px !important; } #product-product .product-attributes td { font-weight: normal; font-size: 15px; } #product-product .product-attributes tr { background: none; } #product-product .product-attributes tr:nth-child(2n+1) { background: #eaeaea; } #product-product .product-attributes tr>td:first-child { color: var(--primary-text); } #product-product .product-attributes tr>td:last-child { color: #000; } /* --> PRODUCT PAGE > ATTRIBUTES AND FILES SECTION > FILES SECTION [2] =========================================================================================================== */ #product-product .files_section { flex: 0 1 500px !important; margin-inline: auto; } #product-product .files_section .links_wrapper { display: flex; flex-direction: column; gap: 20px; margin-top: 40px } #product-product .files_section .links_wrapper>a { border: 1px solid #eaeaea; height: 85px; padding-inline: 30px; justify-content: space-between; margin: 0px; transition: all .2s; text-decoration: none; color: black; font-weight: 400; font-size: 18px; text-transform: none; display: flex; align-items: center; width: 100%; } #product-product .files_section .links_wrapper>a:hover { background: #eaeaea } #product-product .files_section .files_logo { margin: 50px auto; max-width: 100%; } /* --> PRODUCT PAGE > EXTRA PRODUCTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .extra_products_section { margin-top: 100px !important; } /* --> PRODUCT PAGE > EXTRA PRODUCTS > COMMON [2] =========================================================================================================== */ /* --> PRODUCT PAGE > EXTRA PRODUCTS > COMMON > PARTIALS [3] ------------------------------------------------------------- */ .extra_products_section .product-partial-container, .extra_products_section .product-partial-container>div { height: fit-content !important; } /* --> PRODUCT PAGE > EXTRA PRODUCTS > RELATED PRODUCTS [2] =========================================================================================================== */ .extra_products_section.related-products { display: flex; position: relative; } /* --> PRODUCT PAGE > EXTRA PRODUCTS > COMMON > LAYOUT [3] ------------------------------------------------------------- */ .extra_products_section.related-products>.title_section { width: 25% !important; } .extra_products_section.related-products>.related-products-swiper { width: 75% !important; } /* --> PRODUCT PAGE > EXTRA PRODUCTS > COMMON > NAVIGATION [3] ------------------------------------------------------------- */ .extra_products_section.related-products>.title_section .carousel-navigation { position: relative !important; left: unset; right: unset; top: unset; bottom: unset; margin-top: 70px; width: fit-conten } /* --> PRODUCT PAGE > EXTRA PRODUCTS > RECENTLY VIEWED [2] =========================================================================================================== */ .extra_products_section.recently-viewed-products .carousel-navigation { display: none !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION PRODUCT PARTIAL VVV VVV VVV VVV VVV VVV VVV */ /* PRODUCT PARTIAL > TITLE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-partial-container .partial_model h4 a { font-weight: 500 !important; } /* PRODUCT PARTIAL > MODEL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-partial-container .partial_model { text-transform: uppercase; } /* PRODUCT PARTIAL > WAREHOUSE STOCK SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-partial-container .warehouse_stock_section { padding-inline: 0px; padding: 0px; border: none; margin-top: 10px !important; } .product-partial-container .warehouse_stock_section * { font-size: 13px !important } .product-partial-container .warehouse_stock_section .store .label { width: 120px; } .product-partial-container .warehouse_stock_section.warehouse_stock_simple .store .label { width: 18px; min-width: 18px; } .product-partial-container .warehouse_stock_section.warehouse_stock_simple .title { display: none; } /* PRODUCT PARTIAL > PRICE SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-partial-container .partial_price_section { border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; padding-block: 13px 13px; margin-top: 15px } .product-partial-container .partial_price_section .special_price_wrapper, .product-partial-container .partial_price_section .special_price_wrapper>div, .product-partial-container .partial_price_section .special_price_wrapper>div span { display: flex; align-items: flex-end; line-height: 1 !important; } .product-partial-container .partial_price_section .current_price { font-size: 18px !important; font-weight: 500 } .product-partial-container .partial_price_section .discount_percentage { font-size: 14px !important; } .product-partial-container .partial_price_section .old_price { font-size: 14px; } .product-partial-container .partial_price_section .partial_disclaimer { font-size: 13px; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION INFORMATION: COMMON VVV VVV VVV VVV VVV VVV VVV */ /* --> FORMATION: COMMON > HERO BANNER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ html:is(.information-information, .information-contact) .hero_banner { min-height: 380px; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION INFORMATION: ABOUT US VVV VVV VVV VVV VVV VVV VVV */ /* --> INFORMATION: ABOUT US > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #information-about-us #content { display: flex; flex-direction: column; gap: var(--aboutUsSpacing); padding-top: 100px; overflow: hidden; } /* --> INFORMATION: ABOUT US > COMMON [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #information-about-us { --aboutUsSpacing: 120px; } /* --> INFORMATION: ABOUT US > INTRO > TEXTS [2] =========================================================================================================== */ #information-about-us #content { line-height: 2; font-size: 16px; color: #333 } /* --> INFORMATION: ABOUT US > INTRO [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> INFORMATION: ABOUT US > INTRO > LAYOUT [2] =========================================================================================================== */ #information-about-us .banner_and_text_intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 120px; } /* --> INFORMATION: ABOUT US > MOVING FORWARD [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> INFORMATION: ABOUT US > MOVING FORWARD > TITLE [2] =========================================================================================================== */ #information-about-us .moving_forward_wrapper .title_section { text-align: center; } /* --> INFORMATION: ABOUT US > MOVING FORWARD > USP's [2] =========================================================================================================== */ #information-about-us .moving_forward_wrapper .usp_section { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 45px; margin-top: 50px !important; justify-content: space-between; } /* --> INFORMATION: ABOUT US > MOVING FORWARD > USP's > ICON [3] ------------------------------------------------------------- */ #information-about-us .moving_forward_wrapper .usp_section .img_container { width: fit-content; height: 110px } /* --> INFORMATION: ABOUT US > MOVING FORWARD > USP's > TITLE [3] ------------------------------------------------------------- */ #information-about-us .moving_forward_wrapper .usp_section .title { font-weight: 500; font-size: 20px; color: black; line-height: 1.6; margin-bottom: 13px } /* --> INFORMATION: ABOUT US > MOVING FORWARD [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> INFORMATION: ABOUT US > MOVING FORWARD > LAYOUT [2] =========================================================================================================== */ #information-about-us .our_journey_wrapper { background: url("/image/catalog/aca_cut_assets/other_pages/ABOUT/3.jpg"); width: 100vw; margin-left: 50%; transform: translateX(-50%); background-size: cover; background-position: center center; padding-inline: var(--calculatedPadding) !important; padding-block: 80px 20px; } /* --> INFORMATION: ABOUT US > MOVING FORWARD > TITLE [2] =========================================================================================================== */ #information-about-us .our_journey_wrapper .title_section * { color: white !important; } /* --> INFORMATION: ABOUT US > MOVING FORWARD > TIMELINE LAYOUT [2] =========================================================================================================== */ #information-about-us .timeline-container { margin: 50px auto; position: relative; max-width: 1525px; } #information-about-us .timeline { display: flex; justify-content: space-between; align-items: center; position: relative; background: transparent; margin-bottom: 0; margin-top: 150px } /* --> INFORMATION: ABOUT US > MOVING FORWARD > TIMELINE NAV [2] =========================================================================================================== */ /* --> INFORMATION: ABOUT US > MOVING FORWARD > TIMELINE NAV > HORIZONTAL LINE [3] ------------------------------------------------------------- */ #information-about-us .timeline:before { content: ""; position: absolute; left: 0; right: 0; bottom: 38px; height: 1px; background: #fff; z-index: 0; } /* --> INFORMATION: ABOUT US > MOVING FORWARD > TIMELINE NAV > ITEM [3] ------------------------------------------------------------- */ #information-about-us .timeline-item { padding: 1em 1.2em; cursor: pointer; color: #fff; font-size: 25px; font-weight: 400; transition: all .3s; position: relative; border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; } #information-about-us .timeline-item:not(.active):hover { background: rgba(255, 255, 255, 0.1); } #information-about-us .timeline-item.active { color: #fff; border: 1px solid #fff; z-index: 1; } #information-about-us .timeline-item .vertical_line { width: 1px; height: 30px; display: block; background: white; margin-bottom: -7px } #information-about-us .timeline-item .outer_dot { border: 1px solid transparent; padding: 5px; border-radius: 100%; transition: all .3s; } #information-about-us .timeline-item .dot { width: 12px; height: 12px; background: white; border-radius: 100%; transition: all .3s; } /* --> INFORMATION: ABOUT US > MOVING FORWARD > TIMELINE NAV > ITEM: ACTIVATED */ #information-about-us .timeline-item.active .outer_dot { border-color: white; } #information-about-us .timeline-item.active .dot { background: #e52100 } /* --> INFORMATION: ABOUT US > MOVING FORWARD > TIMELINE CONTENT [2] =========================================================================================================== */ #information-about-us .timeline-content { background: rgba(0, 0, 0, 0.7); color: #fff; padding: 2em; margin-top: 30px; min-height: 180px; height: 400px; overflow: auto; } #information-about-us .content-panel { display: none; opacity: 0; transform: translateY(50px); transition: all 0.6s cubic-bezier(.7, .3, .3, 1); position: absolute; left: 0; right: 0; top: 0; } #information-about-us .content-panel.active { display: block; opacity: 1; transform: translateY(0); position: relative; } /* --> INFORMATION: ABOUT US > MOVING FORWARD > TIMELINE CONTENT > TITLES [3] ------------------------------------------------------------- */ #information-about-us .timeline-content h2 { font-size: 26px; font-weight: 400; line-height: 1.5; margin-bottom: 30px } /* --> INFORMATION: ABOUT US > OUR VISION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .vision_values_wrapper .description_section { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 80px; } /* --> INFORMATION: ABOUT US > BANNER CAROUSEL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #information-about-us .banner_carousel_wrapper { width: 100vw !important; margin-left: 50%; transform: translateX(-50%); } #information-about-us .banner_carousel_wrapper .swiper-container { overflow: visible !important } #information-about-us .banner_carousel_wrapper .swiper-wrapper>div { position: relative; } #information-about-us .banner_carousel_wrapper .swiper-wrapper>div .slide-title { background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, transparent 60%); height: 100%; width: 100%; display: flex; align-items: flex-end; position: absolute; bottom: 0px; left: 0px; color: white; font-size: 38px; padding: 40px 45px; line-height: 1.3 } /* --> INFORMATION: ABOUT US > BANNER CAROUSEL > NAVIGATION [2] =========================================================================================================== */ #information-about-us .banner_carousel_wrapper .swiper-pagination { display: none; } #information-about-us .banner_carousel_wrapper .swiper-pager { position: absolute; width: 50px !important; /* right: var(--default_padding); */ top: -40px !important; left: var(--calculatedPadding) !important; height: 27px; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; } #information-about-us .banner_carousel_wrapper .swiper-pager>div { padding: 5px !important; height: 20px; width: 20px; border-radius: 4px; /* display: flex; */ align-items: center; justify-content: center; line-height: 1; /* opacity: 1 !important; */ transform: none !important; top: 0px; margin-top: 0px; filter: brightness(0); background-size: 100%; } #information-about-us .banner_carousel_wrapper .swiper-button-next { right: 0px !important; } #information-about-us .banner_carousel_wrapper .swiper-button-prev { left: 0px !important; } #information-about-us .banner_carousel_wrapper .swiper-button-next::after, #information-about-us .banner_carousel_wrapper .swiper-button-prev::after { font-size: 22px; } /* --> INFORMATION: ABOUT US > VIDEO AND TEXT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #information-about-us .video_and_text_wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 115px; } #information-about-us .video_and_text_wrapper .left_side iframe { width: 100%; aspect-ratio: 16/9; } /* --> INFORMATION: ABOUT US > TEXT AND BANNERS REPEATER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #information-about-us .texts_and_banners_repeater { width: 100vw !important; margin-left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 120px; } #information-about-us .texts_and_banners_repeater .text_and_banner_wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 115px; } #information-about-us .texts_and_banners_repeater .text_and_banner_wrapper ul { list-style-position: inside; margin-block: 25px } #information-about-us .texts_and_banners_repeater .text_and_banner_wrapper li { list-style-type: disc } #information-about-us .texts_and_banners_repeater .text_and_banner_wrapper:nth-child(2n+1) .text_side { padding-left: var(--calculatedPadding); } #information-about-us .texts_and_banners_repeater .text_and_banner_wrapper:nth-child(2n) { direction: rtl; /* Αντιστροφή οριζόντια */ } #information-about-us .texts_and_banners_repeater .text_and_banner_wrapper:nth-child(2n) .text_side { padding-right: var(--calculatedPadding); direction: ltr; } #information-about-us .video_and_text_wrapper .button_section, #information-about-us .texts_and_banners_repeater .button_section { background: black; display: block !important; width: fit-content; color: white; text-transform: uppercase; padding: 10px 40px; margin-top: 40px; transition: all .2s; border: 1px solid black; } #information-about-us .video_and_text_wrapper .button_section:hover, #information-about-us .texts_and_banners_repeater .button_section:hover { background: white; color: black; } /* --> INFORMATION: ABOUT US > RESPONSIVE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> INFORMATION: ABOUT US > RESPONSIVE > DISTANCES [2] =========================================================================================================== */ @media(max-width: 1120px) { #information-about-us #content { padding-top: 80px; } #information-about-us #content, #information-about-us .texts_and_banners_repeater { gap: 80px !important } } /* --> INFORMATION: ABOUT US > RESPONSIVE > MEDIA AND TEXT SECTIONS [2] =========================================================================================================== */ @media(max-width: 1600px) { #information-about-us :is(.banner_and_text_intro, .video_and_text_wrapper, .text_and_banner_wrapper) { gap: 50px !important; } } @media(max-width: 1200px) { #information-about-us :is(.banner_and_text_intro, .video_and_text_wrapper, .text_and_banner_wrapper) { gap: 30px !important; } } @media(max-width: 990px) { #information-about-us :is(.banner_and_text_intro, .video_and_text_wrapper, .text_and_banner_wrapper) { display: flex !important; flex-direction: column; } #information-about-us :is(.banner_and_text_intro, .video_and_text_wrapper, .text_and_banner_wrapper)>div { width: 100%; } #information-about-us .texts_and_banners_repeater .text_and_banner_wrapper>div { padding-inline: var(--calculatedPadding); } #information-about-us .texts_and_banners_repeater .text_and_banner_wrapper { flex-direction: column-reverse; } } /* --> INFORMATION: ABOUT US > RESPONSIVE > USP SECTION [2] =========================================================================================================== */ @media(max-width:1200px) { #information-about-us .moving_forward_wrapper .usp_section { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } } @media(max-width: 600px) { #information-about-us .moving_forward_wrapper .usp_section { grid-template-columns: repeat(1, minmax(0, 1fr)) } #information-about-us .moving_forward_wrapper .usp_section .item { text-align: center; } #information-about-us .moving_forward_wrapper .usp_section .item .img_container { width: fit-content; margin-inline: auto; } } /* --> INFORMATION: ABOUT US > RESPONSIVE > TIMELINE [2] =========================================================================================================== */ @media(max-width: 1240px) { #information-about-us .timeline { width: 100%; overflow: auto; padding-bottom: 30px; margin-top: 80px; } #information-about-us .timeline::before { bottom: 68px; width: 1200px; } #information-about-us .timeline-content h2 { font-size: 20px } } /* --> INFORMATION: ABOUT US > RESPONSIVE > VISION [2] =========================================================================================================== */ @media(max-width: 1200px) { .vision_values_wrapper .description_section { gap: 30px } } @media(max-width: 1024px) { .vision_values_wrapper .description_section { flex-direction: column; display: flex } } /* --> INFORMATION: ABOUT US > RESPONSIVE > BANNER CAROUSEL [2] =========================================================================================================== */ @media(max-width: 1600px) { #information-about-us .banner_carousel_wrapper .swiper-wrapper>div .slide-title { font-size: 30px; } } @media(max-width: 1400px) { #information-about-us .banner_carousel_wrapper .swiper-wrapper>div .slide-title { font-size: 26px; padding: 25px } } @media(max-width: 990px) { #information-about-us .banner_carousel_wrapper .swiper-wrapper>div .slide-title { font-size: 20px; padding: 25px; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION INFORMATION: CAREERS VVV VVV VVV VVV VVV VVV VVV */ /* --> INFORMATION: CAREERS > TITLE SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #information-careers .title_section { text-align: center; margin-block: 80px } /* --> INFORMATION: CAREERS > ACCORDION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #information-careers #careers-accordion-js { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px } #information-careers .accordion-col { display: flex; flex-direction: column; gap: 1rem; } #information-careers .accordion-item { background: #fff; overflow: hidden; } #information-careers .accordion-header { width: 100%; text-align: left; border: none; outline: none; padding: 8px 25px; font-size: 1.1rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: all 0.2s; color: #444; border-bottom: 1px solid #e8e8e8; } #information-careers .accordion-header.active {} #information-careers .accordion-header::after { content: '\002B'; font-size: 35px; font-weight: normal !important; margin-left: 1rem; transition: transform 0.3s; } #information-careers .accordion-header.active::after { content: '\2212'; transform: rotate(180deg); } #information-careers .accordion-content { max-height: 0; overflow: hidden; color: #555; background: #fff; line-height: 1.7 !important; padding: 0 1.5rem; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s; } #information-careers .accordion-content.open { padding: 1rem 1.5rem; max-height: 800px; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s; } /* --> INFORMATION: CAREERS > BANNER AND FORM [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> INFORMATION: CAREERS > BANNER AND FORM> LAYOUT [2] =========================================================================================================== */ #information-careers .banner_and_form_wrapper { margin-top: 120px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 115px; } /* --> INFORMATION: CAREERS > BANNER AND FORM > TITLE [2] =========================================================================================================== */ #information-careers .banner_and_form_wrapper .title_section { margin: 0px !important } #information-careers .banner_and_form_wrapper .title_section * { text-align: left; } /* --> INFORMATION: CAREERS > BANNER AND FORM > DESCRIPTION [2] =========================================================================================================== */ #information-careers .banner_and_form_wrapper .description { font-size: 18px; margin-top: 15px; color: #333; } /* --> INFORMATION: CAREERS > BANNER AND FORM > BANNER [2] =========================================================================================================== */ .banner_and_form_wrapper>.banner_side img { width: 100%; } /* --> INFORMATION: CAREERS > BANNER AND FORM > FORM [2] =========================================================================================================== */ #information-careers .banner_and_form_wrapper .form_section { margin-top: 50px } /* --> INFORMATION: CAREERS > BANNER AND FORM > FORM > BACKGROUND [3] ------------------------------------------------------------- */ #information-careers .banner_and_form_wrapper { position: relative; padding-block: 160px; } #information-careers .banner_and_form_wrapper:after { content: ""; background: #f3f3f3; width: 100%; height: 100%; display: block; top: 0px; right: 0px; position: absolute; z-index: -1; width: calc(75% + var(--calculatedPadding)) !important; transform: translateX(var(--calculatedPadding)); } /* --> INFORMATION: CAREERS > BANNER AND FORM > FORM > LAYOUT [3] ------------------------------------------------------------- */ #information-careers #careers-form { display: flex; flex-direction: column; gap: 50px; } #information-careers .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; } #information-careers .form-row.full { grid-template-columns: 1fr; } #information-careers .form-group { display: flex; flex-direction: column; } /* --> INFORMATION: CAREERS > BANNER AND FORM > FORM > FIELDS [3] ------------------------------------------------------------- */ #information-careers.text-danger { color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem; } #information-careers #careers-form input[type="text"], #information-careers #careers-form input[type="email"], #information-careers #careers-form input[type="tel"], #information-careers #careers-form select, #information-careers #careers-form textarea { width: 100%; padding: 0.75rem 1rem; border: none; border-bottom: 1px solid #949494; font-size: 15px; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; background: #fff; border-radius: 0px; padding-block: 10px; color: #333; background: none; } #information-careers #careers-form input:focus, #information-careers #careers-form select:focus, #information-careers #careers-form textarea:focus { outline: none; border-color: var(--primary-color); /* box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); */ } #information-careers #careers-form input::placeholder, #information-careers #careers-form textarea::placeholder { color: #9ca3af; } #information-careers #careers-form select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } #information-careers #careers-form textarea { resize: vertical; /* min-height: 120px; */ } /* --> INFORMATION: CAREERS > BANNER AND FORM > FORM > FILE UPLOAD [3] ------------------------------------------------------------- */ #information-careers .file-upload-wrapper { position: relative; } #information-careers .file-upload-wrapper input[type="file"] { position: absolute; width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; z-index: -1; } #information-careers .file-upload-label { display: flex; align-items: center; justify-content: center; padding: 1.5rem; border: 2px dashed #d1d5db; border-radius: 0.375rem; /* background: #f9fafb; */ cursor: pointer; transition: border-color 0.2s, background 0.2s; gap: 0.5rem; } #information-careers .file-upload-label:hover { border-color: var(--primary-color); background: #ffd7e74f; } #information-careers .upload-icon { font-size: 1.5rem; } #information-careers .upload-text { font-size: 1rem; color: #374151; font-weight: 500; } #information-careers .file-list { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } #information-careers .file-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: #f3f4f6; border-radius: 0.25rem; font-size: 0.875rem; } #information-careers .file-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #information-careers .file-item-size { margin-left: 0.5rem; color: #6b7280; font-size: 0.75rem; } /* --> INFORMATION: CAREERS > BANNER AND FORM > FORM > CHECKBOX [3] ------------------------------------------------------------- */ #information-careers .checkbox-wrapper { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; } #information-careers .checkbox-wrapper input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; cursor: pointer; flex-shrink: 0; } #information-careers .checkbox-text { font-size: 0.875rem; line-height: 1.5; color: #374151; } #information-careers .checkbox-text a { /* color: #3b82f6; */ text-decoration: underline; } /* --> INFORMATION: CAREERS > BANNER AND FORM > FORM > SUBMIT BUTTON [3] ------------------------------------------------------------- */ #information-careers form button { background: #333 !important; color: white; border-radius: 0px; margin-inline: auto; margin-top: 0px; text-transform: uppercase; font-size: 15px; font-weight: 500; padding: 0px; width: 250px; height: 50px; border: 1px solid #333; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } #information-careers form button:hover { background: white !important; color: #333 !important; } /* Responsive */ @media (max-width: 768px) { #information-careers .form-row { grid-template-columns: 1fr; } } /* --> INFORMATION: CAREERS > RESPONSIVE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1700px) { #information-careers .banner_and_form_wrapper { gap: 50px; padding-block: 80px } #information-careers .form-row { gap: 25px } } @media(max-width: 1300px) { #information-careers #careers-form { gap: 30px } #information-careers .form-row { flex-direction: column; display: flex; gap: 30px } } @media(max-width: 1024px) { #information-careers .banner_and_form_wrapper { margin-block: 80px !important; } #information-careers .title_section { margin-block: 80px 20px !important; } #information-careers .accordion-header { font-size: 16px; } #information-careers .accordion-header::after { font-size: 30px; line-height: 1 } #information-careers #careers-accordion-js { flex-direction: column; display: flex; gap: 15px } } @media(max-width: 990px) { .banner_and_form_wrapper { display: flex !important; flex-direction: column; padding: 0px !important; } .banner_and_form_wrapper:after { display: none !important; } } @media(max-width: 768px) { #information-careers .banner_and_form_wrapper .description { font-size: 15px; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION PDF CATALOG / GRID PAGE VVV VVV VVV VVV VVV VVV VVV */ .information-id-20 header~.container { padding-inline: var(--calculatedPadding) !important; max-width: 100%; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION INFORMATION: CONTACT PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> INFORMATION: CONTACT PAGE > HERO BANNER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #information-contact .hero_banner { min-height: 300px } /* --> INFORMATION: CONTACT PAGE > FORM SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> INFORMATION: CONTACT PAGE > FORM SECTION > LAYOUT [2] =========================================================================================================== */ #information-contact .contact_form_section { max-width: 1090px; margin-inline: auto; margin-top: 70px } /* --> INFORMATION: CONTACT PAGE > FORM SECTION > TITLE [2] =========================================================================================================== */ #information-contact .title_section>* { text-align: center; } /* --> INFORMATION: CONTACT PAGE > FORM SECTION > FORM [2] =========================================================================================================== */ #information-contact form>div { gap: 20px 40px !important; margin-top: 50px } #information-contact form>div select { background: none; height: 47.5px } #information-contact form>div :is(input, textarea, select) { outline: None !important; border-color: #949494; color: black; } #information-contact .msg label { display: none !important; } /* --> INFORMATION: CONTACT PAGE > FORM SECTION > ACCEPT TERMS LINK [2] =========================================================================================================== */ #information-contact .terms_link { text-decoration: underline; margin-inline: auto; display: block; width: fit-content; margin-top: 30px } #information-contact .terms_link a { color: var(--primary-text) !important; } /* --> INFORMATION: CONTACT PAGE > FORM SECTION > ACCEPT TERMS CHECBOX & TEXT [2] =========================================================================================================== */ #information-contact form label[for="input-agree"] { color: var(--primary-text); text-align: center; } #information-contact .agreement_section { text-align: center; } /* --> INFORMATION: CONTACT PAGE > FORM SECTION > SUBMIT BUTTON [2] =========================================================================================================== */ #information-contact form button { background: #333 !important; border-radius: 0px; margin-inline: auto; margin-top: 0px; text-transform: uppercase; font-size: 15px; font-weight: 500; padding: 0px; width: 195px; height: 50px; border: 1px solid #333; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } #information-contact form button:hover { background: white !important; color: #333 !important; } /* --> INFORMATION: CONTACT PAGE > ACORDION SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #information-contact .contact_accordion_section { max-width: 1375px; width: 100%; margin: 150px auto 0px; --accordionPadding: 70px; } #information-contact .accordion-wrapper { display: flex; flex-direction: column; gap: 1rem; margin-top: 50px !important; } #information-contact .accordion-item { border: 1px solid #fff; /* border-radius: 0.5rem; */ overflow: hidden; } #information-contact .accordion-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 5px 25px !important; /* background-color: #f9fafb; */ border: none; cursor: pointer; transition: background-color 0.2s; padding-inline: var(--accordionPadding); border-bottom: 1px solid #e1e1e1; } #information-contact .accordion-header:hover { background-color: #f3f4f6; } #information-contact .accordion-title-content { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; text-align: left; flex: 1; } #information-contact .accordion-title-content span { font-size: 15px; color: #222; } #information-contact .accordion-title-content .location { font-weight: 500; color: #111827; font-size: 15px; width: 150px } #information-contact .accordion-icon { flex-shrink: 0; font-size: 40px; font-weight: 300; color: #222; transition: transform 0.3s ease; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } #information-contact .accordion-header::after { content: '\002B'; font-size: 30px; color: #222; margin-left: 1rem; transition: transform 0.3s; } #information-contact .accordion-header.active::after { content: '\2212'; transform: rotate(180deg); } #information-contact .accordion-item:has(.accordion-header.active) { border: 1px solid #e1e1e1; } #information-contact .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } #information-contact .accordion-content.open { max-height: 700px; } #information-contact .map-wrapper { /* padding: 1.5rem; */ padding: var(--accordionPadding) !important } #information-contact .map-wrapper iframe { width: 100%; border-radius: 0.5rem; } /* --> CONTACT PAGE > RESPONSIVE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 990px) { #information-contact .contact_accordion_section { --accordionPadding: 30px; } } @media (max-width: 768px) { #information-contact .accordion-title-content { flex-direction: column; gap: 0.5rem; } #information-contact .accordion-header { padding: 1rem; } #information-contact .map-wrapper { padding: 1rem; } #information-contact .map-wrapper iframe { height: 300px; } #information-contact .contact_form_section { margin-top: 30px } #information-contact .contact_accordion_section { margin-top: 80px } #information-contact form>div { margin-top: 20px } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION TOOLTIP STYLES VVV VVV VVV VVV VVV VVV VVV */ /* Custom tooltip styles */ .custom-tooltip { position: fixed; background: rgba(0, 0, 0, 0.9); color: white; padding: 8px 12px; border-radius: 6px; font-size: 13px; white-space: nowrap; z-index: 9999; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.2s ease; max-width: 200px; text-align: center; visibility: hidden; } .custom-tooltip.show { opacity: 1; visibility: visible; } .custom-tooltip::after { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.9); z-index: 9999; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION BANNER ANIMATIONS VVV VVV VVV VVV VVV VVV VVV */ @keyframes slideDown { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); } } .animate-slide-down { animation: slideDown 0.6s ease-out forwards; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION TEXT SHADOW UTILITIES VVV VVV VVV VVV VVV VVV VVV */ .text-shadow-gray-900 { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); } .text-shadow-black { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); } .text-shadow-white { text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8); } /* header .container, nav#top .container { max-width: 1800px; } .container { max-width: 1920px; } */ ::placeholder { color: black; opacity: 1; /* Firefox */ } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CUSTOM SWIPER ARROW STYLES VVV VVV VVV VVV VVV VVV VVV */ .slideshow img { width: 100%; } .swiper-viewport { /* padding: unset !important; border: unset !important; box-shadow: unset !important; */ } .slideshow .swiper-button-prev, .slideshow .swiper-button-next, .product-images .swiper-button-prev, .product-images .swiper-button-next { width: 50px !important; height: 50px !important; border-radius: 100%; background-color: rgba(0, 0, 0, 0.46); display: flex; justify-content: center; align-content: center; align-items: center; /* top: calc(50% - 130px); */ } /* Override default swiper button styles */ .slideshow .swiper-button-prev, .slideshow .swiper-button-next, .product-images .swiper-button-prev, .product-images .swiper-button-next { background-image: none !important; } .slideshow .swiper-button-prev:before, .slideshow .swiper-button-next:before, .product-images .swiper-button-prev:before, .product-images .swiper-button-next:before { content: "" !important; width: 48px !important; height: 48px !important; display: block !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; } .slideshow .swiper-button-prev:before, .product-images .swiper-button-prev:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='white' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 15.75 3 12m0 0 3.75-3.75M3 12h18' /%3E%3C/svg%3E") !important; } .slideshow .swiper-button-next:before, .product-images .swiper-button-next:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='white' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3' /%3E%3C/svg%3E") !important; } /* Pagination styling */ .slideshow .swiper-pagination { bottom: -40px; left: 0; text-align: center; width: 100%; } .swiper-pagination-bullet { width: 12px; height: 12px; background: rgba(0, 0, 0, 0.3); border-radius: 50%; box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); margin: 0 5px; opacity: 1; transition: all 0.3s ease; } .swiper-pagination-bullet:hover { background: rgba(0, 0, 0, 0.6); transform: scale(1.2); } .swiper-pagination-bullet-active { background: var(--primary-color) !important; transform: scale(1.3); } /* Responsive adjustments */ @media (max-width: 768px) { .slideshow .swiper-button-prev { left: 2%; width: 40px; height: 40px; } .slideshow .swiper-button-next { right: 2%; width: 40px; height: 40px; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION MODERN FLOATING ALERT SYSTEM VVV VVV VVV VVV VVV VVV VVV */ /* Base alert styling - overrides default Bootstrap positioning */ .alert { position: fixed !important; bottom: 20px !important; right: 20px !important; z-index: 9999 !important; max-width: 400px !important; padding: 16px 20px !important; border-radius: 8px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important; border: none !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; margin: 0 !important; backdrop-filter: blur(10px) !important; /* Animation: slide in from right only */ animation: slideInRight 0.3s ease-out forwards !important; } /* Success alert - green gradient background */ .alert-success { background: linear-gradient(135deg, #10b981, #059669) !important; color: white !important; border-left: 4px solid #047857 !important; } /* Danger alert - red gradient background */ .alert-danger { background: linear-gradient(135deg, #ef4444, #dc2626) !important; color: white !important; border-left: 4px solid #b91c1c !important; } /* Warning alert - orange gradient background */ .alert-warning { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: white !important; border-left: 4px solid #b45309 !important; } /* Info alert - blue gradient background */ .alert-info { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; color: white !important; border-left: 4px solid #1d4ed8 !important; } /* Dismissible alert - extra padding for close button */ .alert-dismissible { padding-right: 50px !important; } /* Close button styling */ .alert .close { position: absolute !important; top: 12px !important; right: 16px !important; background: none !important; border: none !important; color: rgba(255, 255, 255, 0.8) !important; font-size: 18px !important; font-weight: bold !important; cursor: pointer !important; padding: 0 !important; width: 24px !important; height: 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; transition: all 0.2s ease !important; opacity: 1 !important; } /* Close button hover effect */ .alert .close:hover { background: rgba(255, 255, 255, 0.2) !important; color: white !important; } /* Alert icon styling */ .alert i { margin-right: 8px !important; font-size: 16px !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION ALERT ANIMATIONS VVV VVV VVV VVV VVV VVV VVV */ /* Slide in animation - alerts slide in from the bottom-right */ @keyframes slideInRight { from { transform: translateX(100%) translateY(100%); opacity: 0; } to { transform: translateX(0) translateY(0); opacity: 1; } } /* Slide out animation - for manual dismissal */ @keyframes slideOutRight { from { transform: translateX(0) translateY(0); opacity: 1; } to { transform: translateX(100%) translateY(100%); opacity: 0; } } /* Fade out animation - auto-hide after 5 seconds */ @keyframes fadeOut { to { opacity: 0; transform: translateX(100%) translateY(100%); } } /* Auto-hide class - can be added to alerts that should auto-hide */ .alert-auto-hide { animation: slideInRight 0.3s ease-out forwards, fadeOut 0.3s ease-in forwards 5s !important; } /* Slide-out class for manual closing */ .alert.slide-out { animation: slideOutRight 0.3s ease-out forwards !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION RESPONSIVE DESIGN VVV VVV VVV VVV VVV VVV VVV */ /* Mobile devices - alerts appear at bottom center */ @media (max-width: 768px) { .alert { right: 10px !important; left: 10px !important; max-width: none !important; } /* Mobile slide in animation - from bottom */ @keyframes slideInRight { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Mobile fade out animation - to bottom */ @keyframes fadeOut { to { opacity: 0; transform: translateY(100%); } } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION FORM VALIDATION STYLING VVV VVV VVV VVV VVV VVV VVV */ /* Error state for form groups */ .form-group.has-error { margin-bottom: 1rem; } /* Error styling for form controls */ .form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important; } /* Error styling for radio and checkbox groups */ .form-group.has-error .radio, .form-group.has-error .checkbox { border: 1px solid #ef4444; border-radius: 6px; padding: 8px; background-color: rgba(239, 68, 68, 0.05); } /* Error message styling */ .text-danger { color: #ef4444 !important; font-size: 0.875rem !important; margin-top: 0.25rem !important; display: block !important; } .text-danger:empty { display: none !important; } /* Error icon styling */ .form-group.has-error .fa { color: #ef4444; } /* Focus state for error fields */ .form-group.has-error input:focus, .form-group.has-error select:focus, .form-group.has-error textarea:focus { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important; } /* Success state for form groups */ .form-group.has-success input, .form-group.has-success select, .form-group.has-success textarea { border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION PRODUCT PAGE SPECIFIC VALIDATION VVV VVV VVV VVV VVV VVV VVV */ /* Product options error styling */ #product .form-group.has-error { background-color: rgba(239, 68, 68, 0.05); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 8px; padding: 12px; margin-bottom: 1rem; } /* Product options error label */ #product .form-group.has-error label { color: #ef4444 !important; font-weight: 600 !important; } /* Product options error input focus */ #product .form-group.has-error input:focus, #product .form-group.has-error select:focus, #product .form-group.has-error textarea:focus { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important; outline: none !important; } /* Error message positioning */ #product .text-danger { margin-top: 0.5rem !important; padding: 0.5rem !important; background-color: rgba(239, 68, 68, 0.1) !important; border-radius: 4px !important; border-left: 3px solid #ef4444 !important; } .tab-pane { display: none; } .tab-pane.active { display: block; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION MEGA MENU STYLING VVV VVV VVV VVV VVV VVV VVV */ /* Mega menu container */ .mega-menu-container { position: relative; } .mega_menu_wrapper { padding-inline: var(--calculatedPadding) } .mega_menu_wrapper a * { color: black; } /* Mega menu dropdown */ .mega-menu-dropdown { position: absolute; top: 100%; left: 0; margin-top: 0.5rem; background: white; border-radius: 0.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); border: 1px solid #e5e7eb; z-index: 50; width: 800px; max-width: 90vw; } /* Left side - categories */ .mega-menu-left { background-color: #f9fafb; padding: 1rem; border-radius: 0.5rem 0 0 0.5rem; width: 33.333333%; } /* Right side - subcategories */ .mega-menu-right { padding: 1rem; width: 66.666667%; } /* Category hover effect */ .mega-menu-category { width: 100%; text-align: left; padding: 0.75rem; border-radius: 0.5rem; transition: all 0.2s ease; cursor: pointer; } .mega-menu-category:hover { background-color: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .mega-menu-category.active { background-color: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } /* Subcategory grid */ .mega-menu-subcategories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } /* All links > Cheveron right */ .mega_menu_wrapper i { display: none !important; } .mega_menu_wrapper .close_button i { display: block !important; } /* Subcategory link */ .mega-menu-subcategory { display: block; padding: 0.5rem; border-radius: 0.5rem; transition: all 0.2s ease; color: #374151; text-decoration: none; } .mega-menu-subcategory:hover { background-color: #f9fafb; color: var(--primary-color); } /* Default state when no category is hovered */ .mega-menu-default { text-align: center; color: #6b7280; padding: 2rem 0; } .mega-menu-default i { font-size: 3rem; margin-bottom: 1rem; color: #d1d5db; } /* Responsive adjustments */ @media (max-width: 768px) { .mega-menu-dropdown { width: 95vw; left: 2.5vw; } .mega-menu-left, .mega-menu-right { width: 100%; } .mega-menu-subcategories { grid-template-columns: 1fr; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION FOOTER STYLES VVV VVV VVV VVV VVV VVV VVV */ footer #location-tabs>button { margin-bottom: -4px; } footer .location-content { margin-top: 8px } footer #location-tabs { border-bottom: 1px solid #979797; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION FOOTER STYLES VVV VVV VVV VVV VVV VVV VVV */ #information-information #column-left { width: 100% !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CART DRAWER STYLING VVV VVV VVV VVV VVV VVV VVV */ /* Cart drawer styling */ .cart-drawer { display: flex; flex-direction: column; height: calc(100vh - 92px); max-height: calc(100vh - 92px); } /* Hide number input arrows in mini cart */ .cart-drawer input[type="number"]::-webkit-outer-spin-button, .cart-drawer input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cart-drawer input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* Cart items container - scrollable area */ .cart-items-container { flex: 1; overflow-y: auto; } /* Cart footer - always visible at bottom */ .cart-footer { flex-shrink: 0; background: white; } /* Ensure cart items don't overflow */ .cart-item { border-bottom: 1px solid #f3f4f6; } .cart-item:last-child { border-bottom: none; } /* Scrollbar styling for cart */ .cart-items-container::-webkit-scrollbar { width: 6px; } .cart-items-container::-webkit-scrollbar-track { background: #f1f1f1; } .cart-items-container::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; } .cart-items-container::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION BUTTONS VVV VVV VVV VVV VVV VVV VVV */ /* Specific button hover that wins over bg-primary */ a.bg-primary:hover, button.bg-primary:hover { background-color: #000000 !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION PRODUCT LISTS VVV VVV VVV VVV VVV VVV VVV */ #product-category .col-left-container #column-left, #product-search #column-left, #product-manufacturer #column-left, #product-special #column-left { width: 100%; } .category-info { display: none; } .mfilter-tb-as-td>input[type="checkbox"] { accent-color: var(--primary-color); width: 15px; height: 15px; cursor: pointer; margin-right: 7px !important; } .mfilter-tb-as-td>input[type="checkbox"]:checked { background-color: var(--primary-color); border-color: var(--primary-color); } .mfilter-filter-item, .mfilter-opts-container, .mfilter-content-opts, .mfilter-content-wrapper, .mfilter-content, .mfilter-tb-as-td { border: unset !important; } .mfilter-heading { background-color: unset !important; border-bottom: 1px solid #D8D8D8 !important; border-top: unset !important; } .mfilter-heading-text>span { display: inline-block; padding-left: 18px; color: #000000; font-size: 14px; font-weight: bold; text-transform: uppercase; } .col-left-container { background: #F2F2F2; border: 1px solid rgba(151, 151, 151, 0.38); max-width: 390px; flex-shrink: 0; padding-left: 50px; } .col-left-container+div { flex: 1; min-width: 0; } .mfilter-content>ul>li { margin-bottom: 20px !important; } .mfilter-tb-as-td { color: #000000; font-size: 13px; font-weight: 500; line-height: 23px; } .mfilter-counter { background: var(--primary-color) !important; } .mfilter-box .mfilter-counter.mfilter-close { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12' /%3E%3C/svg%3E%0A") !important; width: 15px !important; height: 15px !important; } .mfilter-counter::after { border-right-color: var(--primary-color) !important; } .mfilter-box>.box-heading { color: #000000; font-size: 20px; line-height: 24px; font-weight: bold; } .col-left-container h1 { font-size: 32px; } .box-content.mfilter-content { margin-top: 25px; } .mfilter-opts-container { padding: 15px 0 !important; } .mfilter-selected-filters { margin-bottom: 25px; } .mfilter-button.mfilter-button-top { margin-bottom: 25px; } @media(max-width: 1024px) { .view_more_filters { display: none !important; } } .mfilter-box .mfilter-selected-filters-cnt a>span { padding: 0 !important; display: block !important; } .mfilter-box .mfilter-selected-filters-cnt a { display: flex !important; justify-content: space-between; padding: 5px 10px; background-color: #FFFFFF; border: 1px solid #979797; border-radius: 4px; height: 40px; align-content: center; align-items: center; margin-bottom: 10px !important; } html[lang="el"] .mfilter-selected-filters-cnt::before { content: "Έχετε επιλέξει:"; display: block; position: relative; margin-top: -15px; margin-bottom: 19px; color: #666; } html[lang="en"] .mfilter-selected-filters-cnt::before { content: "Selected filters:"; display: block; position: relative; margin-top: -15px; margin-bottom: 19px; color: #666; } .mfilter-button-reset { font-size: 16px; display: flex; flex-direction: row-reverse; gap: 10px; justify-content: center; align-content: center; align-items: center; } .mfilter-button-reset .mfilter-reset-icon { margin: 0 !important; background-position: 0px -11px; } .mfilter-selected-filters-cnt a>span.mfilter-close i { background-position: 0px -11px !important; } .mfilter-button-reset { margin-left: 0px !important; } .mfilter-box .mfilter-selected-filters-cnt a>span.mfilter-close { width: 20px !important; height: 20px !important; } .mfilter-heading.mfilter-collapsed .mfilter-head-icon::after { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4.5v15m7.5-7.5h-15' /%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } .mfilter-heading .mfilter-head-icon::after { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14' /%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } .mfilter-heading .mfilter-head-icon { background: unset !important; width: 24px !important; height: 24px !important; } .mfilter-heading-text { margin-left: -24px !important; } .mfilter-content-opts .mfilter-slider-slider .ui-slider-range, .mfilter-content-opts #mfilter-price-slider .ui-slider-range { background: var(--primary-300) !important; } #mfilter-opts-price-max, #mfilter-opts-price-min { background: unset !important; border-bottom: 1px solid rgba(0, 0, 0, 0.2); text-align: center; padding: 5px; max-width: 70px !important; width: 70px !important; min-width: 70px !important; } .mfilter-price-inputs { display: flex; justify-content: center; align-items: center; align-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; margin-top: 15px; } /* Pagination Styling */ .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; list-style: none; margin: 2rem 0; padding: 0; flex-wrap: wrap; } .pagination li { margin: 0; } .pagination li a, .pagination li span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; text-decoration: none; font-size: 16px; font-weight: 500; transition: all 0.3s ease; } .pagination li a { background-color: transparent; color: black; } .pagination li a:hover { background-color: transparent; color: var(--primary-color); font-weight: 700; } .pagination li.active span { background-color: transparent; color: var(--primary-color); font-weight: 700; } /* 1 column grid layout */ .grid-1-cols { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } /* 2 column grid layout */ .grid-2-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* 3 column grid layout */ .grid-3-cols { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* 4 column grid layout */ .grid-4-cols { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .product-partial-container a img { aspect-ratio: 1 / 1; background: rgba(0, 0, 0, 0.01); font-size: 0; } .product-partial-container>div:hover { box-shadow: var(--tw-shadow) !important; } :is(#product-category, #product-special, #product-manufacturer, #product-search) .product-partial-container { width: 100%; } :is(#product-category, #product-special, #product-manufacturer, #product-search) .product-partial-container h4 { overflow: hidden; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION REQUIRED LOGIN VVV VVV VVV VVV VVV VVV VVV */ .required-login #top, .required-login footer .grid, .required-login footer .fixed, .required-login #header .container>.flex>.flex { display: none; } .required-login #header .container>.flex>.flex:first-child { display: block !important; } .required-login #header .container>.flex { justify-content: center !important; } html.required-login, .required-login body { background: rgb(31 41 55 / var(--tw-bg-opacity, 1)); } .required-login #account-register .text-gray-600.mb-8.text-center { color: white; } .required-login #account-register .text-gray-600.mb-8.text-center a { font-weight: bold; } .guest_customer .hide-on-guest, .guest_customer .mfilter-filter-item.mfilter-price, .guest_customer .product-partial-container hr { display: none !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CHECKOUT VVV VVV VVV VVV VVV VVV VVV */ #checkout-checkout>nav { display: none; } #common-success .recently-viewed-products { display: none; } #common-success { padding: 0; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION PRODUCT PAGE OPTIONS VVV VVV VVV VVV VVV VVV VVV */ #product-product .radio-btn-input { position: absolute; opacity: 0; } #product-product .radio-btn-wrapper { padding: 0.375rem 0.75rem; border-radius: 0; cursor: pointer; transition: all 0.2s; position: relative; } #product-product .radio-btn-wrapper:hover { border-color: #666; } #product-product .radio-btn-input:checked~.radio-btn-label { color: #fff !important; font-weight: 600; } #product-product .radio-btn-label { margin-left: 0 !important; } #product-product .radio-btn-input:checked+.radio-btn-image, #product-product .radio-btn-input:checked+.radio-btn-label, #product-product .radio-btn-input:checked+.radio-btn-image+.radio-btn-label { color: #fff !important; } #product-product .radio-btn-wrapper:has(.radio-btn-input:checked) { background-color: #000 !important; border-color: #000 !important; } #product-product .radio-btn-input { position: absolute; opacity: 0; } #product-product .radio-btn-wrapper { padding: 0.375rem 0.75rem; border-radius: 0; cursor: pointer; transition: all 0.2s; position: relative; } #product-product .radio-btn-wrapper:hover { border-color: #666; } #product-product .radio-btn-input:checked~.radio-btn-label { color: #fff !important; font-weight: 600; } #product-product .radio-btn-input:checked+.radio-btn-image, #product-product .radio-btn-input:checked+.radio-btn-label, #product-product .radio-btn-input:checked+.radio-btn-image+.radio-btn-label { color: #fff !important; } #product-product .radio-btn-wrapper:has(.radio-btn-input:checked) { background-color: #000 !important; border-color: #000 !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION RESPONSIVE STYLES VVV VVV VVV VVV VVV VVV VVV */ html body>.bg-generic { background-color: unset !important; /* background-image: url('/image/catalog/aca_cut_assets/other_pages/banner%20330.jpg') !important; */ background-image: url('/image/catalog/aca_cut_assets/other_pages/generic_banner_01.jpg') !important; aspect-ratio: 1920/300; display: flex; justify-content: center; align-content: center; align-items: center; background-repeat: no-repeat; background-size: cover; } html body>.bg-generic>.container { padding-top: 150px !important; } #saved-lists-drawer { max-width: 400px; } #blog .related-products .swiper-viewport { border: unset; box-shadow: unset; } .product-description * { font-size: 14px !important; font-family: inherit !important; } @media (max-width: 1800px) { #account-register, #account-login, #account-account, #financial_data, #subusers, #subusers_form, #account-edit, #account-password, #account-order-invoices, #account-backorder, #extension-module-order-from-file, #account-return-ext-form, #account-return-ext-info, #account-return-ext-list, #account-order-list, #account-order-info, #account-newsletter, #account-wishlist, #product-compare, #checkout-cart { padding-inline: var(--spaceForSocials) var(--calculatedPadding); } } @media (max-width: 768px) { #account-register #content, #account-login #content, #account-account #content, #financial_data #content, #subusers #content, #subusers_form #content, #account-edit #content, #account-password #content, #account-order-invoices #content, #account-backorder #content, #extension-module-order-from-file #content, #account-return-ext-form #content, #account-return-ext-info #content, #account-return-ext-list #content, #account-order-list #content, #account-order-info #content, #account-newsletter #content, #account-wishlist #content, #product-manufacturer { padding-top: 0 !important; } .page-title-box { padding-top: calc(var(--headerHeight)) !important; } /* .latest-posts { margin-top: 5rem; } */ } /* Hide number input arrows */ .qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .qty-input { -moz-appearance: textfield; } /* Locations map - ensure map container has dimensions (Tailwind may purge arbitrary height classes) */ .locations-map-container { min-height: 400px; height: 400px; } @media (min-width: 768px) { .locations-map-container { min-height: 600px; height: 600px; } } @media (min-width: 1024px) { .locations-map-container { min-height: 800px; height: 800px; } }